乃木坂46の公式サイトのリデザインで学んだこと

先日、ふとしたきっかけで乃木坂46の公式サイトをリデザインを思い立ち、スキルアップの一環も兼ねてトップページをリデザインをしていました。

そのリデザインから学んだことなどをブログに書きたいと思っていたのですが、公式サイトに掲載されているコンテンツの著作権上、なかなか難しいかなと思い、念のため乃木坂46の運営委員会に問い合わせてみたところ、営利目的でなければ使用しても大丈夫（ブログの掲載も可）との許可をいただいたため、こちらに書くことにしました（2/9 16:43：問い合わせの内容は、公式サイトのお問い合わせフォームから送信したため、画像の添付などはしていません。コンテンツの掲載許可は頂きましたが、運営委員会に直接デザインデータを送ったわけではありません）。

なぜリデザインをしたいと思ったのか

もともとアイドルが好きで、アイドルグループの公式サイトをチェックする機会が多いのですが、乃木坂46の公式サイトが多言語化に対応した、というニュースが掲載されていました。

確認したところ、確かに多言語化には対応されていたのですが、ナビゲーションや見出しなどに頻繁に使われている画像文字の部分は翻訳されておらず、ぱっと見て違和感がありました。Webフォントなどの使用が当たり前になってきている今、メインビジュアルなど、どうしても画像でなければ再現できない場合を除いて、画像文字を使う必要性をあまり感じなくなってきていることもあり、現状のWebサイトに即したデザインにするべきではないか？と思ったことが、リデザインのきっかけになりました。

それ以外の課題を把握する

http://www.nogizaka46.com/

リデザインをする上で、公式サイトを改めて見渡してみたところ、上記以外にもいくつか課題があるなと感じました。縦に圧迫感を感じるほどに並べられたバナーや、ヘッダーからはみ出したように配置されている情報など。私の記憶では、活動初期の乃木坂46の公式サイトはもっとすっきりとしていた記憶があり、活動量が増えるに従って、最初に作られたサイトの規模と、現在の活動の規模が見合わなくなってきているのではないか、と感じました（とはいえ、他のAKBグループなどの公式サイトを見て回ると、どこも所狭しと視覚情報が詰め込まれており、乃木坂46の公式サイトは比較的すっきりしているように見えました）。今後の活動量が大幅に増えることも踏まえて、初期のうちにある程度余裕を持って設計をしておくか、その都度に応じて変更しやすいデザインにすることが大事なのではないか、と感じました。

リデザインをする

上記の課題を踏まえて、トップページをリデザインしてみました。

リデザインの意図

・グループのイメージカラーである紫に加え、明度の高いグレーを加えることによって、落ち着いた色合いを意識した。

・グループの全体的なブランディング戦略が活動初期とは異なってきており、初期の正統派・清純派アイドルグループのイメージ（背景にタータンチェックを使用するなど）を、改めて押し出す必要性はないと感じたので、タータンチェックのパターンなどは取り入れなかった。

・ナビゲーションは、コンテンツページの量が多いため工夫を凝らす必要があり、翻訳されることも考慮して余白にゆとりを持たせた。タブレットやスマホなどではハンバーガーメニューに切り替えることを想定している。ヘッダーのレイアウトは、情報量の多い大学や教育機関のサイトを参考にした。

・メインビジュアルの1枚目には、グループのアーティスト写真を使用し、2枚目以降からは、現在の公式サイトと同じく、告知用のビジュアルを使うことを想定している。1枚目がアーティスト写真なことに関しては、乃木坂46に興味を持って調べて、初めて公式サイトにやってきたユーザーに、グループのイメージを改めて認識させるためという意図がある。

・ヘッダーとコンテンツの間に、はみ出したように置かれていたトピックスを、ヘッダー内にスペースを作って配置した。

・翻訳されるという前提でデザインを考えると、見出しの下に英語表記を併記する意味を感じなかったため、日本語表記のみにした。また、単に見栄えのために何の気なしに英語表記を併記してしまうことがあるため、本当に併記が必要なのかを考えるきっかけになった。

・新着ニュースの一覧性が低いと感じた（タイトルと説明文の文字サイズなどに差異がない、説明文が長く、タイトルに目が行かない）ため、説明文を削除してタイトルのみにし、文字サイズを大きくした。また、ニュースの種類によって色違いの乃木坂アイコンが使われていたが、色の意味を理解するまでに時間がかかるため、文字で表現することにした。

・公式ブログのコンテンツのデザインは、欅坂46の公式サイトを参考に、誰が更新したのかを分かりやすくするため、メンバーの名前の横にプロフィールアイコンを配置。1日に複数記事を書いたメンバーは、最新の1記事しか表示されないことを想定している。

・活動カレンダーは、活動の意味を表しているアイコンが小さいため見づらいことと、スケジュールページのみで十分だと思ったため、トップページに配置する必要性を感じず、廃止することにした。

・動画コンテンツの見出しでも画像文字が使われていたため、翻訳されることを前提に、余白にゆとりを持ったデザインにした。「動画」の表記は実質「ミュージックビデオ」でもいいのではないかと思ったが、ミュージックビデオ以外の動画もあるため、そのままにした。一度に表示する量を3つまでに抑えた。

・ページのスペースを縦に圧迫していたバナーは、スライド式にすることによって省スペース化を図った。こちらも欅坂46のサイトを参考にしている。一度に表示する量を3つまでにし、視覚的に圧迫しないように考慮している。

・新曲があまり目立っていないと感じたので、新曲のミュージックビデオへの導線を大きく配置した。

・その他、あまり必要がないと思われるリンクを削除。
・フッターには、把握している限りの公式SNSアカウントへのリンクを配置し、 個人的にあってほしい「サイトマップ」へのリンクも配置した（作られてほしい）。

リデザインをした上での課題点

・翻訳ボタンは、ナビゲーションのスペースに配置し、固定ヘッダーとしてスクロールすることを想定しているが、翻訳ボタンだけを独立させたスペースに配置した方がいいかもしれない。

・ツイートの埋め込みは、公式SNSへのリンクがすでに配置されていたこともあり、個人的には特に意味を感じられなかったため削除したが、新着情報を分かりやすく表示するという意味では重要なのかもしれないので、ツイートを埋め込む意味を再考していきたい。

まとめ

個人的な観点からのリデザインなため、このデザイン自体には賛否両論があると思いますが、大規模なアイドルグループの公式サイトをリデザインすることは、既存の情報を改めて整理と設計をするという意味で、とても勉強になりました。また、全体的に情報量が多かったことから、大学や教育機関のサイトを参考にしながらデザインをしていたのですが、これらの分野のサイトには情報設計のノウハウが詰まっていて、参考になることが多かったです。翻訳されることを前提にデザインを作ることも初めての経験で、普段多くのサイトで見かける英語表記の併記の意味についても改めて考えさせられました。これからもこうした取り組みは、公開の有無にかかわらず、スキルアップの一環として個人的に続けていきたいと思っています。

最後に、乃木坂46運営委員会の方々、コンテンツの掲載の許可を頂きありがとうございました。