ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(2)~

スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(2)~

スマートフォン向けサイトを制作するためには、【スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(1)~】記事でも紹介したCSS(カスケーディング・スタイル・シート)をうまく活用することがポイントになります。
イチから新規にサイトを制作する場合、このCSSも同様にイチから全て記述していく必要がありますが、スマートフォンショッピングカートのaishipではあらかじめCSSサンプルをご用意しています。このCSSサンプルには「スマートフォンでよく見かけるレイアウト」を簡単に表現するための記述がたくさん盛り込まれています。このサンプルをうまく利用して、スマートフォン向けサイトを構築していきましょう。
※スマートフォン向けCSSは、一部のPCブラウザでは完全に対応していません。製作中にレイアウトの確認をする際は、PCからではなくスマートフォンから確認を行うようにして下さい。

それでは今回は、先述の記事でも紹介していた「メニュー部」の作成を行ってみましょう。手順として、まずは骨組みとなるHTMLの作成、その後CSSで肉付けを行います。最終的には下図の右側のような仕上がりになります。

まずはHTMLを作成しましょう。
テキストリンクをいくつか作成します。HTMLを直接記述してもいいですが、aishipの携帯サイト作成画面からテキストを入力し、リンクを設定するとより容易です。

この段階ではまだシンプルな、ガラケー向けのレイアウトです。ここにCSSの記述を追加します。
aishipの管理画面内には「スマートフォン向けCSS」というメニューがあり、このメニュー内に「スマートフォンでよく見かけるレイアウト」を簡単に表現するためのCSSが準備されています。今回はメニュー部をリストのように表示させたいので、このCSSの中から「リストメニュー」という部分を参照します。

既にこれだけでメニュー部自体は形が出来上がっています。
このままでもスマートフォンらしくなりましたが、更にもう一工夫、CSS内の「角丸」という部分を参照し、このメニュー部を角丸にして柔らかい雰囲気にしてみましょう。

綺麗な角丸になりました。
更に影がつくよう追加記述をすると、下記のようなレイアウトになります。

このように、サンプルCSSを使用してHTMLに少し手を加えることで容易にスマートフォンらしいレイアウトでサイトを作成することができます。CSSに多少慣れてきたら、各項目の背景色や背景画像、線の色、影の濃淡なども細かく調整することができ、よりオリジナリティ溢れるサイトレイアウトも実現可能です。

いかがでしたか? 更に次回、スマートフォンCSS活用基礎(3)でも「スマートフォンでよく見かけるレイアウト」の構築を実践していきましょう。

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。