「デイリーなデザイン」と言われてもあまりピンと来ないかもしれませんが、
要するに日常的に使う商品やサービス向けのデザインのことです。

自然な表情で動きのある人物写真を使い、
明るい配色と自由なレイアウトを心がけることで
表現することができます。

見本を作ったのでこちらをご覧下さい。

■ 自然な表情、自然な動きの人物写真

デイリーなイメージは写真が大切です。
日常の１コマを切り取ったような自然な写真を選びましょう。
できればスタジオで撮った物ではなく、
太陽光の下で撮影された物の方が自然な雰囲気が出ます。

人物以外にも歯ブラシとかクロワッサンとか、
日常で見かけるような風景や食べ物などを入れると、
それらしい雰囲気を作ることができます。

■ 明るい配色

鮮やかで明るい色を中心に使い、
白地に余白を生かしたレイアウトをすると、
明るく自然で日常的なイメージを作ることができます。

トーンを１つに絞るよりは、
何色か使った方が、昼間の明るい感じが出ます。

■ 自由なレイアウト

あまりガチガチのレイアウトではなく、
気軽で開放的な雰囲気の自由なレイアウトが
デイリーなデザインには向きます。

切り抜き写真や吹き出しを入れたり、
文字を斜めに置いてみたりして、
画面に動きを出して下さい。

今回の見本の画像は、こちらの無料素材を使わせて頂きました。
http://www.sxc.hu/photo/645032
http://www.sxc.hu/photo/182750

スタイリッシュなデザインとは

都会的でクールな印象を与えるデザインのことです。

色味を抑え、

水平垂直で余白を生かしてレイアウトし、

緻密に文字を組むことで表現できます。

見本を作ったのでご覧下さい。

■ 無機質な写真やイラスト

スタイリッシュなデザインでは、

人の気配を感じない、無機質な写真を使います。

人物写真を使う場合でも

生活感を感じさせないように外人を使ったり、

目線をこちらに向けないようにして

リアリティーを抑えるようにしましょう。

■ 白黒の配色

白黒の配色はとてもスタイリッシュな印象です。

明度差が最も激しくなる白と黒の組み合わせは

強烈なインパクトとシャープさを持たせることができます。

白には組み合わせた色をクリアに見せる効果もあり、

これもスタイリッシュさを引き立てる一員です。

色を使う場合は色数を少なくし、

複数の色は同系色でまとめるようにします。

■ 緻密な文字組と厳格なレイアウト

水平垂直を意識したレイアウトと

緻密な文字組がポイントです。

特に文字の大きさは重要で、

見出し以外の文字を極端に小さくすると

緻密なイメージを表すことができます。

今回の見本の画像は、こちらの無料素材を使わせて頂きました。

http://www.sxc.hu/photo/1085908

ファミリー向けのデザインは

暖かくほのぼのとした雰囲気が特長です。

暖色系のやさしい色使いと、

自然な雰囲気の家族写真を使うことで

表現することができます。

見本を作ったのでご覧下さい。

■ 自然な雰囲気の家族写真

ファミリー向けのデザインでは

何よりも家族の写真が重要です。

ポーズを付けているような写真よりも

何かの動作をしている

何気ない様子をとらえた写真が良いでしょう。

特に小学生以下の子供の写真は、

ファミリー向けの雰囲気を強く与えることができます。

■ 暖色系のやさしいトーン

薄い黄色や茶色、黄緑色などの

暖色系のやさしい色を使うと

ファミリー向けらしい暖かさと

ほのぼのした雰囲気が作れます。

■ 自由なレイアウト

垂直水平のガチガチのレイアウトよりは、

自由にレイアウトした方がファミリーらしさが出ます。

※今回の見本の画像は、こちらの無料素材を使わせて頂きました。

http://www.sxc.hu/photo/1075968

http://www.sxc.hu/photo/1185128

http://www.sxc.hu/photo/794709

若者向けのデザインの特長は

自由や元気といったキーワードで表すことができます。

力強いタイトル文字と

激しい色使い、遠近感を強調した写真を使うことで

表現することができます。

見本を作ったのでご覧下さい。

■ 力強く迫力のあるタイトル

前回もお話した通り

文字の大きさは声の大きさに似ているので、

元気なデザインには大きなタイトルを入れます。

タイトル文字に遠近感を付けたり、

斜めにしたりして動きを付けると

さらに迫力が増して若者らしい活気が生まれます。

■ 派手なトーン

純色同士をぶつけることで、

エネルギーを表現できます。

純色の面積が多ければ多いほど、

元気になりますし、

