22/02/01

【Webデザイン】サイトレビュー#02

■今回のサイト

mori-no-oto

■Fonts

-本文:

A-OTF Gothic BBB Pr6N – 400

-英数字:

Europa

https://fonts.adobe.com/fonts/europa

■Color

文字色:#ffffff,#1A1A31

背景色:#ede5dc

サブカラー:#c9b993

■ターゲット(予想)
木で作られた楽器に興味がある人

小さな子供がいる親(20代後半〜30代くらい?)

■印象
シンプル、暖かみ、ナチュラル、安心感
ベージュがメインカラーとして使用されており、木のあたたかみが感じられる。

■ファーストビュー

ファーストビューにおいて、一枚を目立たせるのではなく、

同じサイズの複数枚が自動カルーセルになっているのが珍しい。

自然と複数枚が目に入る構造になっている。

画像を角丸でトリミングしており優しい印象。

■コンテンツ

写真やボックスを角丸にしたり、全体の背景色をベージュにすることで木のあたたかみや優しさを演出している。

大見出しは、大きな白抜きのフォントにすることで柔らかく見せている。

メインの文字色を明度を少し下げた黒色にすることで可読性も高く、背景色とも調和させている。

ハンバーガーメニューは開くと全画面表示になっており、

PCではメニューだけではなく住所やオンラインショップへのリンクなど必要な情報が全て揃っている。

SPでは、全てを表示しない代わりに下層ページへの遷移ボタンを写真にしている。

メニューに写真を使用する例はあまり見ないが、一眼で分かりやすく押したくなる効果もあり、すごく良いと感じた!

■アニメーション

慣性スクロールとテキストや写真の現れ方が合わさって、全体的に心地良い動きになっている。

ハンバーガーメニューを押した時の開き方がすごく好き!

boder-radiusを動かしながら背景色を角丸に見せており、

またその後テキストがタイミングを少しずらして表示される動きも、どことなく楽器のようで素敵!