noteでサイトレビュー！【最近気になったもの編】
みなさん、こんにちは！hatsuと申します。
今回は以前書いたサイトレビューの記事のパート②として、最近見たサイトの中で気になったパーツやレイアウトについて記録を兼ねて書いていこうと思います！
01. ニューモーフィズムの装飾
１つ目は、１月末にリニューアルされた博報堂プロダクツのコーポレートサイトのボタン部分の装飾について。
ニューモーフィズム（Neumorphism）の手法が使われている部分なのですが、取り入れ方がすごく自然で、目を引く部分でもありつつ、シンプルなサイトの中で変に目立ちすぎることはなく溶け込む感じでもあり、素敵だなと思いました。
ニューモーフィズム（Neumorphism）とは…
ドロップシャドウなどを用いることで、要素を背景から浮き上がって見せたり、くぼんでいるように見せたりする手法のこと
特に、2カラムのボックスの右下にかかっているシャドウの色が背景色とよく馴染んでいて、すごく自然なシャドウに見えます。（シャドウにはネイビーに近い色が使われているよう😌）
ちなみに、実装はそれぞれのボタンの<li>タグに暗めのシャドウを設定して、その子要素に疑似要素で白いシャドウを設定することで作られているようです…！
02. 予約や発送状況の見せ方
2つ目は、kernとマルハチフクレという2つのサイトの予約や発送状況表示の見せ方について。
・デザイン会社「kern」のコーポレートサイト
画像のように、contactページのフォームに時期ごとに案件の埋まり具合が表示されていて、クライアントが問い合わせ時に前もって確認できるようになっています。
案件を受ける側のリソースが確保しやすくなるのはもちろん、大まかな状況が共有出来ている分それを前提とできるので、その後のやり取りもスムーズになりそうだなと思います…！分かりやすく、親切設計で印象的です！
・ふくれ菓子店「マルハチフクレ」のECサイト
こちらは、トップページの商品紹介の部分に３つの商品が縦に3カラムで並んでいて、商品名や内容量などの概要とあわせてその時の発送状況も週ごとに縦に表示される形となっています。（ホバーすると画像のようにボタンがオレンジ色に変化します🟧）
余計な要素が少ないので分かりやすく、トップページから遷移せずに、ぱっと見て直感的に各商品の概要と発送状況が分かるところが良いなと思いました…！
話がそれますが、サイトの読み込みが終わってMVが表示されると同時に湯気が立ち上るアニメーションも温かみがあって素敵です！
03. 最近たまに見かけるレイアウト
3つ目は最近ちょこちょこ見かける気がする画面レイアウトについて。
上記に３つのリンクを載せたのですが、３つとも共通して、メインとなるコンテンツを表示する幅をスマートフォンの画面サイズに合わせた幅に設定していて、左右にできる余白部分は固定された背景となっています。
スマートフォン表示時は左右の余白部分（背景）をなくして、スクロール表示になっているメイン領域だけ表示することで、PCとSP表示時の差異があまり生まれず、同一のデザイン・ソースコードで成立する部分が多くなる（→作業時間やコストが抑えられる？）のかなと思いました。
↓ 画像は１つ目と２つ目のリンクのサイトのPCとSP表示時の画像です
以上、最近見たウェブサイトの中で個人的に気になったパーツだったり、レイアウトについてのご紹介でした…！
ここまで読んでくださり、ありがとうございました！
この記事が気に入ったらサポートをしてみませんか？