こんにちは、竹内です。
今日は、Magentoのスマートフォン用のスキンのカスタマイズについて紹介します。
デフォルトテンプレートのデザインをカスタマイズ
Magentoには、スマートフォン用のテンプレートが用意されています。
今回はこのデフォルトテンプレートを使用し、スマートフォンに対応したサイトのデザイン調整をしました。
このテンプレートはすでにスマートフォン用に合うよう設計されているので、HTMLの修正は極力行なわずCSSと画像の修正から作業に着手しました。
商品一覧ページ（左：修正前 / 右：修正後）
上の画像は修正前の「商品一覧」ページです。
PC用サイトのサイトカラーやデザインに合わせ、CSSを修正します。
サイトの全体的な雰囲気やカラー、またアイコンやボタン、見出しなどの共通パーツをPCサイトのデザインに合わせたものへ変更しました。
使用頻度が低い機能、EE版のみにある機能、
エクステンションにより追加された機能のページなど
スマートフォンに適した状態になっていないページもある
ほとんどのページは、CSSと画像の修正だけでデザインを調整・変更することができたのですが、CSS・画像の修正のみではスマートフォンでの閲覧に適さないページがいくつかありました。
このようなページは、社内のエンジニアと相談し、HTMLも修正しながらレイアウトやデザインを調整しました。
「定期購入」ページ（左：修正前 / 右：修正後）
画像の左側の画面は、修正前の「定期購入」ページです。
<TABLE>タグの列が多いため、スマートフォンで閲覧すると幅が足りず表示が崩れてしまい、横スクロールが出てしまいます。
画像の右側の画面のように、列ごとに分かれていた情報を一つのセル内にまとめることで、表示が崩れないように調整しました。
「My Returns」ページ（左：修正前 / 右：修正後）
画像の左側の画面は修正前の「My Returns（Magento EE版にある、返品の状況などを確認できる機能）」のページです。
<TABLE>部分に罫線などがなく、読みにくさを感じます。また、コメント送信ボタンの形状が素のままで、小さく押しづらそうです。
そこで、画像の右側の画面のように、<TABLE>部分は余白や罫線などで整え、<TH>の文字も左揃えにしました。
ボタンのデザインも他のページに合わせたものに修正しました。上下の余白を大きくとる＆幅は画面一杯に広げたことで、ボタンだと認識しやすく、押しやすくなりました。
今回実施したスマートフォンサイトのデザインカスタマイズも、基本はPCサイトと同じように、共通で使用しているパーツ毎にデザインを統一することをまず念頭におき、サイト全体を確認しながらデザインの調整を進めました。
ただ、スマートフォンブラウザでは、ご紹介した表組部分など、レイアウトを統一したことで逆に分かりづらくなり、崩れてしまうことがあります。
そのような部分はデザインを統一することより分かりやすさを優先し、レイアウトを改めました。
Magentoサイトでのスマートフォン対応は、既存のテンプレートを使用することで、0からスマートフォン用サイトを構築するより断然容易に行うことができます。
閲覧するシーンや場所を選ばずにショッピングを楽しめるよう、PC用・スマートフォン用とECサイトを用意し、ユーザーにとってより身近で親切な店作りを目指して行きたいですね！