そこに黒をぶつければ、

強いコントラストが生まれるため、

より力強い印象を与えることができます。

■ 動きのあるレイアウト

タイトルやメイン写真を斜めにレイアウトしたり、

水平垂直の安定したレイアウトを壊すことで、

若者らしい自由や活力を表現することができます。

※見本の画像はこちらの無料素材を使わせて頂きました。

http://www.sxc.hu/photo/1057598

高齢者向けのデザインの特長は
穏やかさと落ち着きです。

控えめなタイトル文字と
渋いトーンを使うことで表現することができます。

見本を作ったのでご覧下さい。

濃い色を使った場合は格調高い雰囲気になる。

薄い色を使うと親しみやすさが増す。

■ 控えめなタイトル文字

タイトル文字の大きさは
声の大きさに似ています。
タイトル文字を大きくすると大声を張り上げている感じ。
小さくすると小声でささやいているような感じになります。

高齢者向けのデザインの場合は、
「大きな声で元気よく」というよりは、
静かに落ち着いた調子で話しかけた方が
良い印象を持たれます。

■ 渋いトーン

渋いトーンを中心に配色すると
高齢者向けの穏やかで落ち着いたイメージになります。

渋い色でも濃い色（例えば焦げ茶）を中心に使うと
重厚で格調のある雰囲気になり、
薄い色（例えばベージュ）を使うと優しい雰囲気になります。

純色などの鮮やかな色は
若々しさを表す色なので、
なるべく小さい面積にとどめるようにします。

※見本の画像はこちらの無料素材を使わせて頂きました。

http://www.sxc.hu/photo/1134347
http://www.sxc.hu/photo/1174433
http://www.sxc.hu/photo/583082

女性向けのデザインの特長は
優しい、可愛い、自然といったイメージのことを言います。

繊細な文字や淡いトーンを使って、
中心の無いレイアウトにすることで表現することができます。

見本を作ったのでご覧下さい。

■ 中心のないレイアウト

メインビジュアルを中心から外してレイアウトし、
大きさも控えめにします。

どことなく頼りない形が
女性的な雰囲気を表します。

写真を選ぶ場合も男性向けのデザインの時のような
遠近感を強調したダイナミックな写真ではなく、
見本のように真横から撮ったような
平面的な写真にすると良いでしょう。

■ 細身のタイトル

繊細な雰囲気の細い書体を選びます。

大きくする場合も、細身の文字を使い、
色使いは男性的な力強さが出ないように
優しい色使いを心がけて下さい。

■ 淡いトーンが中心

背景を淡いピンクにするだけで
女性向けの商品である事を表現できます。

淡い青や淡い緑色でも良いですが、
若干、男性的な理性をイメージさせる色になります。

※見本の画像はこちらの無料素材を使わせて頂きました。

http://www.sxc.hu/photo/993478

男性向けのデザインの特長は
迫力があることと、理知的なことです。

ダイナミックな構図や力強い色使いに加えて、
緻密な文字組や図解を入れる事で表現することができます。

見本を作ったのでご覧下さい。

■ 主役を大きく見せるレイアウト

主役になるビジュアルを大きく、
センターにレイアウトします。

画面の中心に大きな写真を置くと
安定感のある自信にあふれた男性的な表現です。

■ 極太の大きいタイトル

文字は大きければ大きいほど、
迫力があり男性的な表現になります。

特に太さが大切です。
どんなに大きくしても細い文字にすると
繊細で女性的な雰囲気になってしまいます。

■ 純色と黒のはっきりした色使い

鮮やかな赤、青、緑などの強い色と
黒を組み合わせると迫力が出ます。

強い色同士のコントラストが
男性的なパワーを表現します。

今回は試しに失敗例を作ってみました。

上の見本と比べてみてください。

レイアウト良いのですが、色と書体の選択を間違えているため
男性的な雰囲気になっていません。

※見本の画像はこちらの無料素材を使わせて頂きました。

http://www.sxc.hu/photo/1150217

今日は過去３回のまとめです。

高級（高い）
http://blog.yoshide.com/archives/304

リーズナブル（普通）
http://blog.yoshide.com/archives/314

お買い得（安い）
http://blog.yoshide.com/archives/319

この三つを見て勘のいい人なら気づいたかもしれませんが、
値段の差による表現は以下の５つの要素を調整することで
表現できます。

図を作ったので参考にしてください。
（というか、今回はこの図が全てです）

■ 要素１「情報量」

高級は情報を少なく、
リーズナブルは中くらいから多め、
お買い得は沢山情報を詰め込みます。

