HTML/CSSの基礎を勉強してきたので、今回は実際に架空のWebサイトを1つ作ってみました。
これまで参考書を見ながらコードを書いたり、部分的な練習をしたりしてきましたが、
「実際に一からサイトを作ったら、今の自分はどこまでできるんだろう？」
と思い、制作に挑戦してみることにしました。
今回作ったのは、ナチュラルな雰囲気の架空のコスメサイトです。
今回作ったサイト「Lumiere」
今回制作したのは、架空の化粧品ブランド「Lumiere」のWebサイトです。
HTML・CSSの基礎で作れることを前提に、
「シンプルだけど、カラーリングでそれなりに見えるサイト」
を目指しました。
こちらが実際に制作した架空サイトです。
複雑なデザインや特殊なアニメーションをたくさん使うのではなく、基本的なHTML/CSSの知識でどこまで形にできるのかを試してみたかったので、ナチュラルな化粧品サイトというテーマにしました。
サイトには、
- Header
- Main Visual
- About
- Works
- Contact
- Footer
などのセクションを作りました。
デザイン自体はシンプルですが、色や余白、文字の大きさなどを調整することで、ある程度Webサイトらしい見た目にできたと思います。
制作の流れ
今回のサイト制作は、以下のような流れで進めました。
① ChatGPTでサイトのアイデアを考える
まずは、作りたいサイトのイメージをChatGPTに伝えて、デザインの方向性を考えました。
「ナチュラルな化粧品サイトにしたい」
「シンプルだけどカラーリングで見栄えするサイトにしたい」
など、作りたいもののイメージを伝えて、サイトの構成やデザインの土台を作りました。
② Figmaでデザインカンプを作る
次に、Figmaを使ってデザインカンプを作りました。
デザインカンプの制作には、だいたい2時間ほどかかりました。
ここで、
- どこに何を配置するか
- どんな色にするか
- 画像の大きさ
- 文字の大きさ
- セクションごとの余白
などをある程度決めてから、コーディングに入りました。
先に完成形のイメージを作っておくことで、コーディングするときに「何を作ればいいのか」が分かりやすくなりました。
【 PC版 】
【 スマホ版 】
③ 部分ごとにコーディングする
今回、コーディングで意識したのが、最初にHTMLを全部書いて、あとからCSSを全部書くというやり方をしなかったことです。
参考書で紹介されていた方法を参考にして、
Headerを作る
↓
Headerのレスポンシブ対応をする
↓
Main Visualを作る
↓
Main Visualのレスポンシブ対応をする
というように、部分ごとに完成させていきました。
この方法が、個人的にはかなり合っていました。
最初にHTMLを全部書いてしまうと、
「これってどこの部分だっけ？」
となってしまったり、あとから微調整するときに分かりにくくなったりします。
そのため、1つのセクションを作ったら、その部分のレスポンシブ対応まで終わらせるようにしました。
レスポンシブ対応も同時に進める
今回特にやりやすいと感じたのが、レスポンシブ対応を後回しにしなかったことです。
例えば、
Headerを作る
→ PC版を整える
→ スマホ版を整える
→ 完成
というところまで終わらせてから、次のセクションへ進みました。
この方法だと、
「PC版はこれでいいけど、スマホではここを直さないと……」
という問題を後回しにせず、その場で解決できます。
一つずつスッキリ終わらせながらサイトが完成していくので、個人的にはおすすめの方法です。
制作で一番苦戦したところ
今回のサイトは、比較的シンプルなデザインにしたこともあり、参考書を見たり、分からないところを調べたりしながら進めることで、思っていたよりスムーズに制作できました。
ただ、やっぱり毎回苦戦するのがHeaderです。
特にスマートフォン版のメニュー開閉については、まだJavaScriptを勉強する前だったので、仕組みを理解できていません。
そのため、現時点では、
「とりあえず見本を真似して書く」
という状態です。
今回制作してみて、
「やっぱりJavaScriptを勉強しないと、自分で仕組みを理解して作れるようにはならないな」
と改めて感じました。
HTML/CSSだけでもサイトの形は作れますが、Webサイトを実際に操作できるものにしていくには、JavaScriptの知識も必要だと実感しました。
作っていて「勉強していてよかった」と思ったこと
今回サイトを作ってみて感じたのは、
HTML/CSSの基本知識があれば、かなりの部分まで形にできる
ということです。
最初は、
「これってどう書くんだっけ？」
と参考書を確認しながら作業していました。
でも、制作を進めていくうちに、
「ここはFlexboxを使えばいい」
「これはmarginで調整しよう」
「この部分はpositionを使おう」
というように、少しずつ手を動かせるようになっていきました。
途中からは、いちいち本を確認しなくても書ける部分が増えてきて、作業そのものが楽しくなりました。
Flexboxの知識が特に役立った
サイトを作っていて感じたのは、Flexboxの知識がかなり重要だということです。
Webサイトのレイアウトは、
「要素を並べる」
「ブロックを動かす」
「きれいに配置する」
という作業が多いので、Flexboxを理解しているとかなり対応しやすいと感じました。
以前はdisplay: flexもなんとなく使っていましたが、実際にサイトを作ることで、少しずつ使い方が分かるようになってきました。
文字を調整するCSSも意外と重要
もう一つ、勉強していてよかったと思ったのが、文字に関するCSSです。
例えば、
font-weight
や、
letter-spacing
などです。
サイトを作る前は、
「文字の大きさを変えるくらいかな」
と思っていました。
でも実際には、文字の太さや文字間を調整するだけでも、見た目の印象がかなり変わります。
細かいところまで調整できるようになると、全体がきれいにまとまって見えるので、こういった基本的なCSSも勉強しておいてよかったと感じました。
まだ理解できていないところ
サイトを完成させることはできましたが、もちろん「全部理解できた」というわけではありません。
特にまだ自信がないのが、余白の指定です。
見た目としてはきれいにできていても、
「この余白はmarginでいいのか？」
「paddingのほうが適切なのでは？」
と迷うことがあります。
marginとpaddingの使い分けが、まだ感覚的な部分もあります。
また、今回の記事⑤でdisplay: flexやpositionについて改めて整理しましたが、
「じゃあ次に自分でサイトを作るとき、ちゃんと使いこなせるのか？」
というのも試してみたいところです。
一度理解したつもりでも、実際にもう一度使ってみることで、本当に身についているのかが分かると思います。
サイトが完成したとき
そして、サイトが完成したときの感想は、
「あ、もう終わりか」
でした。
もちろん完成したことは嬉しかったのですが、ある程度書けるようになってくると、最初よりも作業がスムーズになります。
「次は何を作ろうかな？」
と、完成した瞬間から次の制作について考えていました。
最初はコードを書くこと自体が難しく感じていたのに、少しずつ手を動かせるようになってきたことで、「作ること」そのものが楽しくなってきたのだと思います。
実際にサイトを作ってみて分かったこと
今回、架空サイトを一つ完成させてみて感じたのは、
HTML/CSSの基本を知っているだけでも、かなりのところまでWebサイトを形にできる
ということでした。
もちろん、まだ分からないこともたくさんあります。
でも、
「本を読む」
だけでは分からなかったことが、
「実際にサイトを作る」
ことで見えてきました。
そして、
分からない
→ 調べる
→ 試してみる
→ できる
→ 次は自分で書いてみる
という繰り返しをしているうちに、少しずつコードが自分のものになっていく感覚がありました。
今回の記事①〜⑤で整理してきた、
- インライン要素
- セレクタ
- displayとFlexbox
- 真ん中寄せ
- position
も、実際のサイト制作の中で使ってみたことで、「こういうときに使うんだ」という実感につながりました。
まとめ
今回は、HTML/CSSの勉強のまとめとして、架空のコスメサイト「Lumiere」を制作しました。
制作してみて分かったことは、
- デザインカンプを先に作るとコーディングしやすい
- セクションごとにHTML・CSS・レスポンシブまで完成させる方法が自分には合っていた
- HTML/CSSの基本知識があれば、シンプルなサイトならかなり形にできる
- Flexboxはレイアウトを作るうえで特に重要だと感じた
- 文字の太さや文字間など、細かいCSSも見た目を整えるのに役立つ
- 実際に作ることで、自分が理解できていない部分が見えてくる
- JavaScriptを勉強して、まだ理解できていない部分も増やしていきたい
そして何より、
作って終わりではなく、作ったあとに振り返ることで理解が深まる
ということを実感しました。
これからも、分からないところを一つずつ整理しながら、実際に手を動かして勉強していきたいと思います。
次はJavaScriptの勉強へ進みます。
