『everysize』レスポンシブな複数プレビューが可能

『everysize』とは?

  • ブラウザー上でウェブサイトのプレビューが複数表示可能
  • 一度に複数のサイズを表示できるので、コーディング作業が超効率的
  • iPhone・iPadシリーズの各サイズに対応。タブから選ぶだけで簡単チェック

 

 

レスポンシブデザインのプレビューを一度に大量表示

ブログやホームページのデザインを変更する際に、スマホ・タブレット・パソコンなどと、各レイアウトを検証するのは面倒です。

モバイルディスプレイやサブモニターがあれば解決する問題ですが、決して安い買い物ではありません。

画面サイズごとにまとめてレイアウト検証ができるオンラインツ―ルは沢山あります。今回の『everysize』は、レイアウトプレビューを一度に大量の表示ができて、直感的な操作で自由にサイズ変更ができる点で優れています。

 

ブラウザー上だけで完結。使い方はとても簡単

使い方は非常に簡単で、ウェブサイトのURLを入力したら【GO】ボタンを押すだけです。

ダッシュボード上の右下にある【+】ボタンを押すと、新しいレイアウトプレビューが作成できます。

プレビューは”仮想ブラウザ”のように、個別でサイト内を自由に操作できます。

各プレビューの左上にある”ブロックのようなアイコン”をドラッグすると、ダッシュボードの好きな位置にプレビューを配置できます。無駄な操作は一切なく、直感的に扱えます。

 

[adsense]

 

『everysize』は夫婦共同でリリースしたプロジェクト

Word Press用のテーマはユーザーが期待していたレイアウトに反映されていないのが普通です。

それは、後々ユーザー側で自由に調整を行えるからです。

このツールでは一度に大量のプレビュー表示ができるため、調整を行うユーザーが気に入らない箇所を早期発見できるのです。

『everysize』を開発したのは人工知能を使用するサービスのスタートアップなど、活動的なエンジニアのKrishan氏Krupali Patel氏のご夫婦。

Krishan氏はもともとGoogleのYouTubeモバイルチームに在籍していた過去があります。「多くのアイディアやインスピレーションを得ることができた」と語っています。

 

 

ちなみに奥様のKrupali Patel氏は『everysize』のプロダクトマネージャーという立場だそうです。

『everysize』はリリースしたばかりのためか、世界中からより良いフィードバックを募集中とのこと。

◇ 参考URL

everysize – Check your responsive webpage looks great in every size

Illustration by Stories by Freepik

『Open Peeps』無料かつ商用利用可能な人物イラスト

『Open Peeps』とは?

  • ポップなデザインの人物イラスト素材が無料でダウンロード
  • イラストのカスタマイズも自由自在
  • 個人&商用利用可能なフリーライセンス

 

 

『Open Peeps』は「Sketch」「Figma」「Adobe XD」「Studio」に対応

Open Peeps

『Open Peeps』はライブラリからさまざまなファイルをダウンロードできます。

これらはウェブデザインなどに使われるメジャーなソフトウェアです。

また、ブラウザー上でそのままイラスト編集が可能な【ウェブビルダー】が実装されており、さまざまなパーツを組み合わせることができます。

カスタマイズした画像は「PNG」「SVG」ファイルでもダウンロード可能。

プロ版ではカラーセットを自由に変更できるようで、より自由度の高いカスタマイズができそうです。

 

[adsense]

 

イラストの組み合せは”58万4688”通り

パーツの組み合わせは“584,688通り”にもなるようです。

それぞれのイラストデータは基本となる型が決められていたりしますが、各パーツを入れ子構造のように入れ替えられます。

『Open Peeps』は下記のようにコンセプトを宣伝しています。

  • 「服」と「髪型」を組み合わせてあなたのセンスを加えましょう。
  • 異なる「表情」でキャラクターの感情を表せます。
  • 「立つ」「座る」など、幅広いシーンをポーズで表現できます。

 

開発者は「InVision」のパブロ・スタンレー氏

 
 
 
 
 
この投稿をInstagramで見る
 
 
 
 
 
 
 
 
 
 
 

Pablo Stanley(@pablostanley)がシェアした投稿

 

『Open Peeps』を開発したのは「InVision」で働くPablo Stanley(パブロ・スタンレー)です。

「InVision」は、アプリやホームページ制作の業界では有名な会社で、企業ロゴを目にした人もいるでしょう。この企業ではウェブページやアプリケーションの“プロトタイプ”などを創るようなソフトウェアをリリースしています。

その道の製品としては世界的にもシェアが高いようです。

パブロ氏は『Open Peeps』以外にも、挑戦的なプロジェクトに多数挑戦しています。

 

『Buttsss』美しい丸いお尻のイラスト

このアニメーションは”お尻”のイラストだけを公開しているButtsssというプロジェクトです。

『Buttsss』のホームページにはパブロ氏からのメッセージが残されていたので翻訳してみました。

「この宇宙で最も大胆な”丸く美しいお尻のイラストデザイン”というコレクションの数々を、皆さんに共有できることに私は興奮しています。

このグラフィックは提案資料やプロダクトスクリーン、マーケティングキャンペーン、ビジネスでのプレゼンテーション、また、モチベーションを高めるスピーチなどにも使用して頂けます。」

・はじめに

「私たちのチームは人体解剖学を芸術的に解釈するため、このプロジェクトに取り組みました。

おかげで私たちは世界最高峰の”お尻愛好家たちと綿密に協力し、彼らの理想とする完璧な下半身から、インスピレーションを得ることができたのです。」

・目標

Buttsss』には、あらゆるクリエイティブなプロジェクトにコラボレーションさせる使命と、革新的なお尻のコレクションを世に広めるという目的があります。…以下略

 

 

Buttsss』を公開すると一部の界隈で大きな反響が生まれたのか、調子に乗ったパブロ氏はYouTubeでミュージックビデオまで公開していました。

原文を翻訳しても分かる通り、パブロ氏は”お尻”に対して並々ならぬ情熱を注いでいるようです。

 

[adsense]

 

実力派クリエイターとして幅広く活躍

『Open Peeps』や『Buttsss』のインパクトが強いパブロ氏は、クリエイターとして幅広い活動をしています。

その実力を活かし、世界各地でイラストデザインのワークショップ(体験型講座)や講演会を開いているほどです。

また、YouTubeではパブロ氏が「Photoshop」の使い方を解説するチュートリアルムービーも公開しており、実践的なテクニックを観れるようです。

 

◇ 参考URL

Open Peeps, Hand-Drawn Illustration Library

Buttsss

Pablo Stanley Portfolio – Pablo Stanley

Twitter – pablostanley@pablostanley

Instagram – Pablo Stanley

Illustration by Stories by Freepik

写真から3Dモデルを自動生成『3D Face Reconstruction』

『3D Face Reconstruction』とは?

  • イギリス・ノッティンガム大学の研究プロジェクト
  • 1枚の画像から「obj」ファイルがダウンロードできる
  • GitHubで利用可能なコードも公開済

 

[adsense]

 

ノッティンガム大学の機械学習についての研究プロジェクト

3D Face Reconstruction

『3D Face Reconstruction』は、人物の顔を3DCGで再現するという機械学習の研究デモです。

従来通りのやり方では3Dモデルを構築するために、被写体の顔画像を複数用意する必要がありました。

この方法では顔の表情や光源など、環境や状況に左右される要素を取り除けるように”顔写真一枚からモデリングを作ってしまおう”という話です。

機械学習の精度は年々上昇しており、人間たちの地道な作業が徐々に人工知能の仕事へと代わりつつあります。

ちなみに、『3D Face Reconstruction』はツールというよりは研究用のオンラインデモです。

写真から3Dモデルを簡単に作れる楽しさ

どこかのサイトから引っ張ってきたフリー素材のおじさんで試してみました。

