フラットデザインのマナーでは,基本的にはその名の通り「平らなデザイン」を表現します.しかし平らなだけではデザインが単調になりがちです.単調さを嫌って,さりげない陰影をデザインに加えるのは非常によく採用される手法です.今回のチュートリルでは斜め45度の光源を想定した影をアイコンに加えたフラットデザインを作成します.

InkscapeではCtrlキーを使用することで,多くの機能を思い通りに制御することができます.このチュートリアルでも多くの機能とCtrlキーを組み合わせて使用していますが,中でもベジェツールとCtrlキーの組み合わせについて簡単に解説しましょう.

Ctrl_bezie

ベジェツールでは,Ctrlキーを押すことによって15°ごとに固定された線を引くことができます.0度, 15度, 30度, 45度, 60度, 75度, 90度 という具合です.今回のチュートリアルでは45度の線を多用しています.45度の線がデザインを構成する基本的な直線として重要なのは,図形的に単純で明快であること以外にも理由があります.それは「ラスタライズに強い」ということです.ここに明快な説明を引用します.

45度の角度にアンチエイリアスを施すと均一な段になるので、輪郭がくっきりします。また、この角度の完璧に斜めな状態は認識されやすいパターンであり、人間が見た時にとても好まれるのです。

45-degrees.png.pagespeed.ce.hNXTQUqoVu

Inkscapeでは15度ずつの斜め線を引くことができますが,それは根拠のない仕様ではありません.上記のブログでも15度ずつの角度の斜め線は推奨されています.イラストを描く際に,適当に線を引くのではなくその角度にまで注意を払うことは,いいデザインへの近道です.下記に引用するように,使用が推奨される斜め線の角度は次のようなものです.

  • 45度の斜め線
  • 15度単位の斜め線 (15度,30度,60度,75度)
  • 45度の半分(= 22.5度) ,または更にその半分 (= 11.25度)

このルールを破らざるを得ない場合は、私は半分ずつの角度(22.5度、11.25度など)か、15度の倍数の角度にするようにしています。45度の半分ずつの角度を使うメリットは、アンチエイリアシングの段がやはりかなり滑らかになることです。


今回のチュートリアルで作成したデザインは「ロングシャドウ」と呼ばれるデザインテクニックを使用しています.ロングシャドウとは,デザインの中で斜めに大胆な影を落とす手法です.例を挙げれば枚挙に暇がありませんが,例えばこんな感じのデザインです.

https://i2.wp.com/i.ytimg.com/vi/v_EDg2zW8W4/maxresdefault.jpg?resize=616%2C346&ssl=1

 

フラットデザインを推し進めてより実用的な意味付けを行った「マテリアルデザイン」というGoogleの提唱するデザインスタイルがありますが,その中でもロングシャドウの使用方法について取り決めがなされています.

shadow.png

 

マテリアルデザインの詳細に立ち入ることはここではしませんが,その機能性についてはデザインのプロによって考え抜かれています.よく調べてみると面白いかもしれません.

広告