shunのデザイン日記&メモ

デザイナーを目指している人のブログです

ロゴの観察

今回はロゴの観察をしていきます。

葉:セリフに弧が使われている。
木:弧を使うことで、真っすぐなセリフよりも柔らかい印象になっている。
森:柔らかい・優しい印象にしたいときはセリフに弧を使う。

葉:ステム(縦棒)にも弧が使われている。
木:セリフとの統一感を出すために、ステムにも弧を使っている。
森:ステムとセリフの両方に弧を使うと統一感が出る。

葉:tのステムとクロスストローク(横棒)が弧でつながっている。
木:情報量を減らしてミニマムにするために弧で繋げている。
森:シンプルさを出したいときは、ステムとクロスストロークを弧でつなげる。

葉:mの隣り合う2つのステマに対して、同一の円の弧が使われている。
木:セリフの高さを揃えるために同一の円の弧が使われいる。
森:隣り合うセリフには同一の円の弧を使う。

葉:pのセリフの右側が左側より長い
木:pのボウル(頭部分)の重心とバランスをとるために右側を長くしている。
森:重心を考えて倒れないようにセリフの長さを左右非対称にする。

葉:全体に、またシンボルマークとロゴタイプの間の距離に黄金比が使われている。
木:安定して美しく見せるために黄金比を全体に使っている。
森:誰が見ても美しく感じるデザインにするときは、黄金比を使う。

葉:mの末端が黄金比の弧に触れるように配置されている。
木:mに安定感を持たせるために、末端を黄金比の弧に触れさせている。
森:安定感を出すには、黄金比の弧に文字の末端を触れさせる。

葉:tの末端を単純な弧にしている。
木:マスキングテープのヒラヒラ感を出すために、角を尖ったままにしている。
森:ヒラヒラ感を出す時は弧を使い、あえて角を尖ったままにする。

www.masking-tape.jp

 

 

葉:0と%の〇が同じ形状になっている。
木:統一感とリズムを出すために同じ形状で位置を変えている。
森:統一感とリズム感を同時に出すには、同じ形状で動きをつけて配置する。

葉:%の線の鈍角の方は角が丸くなっていない。
木:丸くすると逆に反対の角が尖って見えてしまう。
森:鋭角と鈍角が近接しているときは、鈍角を丸くしない。

www.15percent.jp

 

メニュー表の観察

今回はメニュー表のデザインを観察していきます。

 

pin.it

葉:料理の写真を同じ右側に寄せている。
木:商品のビジュアルを強調するために、左右で写真と名前等とで対比させている。
森:写真を強調したいときは写真を左右のどちらかに寄せ、その他と対比させる。

葉:左上で線だけで太陽を表している。
木:情報量を減らしつつ夏らしさを入れるために、光線だけで太陽を表現している。
森:入れたいイラストの無駄を省くことで、紙面をすっきりさせられる。

葉:ゴシック体やサンセリフ体をかすれさせている。
木:背景の木材と合わせることで、キャンプを連想させ、夏らしさを表現している。
森:夏らしさを表現するためには木材背景とかすれたスタンプ風文字を使う。

葉:斜めの文字や帯を使っている。
木:夏の元気さ・やんちゃさを表現するために斜めにしている。
森:元気なイメージを表現するには、文字や帯を斜めにする

葉:右上の吹き出しを枠線に重ねている。
木:空間の逃げ道を作り、空間の広がりを表現している。
森:空間の広がりを作るためには、四隅のうち1つ以上に逃げ道を作る。

葉:右上の「&」のみ傾いていない。
木:文章に安定感を持たせるために、一部のみ水平に配置している。
森:傾けた短い文章に安定感が欲しいときは、一部を水平にする。

葉:帯の下に影をつけている。
木:日光と合わせて夏らしさを表現するために影をつけている。
森:夏を連想させるために、オブジェクトに影をつける。

葉:枠線をつけている。
木:太陽の球体を表現するために枠線をつけている。
森:隅に球体(円)を表現するときは、あえて枠線をつける。

葉:下側だけの吹き出しを使っている。
木:無駄な情報量を減らすために下側だけの透過吹き出しを使っている。
森:情報量を減らすためになくても良い図形の一部分を省略する。

