▶▶▶ 【最大補助3/4】
IT導入補助金特別枠(C類型)を使って越境ECサイトを構築しませんか?

LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

webデザイントレンド(アイソメトリックイラスト編)

テクニック

webデザイントレンド(アイソメトリックイラスト編)

2020年もあと残り4ヶ月ほどとなってしまい、今更ではありますが今年トレンドとなりつつあるデザインの中から「アイソメトリックイラスト」という物を紹介していこうと思いますが
「アイソメトリックイラスト」について紹介する前にざっとトレンドとなりつつあるデザインを先に紹介していきます。

・タイポグラフィーを大きく表示し、インパクトを与えているデザイン

・手書き風のテキストやイラストを取り入れたデザイン

・前回紹介したニューモーフィズムデザイン


などがあります。

「アイソメトリックイラスト」とはどんなデザインか?

数年前より海外で使われるようになり、近年日本でも企業のコーポレートサイトなどに使われるようになって来ました。
アイソメトリックとは「等角投影法」と呼ばれ、ビルや建物といった建造物や家具などの立体物を斜め上から見るようなことを言います(厳格には横幅、奥行き、高さの軸が各120°になるようにする)

アイソメトリックイラストは、温かみを感じるようなイラストが多く、親近感を感じてもらえるようなデザインが作りやすくなります。

また、これらのデザインを作る際にはWebGLというものを使い、three.jsによってより手軽に表現しています。

立体形を表現してみよう

ここでは「アイソメトリックイラスト」でも使用しているWebGLについてthree.jsを使用して立体形を表示させることをします。

主に今回は 「最新版で学ぶThree.js入門 手軽にWebGLを扱える3Dライブラリ」(https://ics.media/entry/14771/) を参照させて頂いております。

詳しい解説など知りたい方はぜひ尋ねてみてはいかがでしょうか。

 

では、最初に以下のhtmlファイルを作成します。

index.html

htmlファイルが作り終わりましたら続いてjsファイルを作成します。

index.js

続いてthree.jsの公式サイトよりCodeをダウンロードします。

ダウンロードしましたら、ファイルの「build」>「three.js」をindex.jsと同じディレクトリに入れます。

出力結果は以下の通りになります。

ここまでが基礎となる部分で先ほど紹介したようなサイトを仕上げるためには更に工夫をしていかなければならなそうです。

また、3Dに関する知識(カメラワークやライティング等)も必要となって来ますのでそちらも今後は勉強していきたいと思います。

詳しい説明等は「最新版で学ぶThree.js入門 手軽にWebGLを扱える3Dライブラリ」(https://ics.media/entry/14771/) でされております。

この記事を書いた人
yonekuraのアイコン

yonekura

気になったモノを自身の勉強の為、記録として書いています。

資料ダウンロード

送信いただいたメールアドレス宛に、資料のダウンロードURLを送付いたします。