今日の日報｜MENUページを完成させた
今日は京都レストランサイトの MENUページをすべて完成させることができた。
季節限定・ランチ・ドリンクまで一通り作り切れたのは大きな達成感がある。
MENU制作の進め方
MENUはすべて オートフレーム（オートレイアウト） を使って、
「1メニュー＝1構造」を意識して作成していった。
構成は基本的に、
- 写真
- 料理名
- 値段
というシンプルな要素だけに絞り、
写真の領域を Rectangle で確保したあと、全体にオートレイアウトをかけた。
写真の扱いで学んだこと
写真の差し込み方が一番悩ましかった。
以前は画像自体をトリミングして調整することが多かったが、
どうしても構図が不自然になってしまっていた。
今回は トリミングを使わず、FILLのみで写真を配置する方法に切り替えた。
- 写真を Rectangle / Frame に FILL で配置
- FILL 後は、上下左右に動かして主役が中央に来るよう微調整
このやり方に変えたことで、写真の扱いが一気に安定した。
Rectangle と Frame の違い
今回つまずいた点として、
- Rectangle ではドラッグで FILL できないケースがあった
- Frame にすると、ドラッグでスムーズに FILL できた
という違いがあった。
結果として、写真用の領域は Frame を使う方がトラブルが少ないと実感した。
最終的には、すべての写真を一度パソコンにダウンロードし、
1枚ずつ Rectangle に FILL していく方法で統一した。
トップページの写真調整
トップページの写真については、
- 黒い Rectangle を上に重ねる
- 不透明度を約6%に設定
することで、写真のトーンを抑えた。
また、写真自体の 彩度、温度（色温度)、ハイライトなども微調整し、
全体として主張しすぎない雰囲気に寄せた。
デザインの判断基準
今回の制作で一貫して意識したのは、
個々のアイテムが主張しすぎず、静かであること
という点。
そのため、
- 色は極力使わない
- ドリンクメニューは写真を使わず文字のみ
- MENUページのフッターは地図を省き、最小限にする
といった判断をした。
今日学んだこと
今日一番の学びは、
- FILLを使った写真配置の作法
- 主役を中央に持ってくるための微調整
- オートレイアウトは見た目ではなく「意味」で分けるもの
という点だった。
操作だけでなく、
「どう見せたいか」を考えながら組み立てられた一日だったと思う。