カラーミーキットの中を見て、レスポンシブ対応について学ぶ
2012年頃からちらほら見かけるようになりました、レスポンシブ・ウェブ・デザイン（Responsive Web Design, RWD）。
昨年の「カラーミーショップ大賞2015」にノミネートされたショップを拝見していても、ずいぶんと使われています（とはいっても、全体からすると半分にも満たない、まだ少数派ですが）。
カラーミーショップは今年で11周年だそうで、その時代の環境に合わせて、機能拡張されています。
スマートフォンショップ用のデザイン・商品説明欄も、後に追加された機能ですし、レスポンシブ対応についても、後からなされました。
今回は、カラーミーショップにおけるレスポンシブ入門編として、導入部分についてご説明いたします。
1. カラーミーショップの設定箇所について
カラーミーショップにおける、レスポンシブ対応の設定は、唯一ここだけ。
管理画面の、ショップ作成＞スマートフォンショップ＞表示モード設定のドロップダウンメニュー「スマートフォン表示モード設定 PC版表示」です。
とはいっても、このページの設定、後から追加されているので、案外気づきにくいです。ということで、いまはデザインのページにもリンクが張ってあります（下図の下部参照）。
スマートフォンでレスポンシプテンプレートを利用する時の注釈が付いています。
スマートフォンでレスポンシプテンプレートを利用の場合は「PC版表示」に設定してくださいということで、レスポンシブ対応のテンプレートを使用する場合などは、グレーの網掛け部分の、「スマートフォンでの表示状態」を「【PCテンプレート】 が設定されています」としておく必要があります。
2. カラーミーショップのテンプレート
カラーミーショップ公式にテンプレート一覧がありますので、レスポンシブ対応テンプレートを見てみましょう 。レスポンシブ | ショップ デザイン テンプレート
4つが無料（WASHI、nano、Bit、カラーミーキット）。いずれもミニマルデザイン調で、利用ショップを選びそうな印象。
一方、有料テンプレートは6つあり、どのようなタイプの商品でも合いそうなテンプレートが見つかる感じで、デザインの選択肢が多い。そしてお値段するだけあって（といっても、人に頼むともっとする）、見た目の完成度も高いです。
綺麗に撮った商品写真があれば、即オープン可能じゃないですかね。
それ以外にも、Bootstrap風のCSSフレームワーク「カラーミーキット」というのも用意されています。完全自作派の方の作業効率アップ。
CSSフレームワーク - カラーミーショップ ネットショップ運営サービス
3. レスポンシブの一般的な説明
カラーミーショップ公式の読み物コーナーに、簡単な説明が載っていました。
Webデザイナーが詳しく解説！流行りの「レスポンシブ対応」のメリットって？ | ECお役立ち情報 – ネットショップ運営サービス【カラーミーショップ】
レスポンシブ対応のざっくりとした概要。
・ブラウザの横幅に対応して、段組が変化する
・ブラウザの横幅に対応して、画像の大きさが変化する
・ブラウザの横幅が狭いときは、メニューが変化し、内容の一部が非表示になる
・PC～スマートフォンまで、ひとつのWebサイトで表示できる
その多くがCSSで実装されていて、一部JavaScriptも使っています。
ブラウザの横幅の取得にはメディアクエリ（CSS3）を使用しますので、対応ブラウザはIE9以降となります（IE8の対応はもういいかなと個人的には思います）。
レスポンシブ・ウェブ・デザインは、デザインを厳密にコントロールできないので、趣味じゃない人もいらっしゃると思いますが、昨今そんなことも言ってられません（私もその一人なのですが）。
2016年になり、最早「流行り」と呼ぶ時期ではなくなっていますので、リニューアルを考えていらっしゃる方は、メリット・デメリット を含めて検討されてはいかがでしょうか。
4. おわりに
入門的な内容に終始しましたので、機会があれば、実践的な内容で続きをやりたいと思います。
前回記事の再掲。
日頃のご愛顧に感謝して、カスタマイズのサービスをココナラに出品しました。
料金は無料（限定）となっておりますので、手伝いやらご質問があればこの機会にどうぞ。
ココナラの登録は、Yahoo ID、facebookアカウント、メールアドレスが利用できます。
