トレース｜SHE WORKS　WEBサイト

【制作物】

・SHE WORKS　WEBサイトのトレース
・スタイルガイド

【制作情報】

制作時期：2025年5月
制作時間：2週間
使用ツール：Photoshop
提供素材：https://sheworks.shelikes.jp/

【課題の目的】

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

【成果物】

トレース

スタイルガイド 

【分析】

色：
・ベースカラーは白を貴重にし、メインカラーのネイビーをテキストで使用しているため、シンプルで読みやすい。
・テキストに色を多用せず、ネイビーの透明度を調整することでまとめている。
・アクセントカラーは7色使用してカラフルなイメージだが、同系色のトーンで合わせているため統一感が取れている。

タイポグラフィ：
・日ごろから馴染みのあるNotoSansをメインで使用し、英文・数字はBrandon Grotesqueを使用しているので読みやすい。
・サイズやウェイトが細かく調整されており、情報の優先順位もつけられている。
・偶数の数値が多かったが、あまり規則性を感じなかった。

余白：
・たくさんのpxサイズの余白が使用し細かく調整されている。
・特に規則性というものはないが、4と8の倍数が比較的多いように感じた。
・セクションや見出し周りの余白には決まった数値が使用されているところもあった。

ターゲット：
・人材を求めている企業の採用担当者
　（具体的にどんな企業か？）
　・即戦力人材を必要としている
　・業務委託・フリーランスの活用を検討している
　・デザイン、ライティング、マーケティング、動画編集などのクリエイティブ、Web系業務を外注したい

目的：
・マッチングサービス「SHE WORKS for BIZ」への問い合わせ・利用申し込みを促す。
　（目的とする具体的な成果）
　・サービス認知拡大
　・すでに提携している企業の紹介や制作物など実績を示し、信頼性を高める
　・企業からの問い合わせを促進
　・人材のスキルなどを示し、導入メリットを明確にしてサービス利用の後押しをする

ユーザーストーリー：
（ペルソナ）
・ベンチャー企業の人事課採用担当　佐藤さん（30歳）
・採用広報を強化するように会社より支持が出ている。
・採用サイトに載せるブログや記事を更新することに注力しているが上手くかけずに悩んでいる。
・社内にライティングが得意な人を探しているが見つからず困っている
・ライティングができて即戦力で力になってくれそうな人、信頼できる人を雇いたいと思っている

①Webで「ライティングできる人とマッチングしたい」と調べていたら「SHE WORKS for BIZ」を発見
→実績もしっかりしてるし、女性向けサービスを扱ってるなら相性良いかも

➁冒頭：課題提起 → サービス紹介

「こんな課題はありませんか？」で共感を呼ぶ
→わかる！まさに私が今悩んでいることだ。

③特徴・強み：ご利用イメージや4つのヒミツとして紹介
→利用するとこんなことができるんだ！1か月からお試しがあるなら本採用前に様子も見ることができるしいいかも！

④人材スキルの紹介：視覚的にカテゴリ分け
→皆さん様々なスキルを持っていらっしゃる！素敵なライターさんと出会えそう！

⑤導入事例・実績：安心感と信頼を訴求
→実際にこんなことされているんだ！スキルも想像できていい！
これだけの実績がある方が来てくれたら安心できるしすごく嬉しいな。ちょっと申し込んでみようかな？

（PC版とSP版での違い）

【工夫したところ】

・最初は上からなぞるようにしてトレースをしていたが、細かい調整は検証ツールを使用し、１つ１つ調べながら細かな調整を行いました。

【学んだこと】

・検証ツールを使用することで数値化されて調整もしやすいし忠実にトレースができることを学んだ。

・「どうして？」「何で？」と疑問も持ちながら進めることが大事と先生が仰っており、情報設計の観点などから、なるほど！と思いました。バナーだけでなくLPも言語化できるデザインでないと相手に情報が伝わらないと感じました。

・スタイルガイドを作成することによって規則性の有無を確認できた。今回はざっくりとした共通点はあるものの、規則性は十分ではないLPだったということが分かった。

・PCとSPのサイト分析をする中で、PCはテキストや図解が横並びになっているが、SPでは縦並びに変わっているということが数か所で発見できた。