2019年1月31日

デザイン

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

目次

  1. リニューアルに向けて
  2.  初期案
  3.  二案(最終案)
  4. デザインの変遷
  5. bageleeのロゴ
  6. リニューアルしてみて

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

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

01.jpg (1.0 MB)

リニューアルに向けて

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

目的とコンセプト

会社の知名度をあげ、自分たちの発信の場をつくる
・かわいい
・わかりやすい
・おいしい
・トレンド/幅を広げる

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

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

iOS の画像 (1).png (988.6 kB)

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

初期案

03.png (1.7 MB)

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

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

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

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

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

フィードバック

女性受けは良いかもしれないけれど、男性がこのページを訪れたときに「ちょっとこのブログは自分には合わないかな…」という心理が動いてしまいそう。

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

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

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

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

二案(最終案)

04.png (2.8 MB)

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

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

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

デザインの変遷

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

02.jpg (1.8 MB)

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

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

bageleeのロゴ

05.png (47.3 kB)

ロゴも一新しています。

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

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

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

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

リニューアルしてみて

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

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

3

0

AUTHOR

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP