Mihai Popa · デジタルデザイナー
01 / Webデザイン制作事例
café fikasmysa.
カフェ・フィーカスミーサ
小さなカフェで、ゆっくり過ごす時間を。
スウェーデンの文化を取り入れたカフェのWebサイトをデザイン・制作しました。お店の雰囲気、メニュー、来店に必要な情報を一つにまとめています。
公開サイトを見る （新しいタブで開きます）
- 担当
- デザイン・開発を一人で担当
- プラットフォーム
- Webflow
- サイトの言語
- 日本語
- 制作内容
- カフェのランディングページ
依頼の背景
ご依頼の内容と、サイトを訪れる人
ご依頼は、地域にお住まいの方、お子さま連れのご家族、ご高齢の方、香澄公園を訪れる方に向けた、シンプルでわかりやすいカフェのランディングページでした。北欧らしい落ち着いた配色を基本に、青や紺、オーク材の木目などを取り入れ、読みやすさを大切にする方針が示されていました。
ここでは、当初のご依頼内容と完成したWebサイトを照らし合わせ、デザイン上の工夫や課題を振り返ります。
初めての来店につなげる
お店を紹介し、来店を検討するための情報を届ける。
来店経験のある方にも役立つ
お店を知っている方が、必要な情報を確認できる場所にする。
更新の負担を抑える
サイトを頻繁に更新しなくても、SNSの投稿から情報を届けられるようにする。
01 / ビジュアルデザイン
写真で伝えるお店の雰囲気
- 実際の構成
- 店内や外観の写真に、fikaとmysaの意味を説明する日本語の文章を添えています。店名やロゴ、落ち着いた青の配色を軸に、ページ全体でお店らしさが伝わるようにしました。
- デザインの意図
- 求められていたのは、北欧らしい雰囲気と、地域の方にとってのわかりやすさです。青を基調とした配色と店内の写真で雰囲気を伝え、入口の写真は、初めて訪れる方がお店を見つける手がかりにしています。スウェーデン語の言葉には、日本語の説明を添えました。
02 / メニューの構成
メニューのカテゴリーと商品情報
- 実際の構成
- メニューは、エスプレッソ、コーヒー、紅茶、ケーキなどのカテゴリーに分けています。エスプレッソのカテゴリーを開くと、商品名と日本語表記、価格、ホット・アイスの別を確認できます。
- 一覧の見やすさと操作の手間
- 商品の詳細をカテゴリーごとに折りたたみ、最初の画面では一覧を短くまとめています。開いた後は、商品名と価格の位置をそろえ、比較しやすくしました。ただし、中身を見るには、カテゴリーを押すと開くことが伝わらなければなりません。
- 今後、確かめたいこと
- 次は、カテゴリーを閉じた状態からアイスエスプレッソの価格を探してもらい、どこで迷うかを確かめたいと思っています。キーボードでの操作も確認します。開けることに気づきにくければ表示を直し、もう一度試してもらいます。一覧を短くしたことが、使いやすさにもつながっているかを確かめます。
03 / 来店前の確認
アクセス・営業時間などの来店案内
- 実際の構成
- アクセス案内には、地図、住所、駅からの道順、営業時間、支払い方法、設備情報をまとめています。その下に、メールアドレスとメッセージを入力できるお問い合わせ欄を配置しました。
- 情報をまとめる理由
- 家族で出かけるときには、道順や営業時間と一緒に、お店の設備も確認したいことがあります。そのため、関連する情報を一か所にまとめました。次は、来店を計画する流れに沿って、不足している情報や見つけにくい情報がないかを確かめたいと思っています。
04 / 画面サイズに合わせた表示
スマートフォンのレイアウトとナビゲーション
スマートフォンではメニューをコンパクトにまとめ、カフェの写真からお店の紹介へ、縦に読み進められる構成にしています。お店らしさを保ちつつ、小さな画面でも情報を見やすく配置しました。
メニューを小さくまとめれば、内容を見せるスペースが増えます。その分、ボタンを見つけやすく、操作しやすくすることが大切です。次は、メニューを開いて来店情報にたどり着くまでの流れを確認したいと思っています。文字のコントラストや拡大時の表示、キーボードで選択中の位置のわかりやすさ、キーボード操作、アニメーションを減らす設定への対応も確認項目です。
05 / 振り返り
公開サイトと今後の検証
公開したサイト
お店の紹介からメニュー、来店案内までを一つの流れにまとめ、PCとスマートフォンに対応したWebflowサイトとして公開しました。SNSへのリンクとInstagram投稿の紹介も設け、更新の負担を抑えながら、お店の日々の発信につながる構成にしています。
お店を知り、メニューを眺め、来店に必要な情報を確認できるサイトになりました。
カフェのサイトを見るこれから検証したいこと
- 必要な情報の見つけやすさ初めて訪れる人が、営業時間、道順、支払い方法を迷わず見つけられるか。
- さまざまな閲覧方法への対応キーボード操作、拡大表示、支援技術を使って、メニューと問い合わせの流れを確認する。
- 最新情報を届ける仕組みSNS投稿の表示方法と、お店の情報更新の流れを合わせて見直す。
掲載している画面は、café fikasmysaの公開サイトのものです。