こんにちは、CAKE.TOKYOチームの平野です。 やっと、やっと、みなさんにお見せすることができました！このたび、今見ていただいている「CAKE.TOKYO」のウェブサイトをフルリニューアルしました！
いざ新しくなってしまうと、どこが変わったのか忘れてしまうもの。今回は、リニューアルに際してビフォーのデザイン画面と、今回のデザインを担当してもらったデザイナーの井手口の言葉も織り交ぜながら、リニューアルの記事とさせていただきます。
何が変わったのか？
これが、ビフォーのトップ画面(↓)。クリーム色で統一されたシンプルなデザインです。特集は上に、それ以外のインタビュー記事は下に配置されるようになっています。
そしてこれが、リニューアルしたトップ画面(↓)。かなり画像幅を大きく取って、ファーストビューで「シズル感」のある画像が見えるデザインになりました。
こちらは、ビフォーの記事詳細デザイン(↓)。
そして、こちらがリニューアルバージョン(↓)。ウェブで記事を読むときにパッと目に入る「アイキャッチ画像」と「タイトル」が全面に出るよう、かなり厳密に計算されたデザインになっています。フォントも「游明朝」フォントを使用、どっしりと構えた落ち着きのあるタイトルになりました。
他にも変更した箇所はありますが、、ロゴも実は変更しています。これまでメディア名は、ドメインと同じ「cake.tokyo」でしたが、メディア名であることを示すために、大文字のロゴ「CAKE.TOKYO」に変更してもらいました。読み方は変わらず、ケーキドットトーキョーです。
どうしてリニューアルをしたのか？
これまで、「自由が丘」や「中目黒・代官山」などの場所区切りで特集を組んできたので、ヘッダーの「特集」にあたる箇所が「CITY」になっていました。ただ最近は『成城石井』や『無印良品』などの企業の商品開発の方に話を聞くものや、他の企業とコラボしてインタビューする特集など、「場所」区切りだけに囚われない特集を増やしていく予定。
そうなると、「CITY」でずっと進めると読者の方に誤解を与えてしまうかもしれない。 他にもいろいろありますが、自分がこのメディアを担当して半年が経とうとしているこのタイミングで一新したいという想いから、リニューアルがスタートしました。
デザインをするときに心がけたこと
ここからは、井手口さんに、リニューアルに際して心がけたことを聞いてみました。
井手口「CAKE.TOKYO」が他のメディアと一番違う点が、このキュレーションメディア全盛期において、きちんと第一次情報に触れて伝えようとしていること。それは、お菓子の生産者や関係者にまつわるストーリーを丁寧にお伝えしていくということ。それをデザインで最大化できたらいいな、という思いでスタートしました。
1）画像
井手口まずは、お菓子のシズル感、『おいしそう』というイメージをダイレクトに表現するために、画像をできるだけ大きく見やすいサイズ感を検証してレイアウトの骨格を制作しました。
ちなみに、今回のリニューアルに際して、手動でアップデート画像を総入れ替えしました…。初期の頃よく使っていた「縦長画像」を正方形サイズに変更したり、横長画像を指定サイズにトリミングしてアップしたりと、実は細かいところまで調整をしています。
2）テキスト
井手口そして次に、テキストをゆったりとしたリズムで読めるよう配慮しながら調整していきました。
初期段階での「どれが一番スマホで読みやすい行間か？」という問答は、「InVision」というプロトタイピングツールで何度も検証しました。スマホデバイスからの閲覧が多く占めているため、「スラスラと読める」かつ「詰まって見えない」かどうかを、何度も井手口さんと相談して、他のメンバーにも見てもらいました。
実はデザイン面で大きく変わったのが、サイトトップの「気になるワード」の箇所。 実はこれまでのデザインでは、「検索する」ことができませんでした。なので、記事を検索するためには、Googleで「cake.tokyo ●●」で検索するしかありませんでした。今回（現段階で）新機能として追加したのが、この「気になるワード」です。
サイトトップにアクセスしたときに、ある程度こちら側で誘導する項目として「お菓子の種類」「場所」区切りでいくつかワードを設定しています。気になるワードをクリックすると、それにひもづく記事一覧ページに飛ぶという仕様です。
検索だけでは見つけられなかった、“思ってもいなかった記事”に出会えたらいいな、という想いを込めています。
最後に
リニューアルに際してかかった時間は、デザインとコーディング含めて約2ヶ月間。ギリギリまで細かい調整を重ねて、無事リリースを迎えることができました。今回のスクリーンショットはPCのものを使用しましたが、スマホから見てもきれいなレイアウトになるよう考えられています。
他にも、「誰がこの記事を書いたのか」をより明確にするために、詳細記事の上部にプロフィールを入れたり、雑誌のデザインをウェブに少し取り入れたりと、シンプルな中にいろいろ詰め込んでいるので、ぜひいろいろ見てみてください。
井手口ただ、今回のリニューアルで全てを表現しきれてたとは思っていないです。お菓子作りも日々の丁寧な仕事一つ一つで成り立っているように、生まれ変わった『CAKE.TOKYO』も、日々改善を重ね、知見を貯め、読者とメディアのよりよいコミュニケーションとは何なのか、それを体現するデザインとは何なのかを探りながら、成長していきたいと思っています。
これからも、メディアのタグラインである「おいしいには、ストーリーがある」を体現するような記事をどんどん公開していく予定です。よろしくお願いします！
ちなみに、CAKE.TOKYOのメディアカードも到着しました！ 取材先に行くときに、自分たちはどんなメディアなのかをパッと説明するものがなかったので、ちょうどいい機会だと考えて、つくりました。
活版印刷で小口染めをしているため、かなり分厚いです。デザインがシンプルなだけに、インパクトが大きいです！ 取材先の方や、自分と会った人にお渡しする予定です。お楽しみに！
