レスポンシブ対応のススメその2

PILE EC｜EC事業部

2021年12月21日 00:06

こんにちは、PILE ECチームの真壁です。

はじめに

前回のブログに書いた、レスポンシブ対応の実践編です
現在、ゴムクロワンは切替に向けた作業を行なっている真っ最中で、そちらの進捗状況のレポートとして捉えて頂ければと。

自社ECサイトを運営している担当者や、レスポンシブ対応に手が回らずお困りの方など、この記事が何かのヒントとなり、共感して頂ける方が1人でもいらっしゃいましたら、大変嬉しいです。そんな気持ちで今回もnoteに書きました。

着手にあたり

まず対応するべき項目を大きくまとめると下記の通り

TOPページ
フリーページ(約170ページ)
商品ページ(約1万点)

※TOPページの作成は、今回弊社コーダーにお願いしたので省略。

一見、作業量がムチャクチャ多いように見えますが、ゴムクロワンの商品は型番商品(リテール商品)なので、基本的なレイアウトを決めて絞れば、複雑にならなくていけるのでは？と謎の根拠の無い自信により着手を実行！(筋トレの効果？)

ただなんとなく行動するより、大きな指針を持ちながら実行した方が絶対良い訳です。着手するにあたり、非常に大きな支えになった本はこちらでした。

Design Systems ―デジタルプロダクトのためのデザインシステム実践ガイド

モジュール型のパターン導入に関する手引書ですね。
デザインのテクニック的なことではなく、原則、機能、認知パターンなど、運用・計画・組織といった視点での在り方について書いてますので、今回のプロジェクトを実行するにあたり、自分にはぴったりの内容でした。

ゴムクロワンの商品は上記で触れた通り、型番商品(リテール商品)なので、商品数は多いですが、レイアウトパターンを少なくして、統一感のあるECサイトにしたいと思ってました。ボタンカラーやアイコンなど、繰り返したり、再利用できる要素のことについての概念を知れたことは大変良かったです。

デザイナーのためのプロトタイピング入門

前例のない作業、初めての作業って、正直どこから手付けて良いかわかりませんよね。考える時間も大事ですが、実行しないと何も進まない訳で。結局のとこ、プロジェクトを動かしていくのは自分なので、人に作業をお願いするにあたっても仮説→シュミレーション→内容の把握した上で、お願いするのがエチケットですし、大事なのかなと。

プロトタイプは相手にアイデアを伝えるための手段でもあり、自分自身の理解が深まる最善の方法だと思ってます。とにかく沢山の方法を考えて、沢山のテストページを作って、その中から良いものを採用していく。完成がゴールではなく、そこから発展させて、更によりよい完成度を高いものを目指す。

よくよく考えたら、macのOSやら、携帯のアプリやら、最新バージョンを出した後に不具合の修正→アップデートの繰り返しが常ですよね！
とりあえずは70%~80%の完成具合でアウトプットして、まずは動けばよし！こんな感覚でしょうか？とにかく始めちゃえ！ってことですね。

自分はこれまで「なんとなく」「感覚」で作業を済ませてしまってたことが多々ありましたが、この本をきかっけにして、アイデアをとことん突き詰めていく力が昔よりついたかな？？なんて思います。

【実践編】

フリーページ(約170ページ)

フリーページの分類は下記のとおり。注意/概要ページ+商品カテゴリ毎のレイアウトパターンが必要です。

注意/概要など
ゴムクローラ
タイヤチェーン
タイヤ
建機部品
その他

フリーページの役割は、商品一覧表として機能させています。
例：https://gomukuro-one.com/?mode=f4
ゴムクロワンで販売している商品は型番商品がメインなので、一覧表がないと、ユーザーも探しにくいのが当然なので、こちらの作業は必須です。

大切なのはユーザーファースト

一覧表は1ページにつき、100~200行の商品が並んでます。また、一商品ずつ
サイズや型番、備考などが異なり、一見細い作業ではありますが、tableのタグ部分は共通なので、コピペだけで済むのではないかと？？

と思う反面、今回のレスポンシブ対応の大義、「携帯で快適に閲覧できること」を第一に考えると、もっとシンプルできないかと思い、tableの記述をより少なくするため、1セル内にサイズ表記をまとめちゃいました！