葉:それぞれの料理のイメージカラーに合った下線を引いている。
木:料理のイメージを表現するために、料理と同色の線を使っている。
森:料理の雰囲気を底上げするためには、料理と同色の線やマーカーを使用する。

葉:帯の色がそれぞれ異なる。
木:料理の温度や雰囲気を表現するために、それぞれに合わせた色を使っている。
森:冷たい料理には寒色系、温かい料理には暖色系の色を使う。

葉:「さわやかメニュー」を白抜きにしている。
木:「SUMMER」との重心を鑑みて白抜きにしている。
森:全体の重心を見て色や大きさを変化させる。

葉:「¥1.100(税込)」のように表記している。
木:「円」や「税込み」を使わないことで、情報量を減らしている。
森:日本語の省略や記号化を使うことで情報量を減らせる。

葉:カロリーを表記している。
木:近年はカロリーを気にする人が増えたため、カロリーを表記してある。
森:お客さんに配慮して、カロリーやアレルギー物質を表記する。

 

 

pin.it

葉:鮮やかな地中海を思わせる色を使っている。
木:海を連想させる色を使って夏らしさをアピールしている。
森:夏らしさを出すには、地中海をイメージした配色にする。

葉:主菜や副菜を並べている。
木:実際の食事をイメージさせて、食欲を沸かせるために並べている。
森:食欲を沸かせるために、主菜や副菜を並べている。

葉:細かい線で太陽を表現している。
木:欧米を表現するために線の細かいイラストを使っている。
森:欧米を表現するときは、線の細かいイラストを使う。

葉:動きの大きいフォントを使っている。
木:夏の活発さをイメージさせるためにフォントに動きを与えている。
森:活発さを表現するには、動きの大きいフォントを使用する。

葉:サイズ表記を四角で囲っている。
木:小さいサイズでも両者の違いを分かりやすくするために四角で囲っている。
森:小さいものを目立たせるときは、図形で囲う。

葉:手書きの文字を添えてある。
木:店員のおすすめ感を出すために、手書き文字を使っている。
森:こっそりと教える感を出したいときは、一部に手書き文字を使う。

ダイナミックで注意を引くデザインの観察

今回は「ダイナミックで注意を引くデザイン」を観察していきます。

pin.it

葉:人の顔が大きくレイアウトされている。
木:注意を引くために目に留まりやすい人の顔を大きく使っている。
森:注意を引きたいときは、人の顔がはっきり大きく見えるようにレイアウトする。

葉:背景が白色になっている。
木:図のインパクトを引き立てるために情報量の少ない白色を使っている。
森:図で注目を引きたいときは、背景を白色にする。

葉:フォントサイズに大きな違いがある。
木:読むべき文章がどれかすぐにわかるようにフォントサイズを変えている。
森:フォントサイズに大きく強弱をつけることで、読むべき文章がわかる。

葉:#をつかっている。
木:副題であることがわかるように#を使っている。
森:副題を目立たせたいときは#を使う。

葉:中央の段のみ左右に追加の余白がある。
木:砂時計のような形状にすることで、中央の窪んだところに視線が誘導される。
森:3段の中央に視線を誘導したいときは、中央の段のみ少しすぼませる。

葉:人の顔の正面から光が当たっている。
木:人の表情がはっきりわかるように正面から光を当てている。
森:ポスターの誘目性を高めるには、正面から光の当たった写真を使う。

葉:服装がシンプル
木:余計な箇所に目がいかないように、服装をシンプルにしている。
森:伝えたい文章が霞まないようにするためには、写真の情報量を減らす。

 

 

pin.it

葉:「自分なりの~」の文字が右上がりの書体になっている。
木:若い勢いを醸し出すために、書体を右上がりにさせている。
森:若さを演出したいときは、書体を右上がりにさせる。

葉:写真の明度を少し落として白文字を使っている。
木:白文字を目立たせるために写真の明度を少し下げている。
森:写真と文字の両方を目立たせたいときは、写真の明度を少し下げて白文字を使う。

葉:画面いっぱいに写真を使っている。
木:誘目性を高めるために写真を全面に使っている。
森:誘目性を高める時は、背景のぼやけた写真を全面に使う。

