navigation>年末年始休業につきまして【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。最近、パララックス効果(視差効果)を取り入れたサイトを目にするケースが増えてきています。ECサイトの場合、商品ページにパララックス効果を取り入れる必要性はそれほど高く無いかもしれません。LP(ランディングページ)の見せ方として、パララックスさせることで工夫次第で、人を惹きつけるページを作成することができます。パララックス効果を持たせるには、javascriptによる実装がよく使われています。今回ご紹介する方法は、javascriptは一切使わずにCSSだけで、しかもレスポンシブサイトにおいても簡単にパララックス効果を実装できてしまう、そんな方法をご紹介します。パララックス効果とはパララックス効果とは、日本語で訳すと「視差」効果と訳すことができます。同一点を異なった2点から眺めたときに見える方向の違い,すなわち,二つの方向の間の角度を視差という。参考:コトバンクWEBデザインでのパララックス効果は、「要素ごとに動くスピードを変え方向にも変化をつける」といったイメージになるかと思います。スクロールの際におしゃれな印象を与えることができるので重宝されています。CSSだけでパララックス効果を実装する〜作り方〜まずは、ベースとなるスタイルシートを作ります。縦スクロールバーを表示します。横スクロールバーを消します。高さの最小値を決めることで高さを確保させます。デバイスサイズに応じて数値を変更させると、背景画像もレスポンシブに変化します。*/}パララックスさせる画像に対して、背景画像として固定表示させます。背景画像を固定させます。背景画像を固定させます。背景画像を固定させます。背景画像を固定させます。*/}デモサイトではHTMLを下記のように記述しています。</section>なお、弊社の提供するレスポンシブECサイト構築ASP「aishipR」に実装する場合は、フルスクリーンで表示させる上で、下記のような余白調整もあわせて必要になります。実装例)デモサイトいかがでしたでしょうか?レスポンシブ対応ECカートシステム・aishipRではページごとにレイアウトの設定を変更することができますので、ランディングページや1枚ペラのページを作成することが可能です。ご参考にして頂きコンバージョンに繋がるような見せ方を工夫してみましょう。モバイルファースト・マーケティングラボ.”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。・レスポンシブECサイトがなぜ今選ばれるのか・これまでのECサイトの課題とは何なのか・どのようにすれば解決できるのかといったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。無料パンフレットを請求するABOUTモバイルファーストマーケティングラボとは、スマートフォン/タブレット/PCに対応したレスポンシブECサイトの構築や成功事例の最新情報を発信するブログです。担当業務はaishipご利用者様のサポート・支援、売上アップのサポート等。これまでの経験を生かし、サイト訪問者(ユーザビリティ)および店舗運営者の双方の視点から、売上アップのサポートをさせて頂きます。2011.04.15さて、それでは前回の記事に引き続き、aishipでスマートフォン向けサイトの構築を行う手順をご案内致します。2019.08.30吉永です。普段サイトを見ていると、テーブルを使った説明箇所をみることがあると思います。2019.10.18昨今、スマホ対応サイトではハンバーガーメニューをよく見かけます。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。自社ECサイト運営でASPをオススメする理由モバイルファーストラボ。