Rainbow Play Cafe
親子カフェのウェブサイトリデザイン
プロジェクト概要
どんなプロジェクト?

ブランド認知度とユーザーエクスペリエンスの向上のための、親子カフェのウェブサイトリデザイン

最終的な解決策を見る
期間と規模
3 週間
24 画面
役割
Illustration
Graphic Design
UI/UX Design
* 実際にクライアントのいる学校のプロジェクトとして、私自身含めて3人のチームメンバーで 担当しました。
使用したツール

デザインプロセス

課題と解決策

Problems Identified

課題 01.  テキストの情報が多い

ウェブサイトのテキスト情報が多すぎて、ユーザーが圧倒され、混乱してしまっている。入場料や時間帯などの情報を簡潔に整理することが、カフェに訪れるユーザーを引き付けるために重要。

課題 02.  サイト全体の視覚的な一貫性の欠如

サイト全体に視覚的な一貫性が欠けており、色、フォント、形状、メインビジュアルなどの要素に対して明確なガイドラインがない。

課題 03.  ブランドのストーリーテリングに深みが足りない

もう一つの課題は、ブランドストーリーの深みが不足している点です。ウェブサイトは主にテキスト情報に頼っており、情報を伝えることが中心で、店舗の雰囲気をウェブサイトを通じて伝えることが十分にされていません。
Solutions Offered

解決策 01 重要な情報の視覚化

テキスト情報をリストとして並べるのではなく、カフェのブランドを象徴するキリンのイラストを使ったカード形式で情報を視覚化しました。例えば、下記の「入場料」セクションでは、ユーザーがスクロールせずにページを切り替えられるようになっています。この解決策は、「入場料」や「時間帯」、「カフェメニュー」などのさまざまなセクションに適用されました。

解決策 02 スタイルガイドラインの定義

スタイルガイドラインを定義し、それに従うことで、サイト全体に統一感のある「外観と雰囲気」を作り出し、ブランドの一貫性を保つことを目指しました。例えば、下記の例では、虹のロゴからインスパイアを受けた3つの主要カラーを使用し、各セクションを区別しています。

解決策 03 イラストやグラフィックの活用

カフェのインテリアデザインやおもちゃにインスパイアされたイラストやグラフィックをサイト全体に取り入れることで、視覚的な魅力を高め、カフェの温かくフレンドリーな雰囲気を伝えることを目指しました。このアプローチにより、訪問者にカフェを実際に体験したいと思わせるような魅力を引き出すことができます。

Emphatize

クライアントとのミーディング

実際にカフェを訪れ、その雰囲気を観察し、現地でクライアントとのミーティングを行う機会がありました。クライアントの抱える課題やニーズを理解する一方で、カフェの独自の強みや特徴についても多くの洞察を得ることができました。
Key Insights

• 「料金」、「訪問予約」、「誕生日パーティー」が、クライアントがウェブサイトで最も強調したいコンテンツ。

• ウェブサイトのブランド認知度を向上させることが重要。

• 「多文化的」「温かみがある」「洗練されたおもちゃ」がカフェの主な強み。

• カフェにはキリンをテーマにしたおもちゃがあり、キリンをカフェのマスコットとして使用できる。

ユーザーサーベイ

Googleフォームを使って20人の潜在的なユーザーを募集し、インタビューを行い、ウェブサイトのターゲットユーザーに関する人口統計情報、課題、ニーズを把握しました。同時に、ウェブサイトのユーザーインターフェースや全体的なユーザーエクスペリエンスに関する質問にも備えました。
何歳ですか?
子供は何人いますか?
子供と親子カフェに行く一番の目的は何ですか?
このウェブサイトの体験を1から5の段階で評価してください。
このウェブサイトのどの部分を改善すべきだと思いますか?

Define

ユーザーペルソナ

ユーザーサーベイの結果をもとに、ウェブサイトのターゲットオーディエンスを表すユーザーペルソナを作成しました。

Ideate

サイトマップ

ユーザーサーベイとクライアントのニーズをもとに、特定のカテゴリーを目立たせ、ヘッダーやハンバーガーメニューのオプション数を減らしたサイトマップを作成しました。このアプローチにより、ユーザーは最初にどのページを訪れるべきかを迷うことなく、スムーズに操作できるようになります。

ワイヤーフレーム

最初に紙にスケッチを描いた後、Figmaを使ってハイファイのワイヤーフレームを作成しました。この過程では、アイデアを練り直し、プロジェクトの目的をしっかり反映したデザインになるよう、チームで議論しながら進めました。

最終スクリーン

UIキット

カフェのオリジナルロゴからインスピレーションを受けた3色をプライマリーカラーとして使用しました。見出しのフォントには、カフェの親しみやすく温かい雰囲気を表現するために、丸みのあるMontserrat Alternatesを選びました。また、サイトのビジュアルと雰囲気をさらに引き立てるために、キリンやユニコーン、太陽のイラストを手描きで制作しました。
Prototype

プロトタイプ

Evaluate

ユーザビリティテスト

20人の回答者を対象にGoogleフォームでユーザビリティテストを実施し、再設計したウェブサイトの使いやすさを評価しました。その結果、新しいデザインの評価が大幅に向上し、62%近くの人が5点を付け、以前のデザインでは40%ほどだったことがわかりました。
このウェブサイトの体験を1から5の段階で評価してください。

学んだこと

このケーススタディを通じて、異なるスキルセットを持つチームメンバーと協力し、互いに学び合うことの重要性を学びました。

経験豊富なデザイナーのチームメンバーからは、Figmaでの効果的にデザインをするコツを教えてもらいました。また、リサーチに長けたチームメンバーからは、Mazeなどのツールを教わりました。

私自身はウェブサイトにイラストを加えることで、サイト全体の見た目や雰囲気を向上させることに貢献しました。チームの多様なスキルを組み合わせることで、プロジェクトがより強化されたと感じており、次のプロジェクトでも、今回のチームから学んだ新しいスキルや知識を活かしていきたいと思っています。

View Other Projects