驚くことにしっかりと人体の凹凸を捉えています。

3Dモデル化する画像は”顔”であることと「jpg」拡張子が条件。それ以外ではエラーを起こします。

また、『3D Face Reconstruction』のサーバーにアップロードされた画像は2日後に自動で削除されるようです。

ただ、バックアップの関係で最大2週間はデータが残ってしまう可能性があるようなので自分の写真を使用する際には注意が必要です。

 

『3D Face Reconstruction』の使い方

プロジェクトのサイトにアクセスしたら【ファイルを選択】して顔写真の「jpg」データをアップロードするだけです。

下の方には世界的な著名人の顔写真サンプルが厳選され、高い精度で3Dモデルにしてくれます。

サンプルの中には当プロジェクトの考案者ことDr Aaron S. Jackson(アーロン・S・ジャクソン)博士の姿も。

アップロードが終わる速やかに3DCGのモデリングが始まります。自動生成終了後に自由にモデルを動かせるページに飛びます。

ここで作ったモデリングは「obj」データとしてダウンロード可能。

3DCGを取り扱うソフトウェアで利用することができます。


鼻や目の細かい部分の凹凸を再現しているのは見事。

Git Hubではコードも公開されています。

 

◇ 参考URL

3D Face Reconstruction

Large Pose 3D Face Reconstruction from a Single Image via Direct Volumetric CNN Regression

※1 Aaron S. Jackson

『Musopen』パブリックドメインの音楽を無料でダウンロード

『Musopen』とは?

  • パブリックドメインの音楽(知的財産権が失効・発生していない音楽)をダウンロードできる
  • 2010年に『Kickstarter』で目標金額の”6倍”以上を集めた
  • バッハ、ベートーヴェン、モーツァルト、ショパンなどの音源が公開及び商用利用可能

 

 

 

『Musopen』はパブリックドメインの音楽を無料でダウンロードできる

Musopen

『Musopen』は、著作権の世界標準とも言えるベルヌ条約第7条(1)項※1に基づいて、著作物の権利保護期間を超過したもの(著作者の死後50年以上)を、誰もが自由に使用できるようにしたプロジェクトです。

ベルヌ条約

もともとは演奏家・歌手・実演家やレコード製作者などの著作物を、後世に伝達できる音楽家に限り認められていました。

つまり、誰もが自由に扱えるものではありませんでした。

しかし、我々が義務教育課程を終える中で必ず習う”あの有名なクラシック音楽”の録音物を、自由に公開・配布ができる『Musopen』がリリースされたことで、誰もが自由に扱えるようになったのです。

Musopen_非営利団体

そんな『Musopen』は、アメリカ合衆国・カリフォルニア州パロアルトの非営利団体によって運営されています。

Musopen_プラン

このサイトではアカウントを登録することで、公開されている音楽を「1日5曲」まで無料でダウンロード可能。

プランは全3種類で、有料プランに限り、高音質版や音楽リクエストなど行える特典も付くようです。

『Musopen』でダウンロードした「モーツァルト 交響曲第35番〈ハフナー〉」×『Mazwaiのフリー素材動画「Get Lost」を合わせてみました。

このように、個人利用で動画コンテンツに使用するなら、無料プランで十分でしょう。

 

クラウドファンディング『Kickstarter』で目標金額の”6倍”以上を集めて大成功

Musopen_Kickstarter

「set music free(音楽を自由に)」というスローガンをもとに、Aaron Dunn(アーロン・ダン)氏が始めたプロジェクトは、”Project Galileo(プロジェクトガリレオ)”※2という仮題で動き始めました。

Kickstarter

世界中の音楽家たちから大きな反響を呼び、数多の支援や応援を受ける事態に。

2010年頃に始めた『Kickstarter』※3の出資額は、当初目標としていた11,000ドルの”6倍”以上の金額を集めて大成功になったのです。

正式にサービスとして機能し始めたのは3年後の2013年からだったそうです。

 

教科書でも有名なあの音楽家の名曲が使える!

