新年ということで、出社までにキモチ新たに、デザインというものの基礎から何かを見出してみようと思います。
と、いうわけで、数あるスライドの中でいくつか抜粋して自分なりにまとめてみました。
デザインのセオリーを学ぼう
“デザインをすること”
情報を整理し、わかりやすく伝えること
モノのサービスの価値を最大限に高めること
情報設計
ユーザーの混乱を招かないことを前提とし情報の優先度を加味したコンテンツづくり
視線の流れ
Z、F、Eの形状で流れていく。角に当たるトコロで休憩を入れるのが吉
色
ベースカラー 70%
背景や広い面積に使う色。薄い色を用いることが多いが印象づけたい場合など濃い色も可。
メインカラー 25%
デザインのキーとなる色でWebサイトの場合、ロゴから取ってくる、もしくはターゲットユーザーを意識し決める
。
アクセントカラー 5%
リンクテキストやボタンに使いクリックを誘導する。メインカラーの反対色など
＝意味のある色使いをする
“セオリーを知る”
デザインセオリーは今も昔も変わらない
その時代のトレンドを知る → 次のセオリー
アンテナを広く。
“センスを磨く”
いろいろな経験をする
同じカリキュラムでも、出来上がるものは違う
センスとは、経験によって生まれるもの
見る、使う、感じる、コミュニケーション
“説明できるものづくり”
色やフォントなど、なぜそれを選んだかを説明できるようにする
クリエーターにもプレゼンテーション能力は必要
“手を動かす”
何も思い浮かばなくても、取り敢えず動く
セオリーに沿ってレイアウトや色を決めていけば形にはなる
次に、考えて、それをブラッシュアップさせる
コンテンツで改善するUIデザインの極意
“コピーライティングはインターフェイスデザインである”
“Know your audience”
利用者のことを知る
利用者のペルソナを設計
なぜアプリ・サービスを使うのか
利用者が対話しやすい形状を考える
ペルソナ…
架空の顧客像。詳細に設定した顧客のプロフィールを担当者間で共有し、人物像への理解を深めることでマーケティング方針を統一する手法。
“Short And Clear”
“絵より言葉のほうが明確になる場合がある
利用者の期待を保証する言葉は？
明確さを優先。拘るのは慎重に。”
“Content = Design”
コンテンツから始めればデザインもみえてくる
ノンデザイナーズデザインブックを読み解く
“サビタイジング”
4つ以上の物質は把握に時間が掛かる
人の細胞には、「縦線」「横線」「端」「ナナメ40℃」など、特定の形状にのみ反応する細胞がある。それを意識する
人が対象物を認識するとき、詳細な情報を認識するためには中心視野(モノの中心、目立つところ)を使うが、場面全体の概要を把握する場合は「周辺視野（つまりはアクセント外の周囲の要素）」を使う
“ジオン理論”
目から入った情報は2次元の形で脳に伝達。
重要な部分であえて崩すことで注意を引く
“注意の瞬き”
何かを認識すると、0.5秒間は他のことを認識できなくなる → ページ内に目立つものが多い場合、見落としが増える。
↑「人が外界を理解するために無意識に行う、情報の整理」に則った設計をしよう。
ノンデザイナーのための配色理論
なぜ色選びに失敗してしまうのか？
“混色系”
RGB CMYK 数値で表現しやすいため機械向け
“顕色系”
色相・彩度・明度で表現される。
マンセル、PCCS表色系など 人が感覚的に色の組み合わせを想像しやすい
RGB/CMYKで色を選んでる＝美的なものを選ぶのに適さない
RGBは彩度が高くなりやすい
“同一調和”
同じ色相のみを使った配色法
調和が取りやすい反面、単調になりやすい
“類似調和”
ふたつの色相差が25~43°の類似を使った配色法。
色の違いもわかり、強すぎずソフトな感じ
“対比調和”
いわゆる、補色。180°方向の対比。
“スプリットコメンタリー”
基準色とその補色の類似色を使った配色法
色味が分散し、カラフル
カヤックコピー部のコピー講座
“よんもじ を意識しているか？”
略称は4文字が多い。＝流通しやすい
“くちずさみたくなるか？”
似た音を口ずさんだことがある場合、きもちよく感じる
“エンドベネフィットを表現しているか？”
エンドベネフィット ＝ ユーザーの最終的な利益や恩恵のこと
“独自性を発揮できているか？”
技術の新しさ、価格が安い、など独自性をコピーに落とす。
“共感を生んでいるか？”
少ない手間と知識で、それなりに見せる、ズルいデザインテクニック
“ズルい線”
黒と白の2本の線を並べることで、背景に彫り込まれたように見える線
border-bottom: solid 1px rgba(0,0,0,.2); box-shadow: rgba(255,255,255,.3)0 1px 0;
背景色にあわせて透明度を調節し、太さは1px。ぼかしは0で濃すぎないように。
と、今回は以上のスライドを抜粋して読んでみました。
やっぱり「近接」「整列」「反復」「コントラスト」の基礎はカタいようですね。
サラっとまとめるとこんなかんじでしょうか。
近接
関連する項目を寄せて集めることでグループ化。視線の流れも意識することで重要性を加味できる。
整列
要素のつながりを意識し視覚的な関連を持たせるために、見えない線を意識して統一感を出す。
反復
特徴的な何かを、作品を通して繰り返して使う。
全体に統一感をもたせ一貫性をつくることでグルーピング
クドくならない注意も必要
コントラスト
情報のレベルに沿い、異なる要素をはっきりと差別化して目立たせる
こちらも併せて読むといいかもしれません。
Basic Design Note – デザインの基本を学び直すブログ –
伝わるデザイン｜研究発表のユニバーサルデザイン
前者はカナリ読み応えばっちりです。自分もまだ全部目を通せていないので後で読んでみようと思っています。
後者に関しては、さすがの読みやすさです。 こちらは基礎的なことを図を交えて説明してくださっています。
以上、2014年も頑張っていきましょう！でわ。