【課題】Webサイトトレース

【制作物】

・スタイルガイド
・SHE WORKS Webサイトトレース
・PCとSPで異なる点の分析シート

【制作情報】

・制作時期　2025年7月
・製作時間　2週間
・使用ツール　Photoshop

【課題の目的】

・Webデザインにおける基本的なビジュアルデザインの感覚を掴む
・Webデザインをする際に一定のルールに則ってデザインするということを学ぶ（スタイルガイド）
・Webデザイン特有のデバイスによるレイアウトの変化を学ぶ

【制作内容】

▪️スタイルガイド

▪️PCとSPで異なる点の分析シート

【自分なりの分析】

(1)ターゲット

PCを仕事の業務で重要視されている20代から40代の男女

Web業務内で人材不足に悩んでいる人

(2)目的

ターゲット層への悩みを確認しながら人材を紹介したい

(3)ユーザーストーリー

一人一人仕事を抱え込んでいて効率が悪いな

　　　　　　　　↓

IT業務の人材が欲しいとは思っているが業務内容が幅が広くこの人だって人がみつからないな

　　　　　　　　↓

人材マッチング・・・この人だという人が見つかるかも知れない

　　　　　　　　↓

個別で業務内容の記載もありわかりやすく、資料もダウンロードできるのであればやってみるか

【デザインの気付き】

〈色〉

・ベースカラーの不透明度を下げたカラーをメインカラーとして使用する事で全体的にまとまりが出ている・ベースカラーに薄めのカラーを使用する事でテキストや画像がはっきりと見えやすい

・キーワードやボタンの要素にアクセントカラーを使用する事で目に止まりやすくなっている

・イラストや背景のみにグレースケールが使われている

〈タイポグラフィ〉

・日本語はNoto Sans JPを、英数字はBrandon Grotesqueを区別して使用されている

・タイトルと本文にジャンプ率がありわかりやすい

・また本文でも文字を強調するため太さでメリハリをつけ見やすいように太字が多めに使用されている

〈余白〉

・セクション毎繰り返す内容であるものは反復のルールが守られており余白が揃えられている

・セクション毎しっかり余白が取れているが幅に統一感はない

・行間にもしっかり余白がありPC・スマホ共に読みやすくなっている

【今回の課題を通して学んだこと】

・バナートレースと違って内容が豊富にあり達成感がありました。

・その分デザイン基本4原則がわかりやすく表記されていて勉強になりました。

【頑張ったポイント】

・バナーとは違い時間がかかったが集中して行うとトレース事態はそんな時間をかけず出来ました。

・スタイルガイドや分析などまとめるのに苦手意識があり苦戦しましたが、本来なら自らしない事だと思ったので勉強になりました。またデペロッパーツールも文字が並んでいるので頭が痛くなると思っていたが、コードを少しでも勉強出来ていたこともあり、きちんと理解できてよかったです。