コーディング練習用のデザインカンプを2種類無料配布。模写OK・ポートフォリオ掲載OK（Adobe XD共有リンク＋PNG）
模写コーディングの題材やポートフォリオに載せる制作物を探している人へ、筆者が作ったデザインカンプ2種類を無料で配布しています。Adobe XDの共有リンクとPNG全体画像つき。XDを持っていなくてもブラウザやFigmaで寸法とCSSが読める手順、模写の進め方、利用してよい範囲まで解説します。
PR｜この記事にはアフィリエイト広告（A8.net）が含まれます。
HTML/CSSの基礎を一通り終えたあと、「次は何を組めばいいのか」で止まってしまうことがあります。既存のサイトを模写しても著作権が気になって公開できず、ポートフォリオに載せる制作物が増えないという詰まり方です。
そこで、筆者が2020年に自作したWebサイトのデザインカンプ2種類を、無料で配布しています。模写コーディングの練習に使ってよく、組んだ成果物はポートフォリオに載せてよく、自分のサイトのデザインとして使っても構いません。配布の形はAdobe XDの共有リンクと、デザイン全体のPNG画像です。
Adobe XDを持っていない人でも使えます。共有リンクはAdobeアカウントなしでブラウザから開けて、要素を選べば寸法とCSSが読めます。PNGの全体画像をFigmaに置いて測る方法もあり、この記事ではその両方を説明します。
この記事は、2020年に公開した3本（デザインカンプ配布の第1弾・第2弾と、Adobe XDの勉強方法）を1本にまとめて、2026年9月22日の内容に書き直したものです。公式ページで確認できた範囲をもとにした解説です。情報確認日：2026年9月22日。
- 料金はかかりません。会員登録も必要ありません。
- 使ってよい用途は3つです。模写コーディングの練習の題材として、組んだ成果物をポートフォリオに掲載する実績として、自分のサイトやポートフォリオのデザインとして。仕事の受注につなげる目的で使っても構いません。
- できないことは1つです。デザインデータそのもの（共有リンクの中身やPNGの全体画像）を、自分の配布物・販売物として再配布したり売ったりすることはご遠慮ください。組んだHTML/CSSはご自身の成果物なので、この制限はかかりません。
- 共有リンクにはコメント機能が付いていますが、書き込みはお控えください。ほかの利用者にも見えてしまいます。
配布しているデザインカンプは2種類
どちらもポートフォリオサイトのトップページを想定した1枚もののデザインで、PC表示だけを作っています。スマートフォン表示のカンプは用意していないので、レスポンシブ対応まで練習したい場合は、崩れ方を自分で決めて組むことになります。難易度は高くありません。セクションを縦に積む構成なので、CSSのレイアウトを一通り触るのに向いています。
比べる点 | 第1弾 | 第2弾 |
|---|---|---|
デザインの雰囲気 | 背景写真を大きく使ったシンプルなLP型 | 写真1枚を基調にした、やや情報量の多い構成 |
全体画像の大きさ | 1280×4666ピクセル | 1280×4044ピクセル |
背景写真の出所 | O-DAN経由で探した商用利用可の写真2枚 | Pixabayの写真1枚 |
向いている人 | 初めて模写に取り組む人 | 1本組み終えて2本目が欲しい人 |
第1弾：背景写真を大きく使ったポートフォリオ
- Adobe XDの共有リンク（第1弾）：ブラウザで開くと、要素ごとの寸法・色・CSSが読めます
- 全体画像 1倍（1280×4666、PNG、約1.6MB）
- 全体画像 2倍（2560×9332、PNG、約4.5MB）
2倍の画像は、高解像度ディスプレイで細部を確認したいときや、文字の縁がぼやけずに読める状態で寸法を測りたいときに使ってください。1倍だけで足りることも多いので、まずは軽い方から開くのがおすすめです。
第2弾：情報量を少し増やしたポートフォリオ
第2弾は、2020年時点で筆者が使っていたポートフォリオサイトをもとに、少し簡略化して作ったものです。そのサイト自体はドメインを手放したため、現在は公開していません。見本として並べて比べることはできないので、カンプだけを見て組んでいただく形になります。
Adobe XDを持っていなくても、このカンプは読めます
ここが2020年といちばん変わった点です。Adobe XDは現在メンテナンスモードに入っています。Adobeのヘルプページには「Adobe XD は現在メンテナンスモードです。」と表示され、よくある質問には、製品の開発投資や新機能の追加は行わず、既存の利用者にはバグ修正とセキュリティ・プライバシーの更新で対応を続ける、と書かれています（2026年9月22日確認）。サポートを終える時期については、十分な予告期間を置いて決めるとだけ説明されています。
製品ページ（adobe.com/jp/products/xd.html）をブラウザで開くと、購入や無料プランの案内ではなくXDのヘルプページへ転送されました。2026年9月22日時点で、Adobeの公式ページからXDを新しく契約する導線は見つかりませんでした。つまり、これから学習を始める人がXDを手元に入れて使える前提では書けません。
一方で、配布に使っている共有リンクは生きています。2026年9月22日にAdobeアカウントにログインしない状態でブラウザから両方の共有リンクを開いたところ、どちらもカンプが表示され、画面に「スペックを表示」の切り替えがありました。XDのアプリがなくても、カンプを読む作業はブラウザだけで完結します。
共有リンクはAdobeのサービス上にあるため、将来閲覧できなくなる可能性があります。組み始める前に、全体画像のPNGを自分のパソコンに保存しておくと、リンクの状態に左右されずに練習を続けられます。
方法1：共有リンクで寸法とCSSを読む
共有リンクを開いて、画面上の要素をクリックすると、その要素の幅・高さ・位置が数値で出ます。文字を選べばフォント名・サイズ・行間・色が表示され、CSSの記述をコピーすることもできます。模写で毎回つまずく「この余白は何ピクセルなのか」を推測しなくて済むのが、この配布物の利点です。
2020年に第1弾を公開したときの画面が、次の3枚です。共有リンクの画面構成はその後変わっている可能性があるので、雰囲気をつかむ資料として見てください。
表示されるCSSをそのまま全部貼ると、位置を絶対指定した読みにくいコードになります。色・フォントサイズ・行間・角丸のように「値を知りたいだけ」の部分を写し、レイアウトの組み方は自分で決めるのが練習になります。
第1弾を公開したときに、共有リンクを操作しているところを録画した動画も残っています。クリックすると数値が出る様子は、この動画のほうが分かりやすいかもしれません。
方法2：PNGの全体画像をFigmaに置いて測る
共有リンクを使わず、PNGの全体画像だけで進める方法もあります。Figmaに新しいファイルを作り、全体画像を貼り付けて、その上に長方形を重ねていくやり方です。長方形の幅・高さ・位置がFigma側で数値として出るので、余白やカラム幅を自分で測れます。カンプがPCデザインだけなので、スマートフォン向けの配置を自分で考えるときにも、この上で試せます。
Figmaの料金ページ（2026年9月22日確認）では、無料のStarterプランは「Free limited access to Figma products」と説明され、下書き（drafts）は無制限、UIキットとテンプレートの利用、1日150・月最大500のAIクレジットが含まれると書かれています。また同じページのよくある質問に、無料の閲覧者でもファイルの寸法やプロパティの値を見て、CSS・iOS・Androidのコードをコピーし、アセットを書き出せると書かれています。有料プランはFull seatが月16ドルからで、無制限のファイルとプロジェクト、Dev Modeの詳細な検査が付きます。
つまり、他人が共有したFigmaファイルから数値を読む作業も、自分の下書きに画像を置いて測る作業も、無料の範囲で足ります。練習のためにFigmaへ課金する必要はありません。
模写コーディングの進め方
順番を守ると途中で作り直す量が減ります。カンプを開いていきなりCSSを書き始めると、あとで構造をいじるたびに見た目が崩れて、そこで止まりがちです。
- HTMLで構造だけ作る。CSSは1行も書かず、ヘッダー・ファーストビュー・自己紹介・実績・お問い合わせ・フッターというセクションの区切りと、見出し・段落・リスト・画像の役割だけを置きます。文字が縦に並んだだけの状態で、上から読んで内容の順序が分かれば構造は正しく取れています。
- PC表示のCSSを当てる。先に全体の文字色・フォント・行間・コンテンツ幅の基準を決めてから、セクションごとに整えます。カンプはPC表示だけなので、この段階が本番です。共有リンクやFigmaで測った値を使って、上下の余白から先に合わせると早く近づきます。
- レスポンシブに対応させる。カンプにスマートフォン表示はないので、ここは自分で判断します。横並びのカードを縦積みにする、ナビゲーションをボタン開閉に変える、余白を詰める、文字サイズを少し下げる。この4つを決めるだけでも形になります。何を根拠に崩したかをメモに残すと、ポートフォリオの説明文に使えます。
- JavaScriptで動きを足す。スクロールに応じたフェードイン、ナビゲーションの開閉、ページ内リンクのなめらかなスクロールあたりが手を出しやすい範囲です。動きはカンプに描かれていないので、足す・足さないも自分で決めて構いません。
フォントは、英字にLato、日本語に游ゴシック体を使っています。LatoはGoogle Fontsから読み込めます。次のように書くと、カンプと同じ見え方に近づきます。
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
body {
font-family: "Lato", "Yu Gothic Medium", "游ゴシック Medium", "YuGothic", sans-serif;
}游ゴシック体はWindowsとmacOSに入っている書体なので、読み込みは必要ありません。ただし環境によって太さの見え方が変わるため、カンプと1ピクセル単位で一致させようとしなくて大丈夫です。
背景写真はどう扱えばよいか
第1弾の背景写真2枚は、O-DANという無料写真素材の検索サイトを経由して探した、商用利用できる素材です。第2弾の背景写真はPixabayのこの写真を使っています。
Pixabayのコンテンツライセンス要約（2026年9月22日確認）では、素材を無料で使うこと、作者名の表示なしに使うこと、加工して新しい作品にすることが認められています。禁じられているのは、創作的な加工を加えずに素材をそのままの形で販売・配布すること、識別できる商標やロゴを含む素材を商品やサービスに関連して商用利用すること、誤解を与える使い方などです。写真をそのまま素材として売らなければ、自分のサイトに使う分は範囲内です。
写真そのものを差し替えても構いません。自分で選んだ写真に変えると、同じカンプから組んだサイトでも印象が変わるので、ポートフォリオに載せるときは差し替えたほうが個性が出ます。
2026年の練習では、AIに聞きながら進める
模写の作業そのものは変わっていませんが、詰まったときの選択肢は増えました。手順は崩さず、自分で書いたあとの確認役としてAIを使うのが、力の付く使い方だと筆者は考えています。
- 書いたコードをレビューさせる。自分でひととおり組んだあとに、HTMLとCSSを渡して「見出しの階層が飛んでいないか」「同じ指定を繰り返していないか」「この余白の付け方でスマートフォン表示が崩れないか」を聞きます。直す前に理由を説明させると、次から自分で気付けるようになります。
- カンプの色や余白を数値で聞く。全体画像の一部を貼って、「この見出しと本文の間隔は何ピクセルくらいか」「この背景色の近似値は何か」と尋ねる使い方です。答えは目安なので、共有リンクやFigmaで測れる箇所は測ったほうが正確です。測れない箇所の当たりを付けるのに向いています。
- エラーの意味を説明させる。JavaScriptがコンソールに出したメッセージを貼って、何が起きているかを日本語で説明させます。修正コードだけもらって貼り付けると、同じ失敗を繰り返します。
逆に、カンプを渡して最初からコードを書かせてしまうと、練習の目的が消えます。模写は「見たものを構造に落とす」訓練なので、最初の1本は自分の手で書き切ってください。2本目以降で、面倒な繰り返し部分だけAIに任せる形に切り替えると、速さと理解の両方が付きます。
ツールの具体的な使い方は、別の記事にまとめています。エディタの中で補完として使う形はGitHub Copilotの使い方を初心者向けに解説した記事を読んでいただくと、無料プランでできる範囲まで分かります。コードの説明や修正を対話で進める形はClaude Codeの解説記事で、料金と商用利用の条件まで確認できます。
コーディングと並行して生成AIの使い方そのものも学びたい場合は、生成AIスクールの比較記事を読んでいただくと、スクールごとの学べる範囲と料金、無料相談の有無が分かります。
組み終えたら、ポートフォリオの形に整える
カンプを1本組めたら、それを作品として見せられる状態にする段階に移ります。ファイルをサーバーに置いて動くURLにする、何を考えて作ったかを説明する文を添える、複数の作品を並べる置き場所を作る、といった作業です。
この配布物を使って作った成果物は、そのままポートフォリオに載せて構いません。ただし「配布されたデザインを自分で組んだもの」と書き添えるほうが、面接や打ち合わせで説明しやすくなります。デザインまで自分でやったと受け取られると、あとで話が食い違います。
次の段階の進め方は独学ロードマップのポートフォリオ作成編にまとめています。あわせて読んでいただくと、公開までに何を用意すればよいかが分かります。
組んだサイトを動くURLにする置き場所は、無料のGitHub Pagesとレンタルサーバーのどちらかを選ぶことになります。費用と手順の違いはポートフォリオサイトを公開する方法の記事で比べています。あとでWordPressのブログも同じ場所に置きたい場合や、PHPで動く問い合わせフォームを付けたい場合は、レンタルサーバーを使う形になります。
エックスサーバーは、HTML/CSSで組んだサイトのファイルを置いて公開することも、WordPressを立ち上げることもできるレンタルサーバーです。カンプから組んだ作品を独自ドメインのURLで見せたい人に向いています。
- 全サーバープランに10日間の無料お試しがあり、初期費用は0円です。
- スタンダードプランの通常料金は、36か月契約で月額990円（税込）です。契約期間が短いほど月額は上がり、3か月契約は月額1,320円（税込）。料金は契約期間分をまとめて前払いします。
- 新規契約の場合、スタンダードプランで独自ドメインが無料になるのは12か月以上の契約（12か月で1つ、24か月以上で2つ）で、自動更新設定を有効にすることが条件です。12か月未満の契約は対象外です。
料金・条件は2026年10月25日に公式サイトで確認した内容です。期間限定の割引が行われていることもあるので、申込み前に公式サイトで最新の表示を確認してください。
使ってくれた人からの報告と、無料で配っている理由
2020年4月に、フロントエンドを学んでいたpinoさんから「まさかずさんが配布されているデザインカンプをコーディングしました」という報告をいただきました。line-heightの分だけ余白がずれることに気付いた、という具体的な学びまで書かれていて、配って良かったと思えた出来事でした。
配っている理由は単純です。筆者自身がプログラミングを独学していたとき、ポートフォリオに載せられる題材が見つからず、デザインを自分で考えるところから始めるのが大変でした。既存サイトの模写は著作権の扱いが不安で公開できません。その詰まり方を減らしたくて、自分で作ったカンプを開いています。
成果物を作っても報告は必要ありません。もし見てほしい場合はお問い合わせフォームから送ってください。うまくいかなかった箇所や、カンプ側の分かりにくい点を教えてもらえるのも助かります。
まとめ
- ポートフォリオサイトのデザインカンプ2種類を無料で配布しています。模写練習、ポートフォリオ掲載、自分のサイトのデザインに使えます。デザインデータそのものの再配布と販売はご遠慮ください。
- どちらもPC表示のみのデザインです。第1弾は1280×4666、第2弾は1280×4044の1枚もので、共有リンクとPNGの全体画像（1倍・2倍）を用意しています。
- Adobe XDはメンテナンスモードで、公式ページから新しく契約する導線は2026年9月22日時点で見つかりませんでした。それでも共有リンクはブラウザで開けるので、XDを持っていなくても寸法とCSSは読めます。
- 共有リンクを使わない場合は、PNGをFigmaに置いて測る方法があります。Figmaの無料プランの範囲で足ります。
- 進め方は、構造 → PC表示のCSS → レスポンシブ → JavaScriptの順です。AIは自分で書いたあとのレビュー役として使うと、練習の効果を保ったまま速く進められます。
