サイトデザイン模写（TOP）　#1

スクール授業にてサイトデザイン模写をしました。
フォトショップでTOPページのデザインカンプを作成。
コーディング同様、デベロッパーツールをフル活用。
あとクロームの拡張機能を使用。
（Window Resizer, GoFullPage, Download All Images, WhatFont）

Window Resizer

GoFullPage - Full Page Screen Capture

Download All Images

WhatFont

手順

１．「Window Resizer」でブラウザのサイズを変更。
　　（今回は「1440×900px」で）
２．「GoFullPage」でサイトをキャプチャ。
　　（キャプチャ前に最初から最後までスクロールする）
３．「Download All Images」で使用画像を抽出。
　　（順番は決まりなし）
４．「WhatFont」やデベロッパーツールを活用して作成。

レビュー

今後続けて使えればと思いレビューシートを作成しました。
スクールで教えていただいたレビューポイントを参考にさせていただきました。

20210301_site_trace_reviewsheet.pdf

1418872 Bytes

ファイルダウンロードについて

ダウンロード

感想

模写も時間かかったけど、それ以上にレビューに時間かかりました。
レビューで気付いた発見は、今後の自身の制作に活かせるという事だと、やってみて少し実感しました。
これからサイトやバナーを模写する時はレビューもセットにして、デザインを見る目を身に付けていきたいと思います。