葉:色の異なる縦文字をマーカーで囲っている。
木:特に伝えたい内容を明らかにするために他の文字と異なる配置をしている。
森:特に伝えたい内容は、左上に色を変えて縦に配置し、マーカーで囲う。

葉:境界線ギリギリに文字を配置している。
木:文字を大きくみせるために境界線ギリギリに文字を配置している。
森:文字を大きく見せたいときは、写真の境界線ギリギリに文字を配置する。

葉:白文字を使っている。
木:文字を大きく見せるために白い文字を使っている。
森:色の膨張効果を考慮して、大きく見せたい文字は白色にしている。

葉:小さい文字の行間が大きく空いている。
木:可読性を上げるために行間を大きく空けている。
森:小さい文字の可読性を上げるためには、行間を大きく空ける。

葉:優先度の低い情報(BSで放送中)が縦文字になっている。
木:周囲の情報を邪魔しないように行頭に縦文字に配置している。
森:優先度の低い情報は行頭に縦文字に配置する。

葉:検索窓を使っている。
木:何と検索すればいいかわかるように検索窓を使っている。
森:検索をさせたいときは、検索窓を使ったデザインにする。

葉:黒文字に青いマーカーを使っている。
木:文字色を他の変えるよりも悪目立ちせずに目立たせられる。
森:イメージカラーのマーカーを使うことで、悪目立ちせずに目立たせられる。

 

 

pin.it

葉:画面いっぱいに文字を配置している。
木:強烈なインパクトを与えるために画面いっぱいに文字を配置している。
森:強烈なインパクトを与えたいときは、画面いっぱいにゴシック体を配置する。

葉:黄色のフォントのみを使っている。
木:目立たせるために明度の高い黄色を使っている。
森:暗い場所に掲示するポスターの誘目性を高めるためには黄色を使う。

葉:社長の顔を大きく使っている。
木:安心感とインパクトを与えるために社長の顔を大胆に使っている。
森:緊張する人の笑顔を大きく使うと、安心感を与えられる上、インパクトもある。

居酒屋っぽいチラシのデザイン

今回は「居酒屋っぽいチラシ」に焦点を当ててデザインの観察をしていきます。前回同様に、「葉、木、森」の3ステップで観察していきます。

pin.it

葉:ひらがなカタカナ漢字には筆文字を使っている。
木:大衆の力強さを表すために太めの筆文字を使っている。
森:大衆のガヤガヤ感を出すには、全体的に筆文字を使う。

葉:区切りのラインにはかすれた筆を使ったデザインにしている。
木:筆文字との統一感を出すためにあしらいにも筆を使っている。
森:かすれた筆を使うと、線として悪目立ちしにくくなる。

葉:お得な内容の所のみ色を黄色にしている。
木:混雑した情報の中で、目立たせるために色を変えている。
森:少ないスペースで目立たせるためには、枠ごと色を変える。

葉:黄色枠の四隅を三角形にしている。
木:お得情報に重みを加えるために、四隅に図形を入れている。
森:目立たせるためには枠の四隅に図形を使い、枠に重みを付け加える。

葉:地図がある。
木:場所を分かりやすくするために地図を入れている。
森:地図を入れることで、住所を調べなくてもお客さんが寄りやすくなる。

葉:電話番号だけ周りより大きくなっている。
木:電話しやすくさせるために、電話番号を大きくしている。
森:居酒屋に電話する人は多いため、電話番号が目立つようにデザインしている。

葉:喫煙可能かどうか、カード決済可能かどうか記してある。
木:利用客を不安にさせないために情報を記してある。
森:居酒屋のチラシでは、喫煙可能か、またカード決済可能かどうかを記す。

葉:ラストオーダー時間が書いてある。
木:お客さんが何時までに行けばいいのかわかるように記してある。
森:飲食店のチラシを作るときは、ラストオーダーの時間を記す。

葉:黒を背景に使っている。
木:夜をイメージさせるために黒を使っている。
森:夜のイメージがある場合は、黒系を基調とした背景にする。

初めての模写(カーニング頑張ったよ編)

今日はデザインを模写していました。模写のルールとしては、「余白や用紙サイズの単位はmm」「線の太さや文字の大きさの単位はpt」「実物のポスター等を定規で測り、それを基に模写する」「フォントを持っていない場合は自作する」です。

