Advertisement

cafetrend2012_top

 

カフェやレストランなど、飲食店のWebサイトを見るときに、なにを探しているでしょう。ユーザーの求めている情報をうまく取り入れた、Webサイト制作トレンド、ポイントを意識することで、より親しみやすいWebサイトを作りましょう。

 

 

海外デザインブログDesignModo.comで、料理を得意とするカフェやレストランのWebサイト制作トレンド5つをまとめたエントリー「Resturant Web Design: 40 Yummy Cafe & Restraurant Websites and Trends」が公開されていたので、今回はご紹介します。

 

 

今後ウェブデザインを制作予定の方は、参考にしてみてはいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

ユーザーの求めていることは?

 

カフェやレストランのWebサイトを、閲覧する環境はさまざまです。まずはじめに、ユーザーはなにを探しているでしょうか。いくつかのポイントに分けてみました。

 

 

[dropcap2]1[/dropcap2]

メニュー

 

これまでによく利用されていた、ダウンロード可能なPDFファイルなどではなく、携帯やスマートフォン表示にも対応することで、より多くのユーザーの関心を惹きましょう。

 

 

[dropcap2]2[/dropcap2]

クーポン、ハッピーアワーなどのスペシャルオファー

 

はじめてのユーザーが、お店を訪れるきっかけにもなるスペシャルオファー。Twitter限定クーポンや、facebookプロモーションなども効果的かもしれません。

 

 

[dropcap2]3[/dropcap2]

オンライン予約サービス

 

記念日の予約を自宅のパソコンでしたり、人気店に向かう途中でスマートフォンで予約したりと、ユーザーにとってうれしいサービス。

 

 

[dropcap2]4[/dropcap2]

営業時間

 

せっかく訪れたお店が閉まっていては、どうしようもありません。

 

 

[dropcap2]5[/dropcap2]

お問い合わせ先

 

メールによるお問い合わせフォールだけでなく、電話番号、住所なども一緒に記載しておきましょう。特にGoogle Mapに対応していることで、よりユーザーにも嬉しいですね。

 

 

 

 

飲食店のWebデザイン制作トレンド2012年度まとめ

 

 

[dropcap1]1[/dropcap1]

ビジュアルを意識した、フルスクリーンWebデザイン

 

 

[fancy_box]いくつかのカフェやレストランでは、料理などを撮影した、インパクトのあるイメージ写真を利用しています。美味しそうな料理はもちろん、雰囲気のある店内インテリア、サービスや特別オファーなどをスライドショーなどで表示しても良いかもしれません。[/fancy_box]

 

 

Boarshead

美味しそうな料理のイメージ写真を利用しているWebサイトの一例。色使いがとても鮮やかですね。

boarshead

 

 

Emplellon

フルスクリーンで表示される、アート作品のような料理は、見ているだけでもユーザーを楽しませてくれます。

empellon

 

 

[list type=”star”][li]フルスクリーン写真を利用した、印象的なWebサイトデザイン50個まとめ[/li]

[li] ダイナミックな迫力が◎、フルスクリーンWebデザイン30個まとめ[/li]

[li]自分だけの作品集、ポートフォリオに使えるWordPressテンプレート30個まとめ[/li][/list]

 

 

 

 

[dropcap1]2[/dropcap1]

さまざまな環境に対応する、レスポンシブWebデザイン

 

 

[fancy_box]デスクトップパソコンから表示したり、スマートフォンで閲覧したりと、あらゆるユーザーに対応する方法として、レスポンシブWebデザインがあります。またデバイスに応じてナビゲーションメニューなど、必要な情報をシンプル化してくれる点もポイントです。[/fancy_box]

 

 

the Ybor Bunker

背景にフルスクリーン画像を利用しながらも、表示画面サイズに応じてナビゲーションメニューが最適化されるようになっています。

yborbunker

 

 

[list type=”star”] [li] レスポンシブWebデザインのメリット、デメリット比較まとめ[/li]

[li]確認しておきたい、ウェブデザイントレンド8個まとめ 2012年後半[/li]

[li]レスポンシブWebデザイン対応、シンプル系WordPressテーマ素材20個まとめ[/li][/list]

 

 

 

 

[dropcap1]3[/dropcap1]

誰にでも分かる、シンプルな操作性

 

 

[fancy_box]カフェやレストランだけに限らず、Webサイトの使いやすさ「ユーサビリティー」は、どのサイトにも必要なファクターのひとつです。ダウンロード型PDFメニューや、ページの読み込み速度が遅くなるフラッシュなどは、できるだけ避けましょう。

 

またシンプルな文章を心がけることで、よりユーザーに伝わりやすくなります。ユーザーは、長い作文のようなコンテンツを望んでいる訳ではありません。一緒にイメージ写真を利用することで、より効果的な伝え方ができるのではないでしょうか。[/fancy_box]

 

 

Careit Urban Deli

ファーストビュー部分に、お店の一押し商品やサービスをスライドショーで表示しています。またサイドバーには営業時間や、イベント情報などが一目で確認することができます。

careit

 

 

 

 

[dropcap1]4[/dropcap1]

ショッピングサイトを導入して、顧客ユーザーを増やそう

 

 

[fancy_box]お店に興味を持ったユーザーが増えてくると、オンライン販売されているかどうか、全国発送はしているのか、といった要望が増えてくることも考えられます。WordPressプラグインなどを利用することで、ホームページにショッピングサイトを導入することも、比較的簡単になっています。これを機会に検討してみてはいかがでしょう。[/fancy_box]

 

 

 Marie Catribs

インパクトのあるイメージスライダーが印象的で、クッキーやブラウニー、ジャムなどをオンライン販売しています。

mariecatribs

 

 

 

 

[dropcap1]5[/dropcap1]

ソーシャルメディアを有効活用しよう

 

 

[fancy_box]facebookの日本でのユーザー数が1,600万人を超えた今、ソーシャルメディアの利用が、ユーザーを直接お店に呼び込むツールとなります。YouTubeで店内の様子を撮影したり、PinterestやInstagramでお店のメニューを紹介したり、Twitterによる告知などをしてみましょう。[/fancy_box]

 

 

Poutine La Banquise

トップページ部分にfacebookとTwitterへ招待するバナーをレイアウトしたレストランサイト。フォローしているユーザー限定割引、プレゼントなど、より心のこもったサービスを展開しています。

labanquise

 

 

 

美味しそうな、カフェやレストランの参考Webデザインまとめ

 

 

色鮮やかで、思わず行ってみたくなる、そんな飲食関連Webデザインをまとめていますので、デザインアイデアの参考にいかがでしょう。

 

Restaurante Couve e Flor

restaurantecouveflor

 

 

 

La Maddalena

lamaddalena

 

 

 

Fedora, West Village, New York City

fedoranyc

 

 

 

Caravan

caravanonexmouth

 

 

 

Auberge de I’ill

auberge-de

 

 

 

Mexican Restraurant London

benitos-hat

 

 

 

Au Petit Panisse

aupetitpanisse

 

 

 

Harbour Sixty Steakhouse

※ 音が出ますので、ご注意ください。

harboursixty

 

 

 

Hoddows Gastwerk

hoddows-gastwerk

 

 

 

Mellow Mushroom

mellowmushroom

 

 

 

Vai Restaurant

vairestaurant

 

 

 

Park Grill Chicago

parkgrillchicago

 

 

 

Zizzi Ristorante

zizzi

 

 

 

Wendy’s

wendys

 

 

 

Jungsik

jungsik

 

 

参照元リンク : Restaurant Web Designs: 40 Yummy Cafe & Restaurant Websites and Trends – DesignModo.com