人材マッチングサービスサイトトレース(自主制作)

OVERVIEW

SHElikes PROデザイナーの課題にて初めて行ったサイトのバナートレースです。サイトをデザインする上で、考慮すべきフォントのサイズや空白の使い方を学びながら取り組みました。(制作時間7日間)

YEAR 2025

🌸トレース作品🌸

🌸スタイルガイド🌸

①配色

・全体的に白ベース、メインカラーに青を使用することで、 仕事のイメージを与えている

・ベースカラーの割合を多くすることで複数の色を使用して も統一感のある印象を与えている

・各セクションごとに背景色を変えることで、線などを使用しなくてもセクションが分かれていることが視覚的に判断できる


②空白

・セクションの余白を統一することで全体的に統一感を出している

・画像と画像の間も同じ幅にすることで、整列されている印象を与える

・セクションの上下左右の枠を大きめにとることで、見やすくしている

③フォント

・日本語と英字/数字でフォントを使い分けることで、イメージにあった作品にできる

・見出しだけでも複数のサイズを使用することで、強調したい部分を視覚的に伝えている

・同じフォントでも太字と細字を使い分けることで、強調したい部分を視

 覚的に伝えている


🌸PC版とSP版の比較🌸🌸学習を通して学んだこと🌸

・各セクションに左右上下の空白を統一することで、全体的に統一感のあるサイトを作成することができる

・表示される情報量が多いので、全体的な統一感を意識することが大切なのだと思った

・表示される情報量があるので、カルーセル等を使用して動きを出し、途中で飽きられない工夫が必要と感じた