Posted at

デザインの基礎を勉強してみた


デザインとは


存在感の差を操り情報の序列を伝えること


こう定義されることで、アートの世界だと思っていたデザインが、勉強すればある程度習得可能なのではないかと希望を感じることができた。


デザイナーがデザインするときに何を考えているか

優先順位を考えている。一番わかってほしいことを選びそれを伝える。伝える際にはできるだけ認知負荷を下げる(伝えたいこと以外気をとられないようにする)。


デザイナーの道具箱


  • いい感じにグループ分け。

  • 序列やストーリーを使う。

  • 人間のバグ(仕様)を利用する。


デザインを検討する3つの問い


  • 伝えたいことは何?

  • どれが一番重要?

  • それはうまく伝わってる?

この問いによって検討だけでなく、評価もしやすくなる。


デザインの構成要素

3 + 1 (形, 色, 配置 + 動き)

これらの存在感の序列は、形<色<配置<動き



  • サイズの存在感


    • 大きいほど大きい。



  • 形の存在感


    • 複雑な形ほど大きい。



  • 塗りの存在感


    • 塗りの面積が大きいほど大きい。



  • 文字VS記号VS絵


    • 存在感の序列は 文字<記号<絵



※表意文字(個々の文字が一つのイメージをあらわす文字)は記号に近くて目立つ。


画面上で見る光(色)は、光の三原色の組み合わせ。Red,Green,Blue 各色の強さで色をあらわす。ex) #0000FF

別の表し方として、HSB色空間(Hue:色相, Satuation:彩度, Brightness:明度)がある。同じ明度でも、色相によって明るさが違う輝度という尺度もある。

回避していくとよいこと

・RGBで色を選ばない。HSBを使う。(∵人間には難しすぎるから。)

・危険地帯(HSB色空間の四隅)を選ばない。(∵危険書類みたいになってしまうから。)

・ 色の数で表現しようとしない。

色を選ぶにあたって

配色は使いまわせる。困ったら決まっているところからとる。(どっかのWebサイトからお知恵をお借りする。色だけなら怒られない。)

統一感の出る色の選び方

・メイン(落ち着いた色)とアクセント(目立つ色)を決める。

・メインをもとにもう2色決める。黒(黒っぽい色)と白(白っぽい色)。

・白と黒を混ぜてグレーを作る。

・メイン, アクセント, 黒, 白, グレー ここから使う色を選ぶ。

※ここはちょっといまいち理解できていないが、とりあえず見る人に伝えたいイメージをもとにメインとアクセントを決めて、それプラス黒, 白, グレーの5色を基本的には使っていくと理解した。

色の比率の目安

・アクセントは出し惜しみする。

・グレーはいくらあってもいい。

・メインはがめんの3割くらい。

・黒と白は文字とかに使う。

色が足りなくなったら

・グレーを増やす

・メイン, アクセント, 黒, 白, グレー 5色の透明度を変えて使う。


配置

レイアウト4原則

■仲間の原則

・整列: 見えない線を少なくして情報量を少なく

・隣接: 関係あるものは仲間に見えるよう近くに置く

・反復: 同じものは同じ見た目で

■非仲間の原則

・対比: 違うものは違うように見えてほしい

空白について

人間は空白が怖い。空白があると心配になるが、高級感を出したい場合は思い切って空白をあける。


動き

初心者は動かないと困るところだけを動かす。具体的には、ユーザーの動作に反応する部分。

ex) マウスホバー, クリック, ローディング


参考

これだけ守れば見やすくなるデザインの基礎

表意文字と表音文字に含まれる七つの文字体系の分類の総まとめ

光の三原色・色の三原色