Sushi Masuda レストラン Webサイトリニューアル
Website
クライアントワーク
クライアント
Sushi Masuda
ツール
Figma, Framer, Illustrator, Photoshop
チーム
個人制作（実案件）
期間
4ヶ月 (2025年6月~9月)
役割
UIUXデザイナー・実装
URL
プロジェクト概要
カナダ・バンクーバーにあるミシュラン1つ星を獲得したおまかせ寿司レストラン「Sushi Masuda」のWebサイトをリニューアル。 リサーチからFramerでの実装、公開まで1人で完結させました。主にサーバーとして勤務していた経験を元に予約方法やアクセスなど情報の見つけやすさを向上させました。
問題提起
勤務している中で以下の課題を発見しました
店舗の場所がわかりにくい（入口が見つけられない）
地下駐車場のシステムがわかりにくい
UI改善の必要あり（一貫性のないフォントサイズ、曖昧なレスポンシブ対応 etc...)
これらの情報は既にSNSや予約サイトに掲載されていました。情報が複数のプラットフォームに分散しており、顧客は必要な情報にたどり着けていませんでした。
ゴール
課題解決のために、以下の点を目指しました。
アクセス情報の明確化
駐車場情報など来店前に必要な情報をまとめたページを新設
メニューのフォントサイズを統一
レスポンシブデザインを徹底
これにより、顧客が必要とする情報にスムーズにアクセスできるWebサイトを実現しました。
リサーチ
ユーザー行動観察
現場での課題収集
このプロジェクトの最大の特徴は、 私自身がレストランで働きながら、ユーザーの課題を直接収集できたことです。デザイナーとして現場にいることで、以下の課題を実際に経験していました。
月3-4件：徒歩来店の予約客からの「入口が見つけられなかった」というクレーム
週2-3回：駐車場に関する電話問い合わせ（予約サイトには記載済み）
これらは、私が実際に対応していた課題でした。
既存サイト分析
ニールセンのユーザビリティ10原則を用いてサイトを評価
CTAのコントラストが弱い
フォントの一貫性がない（大きかったり小さかったり）
フッターがない
予約方法、キャンセルポリシーなどの情報が欠落しており、予約サイトに行かないと見つからない
レスポンシブ対応がうまく機能していない
アクセス情報が広域のGoogleマップと住所のみで詳細がない
競合調査
バンクーバーの日本食レストラン4店舗を分析
予約サイトへの導線がホームページに2-3個以上CTAが置かれている
レスポンシブ対応がされている
予約やキャンセルポリシーなどの詳細の記載があり、とある店舗ではQ＆Aとして店の情報を掲載している
予約は外部サイトを利用しているところがほとんど
ペルソナ
情報の整理と明確化
顧客はカナダだけでなくアメリカからも多く訪れます。様々な背景を持つユーザーが必要な情報を迷わず見つけられるWebサイト設計が求められています。
改善点
01
情報設計の改善
設置されていなかったフッターを追加し、どのページからでもアクセスできるようにしました。
02
情報の集約と最適化
”ご来店に際して”ページ新設
予約サイトに記載されていた情報をWebサイトに持ってくることで来店前に知りたい情報をユーザーが得られるようにしました。
アクセス情報の改善
Google Mapの他に写真付きのガイドがインスタグラムのリールにあるためそこに繋がるCTAを設置して準備しました。
03
モバイルファーストのアプローチ
レスポンシブデザインを徹底し、どのデバイスからでもアクセスしやすいようにしました。また、メニューのフォントサイズを統一し、モバイルでの可読性を向上させました。
