今日は、残っていた Aboutページ と Blogページ を仕上げ、
京都レストランのWebページを すべて完成 させました。
スマホ版を想定してデザインし、
プロトタイプ上で すべてのページ間リンクを設定 しています。
また、フッターに配置したロゴマークはコンポーネント化し、
押下すると トップページへ戻る導線 になるようにしました。
スマートフォン向けのWebページとして、
一通りの画面遷移と操作感をFigma上で確認できる状態になっています。
ぜひご覧ください。
▼ Figma共有リンク(閲覧用)
[ Figmaデザインを見る ]
※スマートフォン版Webページのデザインおよび、
各ページ間の遷移をプロトタイプで確認できます。
Aboutページで意識した点
- 初めて訪れた人が迷わない構成
- 店舗の世界観や雰囲気が伝わる文章量・余白
- 情報を詰め込みすぎず、安心感を与えるレイアウト
- スマホで読んだときの行間・文字サイズのバランス
Blogページで意識した点
- 記事一覧が一目で把握できること
- タイトル・日付・導線の視認性
- コンテンツが増えても崩れにくい構成
- スマホ操作を前提にしたタップしやすさ
AboutページとBlogページでは、
情報量と読みやすさのバランスを意識し、
スマートフォンでも直感的に理解できる構成になるよう調整しました。