見出し画像

【サイトレビュー】DAIEI |ダイエー株式会社 石川県小松市の板金カンパニー

No.6

形容詞で表すなら

かっちり・ユニーク・自由自在・男性的・おしゃれ・ポップ・機械的・柔軟

いいなと思ったポイント

画面の淵に並んだナビゲーションの移り変わり方が工場のようで、該当セクションまで来るとタイトルとしての役割も果たしている点が新しくて目を引いた。

フォント

  • 日本語:dnp-shuei-gothic-gin-std(sans-serif)

  • 英数字:trade-gothic-next(sans-serif)

  • アクセント:なし

配色

  • 背景:#F0F0F0(限りなく白に近いライトグレー)

  • メイン:#1E2087(原色に近いパキッとしたブルー)

  • アクセントカラー:filter:invert(1)でブルーを反転させたイエロー

  • フォントカラー:#1E2087(メインカラーと同色)※ナビゲーションは黒

メインカラーの反対色と白を組み合わせることで、ポップだけど抜け感のあるシンプルさがおしゃれな配色になっている。

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

ヘッダー

  • ロゴ(ナビゲーションより目立つようやや大きめだけど、メインコンテンツの邪魔をしない絶妙なサイズ感)

  • ナビゲーション(該当セクションの位置まできたら回転する)

メインビジュアル

プロダクトの写真が画面の淵にあたりながら不規則に動くことで、色んな形に柔軟に変化する金属の特性が表現されている。画像のアニメーションだけでファーストビューを占めることで、何をしている会社なのかがユーザーに伝わりやすい。

パーツのデザイン

見出しのデザイン

テキスト背景が流れ出ることで、見出しが現れるアニメーション。ナビゲーションが中央にきた時のデザインと連動していることで、よりナビゲーションがタイトルっぽく見える。

レイアウトのデザイン

左から徐々に右下に流れるようなレイアウトが多く、個々の要素は角があってかしこまっているけど、全体的に見るとしなやかさな印象になっている。

写真のトリミング

商品の質感が伝わるアップ画像や、工場の様子が感じられる引きの画像など、視点の押し引きがあることで奥行きを感じられる。

全体のデザインポイント

サイト全体を通して、金属部品の製造会社という雰囲気ではなく、金属を変幻自在に操るプロ集団というような、おしゃれでかっこいい雰囲気を感じる。余白の取り方や文字組みのバリエーションが大胆で、アニメーションの滑らかさや緩やかなスクロール制御によって、金属の持つ柔軟さと強さの両方が表現されていて、メリハリの効いた印象に残るサイトだと感じた。

この記事が気に入ったらサポートをしてみませんか?