【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

サイト設計担当者が語るレスポンシブサイトを作成するポイント4つ

サイト設計担当者が語るレスポンシブサイトを作成するポイント4つ

aishipのサービスサイトをリニューアルし、レスポンシブ化を行いました。

先日、弊社のサービスサイト「aiship.jp」を、サービスのバージョンアップに伴い大幅にリニューアルし、スマートフォン、タブレット、PCにワンソースで対応したレスポンシブデザインへ対応しました。

レスポンシブショッピングカートASP aishipR

今回全体的なディレクションと一部コーディングを担当したのですが、こちらのサービスサイトのリニューアルポイントをサイト設計の視点でまとめてみたいと思います。

  • ナビゲーション類は全てタッチ操作を意識
  • cssでボタンを作成
  • 画像上のテキストについて
  • モバイルファーストで設計する

ナビゲーション類は全てタッチ操作を意識

グローバルナビ、フッターナビともにリンク類はタッチ操作を前提に設計いたしました。

横幅を狭めて画面を縦長にした場合でも、ボタンの縦幅を狭めることはせずに大きさを維持しています。たとえスマートフォンの小さな画面で見てもミスタッチをしないよう意識をしました。

CSSでボタンを作成

CSSボタン
問合せボタン、資料請求ボタンは画像を使わずにcssで調整しています。

ボタンをcssで作るメリットは、
・画像を使わないので容量の節約になる
・ソースがスッキリするのでSEOにも効果的
の2点になります。

また画面の解像度によって画像ボタンであれば滲んだ表示になる可能性もありますが、テキストベースのボタンはそのような心配はありません。

ただし、デザイン性のある「目立つ」ボタンなどについては、まだまだcssで調整していくことは難しいのでそこは画像を使われることをおすすめします。

cssでのボタン調整については様々なジェネレーターがサイト上にあるので、簡単に作成することができます。
目的別レスポンシブサイト制作に役立つCSSジェネレーター8選
こちらの記事を参照下さい。

画像上のテキストについて

画像上のテキスト

画像に文字を入れ込んでいると、小さな画面で画像が縮小され、文字も合わせて縮小されるため、文字の大きさも意識しなければなりません。

PC版、スマートフォン版と画像を切り替え、スマートフォンの小さな画面でもテキストが潰れる事のないように大きさを調整しています。

またデザイン性を大きく凝る必要がなければ、画像にテキストをかぶせる方法もあります。この方法であれば2種類の画像を用意することなく、cssのみでテキストの大きさや位置、基本的な装飾を調整することができるので手間を省くことができます。

TOPテキスト

aiship.jpのトップページは画像に文字を入れず、テキスト位置の移動をcssで調整しています。

モバイルファーストで設計する

全体的にモバイルファースト(モバイル端末での操作性やコンテンツ配置を前提に)で設計を行なっています。

レスポンシブデザインのメリットはPCからスマートフォンまであらゆる端末を1つのソースでカバーできるところにありますが、PCを起点にコンテンツ配置やコピーライティングを行うと、モバイルへ展開した時に画面の制限ゆえに画像の調整や文字数の調整が必要になり無駄な工数が発生します。

レスポンシブデザインでのサイト設計のポイントはコンテンツを共通化し、各デバイス間でのサイト更新の手間を省くことにあります。

モバイルファーストでコンテンツを作成することでその後画面サイズの大きなコンテンツへ展開した場合でも、共通化したコンテンツ配置をcssで調整することが容易になるため、後々のサイト設計の工数を大幅に削減することが可能です。

最後に
ちなみに上記のサービスサイトは「aishipR」のCMSを使い、構築されています。次回はaishipRの実際の作業工程を踏まえながら、CMSを使ったレスポンシブサイトの制作面を解説していきたいと思います。

aishipR 上林

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+