Columnコラム2017.10.23参考にしたい!アーティストのサイトから学ぶWebデザインのトレンドミュージシャンやアイドル(以下アーティスト)のオフィシャルサイトというと、近年のSNSの普及によって、見る機会が減った方もいるのではないでしょうか。いえ、Webサイトもアーティストの大事な看板のひとつ。凝ったデザインのサイトも多く、あらためて見てみると真似してみたいアイデアがあったりと、新たな発見がありました。今回は、デザインの参考になりそうなサイト、新しいトレンドを取り入れているサイトなど、私が気になったサイトをいくつか紹介します。※スクリーンショットは2017年9月22日時点のものです。国内アーティストきゃりーぱみゅぱみゅ引用元:きゃりーぱみゅぱみゅオフィシャルWEBSITEhttp://kyary.asobisystem.com/ポップなミュージックビデオを全面に使ったサイト。ページをスクロールしても背景の動画は変わりませんが、グラデーション背景があることで「スクロールの楽しさ」が感じられます。文字の色やアイコンはシンプルで、バナーなどの画像も最小限になっており、映像を邪魔しないデザインです。スマホ版は縦長の動画が使われていて、PCと同じく全画面動画を実現しています。webhttp://keytalkweb.com/斜めに傾けたコンテンツが目を引くデザイン。シンプルな中にも、バンドの若さや勢いが感じられます。:福山雅治オフィシャルサイトhttp://www.fukuyamamasaharu.comスクロールでコンテンツが出現する動き、アイテムにマウスオンすると出てくる詳細の見せ方が小気味よく、何度も見たくなるサイトです。【MYV382TOKYO.com】http://myv382tokyo.com/最近のトレンドである、ビジュアルとコンテンツを縦に分けたレイアウト。コンテンツを移動するときのエフェクトや、メニューの挙動も凝っていて、つい感心してしまいました。冒頭で「Webサイトもアーティストの看板」と述べましたが、これぞまさにアーティストのイメージや世界観を作り上げているサイトだなと思いました。ENCOUNThttp://blueencount.jp/こちらも最近多く見かける、縦にメニューを配置した印象的なデザイン。TOURhttps://www.katyperry.com/注目していただきたいのがスマホ版のメニュー!アイコンが並んでいるデザインはアプリ感覚で使えますね。Chromeなどでなじみのある形で、個人的にハンバーガーメニューより分かりやすくて好きです。サイト全体のデザインも、メインビジュアルに合わせたカラーリングがキュートです。websitehttp://coldplay.com/左にメインメニュー、右にサブメニュー、下にはSNSや音楽サービスへのリンクが配置されています。いった3方向、4方向にナビゲーションがあるサイトは、最近海外サイトなどで見かけるようになりました。サブメニューはアイコンが可愛いだけでなく、とても機能的!情報量の多いサイトで参考にしたいアイデアですね。ナビゲーションが多そうに見えますが、スマホ版では意外とすっきり収まっているところもポイントです。どのサイトもユーザーの目を引く工夫がされており、サイトを制作する上でのヒントが詰まっているように思います。ビジュアルやインパクトを重視するサイトを制作する際は、ぜひ参考にしてみてください。一覧に戻る通知を受け取るお問合せ以下のフォームにご入力の上、送信ボタンをクリックしてください。すると会員専用記事を読むことが出来ます。会員限定記事を全文お読みいただけます。パスワードを忘れた方へログインIDを入力してください。ログインIDを正しく入力してください。パスワードを入力してください。パスワードを正しく入力してください。ログインID、パスワードが間違っています。ログイン実行中ログイン完了!ページを再読込します。