今回は伊藤 博臣さんの「エンジニアのための理論でわかるデザイン入門」を拝読しました。
本書は仕事の中でデザインの知識を求められる様になったITエンジニアに向けて書かれています。
厳密には違う分野ですが、私もシステムエンジニアから社会人人生をスタートしています。
エンジニア方面の考え方や言葉には馴染みがあります。今勉強をしているデザインについて違った角度から学べればと手に取りました。
目次：
書籍概要
以前はエンジニアとデザイナーは活躍するフィールドが異なっていました。ざっくりと分けるならエンジニアはソフトウェアなど「動きのあるもの」、デザイナーは広告など「動きのないもの」といった具合です。
しかし、スマートフォンの普及以降デジタルデバイスが生活の中に浸透したことで、その区分けに変化が起きています。デジタルデバイスのアプリは動きのあるソフトウェアでありながら、それそのものが広告の役割を果たす様になったからです。
また、ユーザーの裾野が広がったことにより、「よりわかりやすく、誰もが使えるユーザインタフェース」が求められるようになりました。
そんな背景からデザイナーにはエンジニアリングの知識が、エンジニアにはデザインの知識が求められるようになっています。本書はデザインの基礎を、仕組みを説明するための機能の１つとして理解することを目指しています。
デザインの基本は「そうである理由」を考えること
「デザイン＝機能」を理解する助けとして、デザインは視覚的な情報を整理することと考えてみましょう。
視覚的な情報が機能を示す例としてわかりやすいのが色だと思います。
書籍にはこうあります。
色を組み合わせることで、その対象の”イメージ”…すなわちうちに秘めたる意識や内面を表現します。
伊藤 博臣 （2017）『エンジニアのための理論でわかるデザイン入門』株式会社インプレス
「内に秘めたる意識や内面を表現」と書くと難しそうですが、ボタンをデザインすることを考えてみてください。
例えば、再生ボタンと停止ボタンを設計するとしましょう。
一般的なイメージから考えると下記のようになるのではないでしょうか？
このパターンであれば、多くの人が操作に迷わないと思います。
つまり「内に秘めたる意識や内面を表現」するとは、それを見たユーザーが機能を連想できる組み合わせを作るということです。
これはセンスの話ではありませんよね。これまでの経験の中で知ったこと、知らないとしても「何が多く使われているのか？」を調べればわかることです。
ただ、上記のボタンは原色に近い配色をしているのでそのままでは周りに馴染まない場合もあります。例えば、優しさをコンセプトにする場合には上記の配色では強すぎますのでもっと淡い色にします。
「それこそセンスが無いと…」と思ってしまいそうですが、色の調整にも基本的なルールがあり、デザインではトーンを合わせるといいます。
そしてこのトーンの合わせ方にもパターンがあり、それぞれのトーンが人に与える印象も体系化されています。逆にいえば、コンセプトを作る中で「印象」が決まればそれに合うトーンを選び、そのトーンの中から各機能に合う色を選んでいけば、全く的はずれなデザインにはならないということになります。
すべてを感覚に頼るのであれば、手も足も出ないかもしれません。ただルールが有りそれに沿って選んでいくなら、それはルールを知っているかどうかという話になります。
すべての構成要素をコンセプトと紐付けできた時、デザインは機能として使命を果たす。
伊藤 博臣 （2017）『エンジニアのための理論でわかるデザイン入門』株式会社インプレス
この言葉にあるように、それを使った理由をルールの中から当てはめて見ることがデザインを理解する一歩になりそうですね。
本書のデザインの知識は以前に読んだ色彩検定のテキストでも目にしていましたが、正直どうやって使えばいいのかがピンときていませんでした。
本書でユーザインタフェースの構築を例に再確認できたことで、自分の中に知識が根を下ろした様に感じます。
実践としてサイトのデザインを考え直してみる
本書で学んだことを早速自分のサイトで実践してみました。
先に上げた例である色を見直すこともそうですが、それに合わせて考えたいと思ったのが「揃える」ということです。本書では下記のように書かれています。
それぞれのコンテンツに意味をもたせる場合、”揃っている”ことは情報が整理されている状態を表す。ゆえに”揃っている”ことは”情報の整理”すなわち”編集作業”そのものです。
伊藤 博臣 （2017）『エンジニアのための理論でわかるデザイン入門』株式会社インプレス
私はシンプルライフを起点に創作活動を再開したので、作品を発表するサイトもシンプルなもので行こうと考えていました。できるだけ装飾を外す方向で作ってみたのですが、情報が少ない割には雑然としてイマイチだと感じていました。
引用を踏まえて考えてみると見直し前のサイトのデザインは情報や装飾を減らしただけで、揃っていなかったということがわかりました。
そこで今回は色と機能を整理して下記の点を揃えていきました。
- 色彩配色と面積比を整理し揃える
- 機能毎に使う色を揃える
- 文章の開始位置を揃える
色彩配色と面積比を整理し揃える
「シンプル」というコンセプトは引き継ぎたいと思ったので、サイトのベースカラーは白とし、メインカラーは黒としました。
これだけでは以前と変わらないので、アクセントカラーとしてロゴのにも使っているオレンジを入れることにしました。オレンジは私の行動指針のイメージである夕日の色ですので、サイトのアクセントとしても良いと考えました。
基本的な色彩配色と面積比は下記のようになります。
機能毎に使う色を揃える
基本配色が決まりましたので、次は機能と色について整理していきます。
サイト内で視覚的な機能として大きなものは「見出し」と「リンク」です。
見出しを整理して揃える
見出しにはページ内を区切る機能があります。見直し前のデザインでは文字の大きさが変化していただけでこの区切りの機能を果たしていませんでした。
区切りとしての機能を強化するために黒背景に白文字とし、色彩配色を揃えるためにオレンジのアンダーラインを入れています。
ただ、黒とオレンジという濃い色の面積が広いため、背景とのコントラストから見出しブロックの角が鋭利な印象になることが気になりました。
そこで、見出しの背景は黒から若干灰色をへ調整し、ブロックの角を丸くすることで印象を和らげています。
また、すべての見出しを同配色にしてしまうと画面上に濃い色が増えすぎてくどい印象になりました。上記の設定は見出し１～見出し３までとし、それ以降の見出しでは補助としての色を使いながら調整しています。
リンクを整理して揃える
リンクは機能としてはすでに整理されていますで、揃えるという方向で見直します。
見直し前のサイトではリンクを空色で設定していました。また、グリッド系のプラグインに表示される「続きを読む」ボタンはデフォルト設定では黄緑色です。
機能として揃えるためにリンクにはオレンジに設定します。
ただ、画面によってはリンクボタンの数が多く、アクセントカラーの面積比を大きく超えるため、印象を和らげるために一律でベースカラーの白に若干寄せています。
これによってアクセントカラー本来の強調の機能と、リンク機能も視覚的に分けることができました。
補助要素の色を揃える
サイトの中には概要や本文内や要素で使うセパレータなどの補助要素もあります。
こういった機能は本文と区別するため、ベースカラーへよせることで印象を下げ、補助機能であることを強調しています。
最終的な配色と面積比は下記になります。
ここまで書いた様に、機能を整理していくと「違う機能なので分けたい」「印象を調整したい」ということで色を増やす必要もでてきます。その場合は同系統の色の中で広い面積を占める機能色を「２／３」、狭い面積を占める機能色を「１／３」にする三分割法を目安にするとスムーズに検討できます。
文章の開始位置を揃える
最後に文章の読みやすさの点から、文章の開始位置を揃えます。
このサイトはベースにWordpressの標準テーマである「Twenty Sixteen」を使っています。一番気になったのが箇条書きの記号が本文の開始よりも左に飛び出していることです。
箇条書きの機能としては本文と分けポイントを強調することです。見直し前の状態ではこの機能が働いていませんでした。そこで、記号の開始位置を本文よりも内側に調整し、周囲のスペースで強調されるように調整しました。
まとめ
今回は機能と色を整理して揃えることを中心に実践してみました。
色や装飾という点では以前よりも増えているのですが、以前よりもすっきりとして見やすくなったと思います。
細かい点ではまだまだ揃っていないところもありますが、以前よりも更新していきたいサイトになったのは大きな収穫でした。
先の引用の中にもありましたが揃えることは編集作業の基本です。
実践して見る前は揃っていること＝無機質な印象になるのではないかと予想していました。
しかし実際に整理してみると整理された状態の方が、人の意図が感じられひと気が感じられます。逆に不揃いな状態の方が雑味が強く、放置されたような無機質な印象を持ちました。
実践してみた感想としては「揃っている＝人の意図・ひと気を感じる＝安心できる＝読みやすい」ということではないかと思いました。
これからも読みやすい・見やすい作品を作れるようにデザインについて勉強していきたいと思います。
この断片があなたの星へ続く道を、少しでも照らすことを願って
＜参考＞
