インハウスWebデザイナーのお仕事｜ブランドサイトリニューアル編

■はじめに

こんにちは、ミクシィでWebデザイナーをしているmamichaです。
当記事では、「XFLAG」という弊社所有ブランドサイトのリニューアルを行った際の、Webデザイナーの作業工程をご紹介します。

さっそくですが、みなさんはWebサイトのリニューアルと聞くと、どんなイメージがあるでしょうか？
見た目をガラッと一新させることをイメージされる方が多いのではないかなと思います。実は今回ご紹介する「XFLAG」のリニューアルの目的には見た目の一新は目的に含まれていません。

では一体なぜリニューアルを行ったのでしょうか？
当リニューアルは特殊なケースに感じられるかもしれませんが、実は同等の悩みを抱えているWebサイトは多いのではないかと思っています。
この記事がWebサイトリニューアルについて悩まれている方、デザイナーの仕事について詳しく知りたい方のお役に立てれば幸いです。

「XFLAG」とは？
XFLAG（エックスフラッグ）は株式会社ミクシィのエンタメ事業ブランドです。ゲーム、アニメ、スポーツなど"アドレナリン全開"のバトルエンターテインメントを展開。友達や家族とワイワイ盛り上がれる場所を創出しています。
サイトURL https://xflag.com/

□ シリーズ記事 □
インハウスWebデザイナーのお仕事｜メディアサイト改修編

■背景

2015年7月リリース以降、改修を重ねてきた当サイト。
構成の老朽化に加え、方針の転換、コンテンツの追加削除を繰り返した結果、見た目の上でも実装上でも、構造破綻が起きていました。

その結果、ページによってはユーザビリティが芳しくなく、また、運用者と開発者にとっても更新のしづらいサイトになってしまっていました。

たびたびリニューアルの構想が持ち上がるものの、サイト運用目的の見直しや、部署を横断した承認が必要なコンテンツ追加など、組織間の合意形成の難しい案だったためか、いつのまにか案件立ち消え…となってしまっておりました。

その間も1年、2年と時は過ぎ、コンテンツ増減による構造破綻が進み…。
当サイトの運用者であったプランナーと、WEB開発担当であった私とで、小さな改良を重ねていく中で、構造設計の一新の必要性を強く感じるようになります。

これ以上の要求の解決と改善のためには、構造・骨格から立て直すべきである。見た目やコンセプトの変更を行うことは、これまでの経緯を踏まえ、合意形成までの障壁が大きい。そして、見た目に大きな問題は抱えていない。

このようないきさつで、見た目の変更を目的に含まない構造設計一新のためのリニューアル提案へと取り掛かることになりました。

■リニューアル概要

・UI再設計
・CMS再設計
を行い、ユーザビリティと更新のしやすさを改善を目的としました。

UI再設計

既存のブランドロゴガイドラインを元に、旧デザイン時来訪者に戸惑いを与えないよう、UIの再設計を行いました。

CMS再設計

主要コンテンツをCMS上で効率的に更新できるよう再設計を行いました。

以下では、これらの改善・リリースに至るまでの工程を順を追って振り返っていきたいと思います。

工程1.課題の絞り込み

まず、運用上で抱えてる問題のリストを運用チームから共有してもらいました。そこへ開発者側の持つ問題を追加。
ブレストを元に要点を整理し、技術面で最も合理的な解決方法を探っていきました。

工程2.要件定義

提案資料の作成

それぞれの問題点に対する具体的な改善方法を資料にまとめていきます。リニューアルの全体の構想と共に、開発側からの提案資料として運用組織へ提出しました。

デザイナーだからできた提案だけれども、デザイナーなのにコンセプトや見た目に対する提案は行わない。理解が得られるかが不安でした。
（ここで、コンセプトを見直してデザインを一新しよう！となった場合、部署横断の一大プロジェクトになり、合意が取れずにリリースは実現しなかったかもしれません…）

📚参考書籍
社内プレゼン一発ＯＫ！ 「Ａ４一枚」から始める最速の資料作成術

無事、運用組織の上長の承認を得て前進します。
リソースの逼迫する社内エンジニアさんの代わりに、外部パートナー様の協力を得てもよいとのことで、企画実現に至りました。

工程3.発注準備

外部パートナー様にご協力いただくにあたり、仕様を固めるためのタスクの分割とスケジュールを設定します。

ディレクトリのリストを作成し、リニューアル後での不要ファイル・CMS編集を可能にさせたいファイルなどの精査を行いました。それらを反映させたストラクチャを作成し、社内での認識をすり合わせていきます。

これらもとにパートナー企業様にご依頼しました。(契約締結後には、もっと詳細な資料をパートナー企業のご担当者様がご用意くださり、それを元に進行しました。ありがとうございました。)

📚参考書籍
現場のプロがやさしく書いたWebサイトの分析・改善の教科書【改訂2版】
IA100 —ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計 長谷川 敦士

工程4.開発

デザインを社内で行うことで予算を圧縮するため、UI再設計を行いました。

