「レストランのWebサイト、一度は作ってみたい」と思いながら、どこから手をつければいいかわからない——模写練習をしているとそんな壁に当たることがあります。
模写上級シリーズ第7弾のデモページは、表参道のイタリアントラットリア「LUCE」をテーマにした飲食店LP（ランディングページ）です。今回のデモは、軽量CSSフレームワーク「Lism CSS」を使って構築しています。この記事では、デモページの構成・デザインの特徴・Lism CSSを使う利点・模写で身につくスキルを解説します。
飲食店LPの模写 ── Trattoria LUCE
今回の模写対象は、南イタリア料理をテーマにしたトラットリアのLPです。コンセプトからメニュー・コース・アクセス・予約フォームまでを1ページで構成しており、実際の飲食店サイトとほぼ同等の情報密度を持っています。
まずPCとスマートフォンの両方でページ全体をスクロールしてみてください。色の使い方・余白の取り方・各セクションの切り替わり方を観察するところから始めましょう。
Lism CSSとは ── このデモで使っているフレームワーク
Lism CSS（リズム シーエスエス）は、日本の開発者が制作したWebサイト向けの軽量CSSフレームワークです。設定・ビルド作業なしに、CSSファイルをCDNから1行読み込むだけで使い始められます。
特徴は「レイアウトファースト」という設計思想です。l--flex や l--stack のようなレイアウト用クラス（l--プレフィックス）と、余白・フォントサイズなどを調整するユーティリティクラス（-p:20、-fz:l など）を組み合わせてページを組み立てます。TailwindのようにHTMLがクラスで埋め尽くされず、構造とスタイルが読みやすく保たれる点が開発者から評価されています。
また、約30KB〜という軽量さ、メディアクエリの代わりにコンテナクエリを採用したレスポンシブ設計、CSS変数（カスタムプロパティ）を活用したデザイントークン管理など、モダンなCSS仕様を積極的に取り入れているのも特徴です。
<!-- CDNからCSSを1行読み込むだけで使えます（サンプル） -->
<link href="https://cdn.jsdelivr.net/npm/lism-css@latest/dist/css/main.css" rel="stylesheet" />今回のデモページでは、このLism CSSをベースにレイアウトを組み、独自のCSSを重ねて飲食店らしいデザインに仕上げています。模写に取り組む際は、Lism CSSのクラス設計を観察する視点も持つと学びが増えます。
このLPの特徴と設計意図
高級感を演出するカラーパレット
ページ全体を通じて使われている色は非常に限定的です。深みのあるダークトーンを基調に、ゴールド系のアクセントカラーが随所に配置されています。このシンプルな配色が「高級感」と「洗練された雰囲気」を作り出しています。CTAボタンやセクション区切りにアクセントカラーが使われている位置を確認してみてください。
縦スクロールで体験する「ストーリー構成」
このLPはページをスクロールするにつれて、CONCEPT → MENU → CHEF → COURSE → ACCESS → RESERVATIONという流れで情報が展開されます。これは飲食店LPの王道パターンです。「お店の世界観を知ってもらい、魅力を伝え、最後に予約へ誘導する」という導線が意識的に設計されています。
予約フォームのUI設計
ページ末尾の予約セクションには、時間・人数をボタン選択できるUIが実装されています。チェックボックスやセレクトボックスではなく、視覚的にわかりやすいボタン選択形式を採用している点に注目してください。JavaScriptで選択状態を管理する実装が学べます。
フルスクリーンヒーローとナビゲーション
ファーストビューはフルスクリーン表示のヒーローセクションです。ページ内リンクで各セクションへスムーズにスクロールするナビゲーションも実装されており、固定ヘッダーとの連動を再現するのが今回の模写のひとつの山場になります。
模写で身につくスキル
レイアウトの「非対称」を扱う力
今回のLPは左右対称のグリッドではなく、テキストブロックと画像ブロックが交互に配置される非対称なレイアウトを採用しています。CSS Gridやflexboxを使いこなして、この非対称バランスを再現することがポイントです。
フォントと余白で「高級感」を作る感覚
プロのデザインで高級感を出す際、フォントの選択と余白の量は非常に重要です。このLPではセリフ系フォントや英語のセクションラベルが効果的に使われており、日本語テキストとのコントラストが洗練された印象を生んでいます。ピクセル単位で余白を計測しながら再現する練習が、今後の実務で生きてきます。
JavaScriptによるインタラクション実装
予約フォームのボタン選択UI、スムーズスクロール、固定ヘッダーのスクロール連動など、JavaScriptが活躍する箇所が複数あります。CSSだけでは実現できない動きを、最小限のJSコードで実装するスキルが身につきます。
CSSフレームワークの読み解き方が身につく
このデモはLism CSSを使って組まれているため、ブラウザの開発者ツールでHTMLを確認すると l--flex や -p:20 といったLism独自のクラスが随所に見られます。フレームワークが当てているスタイルと、独自CSSで上書きしている部分の境目を読み解くことで、「フレームワークをどう活用するか」という実践的な視点が養われます。
模写の進め方
模写上級シリーズはHTMLとCSS、JavaScriptをひと通り学んだあとに取り組む実践課題です。以下の順で進めると効率よく完成まで持っていけます。
- デモページをPC・スマホ両方で観察し、全体構成をメモする
- ブラウザの開発者ツールでフォント・余白・色の数値を確認する
- HTML骨格から組み立て、CSSでデザインを適用する
- 予約UIなどJavaScriptが必要な部分を最後に実装する
- スマートフォン表示のレスポンシブ対応を確認・調整する
完成したらテキストや色を変えてアレンジし、ポートフォリオ作品として活用してみてください。
まとめ
模写上級 #007は、飲食店LPを題材にした本格的なページ模写課題です。高級感のある配色・非対称レイアウト・予約フォームのインタラクションと、実務で即使えるスキルが詰まっています。
デモページをじっくり観察し、細部まで再現することを目指してみてください。観察→実装→アレンジのサイクルが、確実に制作スキルを底上げします。
▶ サイトのSEOも気になる方は、CodeQuest SEO_CHECKで無料診断を試してみてください
よくある質問
Q. 模写上級シリーズはどのレベルの人が対象ですか？
HTML・CSS・JavaScriptの基本をひと通り学んだ中級者以上を対象としています。初めての模写に挑戦する場合は、初級・準中級シリーズから始めることをおすすめします。
Q. 模写したコードはポートフォリオに使えますか？
「模写作品」として掲載し、元のデモページへのリンクを併記する形であれば問題ありません。オリジナルへのクレジットを明記することが前提です。
Q. Next.jsで作る必要がありますか？
必ずしもNext.jsを使う必要はありません。HTML・CSS・JavaScriptのみで再現することも、ReactやVueを使うことも可能です。デモページの完成形を目指す実装方法は自由に選んでください。
Q. Lism CSSはどんな場面で使えますか？
設定・ビルド不要でCSSを1行読み込むだけで使えるため、素のHTMLサイトや今回のような模写課題にも手軽に導入できます。React・Astroのnpmパッケージも提供されており、モダンな開発環境にも対応しています。