お知らせ

オシャレで見やすいデザイン「アイソメトリックなイラスト」について

この記事の解説事項

●オシャレでフォーマルな印象を与えられる「アイソメトリックなイラスト」とは?
●アイソメイラストを描く時の決まり事
●アイソメイラストの描き方

かげひと
かげひと
こんにちは!イラストレーター兼動画クリエイターの無印かげひと(@kage86kagen)です!

今回は「アイソメトリックなイラスト」について紹介したいと思います。

みなさんは「アイソメトリックなイラスト(または「アイソメトリック」、「アイソメ」)」というものをご存じでしょうか?

この言葉はイラストを描く人であっても、自分が描いているジャンル・界隈によって、知っているか否かが大きく異なると思います。おそらく、「漫画」や「アニメ系」のイラストを描かれる方の場合だと、ほとんど目にした事が無いかもしれません。

しかし、このデザインを少しでも知っておくことで、自分が描くイラストの表現の幅を広める事が出来たり、新しい表現方法を思いつくことができるかもしれません。

知っている方もそうではない方も、表現手法の見聞を少しでも広めたい方はぜひこの記事をご覧ください!

アイソメトリックとは

まずは、「アイソメトリック」とはなんぞや?について、簡単に説明したいと思います

「アイソメトリック」というのは、「投影図法」という「物体を平面上に表す図法」の一種になります。別名、「等角投影法」です。

「図法」と聞くと、「建築やインテリア系でよく使われそうなだな…」とイメージする方もいるかもしれませんが、まさにそういった界隈では知られている&使われている図法なんだそうです。

※同じ言葉で「筋力トレーニング」を意味するものがあるそうですが、これとは全く関係ありません。

アイソメトリックとは、立体の製図法のひとつである「等角投影法」のことで、わかりやすく表現すると、対象物を「ななめ上」から見下ろすような視点で描かれた図のことをいいます。

近年、このアイソメトリックの手法で描かれたイラストをWebデザインに取り入れるサイトが増えており、有料でベクター画像を提供する素材サイトなどでもよく見かけます。

