＜制作物＞
【制作時間】18時間 (トレース16時間・分析シート作成2時間)
【使用ツール】Photoshop
サイトトレース
課題で指定されたSHE WORKS for BIZのサイトをPhotoshopを使用しトレースしました。
▪️SHE WORKSはSHE株式会社(女性向けキャリア支援スクール)が提供する「学んだスキルを活かせる人材を企業に紹介するマッチングサービスです。https://sheworks.shelikes.jp/
スタイルガイド
デベロッパーツールを使用し、色、タイポグラフィ、余白を確認しながらスタイルガイドをPhotoshopで作成しました。色数やグラデーションが多いサイトでしたが、CSSのコードを見ながらそれぞれのカラーコードを発見し、また不透明度のみ変更されているカラーがあることにも気づけました。分析していくと、ルール化されている箇所が見えてきたり、ルール通りではないところはデザイン重視で作られていることもわかりました。
PCとSPのレイアウト分析シート
PC版とSP版で並べた時に気づくレイアウトの変更点などは黒字で、実機で実際にスクロールしながら気づいた箇所は赤字で記載しました。
SP版は基本、PC版の縦積みになっていましたがスクロール数が多くなりすぎないようにカラム数を変更したり横幅の狭さに合わせてスペースの調整がされていてユーザー目線で設計されていることがわかるレイアウトになっていました。
トレースしたサイトのターゲット・目的
ユーザーストーリー
＜工夫したポイント＞
・スタイルガイドは、自分がデザイン制作したサイトを他者にコーディング依頼する際、コーダーの方に伝わりやすいよう必要とする要素を考えながら作成し、全てを記載するのではなく規則性があるものを中心にルールとしてまとめた。
・トレースでは、色はスポイトツールを使うのではなく、それぞれのカラーコードを正確に把握するためデベロッパーツールを確認しながら再現した。
・「スタイルガイド」や「分析シート」は情報量が多いため、全体のバランスや上下左右の余白、それぞれのコンテンツのまとまりを意識し、読みやすくなるよう意識して作成した。
＜課題を通して学んだこと＞
デベロッパーツールでの確認方法
デベロッパーツールでは、フォントや色、不透明度、余白などの詳細な情報を正確に確認でき、スライダーのような動きのある要素も拡大率や変化を細かく把握できた。これにより、サイトの構造をより深く分析できるようになり、今後のコーディングや参考サイトの検証にも活かせると感じた。
スタイルガイドの重要性
スタイルガイドは、チームで制作を進める上で認識のズレを防ぎ、デザインの統一性や作業効率を高め、誰が作っても同じ品質を保つために欠かせないと実感した。
PC/SPでのレイアウト調整
PC では横幅を広く使える一方、SP では幅が限られるため、単に縦に積むだけではスクロールが増えてしまう。そこで、要素の大きさや配置を調整し、SP 用に最適なレイアウトを再構成することで、ユーザーの離脱を防ぐ情報設計の大切さを学んだ。
また PC では、横幅を活かした大胆なレイアウトや、中央寄せと余白を組み合わせた構成にすることで、動きを持たせてユーザーを飽きさせず、最後まで読んでもらう工夫がコンバージョンにつながると感じた。