サイトレビューより更に詳しくWebデザインのことを学びたかったので、Photoshopで模写をして、気づいたことをまとめました。第1弾はこちらのサイトを題材にさせていただきました。
目次
PC版のデザイン模写＆観察
デザイン模写
デザイン観察
スマホ版のデザイン模写＆観察
デザイン模写
デザイン観察
要素の色・大きさ・フォント・文字数を調べたシート
上記の観察をする中で、よく使われる文字サイズやジャンプ率、アクセントカラーの使い方などを数値的に知りたかったので、こちらのエクセルにもまとめてみました。
余白の感覚や画像の比率など、細かく学ぶことができたので、大変ためになりました。
Twitterで『スマホデザインとマウスオーバーしたときのデザインも観察してはどうか』というアドバイスをいただいたので、そこも観察するようにしました。SNSで公開すると助言をしてくださる方がいるのでありがたいです。また、こちらのサイトの制作会社の方からもコメントをいただき、嬉しかったです！
#1日1サイトレビューでは、ここまでデザインのことを細かく学ぶことができなかったので、私のようなWeb初心者にとっては中々有意義だと思いました。
また、今回はどんなスタイルでやるのがいいか悩みながら作ったので、時間が結構かかっていました。まとめ方が決まったので、次はもう少し手早くできるはず！引き続きやっていこうと思います。
ここまでお読みいただきありがとうございました◎
コメント