スマートフォン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を追加して、色々なレイアウトを試してみて下さい。ただし、あくまでもタッチパネルで操作をするということを忘れないでくださいね。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 掲載元のブログではわかりやすい画像つきで公開しています。 ■aishipスマートフォン＆モバイルEC事例・ノウハウ集http://www.aiship.jp/knowhow/archives/575＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