サイドスリーブログ

【朗報】乃木坂46のサイトが新しくなりました


                【朗報】乃木坂46のサイトが新しくなりました

喜びの声

前回のブログで「乃木坂のサイトも今風のデザインにならないかな」とぼやいていたところ、2022年2月、サイトがリニューアルされました。
めちゃくちゃうれしいです。 (サイトはこちらから。)

先日は5期生の加入というビッグイベントもあり、このタイミングでデザインも一新したのでしょうか。

今回はその思いを綴ります。

前回のブログ

ここが変わった!機能面編

8か国語対応

2018年2月時点では7か国語対応でしたが、今回は8か国語にアップ。
(日本語、英語、簡体中文、繁体中文、タイ語、韓国語、マレー語、インドネシア語)

ここまで対応しているサイトはあまりないように思います。乃木坂最強。
アジア圏での人気ぶりがうかがえます。

NOTE
過去には中国や台湾でライブをしたり、タイの観光大使に任命されたこともあります。
8か国語対応

SSL化

ようやくSSL化しました。
今更な感じがしますが、これまでセキュリティ面は大丈夫だったのか不安です。
推しの安全が守られて一安心です。

絞り込み機能

メンバー一覧の絞り込み(フィルタ)機能が充実しています。
選抜メンバーだけでなく「十二福神」、「アンダー」、「生年月日」でも絞り込みできるようになっています。

これまでのシングルの選抜メンバーも並び替え(ソート)できるのがいいなと思います。
「この曲の選抜誰だっけ?」という話をするときに使えます。

絞り込み機能
NOTE
十二福神:選抜メンバーの中でも前列12名のこと。昔は7名(七福神)でしたが、人数増加に伴い現在は12名になりました。
NOTE
アンダー:非選抜メンバーのこと。TVなどで披露されるシングル曲には選ばれていません。カップリング曲では選抜されています。

SNSへの導線とシェア

メンバーのプロフィールから、各自のSNSに飛べるようになりました。
プロフィールのURLをコピーしたり、LINEやTwitterでシェアできる機能もあります。

最近はInstagramを始めるメンバーも多いので、SNSを頻繁に利用する層に寄り添った現代的な機能だと感じました。
今後もどんな機能が追加されていくのか楽しみです。

SNSへの導線とシェア

過去のライブ一覧

過去のライブ一覧をロゴ付きで見ることができます。
私はアイドル関連のロゴを見るのが好きですが、卒コンのときは卒業メンバーのイメージにぴったりのデザインが作られているのが素敵です。

個人的には2019年3月開催 衛藤美彩卒コンのロゴが好きです。

過去のライブ一覧
NOTE
卒コン(そつこん):卒業コンサートの略。
NOTE
衛藤美彩さんは西武ライオンズの源田選手の奥さんです。2人とも大分県出身です。

ここが変わった!デザイン編

余白

全体を通して旧サイトより余白がぐんと増え、コンテンツ間に余裕がある印象です。
以前までは情報が渋滞していた感がありましたが、新サイトではすっきり。

しかしその中でもボリュームが減っていない箇所があります。
外仕事のあるメンバーが多いため、「お知らせ」と「スケジュール」の占める割合が大きいのは乃木坂の特徴ではないかと思います。

一般的なサイトでは表示件数3~10件くらいですが、乃木坂のスケジュールは15件も出ています。
また、その縦幅のエリアを利用してTwitterを長めに読み込んでいるのも上手だなと思います。

NOTE
外仕事(そとしごと):ラジオ、雑誌、CM、映画、テレビ出演などで運営外が主催している仕事。あらゆるファン層を広げるきっかけにもなります。
たとえばクイズ、サッカー、麻雀、馬術などあらゆるジャンルで活躍しています。

カラー

櫻坂46のサイトと同じく白をベースとし、イメージカラーの紫をアクセントに使っているようです。
カラフルな色はアイコンや装飾以外に使われていないため、ガチャガチャした印象もありません。

  • #9e3eb2
  • #d2d1d9
  • #fc4d4d
  • #1a98e8
  • #03b29c
  • #ff9000

