プロも参考になる! WEBデザイナーが選ぶ、お洒落なアイドル公式ホームページ11選まとめ


スポンサーリンク

プロも参考になる! WEBデザイナーが選ぶ、お洒落なアイドル公式ホームページ11選まとめ
アイドルのサイトは、運営スタッフの少なさもあってか、見やすかったり綺麗なサイトが数少ないです。そこまで公式サイトにスタッフもお金もかけられないのが実情であり、理由の大多数であると思いますが、そんなアイドル業界の中でも、デザイン性の高いサイトも勿論存在します。プロも参考にしたくなる秀逸なデザインのアイドルの公式サイトをまとめましたので、紹介していきたいと思います。(一応僕は4年間、WEBデザイナーとして仕事してるんです笑)

アイドルのお洒落な公式ホームページまとめ

一覧

  1. Maison book girl
  2. 妄想キャリブレーション
  3. アップアップガールズ(仮)
  4. PASSPO
  5. x21
  6. ゆるめるモ!
  7. バンドじゃないもん!
  8. PassCode
  9. WHY@DOLL
  10. テンテンコ
  11. NECRONOMIDOL

Maison book girl

Maison book girl
公式ホームページ:http://www.maisonbookgirl.com/
実際にWEBデザインまとめサイトにまとめられるなど、プロの目から見てもデザイン性が非常に高いサイト。スクロールなどの動作に応じて、『立体感や奥行き』を演出する『パララックス』という技法を取り入れているのが、その理由の1つ。PCやスマートフォンで閲覧する時など、ブラウザの画面サイズに応じて、見た目が可変する『レスポンシブ』も導入し、ユーザーが見やすくなっている。

妄想キャリブレーション


公式ホームページ:http://mosoclbr.com/
ピンクを基調として、見た目の華やかさとは裏腹にシンプルにまとめられているサイト。テキスト1つ1つにアイコンを付け細やか気配りが感じられる。タグの書き方から、ベースはBootstrapを採用していると思われる。妄キャリのサイトも『レスポンシブ』を導入。

Bootstrapとは?
Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。
引用:とほほのBootstrap入門

アップアップガールズ(仮)

アップアップガールズ(仮)
公式ホームページ:http://www.upupgirlskakkokari.com/
アイドルグループはメンバーの数だけ色数が有るため、メンバー分の色を取り入れるとデザインがダサくなる恐れがある。しかしロゴに青、緑、紫、赤、黄色、ピンクを入れつつも彩度とトーンバランスを保ち、デザインを統一している秀逸なサイト。背景画像とMVもマッチしていて、色数の割にバランス感も絶妙。ただナビゲーションのデザインは再考の余地あり。こちらも『レスポンシブ』を導入。

PASSPO

PASSPO
公式ホームページ:http://passpo.jp/
MVを注目を集める為にナビ、サイドナビの位置が斬新なサイト。アメリカ西海岸な雰囲気を感じさせ、デザインが非常にまとまっている。ただナビゲーションに関しては、動き方に気づくのに一瞬迷う為、ユーザビリティの観点からは一時代早い気もする。

x21

x21
公式ホームページ:http://x21.oscarpro.co.jp/
中学生の女の子らしく可愛いイラストを取り入れ、アニメーションも多彩な楽しい雰囲気なサイト。メンバーごとにマウスを合わせるとプロフィールが出るホバーアクションなど、サイトを訪れる人を飽きさせない工夫が凝らしている。

ゆるめるモ!

ゆるめるモ!
公式ホームページ:http://ylmlm.net/
横幅いっぱいにカテゴリを区切り、近年流行りの画面いっぱいに大きく余白をもたせたサイト。サイドナビなど設けず、情報が1つ1つ分かれているのが、ごちゃごちゃせず、ユーザーが情報を判別できやすいのが利点であり、情報が見やすく出来ています。内部はWEB初心者の方でもページを更新出来るようワードプレスを導入している。

スポンサーリンク

