bageleeのリニューアルデザインが出来上がるまで

この度、bageleeは2019年1月11日にフルリニューアルを行いました！

以前のデザインもヘッダー、コンテンツ、フッターと要素が綺麗にまとめられており、見やすくわかりやすい形に構成されていました。今回のリニューアルしたデザインにはさらに遊び心やメディアらしさといったエッセンスを加えています。

リニューアルに向けて

リニューアルの構想を決めたのは2018年5月ごろ。目的とコンセプトを決めるところから始まりました。

目的とコンセプトを決めたあとはターゲットとなるペルソナを策定し、他サイトの比較となるポジショニングマップ、ホワイトボードと付箋を用いたカスタマージャーニーマップ 、ワイヤーフレームを作成しました。

bageleeの運営会社であるエイシスのデザイナー皆で打ち合わせを週一行い、各々でフィードバックを受けたりもらったりした全体的なワイヤーの形となったのがこちら。

全体の構成図が決まり、いよいよデザイン制作にはいります。
今回のデザインはすべてSketchで作成し、共有方法はSketch CloudやSlackベースです。今回はちょっと特別に初期案のデザインも載せられたらと思います。

初期案

初期案のデザインはこちら。

コンセプトとしてあげていた「かわいい」「おいしい」「わかりやすい」に重点をおいたデザインを作成しました。

ヘッダーのガーランド部分はベーグルと合わせたパン屋さんをイメージしています。
またところどころにbageleeのイメージキャラクターである「べぐまるくん」たちを登場させたり、見出し部分をリボンの形にしたりと「かわいい」にも重きをおいています。

さらに「わかりやすい」要素として大きなブロック要素を背景色（ベージュ／白）と分け、要素のグループ化を図りました。

各コンポーネントの色はモノクロでありながらも記事のサムネイル画像であったり、キャラクターたちの登場によってどこか遊び心のあるキュートなデザイン！ということで作成したデザインでした。

良い意味でも悪い意味でもいただいた「可愛すぎます…！」というフィードバック。

現在のbageleeの訪問者では男女比が偏っているわけではないため、この案の場合は今までみていた男性ユーザーが戸惑ってしまうのでは？というフィードバックをもらいました。

また、遊び心でいれたべぐまるくんたちの主張が少し激しいので、そっちに目がいってしまうのではないか、というコメントも。また、背景色として使っているベージュも女性観点に寄っているということでした。

確かのこのデザインでは「かわいい」に振り切ってしまっています。
形の構成はこちらで問題ないということだったので、カラーリングであったり遊び心をもう少しだけ控えめにすることを決めて再度作成。

二案（最終案）

最終案がこちら。所々はブラッシュアップをしていますが、現行のデザインとほぼ形は同じです。

各コンポーネント部分をシンプルにしています。シンプルだけどどこか可愛い、さりげない「おっ！」となるような雰囲気を出しました。でも遊び心は残しておきたかったので、アクションとしてべぐまるくんたちを登場させることにしました。

また背景色をベージュからブルーよりのグレーに変更しました。男女共に来やすいページを心がけ、控えめな無彩色にしました。

デザインの変遷

全体的なデザインの変遷です。構成決定案の前に実はもっとラフのワイヤーがあったり、デザイナー陣のデザインコンペ案などあったりしますが、ざっくりとした変遷がこちらになります。

どのデザインも作るのがとっても楽しくて作っている時間はほんとうにあっという間でした！

また、要所々でアクション（マウスオーバーや時間経過など）を起こすとぴょこっと出てくるべぐまるくんたち。コーディング・フロント実装を担当していただいたデザイナーに感謝です…！

bageleeのロゴ

ロゴも一新しています。

以前のデザインではヘッダーに丸みを感じさせられるフォントを使ったロゴでした。ベーグルをイメージできる「ころころっ」としたとっても可愛いデザインでしたね。

また、ロゴ直下に「ロゴ＋powered by eishis」にいれているのも理由があります。会社の知名度もあげる、ということが一つのリニューアルの目的であるのでブログ内のロゴにはこちらのキャプションを入れています。

文字の形もシンプルだけれど丸みは感じさせたい。以前のデザインも踏襲しつつ選定しました。ただ、以前は「a」の部分が他の文字にみられてしまいそうだったので、そこだけ変えています。

パッとみたときに「bagelee」という文字に見えるのを第一に文字の太さであったり、ひとつひとつの英字の文字詰めを整えました。

リニューアルしてみて

リニューアルして終わり、ではなくリニューアルしてみて気になったことや改善は随時社内で共有し、改善に努めていこうと思っています。もちろん、ユーザーからのお問い合わせや要望をもらった場合も前向きに検討していきたいです。

リニューアルしてますます可愛くなったbagelee、これからもおいしいデザインやプログラミング情報をお届けしたいと思いますのでどうぞまた足を運んでくださいね🎉