見出し画像

SEKAI NO OWARI オフィシャルサイト #1日1サイトレビュー

【概要】
SEKAI NO OWARIのオフィシャルサイト

【印象】
全てモノクロで線が細く、スタイリッシュでかっこいい印象。

【メインビジュアル】
・メンバーのモノクロアップの写真と、バンド名前が大々的に表示。
・さりげなくメンバー名が小さく書かれている。
・2種類のファンクラブへのリンクあり。
・各種SNSのアイコンを置き、動線を確保。
・メニューバーもスクロールも、全て細い線で作られている。

【コンテンツ】
・HOMEにはTOPICS、SCHEDULE、INFO、VIDEO、footerがあり、より詳細に知りたい場合は「VIEW ALL」から飛べる。タイトルは全て細く大きな英字が左側に縦書きで配置されている。
・メニューバーにはSCHEDULE、INFO、DISCOGRAPHY、PROFILE、FANCLUB、GOODS、CONTACTがある。
・SCHEDULEでは下に少しスクロールするとカテゴリ名が現れ、クリックするとそれに関する予定だけが表示される仕組み。(INFOやDISCOGRAPHYも同様だった。)予定の上にマウスがhoverすると文字の背景色が黒→白→黒と変化する。
・TOPICSの写真の上にhoverすると一瞬白く光ってからズームアップされる加工が珍しい。この動きはVIDEOやDISCOGRAPHYのコンテンツでも統一されていた。
・メニューバーからページに飛ぶ際、下から画面が一度真っ黒になり、さらに下からページが現れる仕様。シュンっという動きがスタイリッシュでかっこいい。
・PROFILEにはメンバーのインスタとTwitterへのリンクあり。
・写真をメインで際立たせるページと、文字でしっかり内容を伝えるページと二極化している。特にファンクラブのページは文字しかなく、情報が頭に入ってきやすいのが良い。
・GOODSのみ外部ページに飛ぶ仕様。

【カラー】
・ベース:グレー、白、紺/メイン:黒/アクセント:赤、ピンク

【フォント】
jost-b,'Yu Gothic',YuGothic,sans-serif

【レスポンシブ】
・ブレイクポイント768px(タブレットまではSP版表示)
・SP版では画像のみ可変。文字に可変なし。(バンド名のみ可変)
・PC版も同様、画像のみ可変。

画像1


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