navigation>年末年始休業につきまして【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。TOPモバイルファーストマーケティングラボモバイルファーストマーケティングラボスマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(5)~2011.06.172019.06.21WEBデザインHOMEWEBデザインスマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(5)~前回の記事(スマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(4)~)では「スマートフォンらしい動き」として折りたたみコンテンツのお話をしました。今回もスマートフォンサイトらしい動きとして「スライドコンテンツ」のお話をさせていただきます。スライドコンテンツは、例えば画像を表示するエリアの左右に矢印が表示され、それをタッチすることで前の画像や次の画像をその場で表示させることができます。画面を遷移する必要がないので、見ている人にいちいちページを移動させたり画像をダウンロードさせたりするストレスがありません。aishipでは、あらかじめ定められたHTMLにそって内容を作成していただくことで、スライドコンテンツを簡単に設定することができます。定められたHTMLの構成とは下記の通りです。class=”sp-slide-frame”」の中が固定になります。class=”sp-slide-content”」で囲まれたコンテンツをいくつか並べます。class=”sp-slide-content”」で囲まれた内容が、実際のページ上でスライドされて表示されます。class=”sp-slide-frame”」の下部に併記しても問題ありません。class=”sp-slide”」で囲む、というのもポイントです。ポイントをまとめるとこの通りです。class=”sp-slide-frame”」には横幅と高さの指定が必須となります。指定はCSSで行います。管理画面内の下記メニューでユーザCSSに追加をして下さい。スライド表示させたいコンテンツはここで指定された高さを超えないようにしておきましょう。class=”sp-slide-frame”」の高さを100pxとした場合、表示させたい画像が120pxだったりすると、20px分が欠けないように自動的に圧縮され、画像が荒くなってしまうことがあります。事前に気をつけておきましょう。aishipの携帯サイト作成画面で上記のHTMLソースをaiship内にコピー&ペーストしていただくと、スライドして表示されることをご確認いただけます。左図のように表示できたでしょうか。このままでも動作としては問題ないですが、これはちょっと味気ないですね。今までの記事でご案内したCSSを利用して、少し遊び心を持たせたレイアウトにしてみましょう。今回はaishipのサンプルサイト「コスメガール」にスライドコンテンツを追加してみました。こんな感じで遊ばせてみました。スマートフォンらしい動作の代表でもある「スライドコンテンツ」は、イチから作成するのは少し難しいですが、aishipならすぐに利用することができます。様々なポイントを集約して、スマートフォンらしいサイトの構築を頑張っていきましょう!”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。・レスポンシブECサイトがなぜ今選ばれるのか・これまでのECサイトの課題とは何なのか・どのようにすれば解決できるのかといったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。無料パンフレットを請求するABOUTモバイルファーストマーケティングラボとは、スマートフォン/タブレット/PCに対応したレスポンシブECサイトの構築や成功事例の最新情報を発信するブログです。投稿一覧15歳の時に初めて携帯電話を手にして約15年。モバイルの面白さ、奥深さに魅了されて入社。中心に業種問わず様々なクライアントをサポートしております。合わせて情報サイト、「モバイルファーストマーケティングラボ」の編集長として、毎日モバイルマーケティングの情報を発信中。ECによってより便利で過ごしやすい世の中を作るお手伝いができればと思います。「インターネットでより豊かな人生を」がモットー。2011.07.05ショップオーナー様やECサイト制作のご担当者様は、自らのショップのデザインやサイト構築に日々苦闘してらっしゃると思います。PC用のサイトへ誘導することも、携帯用のサイトへ誘導することもスマートフォンに対しては適切とは言えません。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。自社ECサイト運営でASPをオススメする理由モバイルファーストラボ。