GODIVA 公式サイト

thum_godiva

GODIVAのオフィシャルサイトのリニューアルプロジェクトにデザイン担当で参加しました。

今回ほぼ全ページ兎村のデザインになります。私のデザイン案がそのままサイトになった部分が多いので、少し解説してみようと思います。

GODIVA公式サイト:https://www.godiva.co.jp

 

WEBのデザインのポイント

初回のヒアリングで「リピーターがとても多い」「企業が贈り物に利用する」「固定のファンがいる」というようなお話を伺ったので、「何度使っても何度見てもストレスのない、品は良いけど難しくないサイトデザイン」に着地することをゴールにしました。動いてかっこいい!レイアウトが斬新!ではなく、すっと指で押したくなる、迷わず考えずにサイト内を色々見て回りたくなる。そんなデザイン設計にしています。

godiva_02

 

何度かゴディバの店舗に実際にお客さんとして足を運んで、その中で、どういう客層の方がどういう買い方をしているかなどを見てペルソナをイメージしていきました。かなり幅広い層のお客様が買い物をしていると分かり、どの世代でも違和感のないシンプルさを目指しました。「表紙が厚い落ち着いたチョコレートの書籍・図鑑」のようなデザイン。そんなイメージでしょうか。

 

godiva_03

またチョコレートは似ている商品も多いことに気付き、なるべくサムネイルやアイコンを表示して、ぱっと見ただけでどんな商品の内容が始まるかをイメージ出来るように工夫しました。実際にサムネイルはリニューアル前よりかなり増えています。ゴディバは商品写真がとても美しいので、写真のチカラを借りました。写真が良ければサイトのデザインはどんどん引き算が出来ます。そして安心感と品が生まれます。もともと写真があるので、デザイナーとして幸福でした。

サムネイルが並ぶイメージ:https://www.godiva.co.jp/items/

 

godiva_04
何度か店舗へ通う中で、ショーケースの中のゴールドコレクションやトリュフはとくに美しく見えました。店頭では箱だけではなく単品で並べて販売しているので、好みのものを選べるのに楽しみがあります。ゴディバの歴史も勉強したのですが、やはりトリュフにブランドとしてのアイデンティティを感じます。「チョコレート」という普遍的なイメージは茶系で間違いないなと実感できたので、ベース色は最もゴディバらしいカカオ香るショコラのような茶色を作りました。アクセントとして、ロゴの品の良いゴールドも使っています。キーカラーに決めました。

 

WEBの技術のポイント

今回、PCとスマートフォンをレスポンシブデザインではなく、きちんとサイトを作り分けて情報整理出来たので、かなり細かくそれぞれのページを作り込めました。

godiva_05

レスポンシブデザインは小さなサイトで情報が少ない場合は良いのですが、商品数が多く情報もきちんと見せたい場合は難しいなと最近は思っています。なので可能な場合は分ける方が利用者には使いやすいだろうなと思っています。ゴディバであればブランドがもつ認知度がもともと高いためSEOでも上位で表示出来るだろうと想像できたので、クリックしやすい&タップしやすいことを優位に考えました。おかげでどのページも無理なくデザインを入れられました。シンプルに読みやすくしようとする時、ある程度自由にデザインできるのは有り難いです。

コーダーさんがメニューなど私が静的に作ったデザインに動きを付けてくれましたが、派手ではないけど分かりやすく柔らかく動くので、性別や年代に関係なく使いやすくなっていました。

私はWEBとは「図鑑や新聞のようなもの」と捉えていて、シンプルで読みやすいことが最重要と考えており、デザインの基本になります。心地よく静止しつつ、メニューやアイコン、ボタン等に小さなアクションがあり感覚で遷移が分かりやすく感じるものが好きです。「静>動」このバランスがなるべく崩れないようにしています。

 

オンラインショップのポイント

商品名が長くやや難しいカタカナも多いので、サムネイルをとくにキレイに見えるようにレイアウトにしました。実際に店舗で商品を見ていると、WEBでサムネイルで商品の印象を覚えておくだけでも買えそうだなと思いました。ゴディバは店舗の接客がとても丁寧なので、質問をすると店員さんがなんでも対応して下さります。「青い箱の〜」や「丸い箱に8個チョコが入っているような〜」という印象だけでも、的確に商品を勧めてくださいました。

オンラインショップ:http://www.godiva.co.jp/onlineshop/

 

オンラインストアと実店舗のどちらも利用する方が多いと思ったので、サムネイルは大きめで見やすくレイアウトし、印象が残ってなんとなく記憶出来るように心がけました。こちらも、もともと写真がきれいなのでカタログと合わせることも難しくなく、デザインしやすかったです。

godiva_06

個人的に気に入っているのはカテゴリの項目に分かりやすいアイコンを付けることができたところです。「チョコレート」と呼ぶとトリュフをイメージする人、板チョコをイメージする人、実際にボールで溶かして調理している所をイメージする人、かなりひとによって幅広くイメージを作ってしまうので、アイコンを並べることで、なるべくユーザーの言葉に対してのイメージを揃えることができるかなと思いました。

 

アイコンの統一感

アイコンはすべてグラフィックデザイナーである八木原に作成してもらいまいした。とても細かいコトなのですが、サイトで使うアイコンで統一感を出したいとき、グラフィックデザイナーの方に願いするとデータがキレイで際が揃います。ロゴのデザイン技術やセオリーがサイト内のアイコン制作には適しているので、最近は分業しています。

godiva_07

 

店舗検索の地図のすばらしさ

こちらのみ、今回のリニューアルの前にすでに公開していました。一緒に制作していたランチェスターさんに地図のプログラムがあり、私はパーツや全体のデザインをお手伝いさせていただいたのですが、PCからもスマートフォンからも位置情報を拾い使いやすくなっています。

現在地を拾い、すぐに近いお店を教えてくれる。店舗マークをタップすれば営業時間や店舗サービスが分かる。シンプルだけど知りたい情報はすぐに見つかるので実際に自分で使っていても心地よさがあります。今回のゴディバのサイトの中でも特にお気に入りの機能です。

店舗検索:https://www.godiva.co.jp/boutique/

とても気持ち良い使い勝手なので是非上記のURLで試していただけますとうれしいです。

godiva_08

 


 

今回、私の得意なデザインの考え方がぴったりはまるサイトだったので、実際に何度も店舗へいったり、商品を自分で買ってみたり、ゴディバに関する書籍(商品も経営に関しても)を色々読んでみたり、勉強ができました。本国のベルギーもとても好きな国で旅で何度か訪れており、空気感や食べ物のおいしさを覚えているので、記憶がふわふわ漂いました。

godiva_01

楽しんでチョコレートの時間を過ごす中で、商品だけではなく歴史や経営戦略も含め、ゴディバのファンになっていきました。好きになると、どうやってみんなに好きという気持ちの入った情報を届けることが出来るだろう?というモチベーションが維持でき、自分が「作りたいサイト」ではなく、自分が「見たいサイト・読みたいサイト」がイメージできました。

ゴディバのリニューアル作業、とても楽しく幸せな時間でした。好物の美味しいチョコレートとドリップしたてのコーヒーを楽しみながら作業できるという最高のお仕事でした。お誘いいただいたチームのみなさまに感謝いたします。

 

GODIVA公式サイト:https://www.godiva.co.jp

 


 

CLIENT:株式会社ランチェスター
WEB DESIGN:兎村彩野(TO2KAKU)
ICON DESIGN:八木原豊(TO2KAKU)

OTHER WORKS

  • BE A SAMSONITE DESIGNER “JAPAN BY AYANO YAGIHARA”