(金曜日)開発PC用商品ページをスマートフォンでも見やすく制作する方法スマートフォンが急速に普及し、ネットショップではスマートフォンからの売り上げがパソコンからの売り上げを上回るようになってきました。楽天のRMSやYahoo!ショッピングで商品を登録する際に、スマートフォンでも閲覧しやすいように配慮した商品ページを制作する必要が出てきます。そこで、パソコン用に制作した商品ページのHTMLをスマートフォン用でも見やすくする方法を書きたいと思います。例としてパソコン用のHTMLはこのようになっています。solid;">現在、パソコン用商品ページを表示しています。width="580px"></a>このHTMLを、スマートフォン用に変更してみたいと思います。1.商品画像の幅”580px”の部分をピクセル(px)からパーセント(%)に変更します。width="580px">このHTMLのように”580px”のままですと、スマートフォンで縦向きにして見た場合、画像の右側が表示されなくなってしまい、見づらい商品ページになってしまいます。そこで、商品画像の幅を100%表示(横幅いっぱいに表示する)に変更します。width="100%">このように記述すると、画像が自動的にスマートフォンの横幅いっぱいに表示されるようになるため、画像の全部分が表示されるようになります。2.色や大きさの指定や表をなくしてシンプルにします。色や大きさを指定したほうがデザイン性に優れた商品ページを制作出来ますが、ヤフーのスマートフォン用ページで色や大きさを指定してしまうとエラーがでてしまいます。色や大きさの指定をなくしてシンプルに制作したほうが作業効率の向上につながります。3、商品おすすめポイントや製品仕様のバナーをなくします。商品おすすめポイントや製品仕様のバナーを使用したほうがデザイン面では優れますが、楽天のスマートフォン用ページでは画像を8枚以上使用するとエラーが出てしまいます。すると、このようなHTMLになり、スマートフォンでも見やすく表示されるようになります。/>現在、スマートフォン用商品ページを表示しています。width="100%"></a>これで、商品についての情報量はそのままに、スマートフォンで見やすくシンプルなHTMLが完成します!変更前(パソコン用商品ページ)※イメージです縦画面のスマートフォンでパソコン用ページを見た場合、このように右側が切れてしまいます。変更後(スマートフォン用商品ページ)※イメージですスマートフォン用に変更すると、このように表示されます。宜しければ、参考程度にご利用ください。(金曜日)花粉症対策メガネ!ツライ季節を乗り切る為の必需品。