Hasegawa Mariポートフォリオサイト

制作概要 Overview

作品名

cafe azito（カフェサイト）

デザインカンプサイズ

PCサイズ（1920*1080のみ）

ターゲット

落ち着いた空間での食事やカフェ時間を好む大人層

現行サイトについて

店舗の雰囲気には合っているものの、レイアウトが単調で情報が見づらく、ユーザーにとって必要な情報が取得しにくい構造。 また、無理にトップページに情報を詰め込んでいるため、導線がわかりづらい。

依頼内容

課題を解消するために、情報を整理し、下層ページを想定した導線設計を含む、分かりやすく使いやすいサイト構成へ改善してほしい。

コンセプト

「やさしく、ゆるやかに “時間を味わう” カフェサイト」

店舗の世界観を損なわず、情報が自然に伝わるデザイン設計を意識。

制作区分

学校課題

制作期間

2024年11月～　計15時間

担当

• 企画
• Design

使用技術・ツール

• Photoshop
• Figma

ユーザー深層&競合分析 Insight & Analysis

ペルソナ

• 制作当時はペルソナ設計の知識がなく、具体的なユーザー像を想定できていませんでしたが、現在はユーザー視点を意識して設計に取り組んでいます。 今であれば、「休日にカフェでゆったり過ごす時間を大切にしている30代の女性」など、ライフスタイルやニーズに基づいたペルソナを想定して制作します。

競合他社サイト分析

• 制作当時は競合分析への理解が浅く、他社サイトとの比較は行いませんでしたが、現在はその重要性を認識しており、今後の設計に活かしていきたいと考えています。

制作の目的 Objective

• ・複数の情報カテゴリを見やすく整理し、下層ページへの導線を意識した情報設計を実践するため。
• ・店舗の世界観を維持しながら、視線誘導や余白設計を通じて“読ませるデザイン”を学ぶため。

直面した課題 & 学び Challenges & Insights

情報設計と導線整理の難しさ

複数のカテゴリーをトップページ内で分かりやすく整理することに苦戦しました。情報を1ページに詰め込みすぎず、FigJamを使って全体の構成を見直しながら、トップページと下層ページの役割を切り分けて考えるようにしました。その中で、下層への導線や情報の配置を意識することの大切さを学びました。

余白と画像のバランス

店舗の雰囲気を大切にしながら、単調にならないようレイアウトに変化をつける工夫が必要でした。参考サイトをもとに、情報ごとの余白の使い方や見出しの見せ方を学び、自然と視線を誘導できる構成を意識しました。