ツール：XD

ユーザビリティの改善

UIの整理と共に、調整が必要なパーツを再設計しました。

旧サイトではアクセントとなっていた黄色ボタンですが、視認性を考慮しブランドカラーの青を使用したものへ変更。JPG画像からCSS装飾へと変更し、モダンブラウザへ対応しました。

他のJPG画像素材もRetina対応の表示形式(SVG)へ変更を行いました。

ページ単位ではコンテンツのカラム表示の最適化と、

タブレット表示の最適化（ブレイクポイントの追加、コンテンツのカラム・リキッドの最適化）を行いました。

更新のしやすさの改善

既存のコンテンツを新たにCMS上で更新ができるようにするだけなく、

CMS上で更新ができる可変箇所は、
・文字数と改行数
・コンテンツ数
の限りがなく入力できるよう再設計し、エンジニアさんにお願いをしました。この概念をゼロワンインフィニティと呼ぶそうです。
🌐参考：ソシオメディア | ゼロ・ワン・インフィニティ 

また、CMSで制御する画像は全て1サイズのみ(OGPサイズ)とし、全ての画像表示のアスペクト比率を揃えました。これにより、運用者がサイト上の各画像ごとの推奨サイズを覚える必要が無くなりました。

同コンテンツを有するパーツの一元管理を可能な設計へ変更しました。

他にも、
・記事エディタの機能改善や
・開発環境のモダン化
など、実装面でもたくさんの改善をパートナー様にお手伝いいただき、改善にいたりました。

■おわりに

💬CMS化を進めすぎて自分の仕事がなくなる

2年ほど前、当サイトの開発担当になってしばらく、CMSの改修を行なっていました。当時はCMSで編集可能な箇所を増やしたり、モジュールの一元化をさせたり、更新マニュアルを作ったりと、更新方法が合理化されていくことがとても楽しかった記憶があります。（バージョン管理不在・部分的に走るタスクランナー・ローカルと本番の差分など複雑な開発環境に戸惑いつつ…😱）
そのうちに、運用チームから定期的に来ていた開発依頼が、すべてCMS上で実現可能となってしまい「あれ？自分の仕事が無くなってしまった😅今度は何を改善できるだろう？」と考え、物は試しと、当リニューアルのドラフトが始まりました。

当時、この複雑な開発環境を全て把握しているのは私しかいない！リニューアルの必要性を一番理解しているのは私なはず！なんとかせねば！という責任感と、新しいチャレンジにとてもワクワクしていました。

はじめて書く企画書や資料では、言語化と、事実と思いを分けてわかりやすく伝えることがこんなに難しいのかと、己の未熟さを痛感しました。とても勉強になりました。チャレンジの機会をいただきありがとうございます。

💬リニューアルってなんだ？デザイナーの仕事とは？

「リニューアルなのにデザイン一新しなくてもいいの？デザイナー発案なのに？」という不安がずっとありました。前回のミクシルの改修（インハウスWebデザイナーのお仕事｜メディアサイト改修編）の時もそうだったのですが、ブランドや全体のコンセプトに問題があるのではなく、操作性や品質の向上のため、と切り分けて考えてのことですが、無事リリースが迎えられて良かったです…！「デザイナー発」ではなく「コーダー発」であれば納得感があったのかなぁと伝え方についても考えてみたり。

今回のように、コンセプト変更が無いのでリニューアルに踏み切れないが、不都合が山積み…というWebサイトはたくさんあるのではと思っています。老朽化解消のためだけのリニューアルがもっと当たり前になっていくといいなと思いました。

💬"配信コンテンツの見直し"の効果も

旧コンテンツに合わせてページテンプレートを設計していく中で、管理体制が曖昧なコンテンツの配信意義を見直すことも行われました。
ユーザビリティを担保するとJSでの表現が必要になりそうな再現コストの高いもの、担当部署が現在ではわからなくなってしまったもの、目的がわからなくなってしまったコンテンツ…
これらがリニューアルを契機に優先度の精査が行われ、当初予定していたよりも少ないテンプレート数でのリリースとなりました。

通説である「運用サイトは数年単位でリニューアルを行ったほうがよい」の真意はこの点にあるのかもなぁと実感した限りです。

💬これら経験を生かして、他の案件にも貢献していきたい

今回もインハウスならではの貴重な経験をさせていただきました。
前例を作ることで、他サイトでもご協力できるようになればと思いながら進めていました。今後も困っている方々のお手伝いをできればと思います。社内のみなさま、お気軽にご相談ください☺️

💬お力添えいただきました皆様、本当にありがとうございます

ご協力いただいた皆様に心より感謝いたします。
拙い私と共にご進行いただいき本当にありがとうございます。
今後の運用でも、引き続きよろしくお願いいたします。

📚参考書籍
Web Designing 2020年4月号［雑誌］ Web Designing編集部
UIデザイン　みんなで考え、カイゼンする。 栄前田 勝太郎
Webサイト・リニューアル　「見た目だけ変えた」にしない成功の手引き 滝川洋平