前回に続き、レスポンシブECサイトの事例（ファッション雑貨通販：リネアストリア社）を参考に、バラバラに運営されているPCやスマホサイトを１つのレスポンシブECサイトに統合移行する際のポイントを紹介します。
ウィッグ・エクステ専門店・ウィッグ通販Linea-Storia(リネアストリア)
（アクセサリー、食品などのその他レスポンシブECサイト事例については「レスポンシブECサイトの導入事例」を参照ください）
レスポンシブECサイトへスムーズに移行する
前回はレスポンシブECサイトへの移行前に必要な点として、特にサイトマップでサイト内のコンテンツ（ページ）を共通化するポイントや、ワイヤーフレームでページ内コンテンツを共通化するポイントを解説しました。
参考：レスポンシブECサイト事例～ファッション雑貨通販事例から見るレスポンシブ化2つのポイント〜
今運営中のECサイトをレスポンシブ化する～ワイヤーフレーム作成2つのポイント～
今回はレスポンシブECサイトへの移行の実作業の中でも時間を最も要するレイアウトテンプレートの構築設定作業について、スムーズに作業を進めるためのポイントをご紹介します。
完全オリジナルなレスポンシブECサイト
上記のレスポンシブECサイトの事例サイトのように、簡易的なテンプレートデザインをベースとするのではなく、完全オリジナルなレスポンシブWEBデザインのレイアウトテンプレートの構築設定を行うことを前提に解説します。
複数テンプレート設定機能を有効活用
移行予定のレスポンシブECサイトのワイヤーフレームを基にしたデザインが出来上がれば、そのデザイン通りに、自社ECサイトで利用するレスポンシブWEBデザインのレイアウトテンプレートをaishipRに構築設定（コーディング）します（下図参照）。
aishipRにはシステム初期設定時に汎用的なデザインテンプレートが用意されていますが、もちろん自由なデザインのレイアウトテンプレートを独自に構築設定いただくことが可能です。またそれらのレイアウトテンプレートは複数設定が可能なため、利用用途に合わせたレイアウトのテンプレートを複数設定することで、LPの構築や他のレイアウトデザインと異なるページの構築管理も非常に便利です。
実際に事例のレスポンシブECサイトでも複数の微妙な違いのレイアウトをページ毎で適用をしユーザビリティを高めています。
ただ多くのサイトの場合、TOPページのレイアウトテンプレートがサイト内の大半のページと同じになるため、レイアウトテンプレート構築はTOPページ構築と同時作業として実施することになります。完全にオリジナルなレイアウトデザインのレスポンシブECサイトを構築する場合、このTOPページ構築＋レイアウトテンプレート設定の作業が最も時間を要す工程となり、この工程が終われば、レスポンシブECサイト構築も大半完成といっても過言ではありません。
テンプレート設定は1エリアずつ確実に
特にレスポンシブWEBデザインが初めての方の場合、そのレイアウトテンプレート構築設定作業は、ワイヤーフレームに従いコンテンツ(HTMLや画像など)を順番に、aishipRのテンプレートへと1エリアずつ確実に構築していくことをお勧めします。一気に全てのコンテンツを乗せるのではなくヘッダーであればヘッダーを、まずは全力で作成→次にフッター→アサイドと確実に1エリアずつ実施します。
一気に全コンテンツを移植してレスポンシブ化すると調整が一気に行えて楽なように感じられますが、レスポンシブではなかったサイトをレスポンシブ化するのは案外手間と時間がかかります。どこの何が影響してうまくいかないのか、またうまくいったのか、それをはっきりさせながら進めるためにも、1エリアずつ移行することが結果的に早くレスポンシブ化させることにもなります。
TOPページが完了すれば、その他の下層ページ（特商法、特集ページ）もそのレイアウトを適用してサクサク移行できます。ただ、いきなりTOPページの構築は不安・・・という場合にはプライバシーポリシーや特定商取引法などの（多くは）テキストのみで構成されるページからテンプレート構築設定作業を進めてみるのも、レスポンシブ化作業に慣れるという点では有効かもしれません。
レイアウトテンプレートをデザインする際のポイント
レスポンシブ化ではコンテンツを共有化します。当然ですが出来る限りコンテンツの容量は軽い方がよいのです。ですから「画像を使わずにすむところは画像を使わずにCSSで実現する」ことをお勧めします。（以下レスポンシブECサイト事例の図を参照）
一般的に、画像よりテキストのほうが容量は軽くなります。事例のレスポンシブECサイトでもレスポンシブWEBデザインへの移行の際に角丸や影、グラデーションを目的として画像を使われていたコンテンツは、CSSに変更いたしました。
また、ブラウザ毎の細部に至るデザインのこだわりは出来る限りの対応を行い、コンテンツが崩れているのでなければ妥協することも必要となります。なぜならこの点にこだわると膨大な時間が必要になる場合があるからです。
また文字の可読性においても文字サイズの検討はもちろん、画像に文字が記載されているものは画像の拡大や縮小により読みづらくなることが考えられます。画像上の文字は画像に記載するのではなく、画像から取り出してHTML（テキスト）として表すことが重要となります。
実機でのレイアウトテンプレート構築設定の検証と調整
レイアウトテンプレートの構築設定を終えたら必ずスマートフォン、タブレット端末の実機で確認するようにします。
実際に実機で見ると『画像の文字が読めない』や『ボタンの間隔狭くミスタッチする』などPCでは分からないことが出てきます。
またスマートフォンでは3G回線での検証も必須です。aishipRではスマートフォンでの閲覧に対してシステム側のRESS技術にてストレスを低減する処理を行っていますが、JSを多用したページなど、作り方によってもダウンロードに時間がかかりユーザストレスが発生するため必ず3G回線での検証を行います。
レイアウトテンプレートの設定構築前に必ず決定すべき点
- レトロブラウザへの対応範囲
- ブレイクポイント
の2点はレイアウトテンプレートの設定構築前に必ず決定する必要があります。
モバイルからのアクセス数が増加傾向であるとは言えPCからアクセスしてくるユーザもまだまだ多く、特にInternetExplorerは全バージョンを総合すれば依然6割近いシェアを占めています。
どのブラウザを対象とするのか、その内容によりレイアウトの調整方法も変わってきます。また事前に定めておくと『どこまでやるのか』が明確になります。これが明確ではなく、『レトロブラウザも全て・・・』となると、最終調整作業に膨大な時間を要することになります。
同様に、どの端末でどの表示をさえるのか？というブレイクポイントでも同様のことが言えます。
事例のレスポンシブECサイト様では途中でブレイクポイントが二転三転し、制作途中でそれまでの記述を調整しなければならない自体も発生しました。
余計なコスト発生を抑えるためにもこれらレトロブラウザ対応範囲とブレイクポイントについては暫定ではなく決定でレイアウトテンプレートを構築設定することをお勧めします。
これらの点を前提に抑えた上でデザインテンプレートの構築設定作業を進めていただくことで非確定スムーズな設定が可能となります。もし気になる点があればお気軽にサポートまでお電話もしくはメールでご連絡いただけましたら幸いです。
