こんにちは。週末の予定は、当日に決めるタイプ。デザイナーの高瀬です。
Googleが約2年前に発表したモバイルファーストインデックス（MFI）で、
PIXTAも例に漏れずモバイル対応を始めることになりました。
2年前に始めたPIXTAのモバイル対応。
ようやく予定していたページの全ての対応を完了できそうなので、始めた当初からの変化と、反省点、デザイナーとしてサイトを保守するということについて、書きたいと思います。
2年前
まずはSEOに大きく影響がある可能性のあるページから優先して対応を始め、
この時はプロジェクトとしてチームを起こし、自分もチームに参加しました。
上長にあたる古参デザイナーと、先輩である古参エンジニアを中心に
実質、約3ヶ月のスピード対応。
自分の鬼神の如き活躍により、予定していたページの作業を、リリース予定より少し遅れてリリースしました。
（本当はかなり遅れたのですが、私はポジティブなので遅れていないことにしています。）
2年前の先輩方の記事も合わせてご覧ください↓
texta.pixta.jp
texta.pixta.jp
このときは、SEOに影響のあるページのモバイル対応と、今後に作業をしやすくするための土台を作りました。
夢について
上記の先輩二人の過去記事にあるように、二人は神社で夜な夜な盃を交わしながら、PIXTAのモバイル対応とその後について、下記のような夢を語っていました。
先ずはレスポンシブ対応でMFIに備える
対応後、さらにUI/UXの向上を目指しABテストを行う。その結果PCデザインも変えていく
最終的にはビューを分ける！運用に耐えうる体制ないし仕組みを整え、デバイスに特化する。
PIXTAをより良くしたい！そのために段階を踏んでモバイル対応をして、より堅牢なサービスにしていくんだ！という熱い想いを感じる夢でした。
そして、もちろんそうですね。夢は、私のような若者に引き継がれるものなのです。
（私は今年で33歳になりますが、、）
上記の夢を実現するには、SEOに影響のあるページだけでなく、ユーザビリティも考慮し、まずは全てのページをモバイル対応する必要がありました。
引き継がれて
それからの2年間は別の通常のタスクも作業しつつ、合間にコツコツとモバイルの対応を進めていました。
ここからメインで作業をするのはデザイナーです。
自分と後輩デザイナー（男子）。後に、後輩デザイナー（女子）が加わります。
スマホ対応では、後輩デザイナーとの会話で暗黙知がありました。
ユーザビリティは深く考えない、まずは最低限の対応でスマホ対応を終わらせる。
（PIXTAはBtoBがメインのサービスであり、売上の大半をPCサイトでまかなっているため、ユーザビリティに関しては深追いしない。）可能な限り、コードを後のUIの改善を行いやすい状態にする。
（修正を加えた際に、想定外のページに影響の出ないような形にする必要がある。）
まず1は、作業を始めた当初、議論になることがありました。
ユーザビリティのためにモバイル対応をするのに、ユーザビリティを深く考えずにモバイル対応を行うという、とんでもない矛盾を抱えている内容なので、議論になるのも仕方ないものでした。
ですが、今後ABテストを行い、UI/UXの向上を検討した上でページを良くしていくという、段階を踏んで改善していくことを念頭に置くことで、モバイルページに関して、まずはPCページの内容をスマホに対応させるだけにしました。
2に関しては、PIXTAのcssではコンポーネントでの設計を進めています。
texta.pixta.jp
上記の記事の内容を実践することにより、今後の改善を行いやすいcssの作成を行うことができました。
苦労と反省
まずは、カートページなどのファイル構成が複雑になりがちなページの対応に、当然ながら苦労しました。
クーポン利用など、特殊な状況で決済を行った際に表示される内容を検討しきることが出来ず、作業の途中でクーポンの存在に気づき、予定より工数が膨らんでしまうことが多々ありました。
これは、修正する必要のあるファイルを確認し、コンポーネントの洗い出しと、決済のパターンの洗い出しを十分に行うべきだったと思っています。
また、既存のcssの設計が作業中のページ以外に影響を出すことが非常に多く、想定外のページに影響を出すことが多々あり、修正に慎重にならざるを得ず、作業の進みが非常に悪くなることもありました。
これも、上記のように洗い出しや調査を十分に行ってから作業を開始することで回避できたことでした。
そして、これは私ごとですが、一番はモチベーションを保つのに苦労しました。
予定より膨らんでしまいがちな工数と、PCデザインをただただモバイルにするだけの単純に近い作業、10年前から修正されずに残されたcssの修正に、さすがに疲れてしまっていました。
ですが、気がついたら放っておいてもテキパキと仕事をするようになった後輩と、モチベーションの下がり具合を気にしてもらえた上長のおかげで、なんとかここまで来ることが出来ました。
そして、1年くらい作業していると少しづつモバイルの対応を行った結果が出始めます。
YoYで評価した結果、モバイルの流入数が格段に増えていることを教えてもらいました。やって良かったと思うと同時に、他のページも早く対応しようと思えました。
今後と、サイトを保守するということ
今後は、上記で説明した「夢」の２番目のフェーズ
2.対応後、さらにUI/UXの向上を目指しABテストを行う。その結果PCデザインも変えていく
に、本格的に取り組んでいくことになると思います。
ようやく土台づくりを終えて、これから更にサイトを良くすることを考えられる段階に来たと言えます。
そして、10年以上続くサイトを保守するということは、綺麗ごとだけでは済まないことを今回よく学びました。
今回のモバイル対応で、cssだけで1万行を超えるであろうコードの追加と削除を行ったと思います。
Githubのプルリクエストでは、1ページの対応だけでDiffを1000行以上作ってしまい、苦笑いすることが幾度もありました。
ただ、この土台づくりを終えたことによって、先日あったクリスマスパックページの作成では、一部のデザインを驚くほどすんなりと作成することが出来、着実にビジネスサイドの要件に、柔軟に対応することができるサイトになっているのを感じました。
（つまり、これからのPIXTAがとっても楽しみということです！）
次回にこのブログを書くときは、サイトの改善について書ければなぁと思います。
さて、先輩方に習い、ここで一句
先輩は ハートで語り 夢つなぐ
（むむ！わりとそれっぽい俳句が出来たぞ！）
ピクスタでは、サービスを盛り上げていきたいデザイナー・エンジニアを募集しています。
recruit.pixta.co.jp
