navigation>年末年始休業につきまして【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。TOPモバイルファーストマーケティングラボモバイルファーストマーケティングラボスマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(1)~2011.03.012019.06.21WEBデザインHOMEWEBデザインスマートフォンECサイトデザインの基本~スマートフォンCSS活用基礎(1)~1.なぜスマートフォン用CSSを作るのかPC用のサイトへ誘導することも、携帯用のサイトへ誘導することもスマートフォンに対しては適切とは言えません。スマートフォンではPC向けに作成されたサイトへもアクセスすることができます。画面内にページの全体が表示されなかったり、全体が表示されても今度は文字サイズが小さすぎて読みづらかったり、またPC向けのファイルサイズの大きな画像を読み込むのに時間がかかったりと、決して快適なWEBブラウジングは行えません。携帯向けサイトへアクセスすると、こうした問題の多くは解決されます。携帯のようなナンバーキーでの操作ではなく、スマートフォンは画面に直接指で触れるタッチパネルで操作を行います。このユーザーインターフェースの違いが携帯向けサイトとスマートフォン向けサイトの大きな隔たりとも言えます。携帯向けに最適化されたサイトは、このナンバーキーでの操作が加味されたサイトと言えるでしょう。それが逆にスマートフォンでは適さない、または扱いづらいといったこともあります。スマートフォンは先述の通りPCサイトも閲覧できる高機能な端末です。携帯向けに最適化されたコンテンツよりも、もっとリッチなコンテンツを提供し、楽しんでもらうことが出来るのです。このPCと携帯の良いところを併せ持った、スマートフォン向けに最適化されたサイトを作成することが、スマートフォン利用者が増加している今、サイトオーナー様に求められるものなのです。2.スマートフォンCSSを使えばこんなことが出来るCSS(カスケーディング・スタイル・シート)とは、HTMLソースとは別に用意されるデザインを指定するための専用ファイルです。CSSが読み込まれるまではシンプルなページでも、CSSを読み込ませることによってデザイン豊かに、リッチなページを表示することが出来ます。aishipにはスマートフォンCSSが標準搭載され、簡単に管理画面からそのスマートフォンCSSを編集することで、スマートフォン向けにリッチなデザイン表示が可能となります。3.スマートフォンECサイトデザインの特徴スマートフォン用ECサイトでは、下記のような特徴があります。メニュー部では、通常携帯サイトではテキスト一覧で表示されるものですがスマートフォンの場合、CSSを適応することでこのような表示を実現できます。カテゴリ用アイコンも、画像を並列に表記するだけではなく、画像を角丸にしたり、画像に影をつけて存在感や可愛らしさを表現することができます。大きな特徴として、商品画像をアニメーション形式に回転させることができます。携帯サイトではFlashなどでなければ表現できず、また画像登録とは別にFlashの作成なども必要となる動作ですが、スマートフォンならCSSを使用することで、登録された画像を回転させることができるのです。このように、スマートフォン向けにCSSを作成することで携帯向けサイトやPC向けサイトとは異なる、スマートフォンに適したサイトを提供することが出来ます。スマートフォンCSSを活用して、適切なサイトレイアウトでアクセスした方にストレスを与えず、何度もサイトを訪れてもらえるような魅力的なスマートフォン向けサイトを作成しましょう。スマートフォンショッピングカートasp”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。・レスポンシブECサイトがなぜ今選ばれるのか・これまでのECサイトの課題とは何なのか・どのようにすれば解決できるのかといったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。無料パンフレットを請求するABOUTモバイルファーストマーケティングラボとは、スマートフォン/タブレット/PCに対応したレスポンシブECサイトの構築や成功事例の最新情報を発信するブログです。投稿一覧15歳の時に初めて携帯電話を手にして約15年。モバイルの面白さ、奥深さに魅了されて入社。中心に業種問わず様々なクライアントをサポートしております。合わせて情報サイト、「モバイルファーストマーケティングラボ」の編集長として、毎日モバイルマーケティングの情報を発信中。ECによってより便利で過ごしやすい世の中を作るお手伝いができればと思います。「インターネットでより豊かな人生を」がモットー。2011.04.15さて、それでは前回の記事に引き続き、aishipでスマートフォン向けサイトの構築を行う手順をご案内致します。2011.07.05ショップオーナー様やECサイト制作のご担当者様は、自らのショップのデザインやサイト構築に日々苦闘してらっしゃると思います。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。自社ECサイト運営でASPをオススメする理由モバイルファーストラボ。