「坂」へのこだわり

「坂」にこだわった斜めのデザインが気になります。

たとえばスライダーのタイマー表示。
斜めになっているのは珍しいなと思います。駆け上がるような表現がいいですね。

スライダーのタイマー表示

ちなみに角度は「30度」でした。
線のベース部分(div..tp--visu__tim)に、transform: rotate(-30deg) translateZ(0)というstyleをあてています。

それからブログ一覧のサムネイル画像も斜めにカットされています。
画像を囲ったdivタグの疑似要素(after)に、transform: skewY(-12.2deg);というstyleをあてて斜めにしています。
skewは要素を傾斜させることができるため、台形を作ったり、背景を斜めにするときにも使えます。

ブログ一覧 スマホのメニュー

スマホのメニューも斜めにカットされています

構成

トップページの構成はほとんど変化がありませんでした。
(スライダー、お知らせ、スケジュール、ブログ一覧、バナー)

ブログ一覧はもう少し上に配置してもいいのでは?という気もしますが、お知らせやスケジュールの重要度の高さをうかがえます。
(櫻坂46や日向坂46のサイトだと、ブログ一覧は上部に配置されています)

気になるところ

パソコンから見ると、画像が粗いかなと思いました。
アイコンなどを使う場合はsvgやwebpを用いるとより綺麗に書き出すことができます。

ほかにはサイトの重さが気になりますが、リニューアル当初に比べて少し改善されてそうです。

オタクの声

他の人がどう思っているのか気になったので、まとめサイトやTwitterで見つけた声を載せてみます。

  • スマホから見ると、メンバー出演のスケジュールが隠れてしまうのが不満
  • まさか、旧サイトはhttpだったのか
  • 見にくくなった、使いづらい
  • 変わりすぎて戸惑う
  • 重い、反応が悪い
  • 上品な乃木坂のイメージ通りになっている
  • ほしい情報がどこにあるのかわかりやすい

賛否両論ですが「わかりやすい」「見にくくなった」という正反対の意見があるのはおもしろいなと思いました。

私は職業柄Webサイトを見ることに慣れていますが、そうでない方・スマホ世代でない方にとっては「使いづらい」と感じるのかもしれません。
今どきのデザインといえど「新しいもの」が万人に受け入れられるとは限らないため、改めてリニューアルの難しさを感じました。

リニューアルの意味

今回ブログを書く上で、「サイトをリニューアルする意味」について考えさせられました。

"リニューアル"には「なんとなく新しくしてみた」という曖昧な思いではなく、なんらかの目的やきっかけの上で成り立つものだと思っています。

実は今年の1月、サイドスリーのサイトもプチリニューアルしています。

  • 自社サイトの運用目的を明確にする
  • 自社サイトをより活用していきたい
  • 知名度とブランド力のアップ
  • サイドスリーの魅力が伝わるサイトの作成

などの目的があります。

リニューアルの他にも、メンバーが増えたり、オフィスを移転したりと新しいステージに向かうサイドスリーの変化を感じます。

乃木坂の場合は「結成10周年」という大きな節目であり、また未来を背負う「5期生の加入」もきっかけの一つなのかなと思いました。

新しくなったサイドスリーのサイト

新しくなりました!

さいごに

旧サイトの懐かしさに思いを馳せながら、これからも私は乃木坂46を応援していきたいと思います。

AKB48は昨年7月にリニューアルされましたが、支店はまだのようです。
こちらも今風のサイトにリニューアルされないかなぁと思っています。

NOTE
支店:AKB48は「本店」、SKE48やNMB48などの姉妹グループは「支店」と呼ばれます。

サイドスリーでは乃木坂が好きな方も、あまりよく知らない方も募集しています。

その他の Web制作ネタ帳 ブログ一覧