WEBデザインのセンスを上げるためサイトのトレース作業を行なった際のメモ

WEBデザイナーとしてホームページ制作のセンスを上げるためサイトのトレース作業を行いました。その際のメモをまとめます。

1. 使用ソフトについて。

　イラストが多めのサイトだったためIllustratorとPhotoshopの両方を使って制作しました。制作開始時には「イラスト部分をIllustratorでやって、テキストをPhotoshopでやろう」と思っていましたが、いざ制作を始めたら逆がよかったことに気づきました。

　イラストをIllustratorで作ろうとした理由は「ベクトルデータとして作れるためサイズを変更しても解像度が悪くならない」というものでしたが「線のパスをとってから、またその中に色を塗るためパスをとる」という工程がPhotoshopと比べとても時間がかかったためやめました。Photoshopでは選択ツールなどを有効に使えばもっと早くできました。解像度の問題は、画像データを大きめに作ることで解消できました。

　テキストをPhotoshopでやろうとなぜ思ったのかは今ではわかりません。とても不便でした。この規模のホームページをトレースしたことがないので、レイヤーの多さを甘くみていたのでPhotoshopでもできると思ったのでしょう。テキストのレイヤーが多くなりすぎたため、どこにどのレイヤーがあるかを探すのに時間がかかりました。それに「文字組と言えばIllustrator」と多くのグラフィックデザイナーが言うだけあって、テキストの編集がIllustratorでは安易に行うことができます。

2. 文字について

　ゴシック調のフォントが多いサイトでした。HTML内で打ち込まれたであろう通常サイズのフォントは「ヒラギノ角ゴシック」でしたが、バナー内で多く使われている丸めのフォントは「源柔ゴシック」が近かったです。

　数字のフォントは正確なものが見つけられなかったので一部ペンツールで自作しました。

　漢字やカタカナがひらがなよりも少し大きい、という場面が一部見受けられました。

3. イラストについて

　配達員のイラストは顔が異なるだけでポーズなどは同じものが多かったです。このような場合はPhotoshopでこの画像を別ファイルで作り、スマートオブジェクトとして読み込む手法が有効だと思いました。

　線の太さは一定で、影などほとんど使わず単色で表現されていたため、比較的トレースしやすいイラストでした。

4. サイトの目的について

　このサイトのページには計6個もの「ネット一括見積もり依頼スタート（無料）」ボタンがありました。何か一つアピールポイントを語る度にこのボタンが出現しています。

　このことから、このページの目的はユーザに見積もりをとらせるよう誘導することだとわかります。

　見積もりボタンの色は当サイト内では数少ないグラデーションが使用されており、サイズも大きめで目立つ仕様になっています。加えてボタンが配置されている範囲の直前には黄色い矢印で、ユーザの目線を誘導させようともしています。

5. 備考

　制作時間：22時間