さきほどハードディスクの中を見て回ってたら、デザインについて重点的に勉強してた時の備忘録みたいなのが出て来ました。

改めて読んでみたら、あらまぁ結構いいコト書いてんじゃんか、と。

そんなワケで今回のエントリーは、この「デザイン勉強メモ」を臆面も無くご披露させて頂きます☆

メモなので箇条書きだったり見難かったりするかもですが、駆け出しのデザイナーさんやデザインの勘所を知りたいってエンジニアさん方のお役に立てば幸いです♪

キーワード別の具体例

かわいい

・花や星やキラキラなど、かわいらしさを象徴するパーツを随所に用いる。
・円形、角丸、ポップ体など、「丸み」を強調する。
・手書きフォントやクレヨンの質感などもかわいらしさを表現できる。
・余白は多め、文字も重要部では大き目が良い。

やさしい

・暖かな中間色や柔らかな暖色など、「低彩度、高明度」が向いている。
・[かわいい]ほどではない程度に「丸み」を意識する。
・有色の光彩やぼかしなども、柔らかな印象を与える。

クール

・余白を贅沢に、大きく使う。
・無彩色をメインにして、アクセントには高彩度、高明度の指し色を１色が良い。もしくは指し色の１色を大胆に使い、他はすべて無彩色も良い。
・細めの書体が合う。特に明朝。
・自然的なテクスチャーの使用は控え、使うなら金属のような人工的で整然としたものを選ぶと良い。

ゴージャス

・深みのある色をメインにする。グラデーションも良い。
・上質で高級感のある実在のオブジェクト（宝石や庭園や花など）をメインビジュアルにすると良い。
・キラキラしたアクセントを入れると一層雰囲気が出る。

ロマンチック

・ピンクを加えた高明度の配色が効果的。
・「丸み」ではなく「曲線」を強調すると良い。
・モチーフの透過やぼかしなどが合う。

シック

・「シンプル」を念頭に、余計な装飾は省く。
・明るめの灰色とアースカラー系が合う。
・余白を大きめに取る。
・比較的やや太めのフォントが向いている。

上品

・やや高明度の寒色をメインに、あまりコントラストをつけない配色が良い。
・細めのフォントや欧文表記が似合う。
・ところどころにかなり薄めのテクスチャを配置すると雰囲気が出る。

神秘的

・紫や青系の色をメインに、少し濃い目のダルトーンが合う。
・シンメトリーのレイアウトが向いており、さらにやや複雑な構図だと一層雰囲気が出る。
・幾何学模様やシンボリックなアイコンを随所に入れると効果的。
・やや明確な光彩やぼかしが有効。

にぎやか

・キービジュアルやナビメニューなど、ところどころでグリッドを無視したような大胆な配置をすると良い。
・彩度の高めな暖色（話し声を感じさせる黄色系は特に重要）を中心に、配色数はやや多めの方が良い。
・背景に大き目のパターンを敷きつめると効果的。
・ややキツめのパースをつけると、一層にぎやかさが強調される。
・文字のジャンプ率はかなり高くても良い。

楽しい

・イラストやイラスト風アイコンを多用すると良い。
・高彩度の色をやや多めに使うと雰囲気が出る。補色も重要。
・モチーフやコンセプトに関連するオブジェクトを枠や背景に使うと効果的。
・ロゴ部や写真表示部などにも細工（ガラスに曇り、留めにピンなど）すると良い。

リラックス

・ゆったりとした余白を取る。
・流線型や緩やかなエンボスなど、少し「丸み」を意識すると良い。
・アースカラー中心の落ち着いた色味が合う。

清潔感

・白×キツ過ぎない青系をベースにして、あまり色を使いすぎず、濁った色は使用しないように。
・透過、グラデーション、ぼかしなどで透明感を出すと良い。
・コンテンツはグリッドに正確に、理路整然と並べると効果的。

信頼感

