Overview
講義の一環として用意された素材を使用し、Photoshop によるデザイン制作からHTML/CSS によるコーディングまでを行いました。架空のサイト制作です。見本の落ち着いたデザインをもとに、レイアウト・配色・タイポグラフィを調整し、見やすいページを構築しています。
Project Title
Design Leaker – Design & Coding (Concept)
Live Site
https://hondamasazumi.github.io/DesignLeaker/
Source Code（GitHub）
https://github.com/HondaMasazumi/DesignLeaker
Tech Stack
- ツール： Photoshop
- 技術： HTML/CSS
My Role & Process
デザインの構造や余白設計を理解するため、参考デザインを分析し、画面構成を整理したうえでHTML/CSSによる実装を行いました。見た目の再現だけでなく、情報の流れや視線誘導を意識して構築しています。
Highlights
レイアウトと配色の調整
見本デザインを参考にしつつ、読みやすさを重視して配色や余白を調整しました。
視線の流れを意識し、情報が自然に目に入るレイアウトになるよう設計しています。
タイポグラフィと余白設計
見出し・本文・メタ情報の文字サイズや行間を整理し、記事一覧が続いても読み疲れしない構成を意識しました。
HTML構造と情報設計
HTMLのセマンティックタグを意識し、見出し・セクション・ナビゲーションの役割が分かりやすい構造になるよう実装しました。
Insights
制作を通じて確立した設計のポイント：
- 参考デザインの意図を読み解き、情報の優先順位を整理してからレイアウトを組み立てることが、使いやすいページ設計に直結することを理解した
- 見出し・セクション・ナビゲーションなどHTMLタグを役割に応じて使い分けることで、他者が見ても構造を把握しやすいコード設計が可能になるとわかった
- Photoshop上のデザインをHTML/CSSで再現する過程を通じて、文字間・行間・余白など細部の調整がUIの品質を大きく左右することを理解した