2010年9月3日 
初めて訪れたウェブサイト、ホームページの第一印象は何によって決められるのでしょうか。
情報など何も知らない状態であれば、デザインや色使いなどが重要なポイントのひとつになります。
温かい色調のカラーリングは大地など自然を表現し、カラフルなみどり色はフレッシュで新鮮な印象を与えます。
また土などのアース色はリラックスした、フレンドリーな雰囲気を演出することができます。
海外デザインブログSmashing Magazineで、色使いがとてもおしゃれなレストラン、飲食系ウェブサイトを20個まとめたショーケースエントリー「Showcase of Appetiszing Restaurant Websites」が公開されていたので、今回はご紹介します。
ウェブサイトレイアウトはもちろん、配色なども参考にしていただくとよいかもしれません。
詳細は以下から。
シンプルな色使いがおしゃれなレストラン、飲食系ウェブサイトまとめ
グリッドラインを利用したシンプルなモダンデザインのウェブデザインのひとつ。
でかでかとレイアウトされた太字ロゴのカラーリングもきれいで、ユニークなメニューバーが特長。
水平方向にスクロールすることでコンテンツを分けている1ページ完結型ウェブサイト。
ファブリック調のテクスチャとイメージ写真のレイアウトなど参考になりそうです。
フルスクリーンでレイアウトされたイメージ写真にオーバーサイズのヘッダーデザイン、カラーリングが絶妙な組み合わせ。
個人的にも配色が参考になるので、メモとして。
こちらもフルスクリーンのイメージ写真が効果的に利用されている、タコスなどのメキシカン料理のウェブサイト。
フレッシュな印象を与えてくれるみどり色がとてもきれいで、利用されているシンプルなフォントもかわいいですよ。
最近よくグラフィックデザインなどにも利用されている、ボケ(英: Bokeh）デザインをフラッシュアニメーションで再現したユニークなウェブサイト。
Kateさんが手作り料理をケータリングで持ってきてくれるサービスのウェブサイト。
わかりやすいシンプルなメニューはもちろん、青色を基調とした紙テクスチャ背景の手作り感が、フレンドリーな印象を与えてくれます。
ギャラリーで紹介されている料理がとてもおいしそうなんですよ。
土色のアース色をメインにデザインされた落ち着いた印象、レトロなビール柄だけを集めたヘッダーデザインが程よいハンドクラフト的なイメージに仕上げています。
またセリフフォントを大きくレイアウトすることで、レトロデザインを表現しています。
ビールリストなんかは、とても細かくレイアウトされており一見の価値ですよ。
夜間をメインに営業しているレストランのイメージをダーク系デザインで表現したウェブサイトのひとつ。
ヘッダー部分には淡いグラデーションを利用することで、立体感をさらに高めています。
バーなどのホームページデザインの参考になりそうです。
巨大なヘッダーがインパクト大なピザなども作っているベーカリーのウェブサイト。
グリッドを利用することで余白スペースを考慮した、シンプルでおしゃれな印象。
メニューをクリックするたびにマスコット？が動きます、。
オーストラリアにある日本食レストランのウェブサイト、全面フラッシュでデザインされており、ダイナミックな動きが魅力的。
ヘッダー部分にオーバーサイズのイメージ写真をぼかして利用することで、特に大画面ディスプレイで見たときは奥行き感を演出しているウェブサイト。
少しかすれたグランジデザインを取り入れることで、ぬくもりのある印象を与えることが可能。
チョコレートブラウンの色合いがエレガントな印象のレストラン用ウェブサイト。
ヘッダー部分に大きなサイズの写真スライダーを利用し、動画も同時に流れていたりもします。
現在仮運営中のウェブサイトとなりますが、質感の高い灰色の背景テクスチャを利用することで、手前のコーヒーが立体的に表現されています。
また太字のシンプルフォントとの相性もとてもよく、アップデートが楽しみなサイト。
手書きのユーモアたっぷりなイラストがアクセントになった、アースカラーがやさしい印象のウェブサイトデザインのひとつ。
フッター部分にレイアウトされている紐をひっぱると、、。
実際に働いている従業員のさわやかな笑顔をそのままウェブサイトに利用し、スライダーを使って効果的に魅せたウェブデザイン。
配色がとてもお気に入りなので、メモとしてエントリー。
最後にもうひとつ、、
こちらはレストランなどの飲食店ではありませんが、「自分だけのビールをつくる」キットや材料を販売しているオンラインショップ。
落ち着いた色使いに、グリッドを利用したシンプルなレイアウト、そして太字のフォントがクールなデザイン。
以前飲食店ウェブサイトを以下のエントリーでまとめていますので、よろしかったらこちらも参考にどうぞ。
美味しそうなレストランなど飲食系ウェブサイトデザイン50個まとめ
[参照元 : Showcase of Appetizing Restaurant Websites - Smashing Magazine]
