Overview
NEST School は、Photoshop 講座の一環として作成した架空のオンラインスクールサイトです。落ち着いた学習ブランドを想定し、情報の読みやすさや余白設計、スクロール体験を重視した画面構成となっています。
Project Title
NEST School – Learning Service (Concept)
Live Site
https://hondamasazumi.github.io/NESTschool/
Source Code（GitHub）
https://github.com/HondaMasazumi/NESTschool
Tech Stack
- ツール： Photoshop
- 技術： HTML / CSS
My Role & Process
Photoshopでの画面デザイン制作（レイアウト・色彩設計）から、HTMLマークアップ、CSSスタイリングまでを一貫して担当しました。配布素材をもとにブランドトーンを整理し、余白や視線の流れを意識した設計で実装しています。
Highlights
配布画像素材を活かしたレイアウト設計
配布された画像素材をもとに、トーンや配置を整理し、統一感のあるデザインになるよう設計しました。
余白とフォント設計
行間や段落間、情報のまとまりを意識し、複数の情報が並んでも視線が散らず、読み進めやすいレイアウトを設計しました。
ナビゲーションと情報設計
メニュー項目を整理し、初めて訪れたユーザーでも必要な情報に迷わずたどり着ける構成を意識しました。
Insights
制作を通じて確立した設計のポイント：
- Photoshopで描いたデザインを忠実にHTML/CSSで再現するためには、画面構造の理解と細かいスタイル調整が重要であること
- 余白設計の大切さ（情報を詰め込みすぎない）視線の流れを意識したレイアウトが読みやすく使いやすいこと
- 構造を意味のある要素で設計すると、後の保守性や拡張性が上がること（セマンティックなマークアップが大切）