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

【目次】

• トレース内容
• レイアウト分析
• スタイルガイド
• 課題を通して学んだこと

◾️トレース内容

【トレースポイント】

• 検証ツールを使用することで、フォントサイズ、ドロップシャドウ、グラデーションなど細かな設定を確認しながらトレースを行なった。
• デザインカンプをトレースする前にワイヤーフレーム化して構造を把握することで、サイト内で反復整列がどの場面で使用されているかや、フォントや余白のバランスなども理解できた。
• 検証ツールを使用しても、見本と比べると若干ズレが生じることがあったため、その場合は見た目を合わせることを優先にトレースした。

◾️レイアウト分析

【分析ポイント】

• PC版とSP版の基本的なレイアウトの違いを確認し、ユーザーの離脱率を下げるためにはどんなレイアウトの変更をしているかを考えながら分析した。
• 資料をまとめる際、記載場所にばらつきがあり、記載項目も多いため色分けしたガイドを使用し見やすくなるよう意識した。

◾️スタイルガイド

【作成ポイント】

• COLORはあしらいのグラデーションに関しても細かく書き出すことで、サイト内「対応可能な業務（一例）」セクションのアイコンの色を基準にグラデーションが作られていることを理解した。それにより、サイト全体に統一感が出ると理解した。
• グレースケールはセクションごとイラストの背景に同じ形で使用することで、要素の反復の効果を生み統一感が出ると気づいた。また、背景色を増やすことなくイラストをより目立たせユーザーの目線を惹きつける効果があると考えた。
• 不透明度を変化させて使われている色に関して、元の色と変化させたときの色を隣同士で配置し、ディレクターやクライアントが見た時に分かりやすいよう意識した。

• 全体的に情報量が多いため、各要素内での整列を意識した。

◾️課題を通して学んだこと

• サイト全体を通して、余白サイズ、テキストサイズはルール化されており、それによりサイトに統一感を出している。統一感を出すことで、ユーザーはストレスなくスムーズに読み進めることができる。
• 入力フォームではプレースホルダーを淡いグレーで表示することで、ユーザーが迷わず入力できるよう配慮している。
• あしらいは、アイコンやサイト内で使っている色をいれてグラデーションを作ることでサイト全体に統一感がでる。
• フォントにジャンプ率や太さの変化をしっかりつけることで、セクションが見えやすく情報が入ってきやすい。
• SP版に関して、PC版で横並びになっているものは基本的には縦積みに変更されている。
• SP版で、効果的にスライダーを使用したり、縦積みの配置の中でも要素が横並びになっていたりページ全体が長くなりすぎないように配慮されている。
• サイト全体にはインナーセクションを設けており、左右に余白をつけることで見やすくなっている。