この記事は、PIXTA Advent Calendar 2017 22日目の記事です。
はじめまして。エンジニアの佐々木です。
前回に引き続いて、今回も絶賛進行中のMFIプロジェクトについて
「モバイルアクセスに特化した夢のコンテンツを配信する」
という方針を
「PCサイトをベースにレスポンシブデザインにする」
へ
- 何故変更しようと思ったか
- その際に苦労した事は何か
- 工夫した事は何か
についての話となります。 課題に対して技術的解決をした話は14日目のこちらの記事に書かれています。
現在力を入れるべく取り組んでいる事の1つとしてモバイル対応がありますが、 その対応方法として今回選んだのは
レスポンシブデザイン
です。
序またはモバイルアクセスに特化した夢のコンテンツ配信計画
検討時の候補は下記がありました。
- ユーザーエージェントによって表示内容を分ける(ビューは分ける) Rails ActionPack Variants
- 画面サイズによって表示内容を分ける(ビューは分けない) CSS Media Queries
- あわよくばAMP/PWA
プロジェクト当初はビューを分ける方式が採用されており、その方式では、モバイルに特化したデザインを作成できるため
「検索エンジン経由の流入を落とさずに」
かつ
「モバイル経由からのコンバージョンを増加させる」
事も可能でした。
そのためデザイナーさんが先駆けて用意したデザイン案には新しいデザイン(夢)がふんだんに盛り込まれており、ビューを分ける方式で進める前提の中で、エンジニアへの説明中に個人的に印象に残っているのが
デザイン案を画面に映しながら概要を説明し
「こちらには夢をたくさん詰め込んでおります」
という言葉ととっておきの笑顔でした。 そのデザイナーさん(古参)は夢の詳細を説明した後は必ずと言っていい程
「(このデザインを実装する事になる)エンジニアは嫌な顔をするかな〜」
を付け足します。
破または現実
ですが、PCサイトとモバイルサイトでデザインを別にするという事は
- 多言語対応(ビューが既に分かれている事)
- 機能追加した場合の同期をどうするか
- ABテストがどうなるか
等多くの課題がありました。 その中でも特に「管理するビューの枚数」について気になるところで、 運用が辛い事もあり回避したいという現場の思いと、辛い運用の結果、 エンドユーザーに与えてしまい兼ねない影響を考えた末にそれは無視できないという事、 さらに当時とエンジニアがプロジェクトに参画した時との状況の違いもあり、 もう一方のビューを分けないレスポンシブデザイン方式を最終的には採用する事にしました。
方針変更をするかどうかの決定に迷う中、とあるデザイナー(古参)さんがいつも言っていた事を思い出しました。
僕たちのプロダクト改善は誰のためにしてるんですか？
家族のためでしょ！！ ※古参デザイナーはいつもふざけます
もとい
ユーザーのためでしょ！！
これが方針変更を提案しようと決断した瞬間でした。
その後、一度作成したデザインを一旦取り下げてもらい、変更後の方式でのデザイン検討の際はルールだったルールも特に無い状態であり、デザイナーさん(古参)は度々新デザイン(夢)を適用したがったために
「PCデザインをベースにMedia Queriesでモバイルのためのデザイン(スタイルシート)を用意する」
というルールを作って進めました。
レスポンシブ化が難しい箇所が存在する事もわかってましたが、その際に新デザイン(夢)を盛り込もうとしてきた時には、正直私(エンジニア)にはそのような裁量はありませんが、その都度断固拒否してやりました。 その理由は
「リリース後の効果測定の上り下がりの要因がレスポンシブ化なのか新デザイン適用の影響なのかが見えづらくなる」
です。 とはいえ本当にレスポンシブ化が難しいのか、はたまた夢を諦めきれないのか、 隙あらば新デザイン(夢)を盛り込もうとしてくるデザイナー(古参)さんを納得させるために、下記のようなルールの追加を行いました。
- (前述の理由により)ドラスティックな変更はNG
- 増やす事もNG
- (データ検証等により影響度が最小限である前提で)減らす事は止む無しとする
以降のデザイン検討は比較的スムーズに進んだかと思います。 簡単に苦労した事をまとめておきます。
- デザイン違い
- 段階的なリリースのために発生する各ケースに耐えうる仕組み化
- 夢を盛り込むデザイナー
急そして再度夢
当初からの方針変更により、プロジェクトの目指すところが
「最大限の価値の発揮(モバイルフレンドリーの追求)」
から
「検索エンジンのための対応」
へと一旦変わる事となってしまいましたが、夢を諦めないデザイナーとエンジニアは夜な夜な会社近くの神社で盃を交わしながら議論をし、夢実現のための流れを考えました。
- レスポンシブデザインでMFIに備える
- レスポンシブ後、さらにUI/UX向上を目指しABテストを行う。その結果PCデザインも変えていく
- 最終的にはビューを分ける。運用に耐えうる体制ないし仕組みを整え、デバイスに特化する
ビューを分ける事とビューを分けない事ではそれぞれ一長一短がありますが、PIXTAが提供するサービスの性質から、将来的にはビューを分けた方が良いという結論です。
これからの話でもあるのですが、大事なのは熱量だと思います。
最後に一句。
隙あらば 夢を盛り込む デザイナー
ごきげんよう。
