この授業のゴール
3つの作品を「完成」させて、zipで提出するまでの流れを体験する。
1. 進め方 ― 1作品 = 1つの流れ
どの作品にも「見本(答え)」を用意してあります。ゼロから考える必要はありません。次の3段で進めます。
- 見本を見る見本(答え)のファイルをブラウザで開いて、完成形を確かめる。
- 写して作る作品ごとに新しいフォルダを作り、VS Code で見本を写して、同じものを完成させる。コピペでもOKです。余裕があれば手で写すと、打つこと自体が練習になっておすすめです。
- 自分のものに変える名前・テーマ・色を自分のものに差しかえる。1か所変えたら、それはもう「自分の作品」です。確認(Live Server + スマホ表示)をして、zipで提出します。
「完成」の決め方: 完璧を目指すと終わらなくなります。「要件(下に書いてある条件)を全部満たしたら完成」と決めて、まず1回完成させましょう。直したいところは、完成のあとで直せばいいのです。
2. 作品1: 自己紹介ページ
はじめての「自分で作ったWebページ」です。授業6「Figmaをはじめる」で作った設計図(見本: mihon-jikoshokai.png)の通りに作ります。
要件(これを満たしたら完成):
- ニックネームの見出し(
h1)がある - 「好きなこと」のリスト(
ul)がある - ひとこと(
p)がある - CSSで、背景色と見出しの色を変えてある
フォルダ構成: jikoshokai フォルダの中に index.html と style.css。本名を出す必要はありません。ニックネームでOKです。
見本(答え): jikoshokai-mihon.html ― 設計図を本物のHTMLにした答えです。まず写して完成させ、名前と中身を自分のものに変えましょう。
3. 作品2: カードUI
写真と文章がセットになった「カード」は、Webデザインで一番よく使う部品です。これが作れると、見た目がぐっとプロらしくなります。
要件:
- 画像・タイトル・説明文の3点セットのカードが1枚ある
- カードに枠線または背景色がついていて、まわりに余白がある
- 角丸(
border-radius)か影(box-shadow)のどちらかを使っている - 同じカードを3枚に増やしてある(コピー&ペーストでOK)
テーマの例: 好きな食べもの紹介カード、行ってみたい場所カード、おすすめの曲カード。写真は練習用素材(ねこ / パン / はな)をそのまま使ってOKです。
見本(答え): card-mihon.html ― 3枚横ならび・角丸・影、全部入りの答えです (画像3枚を同じフォルダに置くのを忘れずに)。写して動かしたら、テーマを自分の「好きなもの図鑑」に変えましょう。3枚を横に並べる秘密は
display: flex;。答えの中にコメントで説明があります。4. 作品3: 簡単LP(1枚もの)
LP(ランディングページ)は「1枚で何かを紹介しきるページ」のことです。架空のお店・サービスを1つ考えて、本番に近い流れで作ります。
要件:
- Figmaで設計図を描いてから作り始めている(ここが本番との共通点です)
- ヘッダー(お店の名前)・紹介文・メニューや特徴のリスト・お知らせ(営業時間など)の4つの部分がある
- 画像を1枚以上使っている(フリー素材でOK)
- 作品1・2よりも「自分らしい工夫」が1つ入っている(色、配置、文章、なんでも)
テーマの例: 架空のパン屋、架空のゲームショップ、架空の猫カフェ。実在のお店をまねる場合は「練習用」とページ内に書いておきましょう。
見本(答え)と素材: 完成形の答えは lp-mihon.html (デザインカンプ見本は mihon-lp.png)。文章は omise-text.txt、画像は pan.png をそのまま使ってOKです (リンクを右クリック →「名前を付けてリンク先を保存」)。まず「パンの森」を写して完成させ、そのあと お店の名前・色・メニューを差しかえて「自分のお店」にしましょう。設計図の描き方は授業6を見返してください。
5. 提出のしかた ― zipで渡す
- フォルダの中身を最終確認
index.html、style.css、使った画像がそろっているか見ます。 - Live Server でもう一度だけ表示確認提出直前の確認は、仕事でも必ずやる大事なひと手間です。
- フォルダを右クリック →「ZIP ファイルに圧縮する」授業1「パソコンの基本操作」の5章で練習した、あの操作です。
- できた zip をスタッフに渡す渡し方(共有フォルダ・チャット・USBなど)は教室のルールにしたがってください。
- 感想・アドバイスをもらうもらった指摘は、責められているのではなく「次の作品のヒント」です。メモしておくと、Step 3 以降で必ず効いてきます。
発展チャレンジ(慣れている方・A型の方向け)
発展チャレンジ
- LPに「スマホ対応」を足してみましょう。CSSの最後に
@media (max-width: 600px) { ... }と書くと、「画面が600pxより狭いときだけ」のルールが作れます(メディアクエリ)。スマホのときは文字を少し大きく、横並びを縦並びに。 - Google Fonts で見出しの書体を変えて、お店の雰囲気に合わせてみましょう。
- 「修正依頼への対応」を体験してみましょう。スタッフに、完成したLPへの修正依頼を2〜3個出してもらい、納期(たとえば翌日)を決めて対応します。A型での実務練習に直結する演習です。