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

>年末年始休業につきまして

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

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

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

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

さて、それでは前回の記事に引き続き、aishipでスマートフォン向けサイトの構築を行う手順をご案内致します。
大まかな流れは前回と同様、あらかじめ準備されているスマートフォン用CSSを用いてHTMLにデザインを適応していく、というイメージです。CSSサンプル内から必要なクラス名を取り出し、HTML内に入力してレイアウトを整えていきましょう。
また、今回は少しステップアップしてサンプルCSSを元に少し独自でCSSを操作・追加する流れもご案内します。

前回は「スマートフォンでよく見かけるレイアウト」としてメニュー部のご案内をしました。今回は同じくよく見かけるレイアウトとして「リンクをボタン化する」手順をご案内したいと思います。

リンクをボタンにするということは、一見すると大したことではないように思えるかもしれません。ですが実際にスマートフォンを操作していただくと、通常のテキストリンクのクリックのしづらさを実感いただけると思います。
リンクをボタン化することは、レイアウトとしてリンク部を強調するだけではなく、タッチパネルでの操作性を向上するという点においても重視すべきポイントです。またリンクのボタン化は汎用性があり、ボタンレイアウトの調整をすることで様々なシーンで活用いただけます。

今回はシンプルかつ解りやすいボタン化についてご案内します。
最終的なレイアウトの比較は下図の通りです。

ステップ1:まず囲んでみる
それではHTMLを作成しましょう。
携帯サイト作成画面上でまずテキストリンクを作成します。

リンク作成後、このリンクにスマートフォン用サンプルCSSから、ボタンに使用するための記述をいくつか選択して適応します。
まずはテキストリンクを枠線で囲んでみましょう。

リンク部分が灰色の枠線で囲まれました。

ステップ2:余白を設ける
少し窮屈に感じられるので、枠内に余白を設けます。

リンクを囲むdivタグ内に、余白を設けるクラス名を追加しました。
これでボタンの大枠は完成です。

ステップ3:グラデーションを付ける
さて、ここからオリジナルCSSを作成し、追加していきます。
最終的なレイアウトではボタンにうっすらと影がついています。これはCSSでグラデーションを適応しているのですが、aishipで用意されているサンプルCSSを用いた場合、最終的なレイアウト図とは異なるレイアウトになってしまいます。

最終的なレイアウト図に近づけるため、サンプルCSSを活用して新たに「ボタン用のグラデーション」を追加していきましょう。
サンプルCSS内に記述されているグラデーションは下記の通りです。

これは実は同じグラデーションの指定が、形をかえて2回記述されています。サイトへアクセスされる端末やブラウザにあわせて2回記述が必要となるのですが、両方とも
「上から下へ向けてグラデーションをする」
「グラデーションの開始時の色は#888888(濃い目の灰色)」
「グラデーションの終了時の色は#ffffff(白)」
と記述しています。

最終的なボタンイメージ図のグラデーションを上記に沿ってまとめると
「上から下へ向けてグラデーションをする」
「グラデーションの開始時の色は#ffffff(白)」
「グラデーションの終了時の色は#efefef(白に近い灰色)」
となります。


サンプルCSSからグラデーションに関する記述をコピーし、
1.開始時の色
2.終了時の色
3.クラス名
を書き換えて、管理画面内のユーザーCSS欄にペーストし、保存しましょう。クラス名を変更しないとグラデーションがうまく適応されない場合があります。必ず変更して下さい。

保存が完了したら、さきほどのソースイメージに新しいクラス名を追加しましょう。

これでボタンは完成です。

まとめ:
このように、スマートフォン向けショッピングカートASP『aiship』ではサンプルCSSを元に新しいCSSを増やすことも可能です。今回はボタンの背景にグラデーションを適応することで、ボタンらしい(クリックできそうな)質感をイメージしましたが、例えば背景色や背景画像を指定したり、ボタンの横幅を指定することで更にバリエーションに富んだ表現ができます。
サンプルをもとに様々なCSSを追加して、色々なレイアウトを試してみて下さい。ただし、あくまでもタッチパネルで操作をするということを忘れないでくださいね。

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

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

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

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+