Figma模写 #2 は、建築系ポートフォリオの見本から「写真の比率」と「余白の取り方」を読み取り、画面幅が変わっても崩れないレイアウトに落とす課題です。装飾がほとんど無いので、出来を決めるのは配色でもアニメーションでもなく、余白と写真の比率だけになります。
作るのはHTMLとCSSだけで、スライダーやアニメーションは実装しません。そのぶん「見本に似ている」ではなく「幅を変えても比率と余白が保たれる」で合否を判定できるところまで踏み込みます。判定方法は後半にまとめました。
| 項目 | 内容 |
|---|---|
| 難易度 | 準中級 |
| 所要時間 | 約3〜4時間（実装量から見積もった目安。計測値ではありません） |
| 使う技術 | HTML / CSS Grid / Flexbox（JavaScriptなし） |
| 見本 | Figmaデザインファイル「準中級」（ログインなしで閲覧可・インスペクトは要サインアップ） |
| この課題の主題 | 大きな余白と、写真の比率を固定すること |
| ゴール | 幅を変えても比率と余白が保たれているかを、自分で判定できる状態 |
Figmaの見本を開く（どこまで見られるか）
見本のデザインファイルは以下から開けます。
2026年8月2日に実ブラウザで開いて確認したところ、状況は次のとおりでした。
- ログインしなくてもキャンバスは読み込まれ、ファイル名「準中級」が表示される
- 画面には「コメント、編集、インスペクトを行うにはサインアップしてください」と表示される
つまり、見るだけならログイン不要ですが、サインアップしないと数値（サイズ・余白・色）は読み取れません。模写でいちばん欲しい情報が最初から手に入らない状態です。始める前に、次のどちらで進めるかを決めてください。
方法A：自分のドラフトに複製してから測る
Figmaにサインアップしたうえで見本ファイルを自分のドラフトへ複製できれば、複製先では制限なくインスペクトできます。画面上部のファイル名の横にあるメニューから、複製系の項目（Duplicate to your drafts など）を探してみてください。
ただしこの見本ファイルで複製が許可されているかは未確認です。共有設定によっては項目が出てきません（名称もバージョンで変わります）。見当たらない、あるいはエラーになる場合は迷わず方法Bへ切り替えてください。
方法B：比率で合わせる（数値が読めなくても成立する）
準中級の練習としては、むしろこちらのほうが身につきます。pxを1px単位で追うのではなく、キャンバス幅を100としたときの比率に直してから実装するやり方です。
- 見本の画面をスクリーンショットで保存する
- 画像編集ソフトの選択範囲などで、各要素の左右・上下の座標を読む
- キャンバス幅を100として、何パーセントの位置・大きさかに直す
- CSSは
frとclamp()で組み、固定pxをできるだけ使わない
次のセクションには、実際に方法Bで見本から読み取った比率をそのまま載せています。手が止まったときの答え合わせに使ってください。
完成見本が示しているもの
下の見本画像は、デザイン全体ではなくファーストビュー（ヒーロー）と、その下に続くAboutセクションの入り口までを切り出したものです。まずはこの範囲を作り切ることを目標にしてください。
この画像から読み取れる構成要素と、実装での扱いは次のとおりです。
| 領域 | 見本での見え方 | 実装のポイント |
|---|---|---|
| ヘッダー | 左にロゴ、右にMAIN・GALLERY・PROJECTS・CERTIFICATIONS・CONTACTSの5項目。字間が広く、MAINだけ下線 | Flexboxで両端に振り分け、letter-spacing を広めに取る |
| 左のテキスト列 | 「PROJECT」を細いグレー、「Lorum」を太い黒で2段。下に前後の矢印と「01 / 02」のカウンタ | 2語で太さと色を変えるだけ。文字は仮なので任意の語でよい |
| 右の写真 | 建物を見上げた写真が大きく置かれ、右端に余白が残る | この課題の主役。比率を固定したうえで切り取る |
| 写真に重なる白い帯 | 写真の左下に白いブロックが重なり「VIEW PROJECT」が入る | Gridで同じセルに重ねるか、写真を基準に絶対配置 |
| Aboutセクション | 薄いグレーの帯に小さな画像が並び、右に「About」の見出し | ヒーローと左右の余白をそろえる |
そのうえで、見本画像を横1024pxに換算し、白ではない領域の外接矩形を測って比率を出しました。
| 対象 | 実測値 | CSSに置き換えると |
|---|---|---|
| ヒーロー写真の大きさ | 560 × 604 px（幅÷高さ ＝ 0.927） | aspect-ratio: 14 / 15; |
| 左テキスト列の幅 | キャンバス幅の約36% | grid-template-columns の左側 |
| ヒーロー写真の幅 | キャンバス幅の約55% | grid-template-columns の右側 |
| 右端に残る余白 | キャンバス幅の約9.6% | padding-inline の右側 |
これらは見本画像から測った概算であって、Figmaファイル内の設定値ではありません（インスペクトできないため確認できません）。それでも比率さえ合えば見た目はほぼ一致します。建築系ポートフォリオらしさは、装飾ではなく「余白の大きさ」と「写真の比率が最後まで崩れないこと」の2つでほぼ決まるからです。
写真の比率を固定する
aspect-ratio とは、要素のボックスに「幅と高さの望ましい比率」を指定するCSSプロパティです（MDN・aspect-ratio／2026年8月2日取得）。MDNのBaseline表示は「広く利用可能」で、2021年9月以降どのブラウザでも使えます。
ヒーロー写真に必要な指定は、骨格だけ書くと次の4行です。
.hero__image {
width: 100%;
aspect-ratio: 14 / 15;
object-fit: cover;
object-position: 50% 40%;
}aspect-ratio が効かなくなる条件
MDNは「aspect-ratio が効果を持つには、ボックスのサイズの少なくとも片方が自動でなければならない」と明記しています。実際にChromeで確かめると次のようになりました。
| 指定 | 実測サイズ | 結果 |
|---|---|---|
width:300px; height:auto; aspect-ratio:14/15; | 300 × 321.42 px | 幅÷高さ 0.933。指定どおり |
width:300px; height:200px; aspect-ratio:14/15; | 300 × 200 px | aspect-ratio は無視される |
検証環境はChrome 150（macOS・2026年8月2日）です。「比率を書いたのに反映されない」の原因は、ほぼこの高さの固定です。カンプの数値を width と height の両方に写すと比率指定は死にます。
object-fit と object-position が担当すること
object-fit は、画像や動画のような置換要素の中身をどう箱に収めるかを決めるプロパティです（MDN・object-fit／2026年8月2日取得）。MDNの定義では cover は比率を保ったまま箱いっぱいに拡大してはみ出した分を切り取り、contain は箱に収まるまで縮めるので余りが出ます。初期値は fill で、比率が合わないときは引き伸ばされます。
ここで落とし穴があります。箱の形を決める前に object-fit: cover を書いても何も起きません。400×200pxの画像に width: 300px だけを与えた要素をChromeで測ると 300 × 150px、つまり元画像の比率のままの箱になり、切り取る余地が生まれないためです（実測）。先に aspect-ratio で箱の形を決めてから cover を足してください。
切り取る位置を決めるのが object-position で、既定値は 50% 50%（中央）です（MDN・object-position／2026年8月2日取得）。建築写真は空と建物の頂点が主役になりやすいので、50% 40% のように少し上寄せにすると見本に近づきます。見本と自分の実装を並べて、切れ位置が合う値を探してください。
大きな余白をGridで組む
ヒーローの骨格は、実測した 36 : 55 の比率をそのまま2カラムに落とすだけで組めます。
.hero {
display: grid;
grid-template-columns: 36fr 55fr;
grid-template-areas:
"title image"
"meta image";
gap: clamp(24px, 4vw, 64px);
padding-inline: clamp(24px, 8vw, 120px);
}
.hero__title { grid-area: title; }
.hero__meta { grid-area: meta; }
.hero__image { grid-area: image; }grid-template-areas は長方形でないと丸ごと無効になる
grid-template-areas は、グリッドのセルに名前を付けて領域を作るプロパティです（MDN・grid-template-areas／2026年8月2日取得）。MDNには「同じ名前のセルが長方形を形成しない限り、その宣言は無効である」と書かれています。
実際に、長方形にならないよう "txt img" と "img meta" の2行を書いてChromeで getComputedStyle を読むと、値は none になりました。一部が効かないのではなく、その宣言だけが丸ごと消えます。名前指定を無視した素の並びに戻ったら、まずここを疑ってください。空けておきたいマスは .（MDNの用語ではnull cell token）で埋めます。
gap をパーセントで書かない
余白を可変にしたくて gap をパーセントで書くと、期待と違う結果になります。高さを指定していない親に gap: 10% を指定し、20px四方の子を3つ並べてChromeで測りました。
| レイアウト | 指定 | 実測結果 |
|---|---|---|
| Flexbox（縦並び） | gap: 10% | 間隔は0px。余白が消える |
| Grid | gap: 10% | 間隔は6px。ただしコンテナの高さは余白を含まないまま60pxで、そのぶんあふれる |
MDNも、Flexboxではパーセントの gap は常に0になり、Gridでは余白を0として高さを計算したあとに余白が足されるためあふれる、と説明しています（MDN・gap／2026年8月2日取得）。余白はパーセントではなくpxか clamp() で書くのが安全です。
その clamp() は最小値・推奨値・最大値の3つを取り、max(MIN, min(VAL, MAX)) として解決されます（MDN・clamp()／2026年8月2日取得）。骨格の padding-inline: clamp(24px, 8vw, 120px) をビューポート幅1400pxで評価すると計算値は112px（＝8vw）でした（実測）。8vwが24pxを下回るところで下げ止まり、広い画面では120pxで頭打ちになります。この一行だけで、メディアクエリを書かずに余白が流動化します。
Figmaの数値をCSSに移すときの対応
インスペクトが使える場合も、方法Bで比率から起こす場合も、対応関係は同じです。
| Figma側 | CSS側 | 移すときの注意 |
|---|---|---|
| Auto Layout の gap | gap | 固定pxのままだと狭い画面で詰まる。clamp() で下限と上限を決める |
| Auto Layout の padding | padding-inline | 左右の余白はこのデザインの主役。最小値を必ず自分で決める |
| フレームの W × H | aspect-ratio | 比率に直して渡す。W と H を両方pxで固定しない |
| 画像塗りの Fill / Fit | object-fit | 呼び名はバージョンで変わる。cover と contain のどちらが見本と一致するかは目で確かめる |
| 色・文字サイズ | color / font-size | インスペクトできないときはスクリーンショットからスポイトで拾う |
完成条件（この課題ができたと言える状態）
「見本に似ている」は判定になりません。ブラウザの幅を1440px・900px・375pxの3つに変えて、次の5項目を自分で確かめてください。すべてOKならこの課題は合格です。
| 判定項目 | 確かめ方 | 外れたときに疑うこと |
|---|---|---|
| 写真の比率が変わらない | 各幅で写真要素の 幅÷高さ を計算し、常に約0.93なら合格 | width と height を両方pxで指定していないか |
| 写真の見切れ方がブレない | 各幅で建物のどこが切れているかを見比べ、切れ位置が同じなら合格 | object-fit が未指定か、object-position が既定の中央のままか |
| 狭い画面で横スクロールが出ない | 375px幅にしてコンソールで下のコードを実行し、0なら合格 | 余白や写真幅を固定pxで置いていないか |
| 左右の余白が幅に応じて動く | 1440pxと375pxで .hero の計算後の padding-left を比べ、値が違えば合格 | clamp() の最小値と最大値が近すぎないか |
| テキスト列と写真の幅比が見本どおり | 1440px幅で両方の幅を読み、左：右 がおよそ 36 : 55 なら合格 | grid-template-columns に書いた比率 |
// 0 なら合格。1以上ならその数値ぶん横にはみ出している
document.documentElement.scrollWidth - document.documentElement.clientWidth;疑う先は1段だけにしてください。ここで挙げた原因を直しても直らない場合は、その要素だけを空のHTMLに切り出して再現させるほうが早く終わります。
つまずきポイント
以下は、この記事のためにChrome 150（macOS・2026年8月2日）で実際に再現させたものだけを載せています。
| 症状 | 原因 | 直し方 |
|---|---|---|
| 指定した比率にならない | width と height を両方pxで固定している。片方が自動でないと aspect-ratio は効かない | height を auto に戻す |
object-fit: cover を書いたのに何も切り取られない | 箱の形が元画像の比率のままで、切り取る余地がない | 先に aspect-ratio か height で箱の形を決める |
| 写真が縦や横に伸びて見える | object-fit が初期値の fill のまま。比率が合わない画像は引き伸ばされる | object-fit: cover を足す |
| 領域名を書いたのにレイアウトが効かない | 同名セルが長方形になっておらず、宣言ごと無効になっている | 同じ名前が長方形に並ぶよう書き直し、空きは . で埋める |
| 余白が消える、または下にあふれる | gap をパーセントで書いている | gap はpxか clamp() で書く |
次の課題へ
ひとつ前の課題は Figma模写 #1 Figmaで始める模写コーディング です。模写の進め方そのものと、Figmaの基本操作をここで扱っています。
次は Figma模写 #3 音楽系ランディングページ へ進んでください。今回は静的な比率と余白が主題でしたが、#3は情報量の多いページを組む練習になります。
難しすぎる、あるいは物足りないと感じたら 模写コーディング課題の一覧 から別のレベルを選び直せます。
「そもそも余白やカラムをどう決めるのか」から固めたい場合は デザインカンプ前に決めるWebデザインのルール を先に読んでおくと、この課題の比率の話がつながります。
よくある質問（FAQ）
Q. Figmaの見本はログインなしで見られますか？
2026年8月2日に実ブラウザで確認したところ、ログインなしでキャンバスは表示されました。ただし画面に「コメント、編集、インスペクトを行うにはサインアップしてください」と出るため、サイズ・余白・色を読み取るインスペクトは使えません。
Q. インスペクトが使えないまま模写しても意味はありますか？
あります。実務で渡されるカンプにも数値が入っていないことは珍しくなく、そこで必要になるのは「比率に直して組む力」だからです。この記事の方法B（キャンバス幅を100として比率を出し、fr と clamp() で置き直す）がその練習そのものです。
Q. 見本と1px単位で一致させる必要はありますか？
必要ありません。合格ラインは絶対値の一致ではなく、幅を変えても写真の比率と左右の余白が保たれることです。完成条件の5項目を満たしていれば、数pxの差は問題になりません。
Q. レスポンシブ対応は必須ですか？
必須です。今回の完成条件には375px幅で横スクロールが出ないことを含めています。ただしスマートフォン専用のデザインを起こす必要はなく、2カラムを1カラムに落として clamp() で余白を縮めるところまでで構いません。
Q. スライダーやアニメーションも実装しますか？
この課題では実装しません。見本にある前後の矢印と「01 / 02」のカウンタは、見た目だけ再現すれば十分です。合格条件を満たしたあと、発展としてスライダー系ライブラリを足すのは自由です。
Q. 写真素材は見本と同じものを用意すべきですか？
同じである必要はありません。むしろ比率が違う写真のほうが aspect-ratio と object-fit の練習になります。横長の写真を用意し、縦長寄りの箱の中で正しく切り取られるかを確認してください。