・彩度は押さえ気味にして、色数も少なめにすると良い。
・一部分に少しの角丸などを入れると引き立つ。
・全体的に文字を少し大きめにしておくと良い。
・各パーツの淵やメニュー部などに細かな手（1pxシャドウや1px境界線など）を加えると、手抜き感は出ない。

グランジ

・メインビジュアル含め、千切れやノイズ、かすれの加工を随所に織り込むと雰囲気が出る。
・グリッドを無視したレイアウトも似合う。
・基本は灰色+高彩度の濁った色。
・コンクリートや朽木のテクスチャーを大胆に取り入れても面白い。

デジタル

・スピード感を感じる写真や光のテクスチャーなどを取り入れると雰囲気が出る。
・透過した背景、ドットテイストのフォントなども良い。
・実在のデジタル機器をモチーフにしても効果的。
・配色は無彩色の濃淡+かなり高明度なアクセントカラーが似合う。

アナログ

・身近な範囲に実在するオブジェクト（ノート、ポラロイド、マグカップなど）を使うと良い。ただし光の方向（＝ドロップシャドウの向き）に注意。
・手書きフォントや手書き風の境界線も雰囲気が出る。
・リアルな質感に寄せていくと良い。

和風

・行書体、筆文字、縦書きといった日本固有のデザインを取り入れる。
・着物の帯の柄などをテクスチャーにすると合う。
・アイコンには家紋や和柄を取り入れ、統一感を損なわないようにする。
・配色はくすんだ黄色や緑などを中心に、鮮やかな赤でアクセントをつけると良い。

洋風

・アンティーク調のアイコンやツタの区切りなどで、中世ヨーロッパ的な雰囲気を出す。
・要所でスクリプトフォントを使うと効果的。明朝体も合う。
・あまり彩度の高い色は使わず、落ち着いた色で合わせると良い。

中華風

・唐草模様や四神や龍など、共感される伝統的なモチーフを使うと雰囲気が出る。
・赤×金が常道。寒色は避けるべき。
・コンテンツの四隅に細工（刀の鞘の柄のような枠）をしても効果的。

配色とレイアウトいろは

配色

・トーンを変えずに色調を変えるか（ドミナントトーン）、色調を変えずにトーンを変えるか（トーンオントーン）。
・トーン ＝ 純色（元とする色）、清色（元の色 + 純白or純黒）、濁色（元の色 + 各種灰色）。
・中明度の背景色は出来るだけ避ける
・赤と緑の高彩度色は要注意色、なるべく避ける
・色使いが苦手な人は、色相差を0°に近づける
・背景色は薄い方が長文は読みやすい
・文字も「色の塊」として見ると良い。
・細い文字や線の色は、周りの色に影響されやすく、実数値より薄く見えてしまう。
・緩やかなグラデーションが配色を助ける
・地味なテクスチャは配色を和らげる
・暖色は興奮感を誘う → 人は興奮すると、時間を長く感じる → サイト滞在時間が長くなりにくい（寒色は真逆）。
・低明度色で囲まれた色は対比を起こし、明るく見えてしまう（＝ 明度による対比現象）。
・高彩度色で囲まれた色は対比を起こし、くすんで見えてしまう（＝ 彩度による対比現象）。
・アクセントカラーとは「目立つ色」ではなく、「周りのイメージと正反対のイメージの色」である。

配色の決め方

・サイトコンセプトやキーワードからメインカラーを決定 → サブカラーを決定 → 重要度に合わせて視認性や誘目性の高い色をアクセントとして決定。
・悩んだときには色の面積を減らす
・色には重量があり、明るい色は軽く、暗い色は重く感じる。
・色の重みのバランスは、モノクロ化して見るとわかる。
・色を濃くする ＝ 色を暗くする ＝ 黒に近づける ＝ 重くなる。
・目立つ色（視認性の高い色）は少量でも効果があり、逆に多量に使うとうるさくなり過ぎる。
・同じトーンの暖色と寒色では、「暖色」の方が誘目性が高い。
・背景色が暗い場合は、色相差は控えめに。
・訪問済みリンク色（:visited）は、リンク色よりも明度を低く（少しくすませた感じに）すると良い。
・最も誘目性が高いのはオレンジ。

