「かっこいいサイトを作りたいけど、中々アイデアが浮かばない」
サイト作りにおいて、0から1を生み出すことは中々難しいです。
そんな時は、クオリティの高いサイトを見ることでアイデアが浮かぶことも多いはず。
この記事では、サイト制作をする上でインスピレーションが得られるクオリティの高いWEBサイトを紹介します。
salisty(サリスティ)
出典：https://salisty.jp/
salistyは女性向けスマホケースブランドの公式サイト。
白を基調に写真が上手く配置されたデザインです。
写真は背景をぼかして被写体とスマホケースを目立たせています。
思わずスマホケースを書いたくなるようなサイトです。
スライドアニメーションによる写真演出
鯛茶STAND | taicha stand
出典：https://taicha-stand.liginc.co.jp/
https://taicha-stand.liginc.co.jp/
高級料理「鯛茶漬け」専門店のサイトです。
制作はWEB業界で有名なLIGです。
流石のLIGクオリティです。
黒を基調に、高級感が表現されています。
サイトに惹かれて、ぜひ行ってみたかったのですが現在は閉店されているようです、、残念。
見出しを囲む二重ボーダーのアニメーション
東京のフリーモデル 山内もえ
出典：https://free-model.jp/
東京のフリーモデルの「山内もえ」さんのサイト。
通常、サイトは企業などにピックアップが当たることが多いですが、このサイトは個人にフォーカスしたサイトです。
画面トップには動画が使われているのですが、ローディング画面から動画までの演出がとてもお洒落で、初見で見た際はクオリティの高さに驚きました。
個人のブランディングとして完璧なサイトだと思います。
ローティングアニメーション
中之条限定 女性2人旅【なかのいいおじょうさん】
出典：http://ojousan.com/
ちょっと珍しい、女性の二人旅にフォーカスを当てたWEBサイトです。
女性らしい、パステルカラーの綺麗めのデザイン。
様々な形を組み合わせた、かっこいい演出がちりばめられています。
幾何学のアニメーション
横浜ベイコート倶楽部
出典：https://baycourtclub.jp/yokohama/
https://baycourtclub.jp/yokohama/
完全会員制のリゾートホテル「横浜ベイコート倶楽部」のサイトです。
定番である、黒と金を上手に組み合わせた高級感溢れるデザインです。
薄くかかった黒のドットにより、トップ画面の動画が引き立っています。
みなとみらいのオシャレさが伝わるサイトです。
背景に黄土色を使った見出しの表現
CIRCUS OUTDOOR
出典：http://circusoutdoor.com/
東京のとある秘所に焦点を当てたアウトドア系のサイト。
背景に暗い色を用いることで、夜の写真がより印象的になっています。
ロゴアニメーションからの写真の見せ方も必見です。
暗めの背景色と夜の写真の組み合わせ
Pic&go
「写真を１枚選ぶだけで、あなたにおすすめの旅を紹介します」
というコンセプトから面白いサイト
写真が売りのサイトのため、写真の見せ方がハイレベルです。
STEPの画像もアニメーションで少し動かしており、細部まで作りこまれています。
細部までこだわった写真の表現
まとめ
以上、個人的にかっこいいと思った7サイトを紹介してみました。
アニメーションや動画をうまく取り入れるとお洒落なサイトになるのかなと思います。