見出し画像

#サイト模写③

先日から取り組んでいたサイト模写ですが、ようやくゴールまでたどり着きました。本日は "スタッフブログ" セクションからフッターまで。ここでも気づいたことをまとめてみようと思います。


◆"スタッフブログ" セクションでは、日付の後にブログ項目がリストアップされているが、日付は14pxにまでサイズを落としている。ここまで小さくしても大丈夫なのかと思ったが、閲覧者にとってはこの場合日付はさほど問題ではなく、ブログのタイトルが気になるわけで、タイトルを目立たせるためにメリハリをつけているのかと思った。


◆"アクセス" では、地図画像の背景として、背景が暗めなイメージ画像を敷いている。これは何か意図があるのだろうか?地図の色合いが回りのグレーと同化しやすいため、視認性を上げるためにわざとこの暗めの画像を貼っているのかな。2枚を重ねてずらすように配置してあり、これまでのグリッドレイアウトと対比がついて面白い。


◆フッターは背景を黒にしているため、企業ロゴの赤がアクセントとなっている。フッターにもナビゲーションメニューを配置してあるが、この文字サイズも思いっきり小さくしてある。バナートレースをしていたときは、文字をここまで小さくすることに懸念があったが、Webサイトは目線を沢山動かさないといけないため、これぐらい小さくした方がかえって読みやすいのかも。ゆったりとした余白は、圧迫感がなくていいと思う。


◆ヒーローヘッダーから続くグリッドレイアウトでは、白銀比の同サイズの画像が交互に配置されていたが、今日取り組んだ箇所の画像は、どれも大きさがバラバラ。あえてバラバラにすることで、後半は少しランダム感が出てトップページにアクセントが添えられている。


これらの気づきは、今後のデザインで何かしら活用していければと思います。

サイト引用元:島崎建設株式会社-庭ZOU様(https://niwazou.com/)

画像1

(traced site: fully completed !)


画像2

(original site)