HTMLとCSSの練習方法として、よく「模写コーディング」がすすめられています。その中でも、「デザインカンプ」から作る練習は、実際のWeb制作に近いと言われます。私もこれから取り組むつもりで、その前に調べたことをこの記事にまとめます。
模写コーディングとデザインカンプ
| 言葉 | 意味 |
|---|---|
| 模写コーディング | すでにあるページやデザインを見本にして、同じ見た目になるようにHTMLとCSSを書く練習 |
| デザインカンプ | ページの完成見本となるデザインのデータ。デザイナーが Figma などのツールで作る。文字の大きさ、色、余白などを数値で確かめられる |
「カンプ」は英語の comprehensive layout（完成度の高いレイアウト）から来た言葉です。
カンプから作ると何が違うか
公開されているサイトを見て真似るだけだと、文字の大きさや余白は目で見て推測するしかありません。カンプがあれば、数値を読み取ってそのとおりに作れます。仕事ではデザイナーからカンプを受け取ってページを作ることが多いので、その流れを練習できるのが利点です。
ただし、カンプはパソコンなら幅1440pxなど、決まった幅で作られています。実際のページはいろいろな幅の画面で見られるので、「カンプの幅では同じ見た目にし、それ以外の幅でも崩れないように作る」ことが大事です。カンプにない幅でどう見せるかを自分で考えるのも、練習のうちです。
模写したものは公開しない
模写を始める前に知っておきたいのが、著作権です。実在のサイトや他の人が作ったカンプのデザイン、文章、写真には、それぞれ著作権があります。
- 練習は自分のパソコンの中で：
実在のサイトを模写したものを、文章や画像ごと自分のサーバーやGitHubなどで公開するのは避けます - 公開したいときは、公開してよい教材を使う：
練習用のカンプの中には、作品として公開してよいと利用条件に書かれているものがあるので、使う前に条件を確かめます
カンプから作る順番
- 全体を見て構造をつかむ：
ページがどんなブロックでできているか（ヘッダー、大きな画像、カードの並び、フッターなど）を見て、何度も出てくる部品（ボタン、見出し、使っている色やフォント）を書き出しておきます - HTMLで骨組みを作る：
header・main・footer・sectionなど意味のあるタグで区切り、見出しの階層を整えます。この段階では見た目は気にしません - CSSで並べて飾る：
カンプから色や文字の大きさ、余白の数値を読み取り、Flexbox や Grid で配置します - 画面の幅を変えて確かめる：
スマホ用のカンプがあればそれに合わせ、なければ自分で考えて、メディアクエリ（@media）で整えます - カンプと見比べる：
ブラウザの開発者ツールで画面の幅をカンプと同じにして、ズレているところを直します
ページの区切り方は「ページの区切り方｜header・nav・main・aside・footer」、見出しの階層は「hタグ（見出し）の基本」で紹介しています。
数値を読み取るときのポイント
余白の決まりを見つける
カンプの余白を測っていくと、8pxの倍数のように、一定の決まりで作られていることが多いと言われます。決まりが分かったら、CSSの変数（カスタムプロパティ）にまとめておくと、あとで直すときに1か所で済みます。
:root {
--space-s: 8px;
--space-m: 16px;
--space-l: 32px;
--color-main: #2a6fb0;
}
.card {
padding: var(--space-m);
margin-bottom: var(--space-l);
}画像の形式を使い分ける
| 形式 | 向いているもの |
|---|---|
| SVG | ロゴやアイコンなど、線と面でできたもの。拡大してもぼやけない |
| JPEG・WebP | 写真。ファイルが小さくなる |
| PNG | 背景を透明にしたい画像や、文字の入った画像 |
WebP は透明にも対応していて、PNGより小さくなることが多いです。
フォントは最初に読み込んでおく
カンプで使われているフォントがパソコンに入っていないと、文字の幅が変わって、改行の位置や全体の配置がズレます。Google Fonts などのWebフォントは、CSSを書き始める前に読み込む設定をしておきます。有料のフォントは、Webで使えるライセンスかどうかも確かめます。
カンプを見るツール
今のカンプは Figma で作られていることが多く、部品を選ぶと大きさや色、余白の数値を確かめられます。数値やCSSを読み取るための機能は、プランや、カンプを共有した人が与えた権限によって使える範囲が違うので、使う前に確かめます。
まとめ
- 模写コーディングは、見本と同じ見た目になるようにHTMLとCSSを書く練習。カンプがあれば数値を読み取って作れる
- カンプの幅でそろえたうえで、他の幅でも崩れないように作る
- 実在のサイトや他人のカンプを模写したものは公開しない。公開するなら公開してよい教材を使う
- 順番は「構造をつかむ → HTML → CSS → 画面の幅 → 見比べる」
- 余白は決まりを見つけてCSSの変数に、画像は形式を使い分け、フォントは最初に読み込む
実際に取り組んだら、使った教材やつまずいたところを、このブログでまとめる予定です。
コメント