構図・レイアウト

・とにかく「メリハリ」が大事（高いトコと低いトコ。近いトコと遠いトコ、など）！
・近接（関係のある要素を近づけ、関係の薄い情報は遠ざける）、整列（大きさや色を統一させ、位置を揃える）、対比（コントラストのこと。強弱、大小、明暗、太細、など）、反復（同じスタイルを繰り返す）。
・「反復の原則」と「対比の原則」は、上手に使い分けて！
・「近接の原則」は、ちゃんと差をつけないと伝わらない可能性がある。
・三角形を意識する、三角形の形状で雰囲気も変わる（上向き三角形なら安定感、逆は不安定+指向性）。
・広めに余白を取るだけで解決出来ることは多い。
・共通性、連続性がちゃんとデザインできていると、外しどころ ＝ 変化のポイント ＝ 遊びどころが、ぼんやりと見えてくる。
・変化やアクセントは「温度が高く、激しい」ので、強すぎず、見る人の邪魔をしないさりげなさ、自然な感じが吉。

コンテンツごとのレイアウト

・重要なコンテンツでも、その中身すべてが重要ではないので、その中身の中でコントラストをつける。
・モチーフ、キーオブジェクトをどこまでも忘れないで統一感を出す
・区切り線、境界線に手を加えると、雰囲気が高まる。

視線の流れ

・視線の流れを意識する、視線を誘導する
・斜線の先端には注目が集まる。
・放射線の中心には注目が集まる。

黄金比・白銀比・フィボナッチ数列

・黄金比 ＝ 1：1.618（≒ 5：8）。960pxの場合、593：367 ≒ 600：360
・白銀比 ＝ 1：1.414（≒ 5：7）。960pxの場合、678：282 ≒ 680：280
・フィボナッチ数列 ＝ 0, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144,,,

具体的なデザインフロー

1. サイト名やコンセプトや要望などから、キーワードを山ほど連想する。
2. それぞれのキーワードで画像検索して、気になったモノ・いいなと思ったモノを片っ端からキャプチャ（画像は「レイアウト」「配色」「アクセント/ギミック」の３つのフォルダに分類しておく）。
3. トップページで掲載すべき情報（＝コンテンツ）を、箇条書きで洗い出す。
4. 洗い出したコンテンツを、そのボリュームや重要度やユーザーの視線やそれぞれの関連性を意識して、コンテンツの配置だけのラフレイアウトを３案ほど作成する（それぞれのレイアウトの意図は、忘れずにメモっとくように）。
5. それぞれのラフレイアウトをベースに、キャプチャした画像を切り貼りしたりざっくり描いたりして、ラフデザインを作る。
6. 全レイアウトのラフデザインが出来たら、詰めたら良くなりそうな上位２つに絞る。
7. キャプチャ画像を貼った部分を「何故その色・形・大きさにしたのか」の意味や意図を考えながら、ざっくりとした自作のデザインに差し替えていく。
8. 全てのキャプチャ画像が自作デザインに差し替わったら、２択の依頼を含め一度関係各位に展開してみる。
9. フィードバックを組み入れながら、選ばれた１つを詰めていく。
10. 完成したら最終確認依頼をして、最終フィードバックを組み込み、納品やで！！

色が与える印象

赤

・情熱
・危険
・激しい
・愛
・燃える
・火
・禁止

オレンジ

・新鮮
・明るい
・活発
・元気

緑

・平和
・安全
・自然
・若い

青

・冷たい
・清潔
・インテリ
・涼しい

紫

・高級
・神聖
・神秘的
・エロイ

白

・清潔
・明るい
・純白
・純粋

黒

・豪華
・男性的
・不安
・悪