美容室HPを模写して、
HTML/CSSの考え方を身につける
簡単な美容室ホームページを題材に、初心者でも迷わない模写の流れを解説します。
HTMLとCSSを勉強したのに、いざ美容室のHPを見て模写しようとすると手が止まる。
「どこからHTMLを書けばいいの？」
「CSSは何から整えるの？」
「画像と文字はどう並べるの？」
「余白はどこにつけるの？」
こうなる人は多いです。
でも、これは才能がないからではありません。
模写には、進める順番があります。
今日は、簡単な美容室HPを題材にして、初心者でも迷わない模写の流れを解説します。
今日作る美容室HPの構成
初心者向けなので、ページはシンプルにします。
作るのはこの5セクションです。
- ヘッダー
- ファーストビュー
- コンセプト
- メニュー
- アクセス・予約ボタン
美容室HPは、模写の練習に向いています。
理由は、必要な要素が分かりやすいからです。
ヘッダーには店名とメニュー。
ファーストビューには大きな写真とキャッチコピー。
コンセプトにはお店の雰囲気。
メニューには料金。
最後にアクセスと予約ボタン。
実案件でもよく出る構成なので、練習としてかなり使えます。
ステップ1：まずページを大きく分ける
いきなりコードを書かないでください。
まず、美容室HPを上から順番に見て、大きな箱に分けます。
今回ならこうです。
- ヘッダー
- ファーストビュー
- コンセプト
- メニュー
- アクセス
- フッター
大事なのは、デザインをパーツとして見ることです。
「このページを全部作る」と考えると難しいですが、「ヘッダーを作る」「ファーストビューを作る」「メニュー表を作る」と分ければ、かなり考えやすくなります。
ステップ2：各セクションの中身を分ける
次に、それぞれの中身を見ます。
たとえばファーストビューなら、次のように分けられます。
- 背景画像
- キャッチコピー
- サブコピー
- 予約ボタン
コンセプトなら、次のように分けられます。
- 見出し
- 説明文
- 美容室の写真
メニューなら、次のように分けられます。
- 見出し
- カット料金
- カラー料金
- パーマ料金
- トリートメント料金
HTMLは、この分けたパーツを上から順番に書いていくイメージです。
ステップ3：HTMLだけ先に書く
初心者がやりがちな失敗は、HTMLを書きながらCSSも同時に触ることです。
これは混乱します。
まずはHTMLだけでOKです。
見た目がダサくても大丈夫です。白い画面に文字が並んでいるだけで大丈夫です。
最初に確認するのはこの5つです。
- 店名がある
- キャッチコピーがある
- コンセプト文がある
- メニュー料金がある
- 予約ボタンがある
この段階では、色や余白は気にしません。
まずは、ページに必要な部品を置きます。
ステップ4：CSSは大きいところから整える
HTMLができたらCSSです。
CSSはこの順番で書きます。
- 横幅
- 余白
- 並び方
- 文字
- 色・装飾
美容室HPの場合、最初に見るべきは横幅と余白です。
画面いっぱいに広げるのか。
中央にまとめるのか。
左右に余白を入れるのか。
セクションの上下にどれくらい余白があるのか。
ここを先に整えます。
そのあとに、画像と文章を横並びにするか、縦並びにするかを考えます。
ステップ5：最後に美容室らしい雰囲気を作る
レイアウトができたら、最後に雰囲気を整えます。
美容室HPなら、次のポイントを意識します。
- やわらかい色
- 細めの文字
- 余白を広めに取る
- 角丸を少し入れる
- 写真を大きく見せる
初心者は、最初からおしゃれにしようとしすぎなくて大丈夫です。
まずは、パーツを分ける、HTMLを書く、CSSで整える。この流れを身につけることが大事です。
今日の宿題
今日の宿題は5つです。
5つ完了です。美容室HPを分解して見る準備ができています。
宿題1：美容室HPの見本を1つ選ぶ
まず、模写したい美容室HPを1つ選んでください。
ただし、最初から複雑なサイトは選ばなくてOKです。
おすすめは、この5つがあるサイトです。
- シンプルなヘッダー
- 大きなメイン画像
- メニュー料金表
- 予約ボタン
- アクセス情報
宿題2：ページを大きな箱に分ける
選んだ美容室HPを見て、上から順番に分けてください。
ヘッダー
ファーストビュー
コンセプト
メニュー
アクセス
フッター
この時点でコードは書かなくて大丈夫です。
まずは、どんな箱でできているかを見る練習です。
宿題3：ファーストビューの中身を分ける
次に、ファーストビューだけ見てください。
そこに何があるかを書き出します。
背景画像
キャッチコピー
サブコピー
予約ボタン
これができると、HTMLで何を書くべきかが分かります。
宿題4：CSSで見るポイントを書き出す
次に、CSSで見るポイントをメモします。
- 横幅
- 余白
- 並び方
- 文字サイズ
- 色・装飾
たとえば、ファーストビューならこうです。
横幅は画面いっぱい
高さは大きめ
文字は中央寄せ
背景画像が大きく入っている
ボタンは丸みがある
余白が広い
ざっくりで大丈夫です。
宿題5：HTMLだけ書いてみる
最後に、ファーストビューだけHTMLを書いてみてください。
CSSはまだ書かなくてOKです。
まずは、次の4つをHTMLで置くだけで大丈夫です。
- 店名
- キャッチコピー
- 説明文
- 予約ボタン
見た目は崩れていてもOKです。
今日のゴールは、完成ではありません。
美容室HPを見て、HTMLで必要な部品を置けるようになることです。
LINEへの提出内容
今日の宿題ができた人は、LINEに
美容室模写
と送ってください。
送る内容はこの5つです。
1. 選んだ美容室HP：
2. 大きな箱分け：
3. ファーストビューの中身：
4. CSSで見るポイント：
5. HTMLで置く部品：
例はこちらです。
1. 選んだ美容室HP：シンプルな美容室サイト
2. 大きな箱分け：ヘッダー、ファーストビュー、コンセプト、メニュー、アクセス
3. ファーストビューの中身：背景画像、キャッチコピー、説明文、予約ボタン
4. CSSで見るポイント：横幅100%、高さ大きめ、中央寄せ、余白広め
5. HTMLで置く部品：h1、p、aタグ
読むだけで終わると、またCSSで止まります。
でも、今日この5つを書き出せば、美容室HPをなんとなく見る人から、HTML/CSSに分解して見られる人に変わります。
最初から完璧に作る必要はありません。
まずは1つの美容室HPを選んで、ファーストビューだけ分解してください。
LINEで「美容室模写」と送るボタンを押した後、LINEのトーク画面で「美容室模写」と送信してください。