【5日目】キーワード別に見るデザイン

まずは昨日の復習。

画像の使い分けについて。

jpg

写真、グラデーションのある画像。捨てるタイプの圧縮方法のため保存のたびに劣化する要注意!

png

解像度の低い写真。ロゴなど色数が少ない画像に適する。

gif

gifアニメーションで使う。その他で使用するならばpngでよいのでは!?

 

という感じかな。

 

では、今日の本題。

今日はちょっと興味深い記事を見つけたのでそれを紹介する形で。

デザインをキーワード別にだれでも理解できる言葉でまとまっているところがステキ。

デザインに関する勉強メモが見つかったのでシェアします! | ITキヲスク

 

上記のサイトの中から、キーワード別に見るデザイン部分を引用させていただきいます!!

このサイトでは、この引用以外にも、配色とかレイアウトとか沢山の情報が

まとめられていたので、また改めてじっくり読もうと思います。

かわいい

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

やさしい

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

クール

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

ゴージャス

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

ロマンチック

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

シック

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

上品

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

神秘的

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

にぎやか

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

楽しい

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

リラックス

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

清潔感

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

信頼感

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

グランジ

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

デジタル

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

アナログ

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

和風

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

洋風

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

中華風

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