デザインの基本
01wave 冨永です。
絶賛、社内研修中です!!
今回はCCOのまいまい(宮成)より、デザインの基本について学びました。
重要なことや気づきをまとめていきます。

デザイン四大原則

近接 Proximity
関連する要素をまとめてグループ化する。
近接
反復 Repetition
同じ要素のものを繰り返す。一貫性。
反復
整列 Alignment
各要素をきちんと整列する。
整列
コントラスト Contrast
対比。比較対象の要素を入れ目立たせる。
コントラスト
この四大原則をおさえておくことで、とても見やすいデザインに仕上がります。
いつも見慣れたポスターやウェブデザインを意識して見てみると、きちんと揃えてあったり、同じグループのものはまとめてあったりと四大原則が使われているのだなと気づくことが増えました。

配置

次に大切なのが「配置」です。

デザインを作成する際、AdobeのIllustratorやPhotoshopなどを使用するので、配置を決めるのもパソコン上でいいのかなと考えていましたが、、、どうやら違うみたいです(^_^;)

パソコン上で配置を決める作業は、アイディアが固まらず根本の大枠が決まらないため、まずは紙ベースで考えるそうです。
紙に書きだすことにより、並べて比べることができたり、ポスターなどであれば壁に貼ってみて確認することができ、完成後を想像しやすくなると教えていただきました。

「デザインを作るときは、紙ベースで全体を考えること!」

今後、デザインを作成する際は、パソコンではなく「紙とペン」を持ち、配置を決めてからツールを扱っていきたいですね。

黄金比について

黄金比とは、「1:1.618」の美しいといわれる数学的な比率です。

黄金比

    身近なものにも黄金比は存在します。
    例えば、Apple社のロゴ、Twitterのロゴ、名画のモナ・リザ(レオナルド・ダ・ヴィンチの代表作)などがあります。

    例として、この形に合わせてメインビジュアルを作成してみました。
    このように、読ませたい部分と見せたい部分を渦巻き線上に配置することで、視線が誘導されストレスなく読むことができるようになります。

    黄金比の例

    今後、配置で悩んだ時には黄金比を参考にデザインしていきたいですね。

    その他にも、白銀比や青銅比などがあるとのことです。
    これに関しては、実戦で黄金比を使った後に勉強したいと思います。

    三分割構図と黄金比について

    写真の構図に「三分割構図」というものがあります。
    縦・横に三分割して、その交点に被写体を配置する構図のことです。

    三分割構図も身近なものに存在します!
    例えば、iPhone やデジタルカメラのグリッド機能、浮世絵の富嶽三十六景(葛飾北斎の代表作)などがあります。

    三分割構図

    デザインの「黄金比」と写真の「三分割構図」は、似ているのではないか?!
    ということで、三分割構図に黄金比を重ねてみました!!

    このように重なる点が出てくるのがわかります。
    デザインの基礎は同じなんだなと知ることができました!!

     素材について

    配置を決めた後は、写真やアイコンなどの素材を集めることになります。
    素材を集める際に「フリー素材」というものがあります。注意点として、「フリー素材」であっても、商用利用が可能か利用規約はしっかり目を通しましょう!

    下記の素材サイトは全て無料で商用利用可能です。

    まとめ

    デザインの基本を知ることにより、デザインの見え方が変わりました!!
    基本を知る知らないでは、全体のバランスに関わってくることになりますので、今回の研修で得た知識を今後の実戦で使っていきたいです!

    フロントエンドエンジニアとしての入社ですが、デザインの業務にも多く関われたらと思います。
    今後とも、よろしくお願いいたします!