Figma模写シリーズ第2弾は、建築事務所やプロジェクト紹介向けのミニマルで洗練されたレイアウトに挑戦します。
今回はHTMLとCSSのみを使用し、構造理解とレイアウト設計のスキル向上を目的とした模写練習です。
スライダーなどの動的要素は実装せず、静的な再現に集中する構成にしています。
アニメーションやインタラクションは、各自お好きな手法で追加してOKです！
今回のFigmaデザイン見本
今回使用したFigmaデザインは以下のような特徴を持っています。
- 建築系・デザイン事務所を意識したミニマルなUI
- セクション構成が明確で模写しやすい
- 余白やタイポグラフィに配慮された静かなデザイン
- メインビジュアルやプロジェクト一覧で視覚的なバランスが問われる
全体構成は以下のようになっています：
- ヘッダー（ナビゲーション）
- メインビジュアル（画像＋キャッチコピー）
- Aboutセクション（テキスト中心）
- プロジェクト一覧（グリッド型レイアウト）
- お問い合わせフォーム
- フッター（情報とSNSリンク）
模写ルールと前提条件
| 項目 | 内容 |
|---|---|
| 使用技術 | HTML / CSS のみ |
| 使用ツール | Figma / VSCode / Chrome |
| 難易度 | 準中級 |
| アニメーション | 各自自由に追加OK |
| レスポンシブ対応 | 任意（PCメインで作成） |
💡補足：
今回はスライダーやスクロールアニメーションなどのJS実装は省略しています。
ただし以下のようなライブラリで発展させるのは自由です：
- AOS.js / ScrollReveal.js
- Intersection Observer API
- Swiper.js
- GSAP（今後の模写にも登場予定）
HTML/CSSの全体構成と設計方針
今回の模写では、以下のような構造を意識して実装します。
セクション一覧
<header>：ナビゲーション（ロゴ＋リンク）.hero：メインビジュアル（背景画像＋キャッチコピー）.about：事業紹介文やミッションの記載.projects：画像＋テキストのカード型レイアウト.contact：フォーム（氏名・メール・メッセージ）<footer>：会社情報・SNSリンクなど
CSS設計はBEM記法に近い形で、セクションごとに命名し、再利用性と保守性のあるクラス設計を意識しています。
セクションごとの実装ポイント
ヘッダー
- 横並びナビゲーションは
flexを使用 - ロゴとリンクのスペースバランスに注意
- レスポンシブ時は縦並び化（任意）
メインビジュアル
position: absolute;を使ったテキスト配置background-size: cover;の画像背景処理- 高さ指定（
vh）と文字の中央揃え
Aboutセクション
- 2カラム（画像＋テキスト）構成
- タイトルと本文の余白設計を丁寧に
- スマホ時は縦並びに変更（メディアクエリ対応）
プロジェクト一覧
display: grid;を使用しカードを横並びに- カード内は画像とテキストで構成
- カード全体に
hoverエフェクトを加えても◎
お問い合わせフォーム
- ラベルと入力欄をセットで整列
- ボタンのホバー処理
- フォームバリデーションは未実装
フッター
- 3カラム構成（会社情報／リンク／SNS）
flexを使った横並びと中央揃え- コピーライト表示を忘れずに
レスポンシブ対応の考え方（任意）
レスポンシブ対応をする場合は、以下のようなブレイクポイントをおすすめします。
- 1200px：3カラム → 2カラム
- 768px：2カラム → 1カラム
- メニューやフォームの縦並び化
また、画像のリサイズ・余白の詰め直しなど、細かい調整も必要になります。
おわりに：構造を理解し、自由にアレンジしてみよう
- セクション設計
- 余白バランス
- Flex／Gridの使い分け などなど