No.030 KIRINJI OFFICIAL SITE

KIRINJIのオフィシャルサイト

KIRINJI OFFICIAL SITE

日本のバンドKIRINJIのWebサイト。

選んだポイント

好きなアーティスト。Webサイトもおしゃれだったため、参考にさせていただきました。

ファーストビューの印象

モノトーン、ブラウンをベースにカラフルなアイコンや写真が配置されている。

タイポがデザインの一部として確立している。背面をゆっくりと流れ、大人の落ち着きを感じさせる。

レイアウト

シングルカラム

レスポンシブ対応

あり
ブレイクポイント：768px,800px,992px,1080px

フォント

見出し：Alegreya
本文：Cabin Condenced

メニュー

PC：ナビゲーションバー
SP：ハンバーガーメニュー

カラー

ベースカラー：#FFFFFF　ホワイト

モノトーンでまとまっている。

アクセントカラー：#C3A27B　ブラウン

感想、参考になった部分

円形のオブジェクトがポインタに追従する仕組み。

アシッドカラーのイメージフォトとシックな背景が調和する。スタイリッシュなサイト。

画面右にはスクロールとともにインジケーターが用意されており、進捗をわかりやすくするとともにコンテンツ毎のジャンプが可能となっている。スクロールを進めるとコンテンツごとに背景とフォントカラーが変わるが、全てモノトーンなため違和感がなく、なおかつわかりやすい。

ナビゲーションバーはFixedで上部に必ず表示されている。ホワイトのグラデーションのレイヤーが重なり、どのカラーの背景でも読めるよう工夫している。

コンテンツのタイトルは左部にアルファベット表記で縦方向に表示している。ジャンプ率は高く、視認性が高い。

 

No.030 KIRINJI OFFICIAL SITE|Webサイト100選