【サイトレビュー】町の小さな百貨店 モアリブリー
No.8
形容詞で表すなら
レトロ・手作り・暖かい・個性的・かわいい・異文化・面白い・おしゃれ
いいなと思ったポイント
トリミングされた雑貨が集まってくるアニメーションが可愛すぎて、自分が好きなインテリアテイストなのもあり、個性的な世界観に惹かれた。
フォント
日本語：Shippori Mincho（serif）
英数字：Shippori Mincho（serif）
アクセント：Goblin One
配色
背景：#E7D8CE（やや赤みの強いベージュ✖️ノイズアニメーション）
メイン：#000000（真っ黒）
アクセントカラー：#E66750（コーラルオレンジ）
フォントカラー：#000000（メインと同色）
背景のノイズアニメーションによって、店名の由来である「夢見心地でフワフワした状態の向こう側」という、現実から離れた異次元のような雰囲気になっている。
ファーストビューのデザイン
ヘッダー
ロゴ、メニュー（ページ上部固定なし）
オンラインショップへのリンクボタンのホバーアニメーションが、ドアが開くような動きになっていて、覗いてみたくなる心理的誘導によってクリック率が高くなりそうなデザインだなと感じた。
ハンバーガーメニュー（ブレイクポイント：1024px以下）
ボタンが窓型になっていて、開くと現れるナビゲーションがノートのインデックスみたいで文具感があり、FVの画像スライダーの形とリンクしていて統一感も感じる。
メインビジュアル
とっても素敵な店内写真が流れるように移り変わるスライダー。枠が窓型になっていることで、店内を覗いているように感じる。周りの雑貨たちがお店を囲うように配置されていて、店内写真との統一感もありより引き込まれる。
ショップ名
MoreReveryの店名を白にすることで背景色に馴染み、写真が引き立っている。フォントは個性的でサイズも大きめにすることで、絶妙なインパクトもプラスされている。
店舗詳細リード文
縦書きにすることでフォントサイズが小さくても目を惹き、海外テイストの雑貨を多く取り扱う「日本」のお店という印象を与えている。
パーツのデザイン
見出しのデザイン
アクセントフォントが縦横様々なレイアウトで配置されている。英語のみでシンプルだけど、セクションごとにフォントサイズやレイアウトが違うことで一癖あるデザインに。
ボタンのデザイン
サイト内のボタンは比較的シンプルなデザインになっているが、オンラインショップへのリンクに関しては目立つよう工夫されている印象。フッターバナーは、ホバーで文字間が広がり背景の画像スライダーがまたまた「覗き」みえるデザインで、中の様子が気になり押したくなる。
全体のデザインポイント
窓を覗いているようなデザインが多く、サイト全体を通して「お店を覗いてみませんか？」と言っているようで、実際にお店に訪れたくなるようなサイトになっている。
もし自分だったら改善するポイント
ページ遷移アニメーションにまでこだわっているので、ヘッダーメニューがスクロールすると見えなくなってしまうのが勿体なく感じた。スクロールして画面から見えなくなったら、縦並びのメニューが新たに現れfixさせると、ユーザビリティも高まりサイトの雰囲気にも合っていいんじゃないかと思った。