【実践課題】Webページトレース

制作情報

・作成時期：2024年12月

・制作時間：20時間

・使用ツール：Photoshop

目次

1.制作物
2.サイトの分析
3.スタイルガイド
4.PCとSPでのレイアウトの違いの分析
5.制作を通して学んだこと

1.制作物

実際のページはこちら

2.サイトの分析

●ターゲット
人員不足やスキルを持った新たな人材を確保したいと考えている企業

●目的
『スキルを持った人材を事業ニーズに合わせてプランニングし、人材の初期安定稼働ま　　でをサポートする』ことを知ってもらい、問い合わせていただくこと。

●ユーザーストーリー
①引き付ける
メインビジュアルで笑顔のたくさんの女性を配置し、『即戦力人材マッチングサービス』　　
を大きく配置。
⇒様々な人材がいることをイメージしてもらい、興味を持っていただく。
②問題提起
イラストを用いることで具体例をイメージしやすいようにし、課題を投げかける。
⇒『ITスキルに強い人材がいるとより業務効率が上がるな！』と自分の課題と照らし合わせてもらう。
③内容の伝達
どんな人材なのか、人材派遣までの一連の流れをイラストや写真を用いて伝える。
⇒『スキルを持った会員で一連の流れはこんなかんじなんだ』とイメージしてもらう。
④内容の詳細
写真を用いて強みや対応可能な業務といった具体的な内容を提示する。
⇒『WebデザインやSNS運用スキルがある人材がいたらもっと業務効率が上がるな』と思ってもらう。
⑤さらに一押し
取り入れている企業や具体的な人材、制作物を提示する。
⇒『こういった企業に採用されているんだ、こういった物が作れるんだ』と思ってもらい、自分の会社でも生かしていきたいなと身近に感じてもらう。
⑥問い合わせのしやすさ
お問い合わせフォームが画面の右側に固定表示されている。常に視界に入ることで、ユーザーが迷うことなく、スムーズに問い合わせしやすい設計になっている。
⇒これくらいの入力なら時間もかからないし、入力して問い合わせてみようかな』と思い、問い合わせに繋げやすくなっている。

3.スタイルガイド

4.PCとSPでのレイアウトの違いの分析

5.制作を通して学んだこと

●Webサイトの配色
Webサイトにはグレースケールが使用されていることを知りました。使用することで情報量が多いなかでも、コンテンツごとに色分けされて情報が読みやすくなっているなと感じました。また、アクセントカラーがたくさん使用されているけど、まとまった色合いになっていると感じました。
●フォント
見出しや小見出しなど目的に合わせてサイズが決まっていて、ルールがあることを知りました。それにより、一目で見出しや本文の違いを認識でき、必要な情報を取りやすくなっていると感じました。