navigation>年末年始休業につきまして【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。TOPモバイルファーストマーケティングラボモバイルファーストマーケティングラボスマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(3)~2011.04.152019.06.21WEBデザインHOMEWEBデザインスマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(3)~さて、それでは前回の記事に引き続き、aishipでスマートフォン向けサイトの構築を行う手順をご案内致します。大まかな流れは前回と同様、あらかじめ準備されているスマートフォン用CSSを用いてHTMLにデザインを適応していく、というイメージです。CSSサンプル内から必要なクラス名を取り出し、HTML内に入力してレイアウトを整えていきましょう。今回は少しステップアップしてサンプルCSSを元に少し独自でCSSを操作・追加する流れもご案内します。前回は「スマートフォンでよく見かけるレイアウト」としてメニュー部のご案内をしました。今回は同じくよく見かけるレイアウトとして「リンクをボタン化する」手順をご案内したいと思います。リンクをボタンにするということは、一見すると大したことではないように思えるかもしれません。実際にスマートフォンを操作していただくと、通常のテキストリンクのクリックのしづらさを実感いただけると思います。リンクをボタン化することは、レイアウトとしてリンク部を強調するだけではなく、タッチパネルでの操作性を向上するという点においても重視すべきポイントです。リンクのボタン化は汎用性があり、ボタンレイアウトの調整をすることで様々なシーンで活用いただけます。今回はシンプルかつ解りやすいボタン化についてご案内します。最終的なレイアウトの比較は下図の通りです。ステップ1:まず囲んでみるそれではHTMLを作成しましょう。携帯サイト作成画面上でまずテキストリンクを作成します。リンク作成後、このリンクにスマートフォン用サンプルCSSから、ボタンに使用するための記述をいくつか選択して適応します。テキストリンクを枠線で囲んでみましょう。リンク部分が灰色の枠線で囲まれました。ステップ2:余白を設ける少し窮屈に感じられるので、枠内に余白を設けます。リンクを囲むdivタグ内に、余白を設けるクラス名を追加しました。これでボタンの大枠は完成です。ステップ3:グラデーションを付けるさて、ここからオリジナルCSSを作成し、追加していきます。最終的なレイアウトではボタンにうっすらと影がついています。これはCSSでグラデーションを適応しているのですが、aishipで用意されているサンプルCSSを用いた場合、最終的なレイアウト図とは異なるレイアウトになってしまいます。最終的なレイアウト図に近づけるため、サンプルCSSを活用して新たに「ボタン用のグラデーション」を追加していきましょう。サンプルCSS内に記述されているグラデーションは下記の通りです。これは実は同じグラデーションの指定が、形をかえて2回記述されています。「グラデーションの終了時の色は#ffffff(白)」と記述しています。「グラデーションの終了時の色は#efefef(白に近い灰色)」となります。サンプルCSSからグラデーションに関する記述をコピーし、1.開始時の色2.終了時の色3.クラス名を書き換えて、管理画面内のユーザーCSS欄にペーストし、保存しましょう。クラス名を変更しないとグラデーションがうまく適応されない場合があります。保存が完了したら、さきほどのソースイメージに新しいクラス名を追加しましょう。これでボタンは完成です。まとめ:このように、スマートフォン向けショッピングカートASP『aiship』ではサンプルCSSを元に新しいCSSを増やすことも可能です。今回はボタンの背景にグラデーションを適応することで、ボタンらしい(クリックできそうな)質感をイメージしましたが、例えば背景色や背景画像を指定したり、ボタンの横幅を指定することで更にバリエーションに富んだ表現ができます。サンプルをもとに様々なCSSを追加して、色々なレイアウトを試してみて下さい。タッチパネルで操作をするということを忘れないでくださいね。”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。・レスポンシブECサイトがなぜ今選ばれるのか・これまでのECサイトの課題とは何なのか・どのようにすれば解決できるのかといったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。無料パンフレットを請求するABOUTモバイルファーストマーケティングラボとは、スマートフォン/タブレット/PCに対応したレスポンシブECサイトの構築や成功事例の最新情報を発信するブログです。投稿一覧15歳の時に初めて携帯電話を手にして約15年。モバイルの面白さ、奥深さに魅了されて入社。中心に業種問わず様々なクライアントをサポートしております。合わせて情報サイト、「モバイルファーストマーケティングラボ」の編集長として、毎日モバイルマーケティングの情報を発信中。ECによってより便利で過ごしやすい世の中を作るお手伝いができればと思います。「インターネットでより豊かな人生を」がモットー。2019.04.24吉永です。今回第一回目の記事になります。CSSでwebページを作成するにあたり、ボックス関連の分野は難しいと感じる方が多いと思います。2016.06.02ECサイトの流入の7割がスマホからの流入となった今、スマホでのUI/UXは非常に重要です。2013.07.04ランディングページなどの縦に長いページでは、スマートフォンの小さな画面で表示するとページ上部のメニューまで戻りにくくなってしまいがちです。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。自社ECサイト運営でASPをオススメする理由モバイルファーストラボ。