BLOGブログ

リニューアルの経緯、担当した箇所

システムチームで以前からなでしこ様の運用を担当しており、そこからリニューアルのお話をいただきウェブインテグレーション部門の私を含めた３人のメンバーで2016年３月にリニューアルを行う運びとなりました。

なでしこ様へのヒアリングで浮き彫りとなった問題点

なでしこ様に最初ヒアリングを行ったところ、日本女子サッカーリーグの顔ともいうべきオフィシャルサイトは運営面で、終了した試合の結果を掲載するのに時間がかかるなど速報性に乏しく、かつモバイルユーザーに対するスマートフォンページの対応などの問題を抱えていらっしゃるようでした。

サイトの設計面での工夫

課題を解決するために新サイトは更新のしやすさを考慮し、システムから情報を引用し表示している部分、CMSと連動している部分、静的なHTMLを表示する部分と情報の切り分けを行い綿密にサイト設計をしました。

例えば、トップページのヘッダー部分の試合結果やページ右側に配置している順位と得点ランキングについてはシステムから情報をリアルタイムに取得する形で表示させております。また、メインビジュアルやニュース、ブログ部分はCMSと連動しておりサイト運用担当者がアップした記事がすぐにサイトに反映されます。特にブログについては特定のチームや選手のファンに、ほかのチームや選手のブログも見ていただくことで、リーグ全体を盛り上げる目的があり、いろいろなチームの鮮度の高いブログ情報をトップページに出すことでサイト全体がにぎやかになったかと思います。

CMSについては使い勝手も考慮しUIには「FreeLayoutCustomField」というプラグインを使い、情報を違和感なく更新できるように作り込みました。これにより、直感的な更新作業を実現、入力の作業負荷軽減を図っています。
詳細についてはシックス・アパート株式会社の記事でも紹介されています。

デザイン面での工夫

またデザイン面ではシンプルで女性らしい、そしてリニューアル感を出したいとのご要望をいただきました。シンプルさについては情報が多いページなので、余白を充分に活用し情報に目がいくように調整し、女性らしさはなでしこのロゴにも使用している桜の花びらをサイト内にポイントとして装飾する形で表現し、全体のトーン＆マナーをピンクカラーから赤色へとガラッと変更しリニューアル感を出す形にしました。

なでしこ様もサイトのテーマカラーの色は最後まで悩まれており、何度も話し合いを重ね女性の強さやなでしこリーグの勢いを赤色のカラーで表現するという形でまとめることができました。

赤色に決定するまでに検討したカラー

左：和の色の中から、少し落ち着きつつも、濃いピンク色であるツツジ色を使用した場合と、右：和のピンク色をベースに、で引き締め色に濃い赤茶色を使用した場合の色などサイトの色のパターン出しを行いました。

スマートフォンでの閲覧時でのUI面での工夫

このサイトはレスポンシブWebサイトで、かつ順位表や戦績表など表組みが多いページが多くスマホでも見やすいようにUI面で工夫をしております。例えば、戦績表をスマホで見るとテーブルの横軸ヘッダーがページスクロールの際についてきて、かつ縦軸は固定してあるので、表の縦軸と横軸が交わる場所が一目でわかります。

また、チームページのリーグのテーブルでは、スマホ閲覧時には１つのテーブルの区切りがわかりやすいように、PCのデザインをシンプルな見た目に変更する形で表示させていたりなどします。

チームページのリーグ箇所のテーブルを
PCとスマホで閲覧した時の見え方

今後の展望

リニューアルしてから早２年半の時間が経過しており、現在では大半の運用をなでしこ様の担当者様だけで回しており、運用していく中で発見することができたCMSの使い勝手の改善など弊社側で日々対応を行っております。例えば、最近では時代に合った動画配信もスタートしており、こちらについてはCMSのブログ機能を活用し、なでしこ様の担当者が更新できるような仕様になっております。動画のアーカイブもゆくゆくは対応していくことも考えております。
今後の展望としては、デザインを含めたサイト全体やCMS（Movabletype7）のバージョンアップのご提案を行いたいと考えております。このようにWebの側面で弊社からアプローチ＆ご提案できる面はまだまだ多いと感じており、リーグを一緒に盛り上げていく施策を考えることにチーム一丸となり日々奮闘しています。