みなさんはアイソメトリック(Isometric)という言葉をご存じですか!
アイソメトリックとは「等角投影法」と呼ばれる投影法のひとつで、物体を投影する際に3次元効果を生み出します。
アイソメトリックを取り入れたwebサイトやプレゼン資料を目にする機会が増えたと感じる今日この頃、それらを駆使してワンランク上のデザインやプレゼンを目指しませんか?
この記事では、アイソメトリックなデザインの隠された魅力を紹介していきたいと思います。
アイソメトリックについて
アイソメトリックとは、アイソメトリックプロジェクション(Isometric Projection)の略称で、「等角投影法」と呼ばれる3次元効果を与える投影法のひとつです。
真正面や真上からではなく、斜め上から俯瞰的に見下ろしたようなイメージで、パッと見でイラストを理解でき、おしゃれにも見えるのが特徴です。
上記画像のように、一見アイソメトリックな画像を描く仕組みは簡単そうですが、いざ描こうとすると意外と手間がかかるのも事実。
そこで、スライドショーやwebサイトの素材として使えるよう、簡単にアイソメトリックなイラストを作られるwebサービスや素材サイトをいくつかピックアップしてみました。
アイソメトリックイメージ生成サイト
①Isobuild

https://isoflat.com/isobuild/
「Isobuild」は多数あるアイソメトリックなイラスト素材をお好みで配置していき、オリジナルのアイソメトリックな画像を生成することができるサイトです。
イラスト素材の数こそ限りがあるものの、各素材ともにしっかり作りこまれているためハイクオリティなイラストを作ることが可能です。
素材は人物だけでなく、ビジネスや教育カテゴリのものもあるため、スライドやwebでおしゃれなデザインとして活用できると思います。
保存方法もpng、jpg、svgの3つが用意されています。
②Visual Paradigm

https://online.visual-paradigm.com/drive/#infoart:proj=0&new=IsometricDiagrams
「VisualParadigm」ではスライドやポスターなど様々なデモやテンプレートが公開されています。
アイソメトリックカテゴリの中には50個以上のデモ・テンプレートが公開されており、デザインの参考になるでしょう。
無料の会員であれば、プライベートの利用や非営利目的での使用も認められています。
アイデアに困った人は確認してみてはいかがでしょうか!
③ICOGRAMS

https://icograms.com/
プライベートでの利用、非営利目的での利用であれば無料で使用することができるのが「Icograms」です。
大量のイラスト素材とテンプレートが用意されており、デザインにあまり時間をかけたくない方にはお勧めのwebサービスです。
木目状のパレットに素材を配置していくことで、簡単にアイソメトリックなイラストを構成することができます。
④ISOMETRIC

https://isometric.online/
無料で使えるアイソメトリックなイラスト素材をお探しなら、まず「Isometric」で素材を探してみてはいかがでしょうか!
素材の種類こそ約50種類と多すぎることはありませんが、各素材とも細かく作られており、素材のダウンロードも簡単に行えます。
アイソメトリックデザインを用いたサイト
実際の現場でどのようにアイソメトリックなイラスト・デザインが用いられているか気になりませんか?
企業のwebサイトで活用されているアイソメトリックなデザインを以下にいくつかピックアップしたので、デザインの参考にしてみてください!
goo (AI x design)

https://aixdesign.goo.ne.jp/
チャットボットとユーザ(人)のコミュニケーションの様子を表したアイソメトリックイラストを用いたデザインになっています。
マテリアルデザインと組み合わせてあり、見やすくおしゃれなサイトデザインとなっています!
メルペイ

https://jp.merpay.com/
アイソメトリックで描かれた町にアニメーションで動きを加えたサイトデザインになっています。
メルペイを町や暮らしの中の様々な場面で使えることがイメージされています。
ABLENET VPS

https://www.ablenet.jp/
格安VPSや共有サーバーといった選択肢のアイコンとしてアイソメトリックなイラストを用いたレイアウトになります。
サーバーを扱っている、ということが一目で把握することができます。
自分でアイソメトリックなイラストを作りたい
これまで紹介してきたサイトでは、すでにアイソメトリックなイラスト素材ありきでデザインを構成していく必要がありました。
ですが、目的のイラスト素材が見つからない場合、自分で素材を制作することができれば利用目的にあったデザインに仕上げることができます。
アイソメトリックなイラストを手軽に作成するには「Illustlator」があると良いでしょう。(Illustlator以外で作成するには難易度が高くなります)
今回試しに「【illustrator】かわいいアイソメトリックなイラストの作り方|Youtube」を参考にパソコンを作成してみました!
操作慣れ次第で制作時間は前後しますが、1時間で作り上げることができました!
慣れればこのくらいの素材は30分あれば作り上げられると思います!
Youtubeには、上記動画以外にもアイソメトリックなイラストを作成する様子をキャプチャーした動画が多数あがっているので、自分で作りたいけど作り方が分からないという方は確認してみてはいかがでしょうか。