引用元:エムタメ!(https://mtame.jp/design/isometric/)

このアイソメトリック(以下「アイソメ」と略します)の使用例を挙げるとすると、下記のようなイラストが該当します。

コーヒーさん
コーヒーさん
あ!こういった「斜め上から見た」構図のイラストを、どこかで見たことがあるような気がするな。
ワインさん
ワインさん
なんかこう、すごくデザイン感を感じるイラストですよね!

このアイソメを利用したイラストは、下記のような場面で特に見かけたことがあるかもしれません。

  • テレビCM
  • 建築、インテリア系の雑誌やパンフレット
  • デパートやモール内でのポスターなど
  • オシャレなウェブサイト etc…

このアイソメに関しては、イラスト以外にもアニメーションや3Dなどの映像でも用いられています。

(一昔前のイオンのCM。確か、上記以外にも何パターンか制作&放送されており、当時初めて見た時は「情報量がすごいのに、ごちゃついてないしオシャレに表現されてる!すげーっ!」ってなった記憶があります。)

もちろん、アイソメ法は漫画・アニメ系ジャンルにおいても使える表現方法です。「わちゃっと系」や「箱庭系の構図」を制作したい時にこの表現方法を利用すると、情報量が多いのにすっきると見やすいイラストが作れるかもしれません。

アイソメ構図ならではの面白い表現方法も可能。例えば、上記イラストのように「階層」を強調したい時にこの構図を用いたりなど。

イラストや映像以外にも、「ゲーム」のジャンルにおいてもこれに近しい構図の作品もたくさんありますよね。(シュミレーションRPGとか…)

アイソメの決まり事

アイソメイラストを描く時は実は「決まり事」がありまして、下記画像のように「1つの角度が120°になるような線の引き方」をする必要があります。

趣味で描く場合はあくまでも”趣味”ですし、必ずしも120°にきっちり合わせる必要はありませんが、「アイソメトリック図=ああ、1つの角度が120°になるような線の引き方をしているあのイラストね!」という認識が世間にありますので、仕事として描く方はご注意ください。

角度が指定されているなんて、なんだか自由度が低そうだな…と思うもいるかもしれませんが、角度がかっちり定められているが故のイラストの描きやすさ、使用先での合わせやすさ(制作したイラストを元にWebサイトをデザインするなど)が、アイソメの魅力的なところですよね。

どのような印象を与えるの?

アイソメは決められた角度を参考にしてイラストを制作していくわけなのですが、アイソメを使ったイラストは、見た人にどのような印象を与えるのでしょうか?そして、どういった目的の時に使用するのが良いのでしょうか?

実際に使用されている場面と、管理人が個人的に抱いた印象を参考にしつつ、下記のように文章として書き起こしてみました。

・”かっちり”、”真面目”、”しっかり”とした印象を表現したい時
「アイソメトリック」の単語を検索すると、アイソメ図を利用しているイラストは大半がビジネスシーン、企業、会社の宣伝やCM等で使用されている事が多いです。
これらを察するに、「誠実さ」、「正当性」、「真面目」な印象を与えたい場合にアイソメイラスト起用するのかもしれません。

かげひと
かげひと
角度を指定してイラストを描くという事もあってか、イラストの出来上がりもきっちりかっちり見やすい構図となります。この見た目がフォーマルであるビジネスシーンと相性が良いのか、この構図でイラストの依頼をしている方も多いのかもしれませんね。

・建築系、インテリア系
「ガチの製図」などについては全く知らないので置いといて、「建築に関する情報雑誌」、「インテリアに関する説明パンフレット」などといった「建築系・インテリア系」を紹介するコンテンツにおいては、アイソメ法で描いたイラストを利用している個人・企業が多いです。

・町並み、建物内などの地図をオシャレに見せたい時
町並み背景や駅構内、学校内などを紹介する際に、このアイソメ図を利用したイラストを採用しているところも多いです。そしてそれを利用している地図などは、どれも見やすい傾向があると思います。アイソメは「平行投影」で描写しているので、遠近法を利用するよりもすっきりと分かりやすい&相手に伝えやすいです。

コーヒーさん
コーヒーさん
あんまり意識した事は無いけど、遠近法を利用したイラストって、実は何を描いているかが”ぱっと”見で分かりにくかったりするよね。イラストの描きこみ量にもよるけれど…。そういった点においては、平行投影である「アイソメイラスト」が適しているのかもね。

・2Dと3Dの狭間のような構図を見せたい時
アイソメは「俯瞰図」で物体を見せるため、奥行きのある構図を見せる事ができます。ゆえに、2Dと3Dの狭間のような構図を表現したい時に便利です。客観的な目線で見た時、ただの平面イラストよりも「このイラストなんかクオリティが高い!」と思えますしね。

・ジオラマ、箱庭系イラストを描きたい時
普段、漫画やアニメ系ジャンルのイラストを描く時にアイソメ図を利用する方はあまりいませんが、例えば「ジオラマなイラスト」、「箱庭系イラスト」を描く方にとっては適した表現方法です。

同人誌界隈においても、このアイソメを利用したオシャレな表紙を描かれる方も見かけました。

●まとめ
・かっちり、真面目、しっかりとした印象を与えたい時
・建築系、インテリア系
・町並み、建物内などの地図をオシャレに見せたい時
・2Dと3Dの狭間のような構図を見せたい時
・ジオラマ、箱庭系イラストを描きたい時

アイソメトリックの描き方

アイソメイラストについてなんとなく分かりましたでしょうか?もしかすると、この記事がきっかけで「描いてみたいかも!」と思った方もいるかもしれませんね。

そこで、簡単ではありますが「アイソメ図を利用したイラスト」の描き方について紹介をしたいと思います。

やり方は本当に人それぞれですが、最も簡単なやり方としては、「六角形を描いたレイヤーを下地にして、それを定規として使用しながらイラストを描く方法です。
※「CLIP STUDION PAINT」で説明します。

まずはじめに、アイソメイラストを描く時の一連の流れの例を下記のようにまとめてみました。

  1. 「多角形ツール」で「六角形」を選択、これをキャンパスに描写する
  2. 描写した六角形の「頂点」と「中心」を結ぶ線を作る
  3. これでアイソメイラストを作る前の下準備はOK!作った下地を「下書きレイヤー」として設定し、これを定規代わりにして、六角形の線に沿ってイラストを制作していく

…こんな感じで進めていけば、比較的簡単にアイソメイラストが制作できることでしょう。

 

先ほど、「定規」代わりとして「六角形」の話が出てきましたが、デジタルでイラストを描く場合、ほとんどのペイントソフトには「多角形ツール」が備わっていますので、これを利用して「アイソメイラストを描くための下準備」を行います。

下地となる「六角形レイヤー」の作り方をもう少し解説すると、下記の通りになります。この方法で作った六角形を「定規」代わりにイラストを制作していく…というやり方が、単純でやりやすいかもしれません。

  1. 多角形ツールで「六角形」を指定し、キャンパスに描く
  2. コピーして上にずらす
  3. 上にずらした六角形の余分な線を消して、完成!

illustratorにはこんな便利機能も

ちなみに、illustratorでイラストを描く方には、いとも簡単にアイソメイラストを作れる方法が存在します。イラレには、作ったパスを「3D」に変化できるという超便利な機能が備わっていますので、これを利用する方法です。

  1. アイソメ化したいパスを選択した後、画面上部タブの「効果」→「3Dとマテリアル」→「押し出しベベル」を選択
  2. すると、パスが一瞬で3D化!
    ただ、このままだと「アイソメ」なイラストではないので、「回転(プレセット)」のリストから「アイソメトリック法(左面)」を選択する、
  3. そうすると、「アイソメトリック」な角度のイラストが瞬時に出来上がる!
    (同タブ内の「奥行き」の数値をいじると、オブジェクトの幅が太くなる)

この方法を利用すると、比較的簡単にアイソメイラストを制作する事が可能です。

…とは言いつつも、実際に制作してみれば分かると思いますが、イラレで作るアイソメイラストは、実際はこんな単純なやり方で制作できるわけではありません。上記を応用したやり方の積み重ねで、1つの作品を作ることになります。

ただの四角形をアイソメする分には先ほどのやり方でOKですが、作りたいイラストが複雑になればなるほど、よくよく考えながらこの機能を使う必要があります。
(例えば、コーヒーカップ、キッチン台、一軒家、ロケットのイラスト制作など…)

ワインさん
ワインさん
こればかりは、自分で体験してトライアンドエラーしながら学んでいく必要がありますね…。

着色時の注意点

アイソメ図を利用すると、オシャレで見やすいイラストを制作する事ができるのですが、「色塗り」の際にはいつも以上に気を付ける必要があります。

アイソメ図は「立体」を意識した描き方です。そのため、「立体物を描く時特有の色の関係」を考慮して制作しないと、かえってイラストが見づらい&のっぺりとした印象になってしまいます。

例えば、左上が光源だった場合は、上面が一番明るくなる、次に左面が2番目に明るくなって、3番目に明るくなるのが右面です(要するに一番暗くなるのが右面)

これに関しては、イラストを制作するにおいての「基本的なデッサンの話」に通じます。覚えておいて絶対損はない(むしろ絶対必要だと思う)話ですので、立体物の色塗りの際には覚えておいてください。

ストックイラストにおけるメリット

なお、アイソメ図を利用したイラストはストックサイト内でも人気があり、DL率もそれなりに高い構図となります。

今まで例として出した「墓石」のイラストも、普通のイラストよりもDL率がかなり高いものとなりました。(PIXTA等で販売していますので、ぜひご利用ください!)
PIXTA(イラスト素材: 墓石 立体 お供え付き )

もし、ストックサイト用にアイソメイラストを制作したのであれば、他のイラストよりも使い回しがしやすいので、作ったデータは必ず保存しておくことをおススメします。

コーヒーさん
コーヒーさん
そうか、アイソメイラストは描く角度が決まっているから、同じアイソメイラスト同士で並べたり加工がしやすくて、相性が良いんだね!

アイソメイラストは今もなお需要が高いイラストですので、ストックイラストメインで活動している方は、制作してみてはいかがでしょうか?

まとめ

いかがだったでしょうか?

今回は「オシャレで見やすいデザイン「アイソメトリックなイラスト」」についての紹介、描き方についてを解説しました。

アイソメイラストは、主にビジネスシーン、建築、インテリア系、2Dと3Dの狭間のような構図を見せたい時、ジオラマや箱庭系のイラストを作りたい時に適した構図です。

制作する時にはある程度の「決まり事」があるのですが、これを守って作られたアイソメイラストはデザインの観点からみてとても見やすい構図であり、主にフォーマルな印象を与えるのにもってこいな表現方法です。ぜひお試しください!

最後までご覧いただきありがとうございました!

それでは!