株式会社I-SEED(アイシード)|大阪・心斎橋のWEB制作集団

【2019年のトレンドデザイン!】アイソメトリックのイラストの概要とその作り方

【2019年のトレンドデザイン!】アイソメトリックのイラストの概要とその作り方

I-SEEDブログ編集部I-SEEDブログ編集部
この記事は、2019年11月19日に編集し、約 2 分で読めます。

近頃、斜め上から見下ろすような視点で描かれたイラストを採用しているサイトをよく見掛けます。

数年前から海外サイトでよく見られるようになり、ここ最近では日本国内でもよく見られるようになりました。

今回は、そんなアイソメトリックの基本と作り方の説明をしたいと思います。

アイソメトリックとは?

アイソメトリックとは、アイソメトリックプロジェクション(isometric projection)の略で、「等角投影法」ともいわれています。

横幅、奥行き、高さの軸がそれぞれ120°になるように描く図法です。

アイソメトリックが使われているWebデザイン例

stedi.com

North Detail

楽天株式会社 新卒採用サイト

アイソメトリックのイラストの作り方

今回はAdobeのIllustratorを使ったアイソメトリックのイラストの作り方を紹介します。

基礎編(文字を立体的にしてみよう!)

基礎編では文字を立体的に見せる方法から説明します。

アイソメトリックのイラストは横幅、奥行き、高さの軸がそれぞれ120°になるように作成する必要があるので、以下のようなグリッドを用意しておくと便利です。
【グリッドのテンプレートを用意しました。こちらからダウンロードできます。】

今回は「B」という文字をスケール、シアー、回転のSSR方式を使って立体的にしていこうと思います。

まず最初にテキストを打ち、アウトライン化した文字を用意します。

『拡大・縮小』を使って垂直方向に「86.062%」縮小します。

『シアー』を使って水平方向に「-30°」変形させます。

『回転』を使って-30°の方向に回転させます。

文字をコピーして同じ軸にスライドさせます。

『パスツール』を使って繋げていきます。

影をつけるため『パスファインダー』を使ってパーツごとに分けます。

影ができる部分に色をつけて完成です。

実践編(ギターを作成してみよう!)

実践編ではギターを作成してみます。
複雑な形は難しいように感じますが、基本は同じです。

今回はgoogleの画像検索からギターの設計図をダウンロードし、それを元に作成を行います。
まず最初にパスツールを使ってギターをなぞっていきます。

基礎編と同じようにSSR方式を使って変形させていきますが、今回はギターを横に倒したような絵にしたいので、『拡大・縮小』を使って垂直方向に「86.062%」縮小し、『シアー』を30°に変形させ、『回転』を使って-30°の方向に回転させます。

変形したオブジェクトを複製したあと、パスツールを使って繋げていき立体にします。

その他のパーツも全て同じように立体にして色をつけていきます。

最後にパーツを繋げて影をつければ完成です。

この記事を書いた人
I-SEEDブログ編集部
I-SEEDブログ編集部をフォローする

WEBの事でお悩みなら、まずは一度 I-SEED にご相談ください!

I-SEED は 「デザイン」「SEOマーケティング」「システム開発」を併せ持つWEB制作会社です。

コーポレート、オウンドメディア、ECなど様々な分野のサイト制作を得意としています。システム開発も自社で行っているので、様々なプロジェクトに柔軟かつ迅速に対応できるのが強みです。

大阪に良いWEB制作会社がいないとお困りの方は、是非一度 I-SEED までご相談ください。

I-SEED では随時採用も行っています。各種エンジニア、ディレクター、デザイナー、ライター、マーケターの全職種を募集しています。ご興味がある方は採用ページもご覧ください。

ブログページに戻る