Mihai Popa · デジタルデザイナー
01 / Webデザイン制作事例
café fikasmysa.
カフェ・フィーカスミーサ
メニューと来店情報を掲載したカフェのWebサイト。
習志野にある、スウェーデンの文化を取り入れたカフェ「café fikasmysa」の日本語サイトをデザイン・制作しました。お店の写真、メニュー、営業時間、道順、お問い合わせフォームを掲載しています。
公開サイトを見る （新しいタブで開きます）
- 担当
- デザイン・開発を一人で担当
- 制作ツール
- Webflow
- サイトの言語
- 日本語
- 制作内容
- 1ページ構成のカフェサイト
ご依頼の内容
誰に向けたサイトか
地域の方、お子さま連れのご家族、ご高齢の方、香澄公園を訪れる方が使う、シンプルなサイトを求められていました。北欧風のデザイン、色数を抑えた配色、青や紺の色、オーク材の木目、読みやすい文字が、ご依頼の主な条件でした。
このページでは、ご依頼内容に対して何を制作したかを紹介します。今後の確認事項として挙げているテストは、まだ実施していません。
初めての方にお店を紹介する
どのようなお店か、何を注文できるか、どこにあるかを伝える。
常連の方も情報を確認できる
メニューや営業時間などを調べやすくする。
更新の手間を減らす
サイトを頻繁に編集しなくても、SNSの投稿で新しい情報を知らせられるようにする。
01 / 写真と配色
お店の写真と配色
- 制作した内容
- 店内と外観の写真、店名、ロゴを配置し、青を基調とした配色にそろえました。スウェーデン語のfikaとmysaには、日本語の説明を添えています。
- この構成にした理由
- 配色と店内の写真で、ご依頼にあった北欧風の雰囲気を表しています。入口の写真は初めて訪れる方がお店を見つけるために、日本語の説明はスウェーデン語の意味を理解するために役立ちます。
02 / メニューの構成
メニューの分類と価格の表示
- 制作した内容
- メニューをエスプレッソ、コーヒー、紅茶、ケーキなどに分けました。各項目を開くと、商品名、日本語表記、価格、ホット・アイスの別を確認できます。
- メニューを開閉式にした理由
- 詳細を閉じておくと、最初に表示する一覧を短くできます。開いた後は商品名と価格の位置をそろえ、比較しやすくしました。ただし、押すと開くことが見た目で伝わる必要があります。
- 次に確認したいこと
- メニューを閉じた状態からアイスエスプレッソの価格を探してもらい、キーボードだけでも同じ操作を試したいと考えています。開き方がわかりにくければ表示を変更し、再度確認します。
03 / 来店前の確認
道順と営業時間
- 制作した内容
- 地図、住所、駅からの道順、営業時間、支払い方法、設備情報をアクセス案内にまとめました。その下に、メールアドレスとメッセージを入力するお問い合わせフォームを配置しています。
- 情報をまとめた理由
- 来店前に、道順、営業時間、設備を一か所で確認できるようにするためです。次は、必要な情報に不足がないか、見つけにくい項目がないかを確認したいと考えています。
04 / スマートフォンでの表示
スマートフォンでの配置
スマートフォンでは内容を縦に並べ、ページ内の移動先をメニューボタンにまとめました。写真、色、掲載内容はPC版と共通です。
次は、メニューを開いて来店情報を見つけるまでの操作を確認します。文字の読みやすさ、拡大表示、キーボード操作、選択中のボタンのわかりやすさ、端末の「アニメーションを減らす」設定への対応も確認したい項目です。
05 / 公開した内容と今後の確認
公開したサイトと今後の確認
制作・公開したもの
お店の紹介、メニュー、来店案内を掲載したWebflowサイトを公開しました。PCとスマートフォンに合わせて配置を調整し、SNSへのリンクとInstagram投稿の紹介も設けています。
お客様がメニューを見たり、来店前に必要な情報を確認したりできるサイトです。
カフェのサイトを見る次に確認したいこと
- 情報の見つけやすさ初めて使う人に、営業時間、道順、支払い方法を探してもらう。
- 閲覧・操作方法への対応キーボード、拡大表示、画面読み上げなどの支援ツールで、メニューとフォームを確認する。
- 情報の更新方法SNS投稿の表示と、お店が掲載情報を更新する手順を見直す。
掲載している画面は、café fikasmysaの公開サイトのものです。