【Webデザイン】サイトのデザイン模写＆観察02

Photoshopでサイトのデザイン模写をして、気づいたことをまとめました。「大人可愛い」デザインを学びたくて、第2弾はこちらのサイトを題材にさせていただきました。

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

デザイン模写

デザイン観察

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

デザイン模写

デザイン観察

サイトを見るだけなのと自分で作ってみるのとを比べると、後者の方が時間はかかりますが、学べることが多かったです。
観察するポイントとPhotoshopの操作に慣れてきたのか、前回よりは時間がかからなかったです。

また、今回もTwitterにつぶやきました。

サイトのデザイン模写をやってみました！
第2段はOPERAのサイト。https://t.co/t1CKRvBRAr

1枚目：見本とトレース
2枚目：気付いたことや考察など#サイト模写　#CF pic.twitter.com/6qv0N6zzqg

— まいきー@Webデザイン勉強中 (@Mikey87826191) June 9, 2020

スマホ表示の模写と気付いたことをまとめました🙆‍♀️

商品を魅力的にみせるための細かいあしらいがたくさんあって、勉強になった！この軽やかな透明感を出すには、写真も大事だけどそれだけじゃないんだな～と実感。 pic.twitter.com/RhTsmgEiHx

— まいきー@Webデザイン勉強中 (@Mikey87826191) June 10, 2020

こんな感じで、次も別のデザインのサイトでやってみたいと思います。下層ページを模写するのもいいかもしれない。

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