このユニットのゴール
ユニット3で作った美容室トップページのカンプを、自分の手でHTML / CSSで実装し、インターネットに公開する。
進め方の地図
| 週 | やること | 仕上がるもの |
|---|---|---|
| 1週目 | 授業1: HTML / CSSの思い出し運転 | 自己紹介ページの作り直し |
| 2〜3週目 | 授業2: Flexboxで「並べる」を制する | カード列・ナビ・中央寄せの3部品 |
| 4週目 | 授業3: カンプの数値をコードに写す | 「そら」のヘッダー実装 |
| 5週目 | 授業4: GitHub Pagesで公開する | 世界中から見られる自分のURL |
| 6週目 | ユニット制作: トップページ完全実装 | 公開された美容室トップページ |
怖がらなくて大丈夫です。HTMLとCSSは、Step 2で一度通った道です。そして今のあなたには、当時なかった武器 ― デザインの理論とカンプ ― があります。「何を作るか」が完全に決まっている実装は、ゼロから作るより何倍も簡単です。
授業1: 思い出し運転 ― 今の腕で作り直す
まず、Step 2の記憶を呼び戻します。教材は当時と同じ、HTMLの授業とCSSの授業です。ざっと読み直したら、すぐ手を動かします。
演習 1-A (リードつき) | 自己紹介ページを「今の目」で作り直す
お題: Step 2で作った自己紹介ページを、見ないでもう一度作ります。ただし今回は、デザインの理論つきです。
- VS Codeで新しいフォルダを作る「jikoshokai-2」フォルダに
index.htmlとstyle.cssを作ります。ひな形の書き方を忘れていたら、Step 2の授業3を開きながらでOKです。 - 内容を組む名前 (見出し)・ひとこと・好きなことリストの3ブロックを作ります。
- 理論で味つけするユニット1の知識で、文字の階層 (28 / 16 / 13)・行間1.7・余白は8の倍数を効かせます。色は自分のパレット3色だけです。
- 当時の作品と並べるStep 2の作品とブラウザで見比べます。同じ自分が作ったとは思えない差が見えるはずです。それが、この半年で育った目です。
思い出せなくて止まったら: 15分ルールの出番です。見本 jikoshokai-mihon.html を右クリック → ページのソースを表示で中身を見て、写してから理解しましょう。
授業2: Flexboxで「並べる」を制する
カンプ実装の山場は、結局「横に並べる」です。CSSのFlexbox (フレックスボックス) は、Figmaのオートレイアウトとほとんど同じ考え方なので、あなたには有利な戦いです。対応表を頭に入れましょう。
| Figmaのオートレイアウト | CSSのFlexbox |
|---|---|
| 横並びにする | display: flex; |
| 要素の間隔 (Gap) | gap: 16px; |
| 間隔を「Auto」(両端寄せ) | justify-content: space-between; |
| 縦方向の中央ぞろえ | align-items: center; |
例題 (リードつき) | カード3枚を横に並べる
- HTMLで箱を3つ作る次のように書きます。
<div class="cards"> <div class="card">カット</div> <div class="card">カラー</div> <div class="card">パーマ</div> </div> - 親にflexを指定するCSSはこれだけです。
.cards { display: flex; gap: 16px; } .card { flex: 1; background: #ffffff; border-radius: 14px; padding: 24px; } - ブラウザで確かめる3枚が等しい幅で横に並べば成功です。
flex: 1が「余った幅を等しく分け合う」の意味です。 - 1行で覚える「並べたい子たちの親に
display: flex」。Flexboxの迷子の9割は、子に書いてしまうのが原因です。
演習 2-A (リードつき) | お店のナビを組む
お題: 「左に店名、右にメニュー (料金・アクセス・予約)」のヘッダーを組みます。
- HTML:
headerの中に、店名のdivとメニューのnav(中にaを3つ) を置きます。 - CSS:
headerにdisplay: flex;とjustify-content: space-between;とalign-items: center;を指定します。 - メニューの中も並べる
nav自身にもdisplay: flex; gap: 24px;を指定します。Flexboxの入れ子は、オートレイアウトの入れ子と同じ発想です。
答え合わせ: ブラウザの幅を広げたり狭めたりして、店名が左端・メニューが右端に張りついていれば正解です。ユニット2の演習1-B (Figma版ナビ) と同じものが、コードでできました。
演習 2-B (ヒントだけ) | ど真ん中に置く
お題: 画面の縦横ど真ん中にキャッチコピーを置いた、ヒーロー (大きな看板エリア) を作ります。高さは 60vh (画面の高さの60%) にします。
ヒント: 親に
display: flex; justify-content: center; align-items: center; の3点セットです。「Flexbox 中央寄せ」は実務での検索回数ナンバーワンと言われる定番技なので、ここで体に入れておきましょう。授業3: カンプの数値を、そのままコードに写す
デザイナー出身の実装の強みは、「カンプに全部書いてある」と知っていることです。色・サイズ・余白・書体、全部Figmaの右パネルから読み取れます。勘で書かず、数値を写します。
例題 (リードつき) | 「そら」のヘッダーをカンプどおりに実装する
- 色を変数にするカンプのルールブックから3色を写して、CSSの最初に書きます。
自分のパレットの値に置きかえてください。以後、色は:root { --base: #faf6f3; --main: #a8756b; --accent: #5e8c7c; }var(--main)のように使います。スタイル登録のCSS版です。 - 書体を読み込むGoogle Fontsで使った書体 (例: Noto Sans JP) を選び、表示される
<link>タグをHTMLの<head>に貼り、CSSでfont-familyに指定します。 - 余白を写すFigmaでヘッダーを選び、パディングの数値 (例: 上下16・左右40) を読み取って、CSSの
padding: 16px 40px;に写します。 - 並べて検品するブラウザとFigmaを左右に並べ、目を細めて見比べます。違って見える場所は、たいてい余白か文字サイズの写しまちがいです。
プロの小わざ: Figmaは要素を選ぶと右パネルにCSSの参考値を出してくれます (右パネルのモード切り替えから確認できます)。ただし丸写しではなく「答え合わせ」に使うのが上達の近道です。
演習 3-A (ヒントだけ) | ヒーローとカード列も写す
お題: トップページの上半分 (ヘッダー + ヒーロー + メニューカード3枚) まで実装を進めます。写真は無料素材か、灰色の四角のままで構いません。
ヒント: 部品はすべて授業2で作りました。ナビ + 中央寄せヒーロー + カード3枚を、カンプの数値で着せ替えるだけです。
授業4: GitHub Pagesで世界に公開する
作ったページを、インターネットの本物のURLで公開します。使うのはGitHub (ギットハブ) という、世界中の開発者がコードを置いている無料サービスです。今回は黒い画面を使わず、ブラウザだけで公開します。
例題 (リードつき) | ブラウザだけで公開する
- アカウントを作る
github.comで「Sign up」します。ユーザー名は半角英数で、作品のURLの一部になるので、人に見せられる名前にしましょう。 - リポジトリを作る右上の + →「New repository」。名前は
salon-sora、公開設定は「Public」にして作成します。リポジトリは「作品のフォルダ」だと思えばOKです。 - ファイルを上げる「uploading an existing file」のリンクをクリックし、
index.htmlとstyle.cssをドラッグ&ドロップして、緑の「Commit changes」を押します。 - 公開をオンにするリポジトリの「Settings」→ 左メニューの「Pages」→ Branchを「main」にして「Save」を押します。
- URLを開く数分待つと、同じ画面に
https://ユーザー名.github.io/salon-sora/という公開URLが表示されます。スマホでも開いてみましょう。あなたの作品が、世界中から見られる状態になりました。
公開前の確認: 本名・住所・電話番号など、公開したくない情報がページに入っていないかを必ず見直しましょう。架空のお店の情報は架空のままにしておきます。
ユニット制作: トップページ完全実装
ユニット制作
ユニット3のカンプを、最後まで実装して公開します。
- 残りのブロックを実装する料金の入り口・アクセス・フッターまで、カンプの数値どおりに組みます。
- スマホ対応を1つだけ入れるCSSの最後に次を足し、スマホ幅でカードが縦に並ぶようにします。
「画面が600pxより狭いときだけ、このCSSを効かせる」という意味です。@media (max-width: 600px) { .cards { flex-direction: column; } } - 検品するFigmaのカンプと並べて見比べ、ブラウザの幅を狭めてスマホ表示も確かめます。
- 公開して発表するGitHubに上げ直して、公開URLをスタッフに送ります。発表では「カンプと違ってしまった場所」も正直に見せましょう。その差にこそ、次の学びが入っています。
カンプとの違いに気づいたあなたへ: 「実装してみたら、この余白は詰まって見える」のような発見は、デザイナーとしての財産です。カンプ側を直してよいのです。作って・見て・直すの往復が、本物の制作です。
つまずきやすいポイント
表示が崩れて原因が分からないとき: 開発者ツール (F12) で要素を選ぶと、効いているCSSが右に出ます。打ちまちがい (セミコロン忘れ・スペルミス) が原因の8割です。15分調べて分からなければ、コードを全部AIに貼って「どこが原因?」と聞きましょう。質問できるのも実力のうちです。
このユニットで挫折しかけたら: 完璧な再現は目標ではありません。「ヘッダーとカード列だけでも、カンプどおりに動いた」で十分な収穫です。デザインコースの本線はあくまでデザインです。安心して、できたところまでで先に進みましょう。
発展チャレンジ (余力のある方へ)
発展チャレンジ
- 料金ページと予約ページ (見た目だけ) も実装して、3ページをリンクでつないでみましょう。
- ボタンに
:hover(マウスをのせたときの色変化) をつけてみましょう。ユニット2で作ったバリアントのコード版です。 - フロントエンドコースのユニット1をのぞいてみましょう。本職のフロントエンドが何を練習しているかが分かると、カンプの渡し方も変わります。