アイソメトリックとは

アイソメトリックとは、立体の製法のひとつである「等角投影法」のことで、正式には「アイソメトリック・プロジェクション（Isometric Projection）」といいます。
物体を斜め上から見下ろした構図で、傾斜させた立体を、幅・奥行き・高さの3方向で作る角度がそれぞれ120度になるように描き、一つの図で対象物の3面を同程度に表す投影図法です。

少し前から、webデザインでよく見かけるようになりました。

アイソメトリックの需要が高まっているからか、最近ではストック画像サイトでも多く見かけるようになりました。

▲ ACイラスト

自分で作るには難しそうと思われるかもしれませんが、実はIllustratorの「3D効果」という機能を使えば、簡単に立体的な表現ができるのです！今回は、簡単にその方法をご紹介します。

※説明には、Adobe Illustrator CC2022（Ver.27.8.1）を使用しています。

3D効果を付ける方法（立方体を作る場合）

まずは、基本的な「立方体」を、3D効果を使って作ってみます。

最初に正方形のオブジェクトを作成します。

「効果」⇒「3Dマテリアル」⇒「3D（クラシック）」⇒「押し出しとベベル（クラシック）」を選択します。
3D（クラシック）以外のものは、最近追加された新機能ですが、できることが微妙に違うので、今回は使用しません。

「押し出しとベベル（クラシック）」を選択すると、次のようなダイアログボックスが開きますので、アイソメトリックにしたい場合は同じように設定してください。

各オプションの説明

説明欄は、Adobe Illustrator マニュアルより引用しています。

「OK」をクリックすると奥行きが加わり、立方体が完成しました。

色などの微調整

「3D効果」を適用するだけだと、それぞれの面を調整することができないため、色味などを調整したい場合は「オブジェクト」⇒「アピアランスの分割」をします。

すると、ダイレクト選択ツール（白いカーソル）で面ごとに選択できるようになります。

さいごに

いかがでしたでしょうか？

元にする平面のオブジェクトの形を変えれば、立体的ないろいろなパーツを作ることができます。
今回ご紹介した方法を応用して、アイソメトリックの部屋を作ってみました。

いつものイラストを立体的にしたいときは、是非試してみてください。

この記事を書いた人

わたなべソリューション事業部 エディター 兼 webディレクター

関西の芸術大学で染織・画像編集ソフトを学ぶ。卒業後、県内の織物会社で織物 の製造開発・生産管理・営業を経験する。その後、web制作未経験ながらアーティスへ入社し、webエディターとしてホームページのコンテンツ制作・ディレクションに携わっている。仕事は素早く・丁寧にを心掛けています！

この執筆者の最新記事

この執筆者の記事一覧

• 2024年4月15日WEB【Illustratorの生成AI機能】テキストからベクターデータを生成！イラスト・アイコン・パターンを素早く作る！
• 2024年3月27日WEB情報を視覚的に伝える！インフォグラフィックスの使い方・作り方
• 2023年12月27日WEB【新機能】Photoshopの生成AI機能「生成塗りつぶし・生成拡張」がすごすぎる！使い方をご紹介します。
• 2023年12月26日WEBパワーポイントでバナーを作るための実用的テクニック4選！パワポでもここまでできる！