制作と学習の記録

Figmaで京都レストランwebpage完成

今日は、残っていた AboutページBlogページ を仕上げ、
京都レストランのWebページを すべて完成 させました。

スマホ版を想定してデザインし、
プロトタイプ上で すべてのページ間リンクを設定 しています。

また、フッターに配置したロゴマークはコンポーネント化し、
押下すると トップページへ戻る導線 になるようにしました。

スマートフォン向けのWebページとして、
一通りの画面遷移と操作感をFigma上で確認できる状態になっています。
ぜひご覧ください。

▼ Figma共有リンク(閲覧用)
[ Figmaデザインを見る ]

※スマートフォン版Webページのデザインおよび、
各ページ間の遷移をプロトタイプで確認できます。

Aboutページで意識した点

  • 初めて訪れた人が迷わない構成
  • 店舗の世界観や雰囲気が伝わる文章量・余白
  • 情報を詰め込みすぎず、安心感を与えるレイアウト
  • スマホで読んだときの行間・文字サイズのバランス

Blogページで意識した点

  • 記事一覧が一目で把握できること
  • タイトル・日付・導線の視認性
  • コンテンツが増えても崩れにくい構成
  • スマホ操作を前提にしたタップしやすさ

AboutページとBlogページでは、
情報量と読みやすさのバランスを意識し、
スマートフォンでも直感的に理解できる構成になるよう調整しました。

投稿日

カテゴリ