京都レストランのメニュー実装

本日の作業内容

Figma の Dev Mode を使用して Tailwind CSS を確認し、
そこから実装に合わせて調整・改変しながら進めた。

本日は Top page / Menu page / Seasonal page を完成させた。
また、使い回しができそうな部分についてはコンポーネント化を行い、
Header.tsx、Footer.tsx、NavButton.tsx などを作成した。

理解が難しく、まだ整理しきれていない点

Image の配置について

以下のように Image コンポーネントを配置した。

<div className="relative w-96 h-[320px] overflow-hidden mx-auto mt-6">
  <Image
    src="/images/hero.jpg"
    alt="京料理"
    fill
    className="object-cover object-bottom"
    priority
  />
</div>

object-cover を用いることで、画像の縦横比を保ったまま表示領域を埋めることができ、
object-center や object-bottom を指定することで、見せたい部分を中心に配置できた。

object-cover を使用した場合、実際の画像サイズを意識せずに
表示領域に合わせてトリミングしてくれるため便利だと感じた。

一方で、ロゴやアイコンなどサイズが明確に決まっている画像については、
以下のように width / height を指定して配置した。

<Image
  src={logoSrc}
  alt="京都や ロゴ"
  width={72}
  height={72}
  className="object-contain"
/>

この場合は div で囲まず、Image コンポーネント単体でサイズ指定を行った。

その他

レイアウトは主に flex と flex-col を使って構成した。
余白については画面設計通りに厳密に合わせることにはこだわらず、
プレビューを確認しながら見え方を優先して微調整を行った。

Chrome の Dev Tools を使って iPhone SE や iPhone X で表示確認を行ったところ、
端末によって写真の大きさや余白の印象が異なることを実感した。

本来であれば写真サイズやフォントサイズについて、
さらに細かい調整が必要だと感じているが、
今回はまず実装を一通り終わらせることを優先し、
細部の調整までは踏み込まなかった。

明日はこの続きとして、
余白やサイズ感についてもう一度整理しながら調整を進めたい。