MENU

【Webデザイン】サイトのデザイン模写&観察01

2020 7/01
【Webデザイン】サイトのデザイン模写&観察01

サイトレビューより更に詳しくWebデザインのことを学びたかったので、Photoshopで模写をして、気づいたことをまとめました。第1弾はこちらのサイトを題材にさせていただきました。

目次

PC版のデザイン模写&観察

デザイン模写

デザイン観察

スマホ版のデザイン模写&観察

デザイン模写

デザイン観察

要素の色・大きさ・フォント・文字数を調べたシート

上記の観察をする中で、よく使われる文字サイズやジャンプ率、アクセントカラーの使い方などを数値的に知りたかったので、こちらのエクセルにもまとめてみました。

余白の感覚や画像の比率など、細かく学ぶことができたので、大変ためになりました。

Twitterで『スマホデザインとマウスオーバーしたときのデザインも観察してはどうか』というアドバイスをいただいたので、そこも観察するようにしました。SNSで公開すると助言をしてくださる方がいるのでありがたいです。また、こちらのサイトの制作会社の方からもコメントをいただき、嬉しかったです!

#1日1サイトレビューでは、ここまでデザインのことを細かく学ぶことができなかったので、私のようなWeb初心者にとっては中々有意義だと思いました。

また、今回はどんなスタイルでやるのがいいか悩みながら作ったので、時間が結構かかっていました。まとめ方が決まったので、次はもう少し手早くできるはず!引き続きやっていこうと思います。

ここまでお読みいただきありがとうございました◎

この記事が気に入ったら
フォローしてね!

シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』

ブロックエディター完全対応のWordPressテーマ。
圧倒的な使い心地を追求し、日々進化しています。

この記事を書いた人

コメント

コメントする

CAPTCHA


目次
閉じる