Johann Sebastian Bach_Wolfgang Amadeus Mozart_Ludwig van Beethoven_Frédéric Chopin

歴史に名前を残した偉人たちの音楽を、自由自在に扱えるというのは中々恐れ多いところです。

しかし、世界中から評価され続け、ありとあらゆる場所で彼らが作り上げた楽曲を耳にすると、やはり最高峰の楽曲ではあるのです。

また、人工知能・AIなどの先進的な技術が進歩していく中で、コンテンツという存在の在り方が大きく変わってきているのは事実。

クリエイターの卵達にとっても、無料で利用できるサービスや便利なツールというのは、新時代のコンテンツを生み出すことができる手軽な手段です。

問題なく使えるものは、遠慮なく使い倒しましょう。

 

◇ 参考URL

Free Sheet Music, Royalty Free & Public Domain Music | Musopen

Twitter – Musopen@Musopen

Facebook – Musopen@musopenorg

※1 文化的及び美術的著作物の保護に関するベルヌ条約(パリ規定、1971年)へのガイド

※2 Musopen: Record and release free music without copyrights. by Aaron Dunn & Kickstarter

※3 Musopen – Project Galileo | Cloudflare

無料で個人・商用利用可能なイラストがダウンロードできる『DrawKit』

『DrawKit』とは?

  • 個人利用・商用利用が可能
  • 最新のイラストも
  • さまざまな拡張子に対応して扱いやすい

 

 

無料とは思えないほど充実した素材

DrawKit

『DrawKit』は、個人・商用利用が可能な無料イラストを配布するサイトです。

ダウンロード可能なイラストは基本的に「SVG」で配布されており、データ容量を圧迫しないのが特徴。

また、「SVG」以外に「PNG」で配布されているものも多く、使い勝手は悪くありません。

DrawKit

「PNG」ファイルは400px・800px・1200pxと、各イラストごとに3種類のサイズでダウンロード可能。

しかも、アニメーション付きのイラストは、ブログやサイトの読み込み時間を阻害しないように「GIF」ファイルの埋込コードを出力できます。

via GIPHY

 

[adsense]

 

イラストは最低0円から購入するシステム

『DrawKit』最大の特徴は、無料で高品質なイラストがダウンロードできることです。

サイトから素材をダウンロードするにはカートに入れた後、任意の購入金額を入力します。

世界中を騒がせている「COVID-19」のイラストなども無料でダウンロード可能。

【Free download】があるのでクリックすると、価格をユーザーが指定できます。

【$】マークのボックスに購入価格「0」円と入力し、【これが欲しいです!】をクリック。

メールアドレス入力後、【手に入れる】をクリックすると、購入したユーザー宛にダウンロード用のURLが記載されたメールが届きます。

事前にアカウントを作成しておけば、ダウンロードの際にアドレスの入力を省くことができます。

メールアドレスの送信を告げるポップアップが表示されますが、こちらのポップアップからもダウンロードは可能です。

指定したアドレス宛に届いたメールです。

【ダウンロード】をクリックするとダウンロード用のURLに飛ばされ、ファイルの保存が可能になります。

日本は募金こそポピュラーですが、チップなどの文化はありません。

管理人は罪悪感に苛まれながらダウンロードしています。

 

「Google」や「Amazon」も利用している…らしい

『DrawKit』のトップページではこのような文言を目にします。

「Trusted by more than 30,000+ downloads, including from these fine companies」

Google翻訳に掛けると下記のような意味になりました。

「これらの優れた企業からのダウンロードを含め、30,000以上のダウンロードに信頼されています」

GoogleやAmazonがどのようなシーンでこのサイトのイラストをダウンロードしているのは不明。

しかし、Instagram※1の『DrawKit』公式アカウントでも自信たっぷりにアピールしており、決して誇張している訳ではないのかもしれません。

 

[adsense]

 

開発者はイラストレーター&デザイナーのJames Daly氏

DrawKit_James Daly

