【サイトレビュー】PROOF OF GUILD / プルーフオブギルド

No.14

PROOF OF GUILD / プルーフオブギルド

形容詞で表すなら

上品・おしゃれ・優雅・しっとり・滑らか・シンプル・シック

いいなと思ったポイント

プロダクトの写真が読み込まれている間の配色背景がおしゃれ。細かく揺れ動いている姿が昔のテレビのようでレトロ感も感じられて、サイトのクールさとのギャップが素敵だなと感じた。

フォント

• 日本語：a-otf-ryumin-pr6n（serif）

• 英数字：nimbus-sans（sans-serif）

• アクセント：linotype-sabon（sans-serif）

配色

• 背景：#FFFFFF（真っ白）

• メイン：#000（真っ黒）

• アクセントカラー：なし

• フォントカラー：#000（メインカラーと同色）

白黒のみのシンプルな配色で、余計な情報が削ぎ落とされていて、プロダクトをはじめとする写真を魅せるデザインになっている。

ファーストビューのデザイン

ヘッダー

• カテゴリフィルター、ロゴ、メニュー

• スクロールするとロゴがやや小さくなり、背景白のヘッダーがポジションFIXされ、画面の広く使えている。

ハンバーガーメニュー

やや斜めから集まってくる動きによって、奥行きのある立体的なデザインになっている。ロゴ背景に動画を流すことで、趣も感じられる。

カテゴリフィルター

左から右へと伸びる線がしなやかで、繊細さ印象に。メニューが開いた時と同じように、背景の動画が優雅な雰囲気を演出している。

メインコンテンツ

メインビジュアルは置かず、メインコンテンツを持ってくることで、洗練されたシンプルなデザインに。画像の色味と、角の丸さのバランスが細かく考えられていて、ただの整列ではなくパネルのように組み合わさったレイアウトが美しい。

パーツのデザイン

見出しのデザイン

フォントサイズは大きく変えず、余白を大きく取り下線をうまく利用することで、本文との差別化がされていて、ゆったりと自分のペースで読み進められる心地よさを感じる。

ボタンのデザイン

トップページ（Work）のプロダクト画像にホバーすると、角の丸さが変わり、ガラス状のフィルターがかかったマウスポインターが表れる。大胆な動きがアクセントになっていて、柔らかい変化なのでサイトの雰囲気ともうまく調和されている。

全体のデザインポイント

空間の使い方にゆとりがあって、上品な気持ちになるトンマナが心地よく、ずっと見ていたくなるサイトだなと感じた。トップページのプロダクトの見せ方がとにかく印象的で、シンプルだけど個性的という絶妙な塩梅がクセになる。プロダクト単体ページでの商品画像の見せ方も、あえて大きさを揃えないことで動きがあって、写真の使い方が非常に印象に残った。