担当者が語る 2018.10.09 NEW 「綿密な情報設計で効率的かつ
速報性を持ったサイト運営へ」

2016年3月にリニューアルし、Movable Type開発会社のシックス・アパート株式会社の記事にも事例として取り上げられた日本女子サッカーリーグオフィシャルサイトについて、弊社のリニューアル時の担当者に工夫した点やリリースに至るまでの制作の裏話について語ってもらいました。

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

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

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

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

サイトの設計面での工夫

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

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

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

試合の放送予定をお知らせするページの編集画面。
FreeLayoutCustomFieldプラグインにより直感的な情報更新を実現している

デザイン面での工夫

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

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

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

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

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

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

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

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

今後の展望

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

この記事を書いた人

藤沼 瑞葉(Webディレクター)

Web制作会社にてWebデザイナーとして4年半勤務後、SNCに2014年にWebディレクターとして転職。現在ではデザインとディレクションの両方の業務を担当。

まずはお気軽にご相談

お客様のご要望・課題に専門のスタッフが回答いたします

おかげさまで大好評! まずはお気軽にご相談

ご利用前に、レンダリングマシンと
接続テストも可能です。
ご要望・課題にあわせ、
最適なプランをご提案いたします。

※記載されている会社名、製品名、ブランド名、サービス名は、全て各社の商標または登録商標です。

お困りの点をお聞きします まずはお気軽にご相談

お客様のサイトや
システムの課題にあわせ、
様々なカスタムプランを
ご提案いたします。

※記載されている会社名、製品名、ブランド名、サービス名は、全て各社の商標または登録商標です。

まずはお気軽にご相談

Qrio Smart Lock 販売代理店に関する情報も、お気軽にお問い合わせください。

※記載されている会社名、製品名、ブランド名、サービス名は、全て各社の商標または登録商標です。

お問い合わせ・資料請求
  • bit-drive クラウドを軸にしたITソリューションサービス
  • NURO Biz 法人向け超高速インターネット接続サービス
  • 法人インターネット接続 SOHO・個人事業主向けインターネットプロバイダ

PostPet ™