この記事は、PIXTA Advent Calendar 2017 21日目の記事です。
こんにちは、デザイナーの宇田川です。
グーグルが発表した、モバイルファーストインデックス（MFI）で
モバイル対応を進めているWEBサイトも多いのではないでしょうか？
PIXTAのように、to B向けのサービスだと、
PCからの利用がメインになるので、今までモバイル対応をしてこなかったのですが、
MFIの発表がされ、SEO対策の一環でモバイル対応を開始することになりました。
今回は
- モバイル対応で検討したこと
- モバイル専用のデザインの作成
- 根本が覆ったあの日........（エンジニアがMFIプロジェクトにやってきた）
などをお伝えしたいと思います。
モバイル対応で検討したこと
まずは、デザイナーだけでMFIプロジェクトの検討をした内容として
- レスポンシブで進めるか？
- モバイル専用のページを作成して進めるか？
を検討しました。
最初でもお話したように、PIXTAではPCからの利用が圧倒的に多く
【PCのUIに影響を出さない！】が絶対条件となります。
ただし、モバイルの利用も増えてきているので
モバイルの使い勝手も考慮して進めることも視野に入れる必要がありました。
それを踏まえて
まずは、レスポンシブ、モバイル専用のメリット、デメリットを洗い出しました。
レスポンシブで進めるメリット、デメリット
【メリット】
- 運用の工数が圧倒的に低くなる
【デメリット】
- モバイルのUIにマッチしていない
モバイル専用のページで進めるメリット、デメリット
【メリット】
- モバイルで使いやすいUIを提供できる
- PCのUIに影響が出ない
【デメリット】
- 運用工数が大幅に多くなる
これを比較したときに、明らかにまずはレスポンシブかなーと考えたのですが、
- リリースまでにそんなに時間を割けない
という課題もあり、なおかつ、
- PC, モバイルどちらにも適したUIを提供したい
という思いがあり、PCに影響を与えない方法を考えると
モバイル専用のページを作成した方がいいのでは？
という考えにいたりました。
これで進めるぞ！
- モバイル専用のデザインを作る
- 既存のPCのUIは、後々モバイルに寄せていく！
- 新規で作るのでコードも整理できるいい機会！コードリファクタも合わせてやってしまえ！
運用がPC, モバイルと二重管理になりますが、
来年にはPIXTAサイトのPC版をモバイル専用のデザインに合わせて レスポンシブ化する予定だったので
二重管理は少しの間だけ......
コードのリファクタもできる！
我ながらいい着地と、自画自賛した2017年10月の寒い日だった！
この案を、技術推進部に提案して、色々質問責めにあいましたが..... なんとかクリア！
これで進める事になりました。
モバイル専用のデザインの作成
よし！
と気持ちを改め、デザイン作成に取りかかる事となります。
※MFIプロジェクト担当予定のエンジニアは、まだ別プロジェクトにアサインされていたため、まずはデザイナーだけでデザインを進めました
新規で作成する良い機会なので、Atomic Designを採用することにしました。
【モバイル専用デザイン】
【シンボルのコンポーネント化】
デザイン作成で意識したことは、 後々は、PCをモバイルに寄せていく（レスポンシブ化）を意識して作成したことです。
根本が覆ったあの日........（エンジニアがMFIプロジェクトにやってきた）
ついに、別プロジェクトを終えたエンジニア2名がMFIプロジェクトにやってきました！
そう、、あれは2017年11月初旬のことでした。
エンジニアにMFIの経緯とプロジェクトの進め方を説明して
（僕は自信満々に説明していたのをよく覚えています）
よしやるぞ！！
と声が上がると期待したところ
エンジニアの方から以外な一言が.....
エンジニア：「PCとモバイル二重管理辛くないっすか....」
な・な・なんと......
エンジニアに、メリット、デメリットの考察を伝え、この経緯でこう決めましたと伝えたところ
でも
エンジニア：「初めからレスポンシブで行けばいいんじゃないっすか？」
そ・そ・そうなんだけれども、
ちょうど、エンジニアのプロジェクトへの合流も遅くなったこともあり
リリースが伸びた経緯もあった....
ガビーーーーン
ここからエンジニアとデザイナーの長い戦いが始まるのであった
話が長くなるので、これはまた別のお・は・な・し・で。。。。
※もしも話が聞きたい方がいたらぜひPIXTAへ！！！
PIXTAではエンジニア・デザイナーの採用に力を入れておりまっす
＊＊＊＊＊
ピクスタでは、サービスを盛り上げていきたいデザイナー・エンジニアを募集しています。 recruit.pixta.co.jp
結論は、
レスポンシブで対応して、モバイルとPCの共存できるUIを後から対応すればいいんじゃない？
でまとまりましたとさ...
ここで一句
デザイナー編
デザイナー 夢を盛り込む 性格ね
エンジニア編
エンジニア タスク配分 現実派
まとめ
いかがだったでしょうか？
実はこのお話には続きがあるのです！！
（MFIプロジェクト デザイナーともめたあのひ.......その2）
明日12/22（金）に続き（エンジニア目線）が見れるので、お楽しみに！！！！！！！！！！！！！
＊＊＊＊＊
ピクスタでは、サービスを盛り上げていきたいデザイナー・エンジニアを募集しています。 recruit.pixta.co.jp