補足：ゴムクローラは商品仕様上、絶対に3箇所のサイズ確認が必要なのです。なので、幅xピッチxコマ数の3数値の記載はマスト。(180x72x32など)

実際、こちらの方が一目でサイズ表記がわかるから、ユーザーファーストなのではと思います。また、今後更新担当する人のためにも、より簡潔なページを意識して作るってことも、大事なのではと思います。

現サイト(左)　対応完了後(右)　携帯で閲覧のことを考えると、一目でサイズがわかりやすい

<tr>
	<th>IS9UX-2</th>
	<td>230</td>
	<td>72</td>
	<td>41</td>
	<td>230</td>
	<td>72</td>
	<td>41</td>
	<td><a href="https://gomukuro-one.com/?pid=100542997">1本</a></td>
	<td><a href="https://gomukuro-one.com/?pid=100543027">2本セット</a></td>
	<td>純正幅200x72x47</td>
</tr>
以下続く・・・・・・

下記のようにtableの記述を簡潔に↓↓

<tr>
	<th>IS9UX-2</th>
	<td>230x72x47</td>
	<td>230x72x47</td>
	<td><a href="./?pid=100542997">1本</a></td>
	<td><a href="./?pid=100543027">2本セット</a></td>
	<td>純正幅200x72x47</td>
</tr>
以下続く・・・・・・

絶対パスと相対パス

一覧表完成後、ふと思ったのが、リンクURLの記述は相対パスで良かったか？とのこと。(対応完了後は、URLのリンク記述が省略されてます。)
リンク先が内部サイト=相対パスとの認識でいたので、これまで気にも止めませんでしたが、当たり前と思っていること、改めて検証することは大事です。

調べたところ、概ね自分の認識で問題なし！当たり前ですが、リンク切さえ起こさなければ大丈夫！ってことですね。
カラーミーで運営を行う以上、フリーページの階層の変更しようがないから・・・大丈夫かな？？
色々調べたところ、Googleでは「可能であれば絶対パスを推奨する」とのことですが、SEOの観点での差は無い様です。

更新する以上できるだけ簡潔な記述が良い訳なので、更新担当者のことを考えると、現状のままで良いとの判断をしました。こちらの方がスマートなので。一安心。

テーブルのスクロール

とりあえずPC用はなんとかレイアウトを決めてひと段落・・・さて、ここで気付いたのがどうやって一覧表の情報をスマホで閲覧しやすくするか？
当初は横軸の情報(形式・サイズ・コードなど)スマホで見た時、全て幅100%で収まるようメディアクエリで調整してみましたが・・・・結局見にくいので却下。

ゴムクロワンの商品は、サイズの数値が一つ違うだけで、装着できない・走行できないといった部品が基本です。
携帯で見た時、「間違いなくサイズを見落とさない一覧表」が必須条件でしたので、横にはみ出た範囲はスクロールでの対応を可能とする
overflow: scroll; にて対応。
また、表の一番左、型式(機種名)の部分は固定にしたかったので
position: sticky; にて対応。
(固定にしないと、見出しもスクロールしてしまい、ユーザーが自分で何の機種名の行を見ているかわからなくなるので)

チェック

自社サイトのみならず、クライアント様の案件対応時も、出来る限り様々な実機での閲覧テストは欠かせません。
ゴムクロワンここ半年間の利用ブラウザ/モバイル機種情報は下記のとおり。

Google Chromeデベロッパーツールを使用したエミュレートでの検証も必要ですが、やっぱり可能な限り実機でチェックするのが一番。

主要のスマホ(最新・旧)実機で動作チェックしたとき、問題なく崩れず・スクロール出来るので概ね問題無しかと！(昔のiPhone 6sも捨てなくて良かった、こんなタイミングで役に立ちます。)

この記事の冒頭の本の紹介でも触れましたが、「まずは概ね問題なし」これを素早く目指す精神が大事といったところでしょうか。すべては修行でございます。

自分が思った通りのCSS実装できると、嬉しいもんです。

では今回はこんなところで。
次回は商品ページ対応編を書いてみようかなと思います。

レスポンシブ対応のススメ その2