サービスを提供しているのはオーストラリア・シドニー出身のJames Daly(ジェームズ・デイリー)さんという方です。

この方はノマドワーカーなイラストレーター兼デザイナーというマルチなクリエイター。

また、何故かバク宙が好きで自身のInstagram※2やTwitter※3でもその姿を確認することができます。

 
 
 
 
 
この投稿をInstagramで見る
 
 
 
 
 
 
 
 
 
 
 

James Daly(@jamesdaly)がシェアした投稿

 

たまに来日しているらしい

 

あらゆる方面で活躍されているJamesさんですが、実はYouTubeのチャンネルを開設しているようです。

多忙なために動画の更新は不定期ですが、Twitter・Instagram・Youtubeと、幅広くご自身の存在を発信されています。

また、旅先のサブカルチャーに触れる機会も多いようで、日本のアニメが好きなのか、ちょこちょこ来日されているご様子です。

 

 

◇ 参考URL

DrawKit – Beautiful free illustrations

※1 Instagram – drawkit.io

※2 Instagram – jamesdaly

※3 Twitter – James Daly@JamesDaly90

James Daly ‣ Illustrating&Making

Twitter – DrawKit@UseDrawKit

 

人工知能が線画を自動着色『Petalica Paint』

『Petalica Paint』とは?

  • 人工知能・AIが線画の着色を自動で行ってくれる
  • イラストならラフ画、場合によっては写真でも自動着色
  • pixivとPreferred Networksが共同で運営。誰でも無料で使える

 

 

『PaintsChainer』から『Petalica Paint』に名称変更

『PaintsChainer』は2017年の1月に、株式会社Preferred Networksが公開した人工知能・AIによる線画の自動着色サービスです。

当サービスは、ピクシブ株式会社が運営するアプリpixiv Sketchに導入された機能の一つ。

公開当初SNS上では「イラストに着色してくれるAI」として話題を呼びました。

2020年1月からは名称を『Petalica Paint』へと改め、新しいスタートを切りました。

ピクシブ株式会社と株式会社Preferred Networksは、最新テクノロジーを駆使したクリエイターの創作支援に精力的で、最新技術の体験ワークショップを定期開催※1しているようです。

 

綺麗な線画は高い精度で着色してくれる

機能として採用されているだけあり、判別しやすい”線”で表現されたイラストには高い精度で着色してくれます。

動画では実際のイラストに上手く着色していく様子が確認できます。

使い方をある程度理解してしまえば、塗りの作業を大幅に短縮することも可能です。

塗りが苦手なイラストレーターには助かる機能とも考えられます。

 

[adsense]

 

『Petalica Paint』で実際に着色してみる

Petalica Paint_サンプル

こちらはサンプルで実際に自動着色をしたイラストです。

画像の右上にある「たんぽぽ」「さつき」「かんな」のうち、「さつき」をただ選択しただけですが、高いレベルの仕上がりになりました。

これだけ簡単なら他の画像でも試してみようと、何故か自分の写真でもチャレンジ。

Petalica Paint_とま=サン

まだダンディだったころの管理人です。結果的に良い失敗例になりました。

そもそも写真が自動着色に向いていなかった可能性が考えられます。

Petalica Paint_とま子

それならば…と『Waifu Labs』で生成したキャラクターを「SVG」拡張子でベクターデータ化してみました。

自動着色を成功させるには、白と黒の境界線が明瞭であり、線として繋がっているのが条件だと推測しました。

Petalica Paint_お試し

動画の使い方を真似して着色を試してみましたが、悪くありません。

1~2分程度で適当に色分け作業を行いましたが、個人的には“まあまあ”な仕上がりだと満足しています。

 

◇ 参考URL

Petalica Paint -線画自動着色サービス

※1 ピクシブとPFNが共同運営する線画自動着色サービス「PaintsChainer」が公開3周年を迎え、名称を「Petalica Paint」に変更 〜次世代のクリエイターの創作活動支援にディープラーニング技術を活用〜 | ピクシブ株式会社