Webデザイナー独学入門
カフェのWebサイトのトンマナを決めるために集めた既存事例
カフェのWebサイトを制作すると想定して、して、トーン＆マナーを決めるための既存事例を集めてみました。 検索に使用したキーワードは「カフェ、バー、レストラン、コーヒー」等です。
クライアントに説明しやすいように、各事例に名前を付けておくのも良いと思います。
トンマナ・プロフェッショナル 1
本格的なコーヒーショップ、専門的なバリスタ、といった雰囲気が伝わってくるデザインです。 暗い色調が多いので、少し敷居の高さがあります。
トンマナ・プロフェッショナル 2
こちらも商品へのこだわりが伝わってきます。ホワイトスペース（余白）を多く取ることで、落ち着いた雰囲気を醸し出しています。
トンマナ・ナチュラル 1
白を貴重に自然素材の色をうまく強調しています。 オーガニックな素材を使用していることが文章を読まなくても想像できます。
トンマナ・ナチュラル 2
こちらも素材を強調しています。商品はもちろんメインに配置していますが、その商品の構成要素であるミルクや卵を自然に配置することで「手作り」や「安全」のような雰囲気をプラスしています。
トンマナ・ホーム
街の小さなカフェであることが想像できます。おそらく店内には手作りの装飾やPOPなどが設置されていることでしょう。1杯のコーヒーにも丁寧さを感じます。
トンマナ・フード 1
食材ではなく料理にフォーカスしています。少し「トンマナ・ナチュラル」に似ていますが、「お腹いっぱい食べられる」という状況が想像できますので、微妙にコンセプトが異なっています。
トンマナ・フード 2
こちらも料理にフォーカスしていますが「トンマナ・フード 1」よりも高級感があり、年齢層が高いかもしれません。写真と書体の選び方によって画面から伝わってくる印象が変わっています。
トンマナ・キュート 1
いわゆる「かわいい」系です。ピンクのアクセントカラーが効いていますし、画面中央の波線がより可愛らしさを強調します。柔らかい雰囲気を出すのに波線はとても有効です。
トンマナ・キュート 2
「かわいい」よりも「美しい」に近いでしょうか。水彩画のような絵柄とクラシックな書体の選び方で上品さを出しています。
トンマナ・チープ
低価格帯であることがひと目で伝わってきます。とにかく安くお腹いっぱいになる、といった雰囲気です。チェーン展開しているファーストフード店が想像できます。
トンマナ・モダン
シンプルな画面構成で、少し異色なカフェの雰囲気を演出しています。服のブランドのようにも見えますので、カフェというよりも、コーヒー豆ブランドのWebサイトなどに良いかもしれません。
トンマナ・アート
「トンマナ・モダン」よりもさらに奇抜なデザイン。先進的なことを展開するカフェなどにはハマるかもしれません。個性的なオーナーであることが想像できます。
Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座
レクチャーの数: 236 ⁄ 19.5 時間 ⁄ 初級
ウェブサイトの企画・設計、Sketchを使ったデザイン、HTML ⁄ CSS マークアップ、モバイル最適化など、Webデザインに挑戦したい人が一気通貫して学べる総合学習コース Shunsuke Sawada
¥ 1,400
¥ 24,000