架空のドーナツ屋 その1（ロゴ+バナー+ショップカード）
今回の課題
今回は架空のドーナツ屋を課題として、ロゴ、バナー、ショップカードをセットで作ってもらいました。課題内容は以下の通りです。
架空のドーナツ屋 新規オープン
店名：D’s doughnut（ディーズ・ドーナツ）
中野にあるテイクアウト専門のドーナツ屋（カフェではない）
国内産の材料にこだわった健康志向かつ美味しいドーナツ。
基本のオーソドックスなドーナツは1個180円。
※ミスドのオールドファッションが120円なので、ちょっと割高感あり
元々はキッチンカーで紀尾井町などのオフィス街に出張販売していた店がついに路面店に。
- 材料は全て国内産
- 北海道の牧場から直送のミルクドーナツが人気
- 営業時間は11:00〜20:00 水曜定休
- 3坪くらいの販売カウンターのみ
- オープン前、現在店舗工事中なので店構えの写真は撮れない
- ランチタイム、カフェタイムにテイクアウトしてほしい
- 20代、30代の女性が主なターゲット層
制作物
- ロゴマーク
- バナー画像（300×250px）
- ショップカード（91×55mm 両面）
という内容でした。制作物にはキービジュアルを含めて応用する方法でも良いよ、という条件つきです。ちょっとボリュームがありますね。
ロゴマーク
まずはロゴマーク。実はこの生徒さんからは3案の提案があったのですが、その中から本人が推してきた案を採用しました。悩んで悩んで、頑張って作ってくれました。
アイディアは悪くないです。機械を使っての大量生産ではないいう雰囲気を狙いたい、手作り感を出したい、という気持ちはよくわかります。実はこれは手書き風のフォントなのですが、フォントをそのまま使うのではオリジナリティも出ないので、せっかくだからdoughnutの綴りの「o」の文字をドーナツにしちゃえ、という発想もよくわかります。アイディアまではOK。
で、直してもらったのは非常にシンプルな理由です。このマークをバナーやショップカードに使った場合、ほとんどの場合は「o」の部分がつぶれて、ただの黒いシルエット、太字の「o」の文字と大差ない状態になってしまいます。せっかくですから頑張って作ったこのユル系のドーナツを大きくしっかり出しましょう、という修正です。その指摘をしたところ、レイアウトもバランス取り直してくれた、という変更でした。
うん、これならたぶん潰れないですね。下に添えたsince2000は潰れちゃいそうですけど、まぁこれは用途によってつけたり外したり使い分けて良さそうですね。
バナー
次に、上記のロゴを使ったバナー画像。これも頑張って作ってくれました。惜しい！いいとこまで出来てるよ、という状態なのですが、ちょっとだけ修正。ちなみに、初案のほうを見ていただくと、上記のロゴマークの解説に出てきた「o」が潰れるってどういうことか見ていただけるかと思います。
背景が白、文字が黒だとものすごくコントラストが強いとともに無機質な雰囲気になりますね。ドーナツは口に入れるものなので、ほんの少しだけ地色にクリーム色を追加するだけで柔らかいイメージになりました。
それに追加して、ぜひ皆さんに身につけていただきたいのが文字間です。専門用語でいうとトラッキングと呼びます。課題のドーナツ屋さんは一般的なドーナツより少し高級です。一般的に文字やレイアウトの密度を高めるとポップかつ賑やかに、密度を低くすると高級感につながりやすくなります。さらに今回、以下の画像をよーく見てください。
キャッチコピーになる「NEWOPEN」の部分、修正後のほうが文字サイズは一回り小さくなっていますが「文字＋隙間」に使われている空間は一緒なんですね。つまり情報に対して与えている空間は一緒、ということです。このように考えてあげれば、文字を小さく隙間を広げることで、ボリュームを落とすことなくゆったり高級な方向にすることができます。
ショップカード
ショップカードも2案作ってくれたのですが、そのうちの1案をご紹介。
ロゴマークのところで述べた通り「o」の部分がつぶれちゃって、ただの太字の「o」になっちゃうって意味、わかっていただけるでしょうか？
このように、デザインは「どこでどう使われるか」までをしっかり考慮して作らなければいけません。今回は大きさ的な問題だけでした。色はたまたま黒を提案してくれたので問題ありませんでしたが、もし色を使った場合は画面（光）なのか印刷（インク）なのか、というのも考えないといけませんね。
Web制作の仕事には、デザインとエンジニアリングの両面があります。ここで紹介しているのはデザインの部分になりますが、用途・使われる場面を考えて作るのはデザインもエンジニアリングも大事な考え方ですよ。