楽しいイラストで、美味しさとわくわく感を与えるポータルサイトに。
小さなアイデアで細部にまでこだわりを。

全国展開する大手チェーンのファミレス・ファーストフード情報を扱うポータルサイトです。大規模サイトならではの厳格なガイドラインに準拠し、独自のイラストで楽しさと親しみやすさを持たせ、flashにも高い更新性を持たせました。細部にまでこだわり、イラストの世界観を随所で盛り込んでいます。

クライアント概要
会社名
株式会社ぐるなび
事業内容
パソコン・携帯電話などによる飲食店のインターネット検索サービスその他関連する事業
本社
東京都千代田区丸の内三丁目4番1号

WORKFLOW 01 - 初期提案

機能性と楽しさ、わくわく感

現サイトは2005年以来のリニューアルとのことで、デザインの古さ、楽しさの欠如などが課題でした。そこで、イラスト/キャラクターをうまく使いこなす制作会社ということで、弊社のこれまでの制作実績からご判断いただき、指名発注を受けました。

まず取り組んだのはイラスト/キャラクターの世界観のブレストと、ポータルサイトとしての機能性を担保したデザインの検討でした。イラストを使わず、これまでの食べ物写真によるラフデザインも示したことで、イラスト/キャラクターを用いたリニューアルの姿をよりリアルに感じていただけました。

またポータルサイトならではの、厳格なガイドラインがあり、その準拠が課題でした。ターゲットブラウザの規定、横幅や画像サイズの指定など、多岐にわたっていました。

機能性と楽しさ、わくわく感
クライアント・コミュニケーション

これまでにも東京のクライアント様案件を多数手がけており、適宜、必要な資料の作成や電話などのコミュニケーションなど、遠隔地ならではコミュニケーション齟齬にならないように配慮しました。

WORKFLOW 02 - 企画設計

オリジナルキャラクター
初期ラフ
キャラクター /
ファミレス・ファーストフードを代表する食べ物をモチーフ

キャラクターはファミレス・ファーストフードを代表する食べ物、スパゲッティ、ハンバーグ、オムライスなど当初は5つほどだけでしたが、より楽しさを演出するため、最終的に13ものキャラクターを作成するに至りました。またキャラクターはサイトの顔としてではなく、楽しい、美味しい雰囲気を醸成するためのものとし、目立ちすぎないように色味/トーンを落として、ポータルサイトの雰囲気を壊さないように配慮しています。





文字サイズ・ブロック分け / ポータルサイトの機能性を損なわないような分かりやすさ

タイトルや見出し、本文は標準的な12pxから14px以上の大きな文字サイズを使用しています。ポータルサイトの機能性、情報の一覧や整理を損なわず、かつ文字情報だけでも読みやすいような配慮をしています。またブロック分けを明確にし、それぞれの機能や役割で整理しています。分かりやすいサイトを意識して全体のデザインを構成しています。

WORKFLOW 03 - 制作開発

ポテトとパフェのカップル。実際の利用シーンをキャラクターで楽しく説明。
一見単純になりがちなページトップボタンをコーヒーのGIFアニメーションで表現。小さなアイデアで楽しい雰囲気づくりを。
楽しさと使いやすさの両立を

キャラクターを使用してのサイトデザインは、サイト内での説明がおろそかになりがちで、使いやすさが損なわれるケースが多々ありますが、今回は、キャラクターをただ配置するだけでなく、コンテンツ内容に合わせてキャラクターを使用したり、ボタンの表現を極力シンプル化することでポータルサイトとしての楽しさと、お店検索の使いやすさの両立を図りました。

社内イラストレーターとデザイナーの連携

社内でキャラクターイラストを制作する利点は、イラスト担当とディレクター・デザイナーとの連携がしやすいことです。 発案から制作過程において、メンバー同士が密な意見交換を行うことで、サイトのコンセプトを踏まえたキャラクター制作がスムーズに行えました。

ガイドラインに準拠した全体デザイン

ロゴの使用規定にはじまり、一般的なHTMLの記述、あるいはターゲットブラウザ、flashターゲット、テキストリンクカラー、グリッドシステムにおける幅サイズ、使用フォントなどかなり細かく規定されていました。大規模かつ多人数がアクセスするポータルサイトならではの規定として、最低限守るルールということでコーディングの際には細心の注意を払いました。

高い更新性を担保したflashバナー

キャンペーンやクーポン情報を素早く正確に配信できるように、flashバナー部分は外部のxmlファイルを読み込み、簡単にクライアント様にて更新できるような仕組みを取り入れています。全体の掲載数や表示位置などは、更新の手間を軽減するために自動で計算して表示し、更新のわずらわしさの軽減も行っています。

WORKFLOW 04 - 公開運用

クライアント様にて公開・運用・更新されています。

全体レビュー (獲得成果)

効果測定中です。