デザインの勉強(なぜそのように感じるのか、どんなテクニックを使っているのか)をしていきます。そのために、デザイン研究所著「デザインのミカタ」を参考に「葉」「木」「森」の3ステップでデザインを観察していきます。それぞれの意味は以下の通りです。
- 葉:「何がどのようになっているのか」具体的な要素を見ること。(What, How)
- 木:「なぜそうなのか」考えながら見ること。(Why)
- 森:「いつどこで誰に」を分析して法則化すること。(When, Where, Who)
今回は「高級感」をテーマにデザインを観察していきます(このブログは随時更新していきます。
pin.ito
葉:文字のカーニングが広い。
木:気持ちの余裕を感じさせるために文字のカーニングを広くしている。
森:見る人に大人の余裕を感じさせるためには、文字のカーニングを広くさせる。
葉:文章の一部だけ落ち着いた金色にしている。
木:高級を連想させるために、金色を使っている。
森:セレブ感を出すアクセントを入れたいときは、落ち着いた金色を使う。
葉:ウェイトがmedium程度の明朝体を使っている。
木:静かなインパクトを出すためにウェイトがmediumの明朝体を使っている。
森:控えめなインパクトと安定感を出すためには、ウェイトがmediumの明朝体を使う。
葉:サブの文章にはゴシック体を使っている。
木:メインの文章を引き立てるために、異なるフォントを使っている。
森:メインの明朝体を目立たせるためには、サブにゴシック体を使う。
葉:細い線だけの図形を使っている。
木:繊細さを出すために細い線だけの図形を使っている。
森:高級なものに付随する繊細さを表現するには、線だけの図形を使う。
葉:配色は黒、白、赤、金
木:ずっしりとした重みを出すために黒をメインにした配色にしている。
森:ずっしりした重さを演出するには、黒>白>赤や金のバランスで配色する。
葉:重い金属感のある背景を使っている。
木:ずっしりとした重さを出すために、実際に重いものを背景に使っている。
森:ずっしりとした重さを表現するには、実際に重いものを背景の写真に使う。
葉:レイアウトを占める面積で一番大きいのは余白。
木:大人の余裕を出すために余白を大きくとっている。
森:大人の余裕を見せつけるためには、レイアウトの半分以上を余白で埋める。
pin.it
葉:文字のウェイトを細めにし、カーニングを広くしている。
木:可読性を高めるために、ウェイトを細くしたりカーニングを広くしている。
森:可読性を高めるためには、文字のウェイトを細くしてカーニングを広くとる。
葉:不要な説明書きがない。
木:メインの文章を目立たせるために、不要な文章を省いている。
森:文章の視認性を高めるためには、不要な文章や装飾を省く。
葉:縦文字と横文字がある。
木:上から下へ目線を誘導するために、L字の配置をしている。
森:目線の流れを作るときは、縦文字と横文字を使ってL字の配置をする。
葉:黒、落ち着いた赤がメインで、金、白を少し入れた配色。
木:地に対して主に図の一色のみ配置して、ぱっと見のインパクトを強めている。
森:インパクトを強める時は、地と図はそれぞれ1色のみ使う。
葉:真っ暗な暗闇を背景に使っている。
木:図を目立たせるために、暗闇を背景に使っている。
森:鮮やかな図を目立たせるためには真っ暗な暗闇を背景に使う。
葉:下半分に面積の大きい図を配置している。
木:揺るぎない安定感を出すために面積の大きい図を下半分に配置している。
森:揺るぎない安定感を出すためには、大きな図を下半分に配置する。
pin.it
葉:白や金の文章を黒マーカーしている。
木:メインの文章を目立たせるために白い文字を使っている。
森:メインとの対比でどうしても背景と色が被るときは、マーカーを使う。
葉:白をメインに彩度の低い色を添えている。
木:落ち着きを出すために、彩度の低い色を使用している。
森:高級なイメージに付随する落ち着きを演出するためには、彩度の低い色を使用する。
葉:真っ白ではなく、大理石の模様が入っている。
木:安価にさせないために、背景に模様を入れている。
森:白い背景に高級感を出すには、高級をイメージさせる模様を入れる。
pin.it
葉:サンセリフ体のフォントを使っている。
木:小さい文字でも可読性を高めるために、セリフのないフォントを使っている。
森:小さい文字の可読性を上げるためには、サンセリフ体を使う。
葉:ロゴをリフレインさせている。
木:少ない情報量でロゴの印象を強めるためにリフレインさせている。
森:情報量を増やさず印象を高めるには、ロゴをリフレインさせる。
葉:無彩色のみの配色にしている。
木:大人な男性をイメージするために無彩色のみでデザインしている。
森:大人な男性をイメージするときは無彩色のみを使う。
葉:凹凸が伝わる質感の紙を使っている。
木:持った時に安心感を与えるために、凹凸のある紙を使っている。
森:名刺を渡す相手に安心感を与えるためには、凹凸のある紙を使う。
葉:背景のロゴをはみ出させている。
木:空間の広がりを与えるためにロゴを枠からはみ出させている。
森:媒体の外に余白を感じさせるためには、ロゴをはみ出させる。
pin.it
葉:真っ白ではなく少し明度の低い色を使っている。
木:落ち着いた印象にするために明度を下げた白を使っている。
森:パキッとさせず、落ち着かせるためには白の明度を下げる。
葉:氏名だけ縦書きになっている。
木:目立たせるために氏名のみ縦書きにしている。
森:目立たせたい文言だけ、文字の向きを変えてみる。
葉:氏名のみフォントが異なる。
木:目を惹かせるためにフォントを変えている。
森:目立たせたい文言だけフォントを変えてみる。
pin.it
葉:左下と右上にレイアウトしている。
木:左上と右下のレイアウトと差別化するために、この配置にしている。
森:見慣れなさにより注目させるためには、左下と右上にレイアウトさせる。
葉:ロゴを小さめにしている。
木:余白を大きくするためにロゴを小さくしている。
森:余白を大きくしたいときは、小さくしても視認性が下がらないロゴを小さくする。
pin.it
葉:筆記体のみをメインにしている。
木:エレガントな線の流れを全面に押し出すために、筆記体のみをメインにしている。
森:エレガントな流れを出すには、ロゴを短文の筆記体のみにする。
葉:筆記体の下にセリフ体の短文がある。
木:形状の対比で筆記体を強調させるために、セリフ体を配置している。
森:筆記体を強調するには、セリフのあるフォントを添える。