ただし、ネットだけで何かを売ろうとする場合は、
基本的にホームページに情報を掲載するしかないので、
この部分は妥協するしかありません。

ブランド品が情報量ほぼゼロのイメージ広告で売れるのは、
ホームページ以外の所で
商品のメリットを十分伝えられているからです。

誰も知らない商品はメリットをしっかり文字で伝えないと売れません。

■ 要素２「写真」

高級は角版かぼかし版、
リーズナブルは切り抜き版、
お買い得は切り抜き版を沢山使います。

高級なものは水平垂直をそろえて整った印象にし、
逆にお買い得なものは切り抜きを多用して、
楽しく活気溢れる、気軽な印象の画面にします。

■ 要素３「文字組」

高級は緻密な文字組、
リーズナブルはやや緻密に、
お買い得は荒削りな文字組にします。

荒削りな文字組の意味が分からないかもしれませんが、
例えばこのメルマガのような、
文章を単語の適当な所で改行していて
文末の位置がガタガタとなっているような組み方のこと指しています。

■ 要素４「価格表示」

高級は小さめかつ商品から離して表示、
リーズナブルは中ぐらいの多いさで商品の近く、
お買い得は特大表示して商品写真に重ねます。

実は５つの要素のうちで最も重要なのが価格表示です。
価格を鮮やかな色で大きく表示すると、
他の要素をどれだけ高級に表現しても激安表現になります。

■ 要素５「配色」

高級は渋めの色を使って色数を少なく、
リーズナブルは明るい色を中心に、
お買い得は鮮やかな色で色数も多くにぎやかにします。

前回、前々回で、
高級志向、リーズナブルと来て、今回はお買い得表現です。

http://blog.yoshide.com/archives/304
http://blog.yoshide.com/archives/314

情報を目一杯詰め込んで、
価格を強調することで作ることができます。

雰囲気だけでも伝わればと思って図を作ったので
こちらをご覧下さい。

■ ポイント１「情報は余白無く満載にする」

バーゲンセールのように
写真や文字で紙面を埋め尽くす事で
気軽さとお買い得感が最大になります。

■ ポイント２「切抜き写真を使う」

切抜き写真でにぎやかさや気軽さを表現します。
角版を使う場合は少しおとなしくなりますが、
写真と写真の間を詰めてレイアウトしてください。

■ ポイント３「鮮やかな色面で埋める」

赤や緑などの鮮やかな色面を多用することで
元気な色のぶつかり合い、紙面に活気が生まれます。
黒は小さな面積で使うようにします。

■ ポイント４「文字組は荒削り」

水平垂直を強調しすぎると遊びの無い固いイメージになります。
文字組は荒削りにして、価格などのポイントになる文字は
斜めに傾けて置くのも良いでしょう。

■ ポイント５「価格は大きくして写真に重ねる」

価格表示を商品写真に重ねたり、
袋文字にして大きく出すと激安表現になります。

※見本の画像はこちらの無料素材を使わせて頂きました。

http://www.sxc.hu/photo/847261

リーズナブルなデザインとは、
高級志向と激安の中間のデザインのことです。

オレンジなどの明るいトーンと、
切り抜き写真を使う事で表現することができます。

■ ポイント１「情報量は多く」

情報が少ない緊張した画面ではリーズナブルなデザインにはなりません。
文字情報や写真に溢れた活気のある画面が
リーズナブルなデザインの条件です。

適度な余白を作ることで肩の力が抜けた雰囲気を作ることができます。

■ ポイント２「切抜き写真を使う」

切抜き写真を使うとカジュアルな印象になります。
特にメインの大きく見せる写真を切抜きにすると、
適度な余白ができるので、
カジュアルなデザインらしい開放感が生まれます。

■ ポイント３「明るく鮮やかな色と白地」

オレンジや黄色などの明るいトーンの色を使うと、
開放的でリーズナブルなデザインになります。
鮮やかな色を多用しても、
余白を多めに取る事で下品になる事を避けることができます。

■ ポイント４「文字組は緻密に」

リーズナブルは“価格命”の激安表現ではないので、
文字情報は小さめにして緻密に表現します。
文字を固めに組む事で派手な色でも上品さを保つことができます。

■ ポイント５「価格は大きくしても主役にはしない」

価格表示を商品写真に重ねたり、
袋文字にして大きく出すと激安表現になります。
大きめに出す場合も商品には重ねずに
近くにレイアウトするようにします。

※見本の画像はこちらの無料素材を使わせて頂きました。

http://www.sxc.hu/photo/953130
http://www.sxc.hu/photo/566242