ポートフォリオサイト(HTML/CSS)

制作概要

個人ポートフォリオサイトです。一目で印象に残るデザインを目指しました。

  • 制作時間:約20時間(デザイン試行錯誤を含む)
  • 担当範囲:デザイン / HTML / CSS
  • 使用技術:HTML5, CSS3, Google Fonts
サイトをみる(別タブで開く)

制作のポイント・工夫した点

1. 試行錯誤から「デザインルール」の確立へ

初期段階ではデザインの方向性に悩み、何度もレイアウトや配色をやり直しました。

2. トレンド感のあるブルータリズム表現

太い黒枠線、くっきりとしたドロップシャドウ、直角を意識したパーツ配置により、力強さとモダンさを両立させました。

3. 実用性とコード品質の意識

見た目のインパクトだけでなく、レスポンシブ時の表示崩れ防止やCSS変数(var())を用いたメンテナンス性の高いコード設計を徹底しています。


制作を通して学んだこと

デザインで迷走した経験から、「事前にコンセプトやベースとなるデザインシステムを強固に固める重要性」を実体験として学ぶことができました。

一度方向性が決まってからの実装速度や精度の高さは自分の強みだと実感できたため、今後の実務でも最初の要件・デザイン定義を大切にし、効率的なコーディングを行っていきます。

GitHubでソースコードを見る
← トップページへ戻る