「肌に優しい化粧品」をテーマに、
ちょっといいものを毎日使いたい女性に向けた、架空の化粧品ブランドサイトを制作しました。
HTML・CSSを学習する中で、これまでに学んだ知識を実際のWebサイト制作に落とし込み、デザインからコーディング、公開まで一通り自分で行うことを目標に制作しています。
Concept
「毎日使うものだから、少しだけいいものを。」
そんなイメージから、肌に優しい化粧品を扱うブランドを想定しました。
デザインは、シンプルすぎて無機質にならないようにしながら、あたたかみのある優しいカラーリングを意識しています。
余白を取りながら、商品の世界観が伝わるような落ち着いた雰囲気を目指しました。
Site Structure
サイトは以下の構成で制作しています。
- Header
- Main Visual
- About
- Works
- Contact
- Footer
PCだけでなく、タブレット・スマートフォンでも閲覧できるようレスポンシブ対応しています。
レスポンシブは、
① PC
② タブレット・スマートフォン
の2パターンに切り替わるように設計しました。
Design
今回は、HTML・CSS初学者でも実装できる範囲のデザインを意識しました。
ただ要素をブロック状に並べるだけではなく、CSSのpositionを使用して要素を重ねたり、配置を調整したりすることで、シンプルな構成の中にも少し動きのあるデザインになるよう工夫しています。
「難しい技術をたくさん使う」のではなく、学習した基本的な技術をどのように組み合わせれば、見た目として成立するサイトになるのかを意識して制作しました。
🖥️ PCデザインカンプ
📱 スマホデザインカンプ
※PCでは余白を広く取り、スマートフォンでは画面幅に合わせてレイアウトを調整しています。
Production Process
今回の制作では、いきなりコーディングを始めるのではなく、まずデザインカンプを作成しました。
① デザインカンプ作成
サイトの雰囲気やレイアウトを考え、PC・スマートフォンそれぞれのデザインを作成しました。
↓
② コーディング
作成したデザインカンプをもとに、HTML・CSSで実際のWebサイトを制作しました。
↓
③ つまずいた部分を振り返る
制作中に分からなかったCSSの仕組みや、思ったように表示できなかった部分について、一つずつ調べながら理解しました。
また、学んだ内容は自分の言葉で整理し、勉強記録として記事にもまとめています。
↓
④ GitHub Pagesで公開
完成したサイトはGitHubにアップロードし、GitHub Pagesを利用して実際にWeb上へ公開しました。
「作って終わり」ではなく、実際に公開するところまで経験することを今回の制作のゴールとしました。
What I Learned
今回の制作を通して、HTMLやCSSの知識を単体で覚えるだけではなく、実際のWebサイトの中でどのように組み合わせて使うのかを学ぶことができました。
特に、デザインカンプを見ながらコーディングしていく中で、思った通りに配置できないこともあり、その都度原因を調べて修正することで理解が深まりました。
また、学習中につまずいた内容をそのままにせず、自分の言葉で整理して記事にすることで、「分かったつもり」になっていないかを確認することも意識しました。
About This Work
今回の作品は、HTML・CSSを学習している初学者として、**「学んだことを実際に使って、一つのWebサイトを完成させる」**ことを目的に制作しました。
まだまだ学習途中ではありますが、デザインを考え、実際にコードを書き、分からない部分を調べ、修正し、最後にはGitHub Pagesで公開するところまで、自分で一通り経験することができました。
今後も新しい技術を学びながら、実際に手を動かして制作することを大切にしていきたいと思っています。
Site
Lumiere｜架空化粧品ブランドサイト
実際にブラウザでご覧いただけます。
GitHub
ソースコードも公開しています。
使用技術
HTML / CSS / figma / GitHub / GitHub Pages
制作内容
企画・デザインカンプ作成・コーディング・レスポンシブ対応・公開
