DESIGN SYSTEM / 01

食欲を誘う、
和のデザインシステム。

東京ラーメンストリートを3画面幅で計測・画像確認し、料理が主役の構図を架空の「湯気横丁」へ展開しました。ブラウザの実測と制作上の解釈を分けて記録しています。

01 — 実測から選んだ色

食欲の赤　#C8171E

生成り　#F9F4E0

金のアクセント　#C59C5C

参照サイトのDOM computed CSSで取得。写真内の色を画素解析した値ではありません。

パターン	制作方針
料理主導ヒーロー	赤い曲面と大きな料理写真。和文見出しが上下の領域をつなぐ。
交互の店舗紹介	料理・店名・特徴・補助情報・CTAを反復。900px以下は画像と本文を縦に配置。
横丁案内	赤い背景で締めくくり、館内図と各店舗の詳細へ誘導。
文字と動き	ライブHTMLの明朝見出しとM PLUS 1p本文。180msのhoverと、5.8〜7.2秒周期で立ちのぼる湯気。停止・再開と、動きを減らす設定に対応。

1440×1000 / 768×1024 / 390×844で確認。自動取得にローディング画面が混入したため、表示待機後の補足キャプチャで分析しました。画像内の筆文字フォントは未特定です。タブレットの横溢れはデモで改善しています。

施設・店舗・文章・館内図は架空。料理写真はimagegenで新規生成しました。参照元のロゴ、文章、画像、ソースコードは使用していません。生成画像の透明背景に不備があった初稿は採用せず、生成り背景へ修正しました。