今回特に苦労したのは、文字のカーニング(文字の間隔を調整すること)です。まずカーニングに使う「em」という相対的な単位を理解するところから始まりました。「em」の定義は「フォントのサイズを1とした場合の大きさ」です。例えばあるフォントのサイズが10 ptだとしたら、1 em= 10 ptであり、100 ptであれば1 em= 10 ptとなります。illustratorでは1/1000単位でemを調整できるので、0.04 emのカーニングをする場合は、入力欄に「40 (40/1000= 0.04 em)」と入力する必要があります。

さて、今回模写を通して気付いたことは、

  • 模写すると、ptと実際の大きさの感覚が身に付く。
  • 英語の中見出しの文字間は0.04 em、小見出しの文字間は0.08 em。
  • l, f, t, rといった縦長の小文字の前後の文字間は、全体の文字間の半分にする。
  • 大文字と小文字の間の文字間も、全体の文字間の半分にする。

まだまだ模写の途中なので気づくことはほかにもあると思いますが、ひとまず今回は上記のことを勉強できました。なお、上記の数値は僕個人が納得できた数値ですので、他の方から見ると異なる数値でカーニングするかもしれません。

高級感を感じるデザインの言語化

デザインの勉強(なぜそのように感じるのか、どんなテクニックを使っているのか)をしていきます。そのために、デザイン研究所著「デザインのミカタ」を参考に「葉」「木」「森」の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

葉:筆記体のみをメインにしている。
木:エレガントな線の流れを全面に押し出すために、筆記体のみをメインにしている。
森:エレガントな流れを出すには、ロゴを短文の筆記体のみにする。

葉:筆記体の下にセリフ体の短文がある。
木:形状の対比で筆記体を強調させるために、セリフ体を配置している。
森:筆記体を強調するには、セリフのあるフォントを添える。

「つまらない」の解決策

仕事がつまらない」「学業がつまらない」と感じた経験は誰にでもあるのではないでしょうか。僕は現在理系大学生で、絶賛研究に対してそのように感じています(笑)

しかし思い返してみれば、小中学生のときは勉強大好き人間だったので、今とは正反対でした。あの時と今で何が違うのか、またこれから働く中で、仕事を楽しめるようにするにはどうすればいいかを考えていこうと思います。

僕は今、前田高志著の「勝てるデザイン」という書籍を読んでいます。その中で「常に”童心”を持つことが大事」という旨の内容が記載されていました。具体的に言えば、仕事に対して遊び心を持つということです。例えば任天堂Wiiの広告であれば、「Wii」という文字と実物の写真等をレイアウトすれば、広告として最低限は機能します。しかしそれだけではつまらないと考えた著者は、京都サンガF.C.のチーム全員のMiiをつくり、それを広告としました。結果的にファンの間で話題となり、面白さと宣伝を両立した広告になったそうです。また前田さんは、デザインの型に必殺技のような名前をつけているそうです。それにより新たなデザインの知識を楽しく吸収できるのでしょう。

今の僕は何も楽しめていませんでした。デザインの勉強でさえも必死で、楽しむ余裕はありませんでした。折角勉強するなら、楽しんでやれればいいですし、恐らくその方が知識の吸収が早いような気がします。

昔の僕は、勉強をゲームのように楽しんでいたのを思い出しました。授業で新たな知識を覚えることは「レベルアップして新しい呪文を覚えた」と考えていましたし、宿題は「立ちはだかる雑魚モンスター」のようにとらえていました。定期テストは中ボス、入試はラスボスです。そのようにゲームに照らし合わせていたからこそ、難なく学校の勉強を乗り越えていたのかもしれません(高校になると、周りと比べた時の劣等感が強くなり、それどころではありませんでした)。

あの頃の自分は全能感にあふれ、どんなことでも楽しめると思っていました。少しだけ大人になって、すべてのことを上手く回せるわけではないと分かってはきましたが(特に人間関係が絡むもの)、何か現状を打破し、人生を楽しくする解決策を見つけられたような気がしています。まずは身の回りのものをゲーム化してみようと思います。

「人生ドラクエ化マニュアル」の本も読んでみようかな。