ワードプレスとは?
WordPress(ワードプレス)は、オープンソースのブログソフトウェアである。 PHPで開発されており、データベース管理システムとしてMySQLを利用している(後述のプラグインよりSQLiteでの使用も可能)。 単なるブログではなくCMSとしてもしばしば利用されている。
引用:Wikipedia

バンドじゃないもん!

バンドじゃないもん!
公式ホームページ:https://banmon.jp/
至ってシンプルな作りながら、タイトルの手書き文字や背景のイラストなど、アイドルらしい可愛いらしさを表現しているサイト。本文、キャッチの色使い、太さ、フォントサイズなど文字の強弱が非常に上手く、非常に参考になります。これこそプロの仕事。バンもんサイトも『レスポンシブ』を導入。

PassCode

PassCode
公式ホームページ:http://passcode-official.com/
白と黒を基調としたサイト。帯と色使い、ホバーアクションも統一がとれているので、白黒を基調としたサイトを作る際に、全体のまとめ方を参考にしたいです。特にロゴが秀逸。可読できる可読できないの間を取ったデザイン性の高さを伺えます。これもまさにプロの仕事。

WHY@DOLL

WHY@DOLL
公式ホームページ:http://www.versionmusic.net/whydoll/
何と言っても、2つに分かれた大木に草原、そして双子と思わせる対極した女の子が、背景の自然と溶け込み幻想的な雰囲気の漂わせるイラストに目を惹かれます。サイトを作る上でイラストの良さを教えてくれる秀逸なサイト。プロフィールも全てイラストでサイトを統一し、声優ユニットのClariS(クラリス)のようにしたら、もっと世間に広まる気もする。そういう意味ではイラストが素晴らしいだけに、非常におしいサイトでもあります。

テンテンコ

テンテンコ
公式ホームページ:http://tentenko.jimdo.com/
「未だにこういうサイトがあるのか…。」と一周して実は有りなんじゃないか?感じさせてくれるインターネットが始まった1990年代の雰囲気のサイト。意味不明な金魚のアニメーションと家と亀の解釈ができず戸惑っております。デザインの参考にはなりませんが、凝り固まった頭をほぐす意味では、一度古臭い雰囲気のサイトを眺めるのもアリかなと思うので、こちらのサイトもまとめさせていただきました。ハンバーガーメニューを取り入れているのが唯一新しい。

ハンバーガーメニューとは?
ハンバーガー屋さんの店頭に置いてあるメニューではなくて、スマートフォンサイトやタブレットサイト、最近ではPCサイトでもちらほら見かける三本線のナビゲーションメニューです。
引用:

NECRONOMIDOL

NECRONOMIDOL
公式ホームページ:http://necronomidol.com/
赤と薄いピンク色を基調とし、画像を中心として魅せるサイト。各カテゴリで背景にMVを薄く残して、デザインを統一するのも表現もアリだなと教えてくれます。勿論MVの写真が目を惹く特徴的な場合でないと効果的ではありませんが。血が飛び散る中に佇む、学ランの少女たちに狂気さを感じます。『レスポンシブ』を導入。

さいごに

いかがでしたでしょうか?
アイドルのサイトだけあって、メインビジュアルにメンバーの写真を持ってくるのがサイトが多く見受けられます。そういった意味ではメインビジュアルに合わせてサイトを作ればいいので、WEBデザイナーに取っては、デザインをまとめやすいのは嬉しいところ。ですが、デザインをまとめるだけでは他のサイトに埋もれてしまい、物足りなくなさが出てきます。次に悩むところとしては、アニメーションや『パララックス』などの動きを取り入れて遊びを加えたり、アイドルグループの個性をさらに表現するのはどうするか?という一歩先の魅せ方を目指すという仕事が残っています。アイドルに限らず、自分が作るサイトのコンテンツをどう魅せるかを常に意識してサイト作りを心がけましょう。(とは言え、クライアントとのやりとりや、しがらみに惑わせられる事ばかりですがね笑)
このまとめがデザインを考える上での参考になれば幸いです。
それでは、また!

スポンサーリンク
  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。