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

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

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

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

レスポンシブサイトの制作担当者が知るべき7つの注意点

レスポンシブサイトの制作担当者が知るべき7つの注意点

前回はレスポンシブサイトの制作ワークフローについてディレクターの方がご理解いただく点をご案内いたしました。今回はより具体的なデザインや制作の際に、その担当者の方に最低限知っていただきたい7つのポイントをご案内いたします。

制作や更新などの実務業務を行う方が、これらのポイントを理解することで、スムーズにレスポンシブサイト制作更新の業務が可能となります。

※この内容は2013年1月現在のレスポンシブサイト制作で基礎的な事項をまとめたものです。日々の技術革新によりアップデートされた技術情報や発展的な内容が欠落する可能性があることをご理解ください。

1、フォントサイズに注意する

フォントサイズ
スマートフォン/タブレット/PC全てで同じ文字サイズにしていると、見づらさやレイアウトの乱れが生じてしまいます。端末ごとに適した表示になるよう、javascriptやCSSでフォントサイズを調整する必要があります。

スマートフォンやタブレットではやや大きめに設定し、PCではやや小さめのサイズを指定していても読みやすさに問題はないでしょう。

2、画像上の文字サイズに注意する

画像上の文字

上の例でいくと、画像を小さくした時の文字が読みづらいですね。

1つの画像を複数の端末で閲覧する場合、画像の拡大や縮小により画像内の文字が見えづらくなるケースがあります。画像内の文字は拡大/縮小をしても見える程度のサイズを保つように注意しましょう。

3、リンクやボタンの幅に注意する

スマートフォンサイトを制作・更新する際に、テキストリンクをボタン化するなどしてタップのしやすさを確保する必要がありました。タブレット端末にも同様のことが言え、特に余白やサイズに注意し、デザインの時点で実機に画像を表示して検証を行うなどして、高いユーザビリティを実現しましょう。

4、画像を利用せずに実現できるものは画像を利用しない

通信速度や容量に制限の多いモバイルでの快適さを考えた時に、画像をたくさん使った容量の多いコンテンツよりも、容量を抑えたコンテンツの方が快適に閲覧することができます。

例えばボタンデザインにしても、画像で作ったボタンよりもテキストをベースにして、CSSで装飾したボタンの方が容量を節約することができ、読み込み速度も向上します。

下記のようなボタンも、画像ではなくCSS3で実現しています。
(QRコードを読み取って実機でも見ていただけます)

ボタンサンプル

HTML

<a href="#" class="css_btn_class">css button</a>

CSS

.css_btn_class {
	font-size:28px;
	font-family:Georgia;
	font-weight:normal;
	-moz-border-radius:13px;
	-webkit-border-radius:13px;
	border-radius:13px;
	border:2px solid #84bbf3;
	padding:14px 37px;
	text-decoration:none;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(54%, #79bbff), color-stop(51%, #378de5) );
	background:-moz-linear-gradient( center top, #79bbff 54%, #378de5 51% );
	background:-ms-linear-gradient( top, #79bbff 54%, #378de5 51% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
	background-color:#79bbff;
	color:#ffffff;
	display:inline-block;
 	-webkit-box-shadow:inset 0px 0px 0px 0px #bbdaf7;
 	-moz-box-shadow:inset 0px 0px 0px 0px #bbdaf7;
 	box-shadow:inset 0px 0px 0px 0px #bbdaf7;
}.css_btn_class:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(54%, #378de5), color-stop(51%, #79bbff) );
	background:-moz-linear-gradient( center top, #378de5 54%, #79bbff 51% );
	background:-ms-linear-gradient( top, #378de5 54%, #79bbff 51% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
	background-color:#378de5;
}.css_btn_class:active {
	position:relative;
	top:1px;
}

CSS3で実現するデザインについては、様々なジェネレータがあり、簡単に実装することができます。こちらもご参考ください。

色々なCSSジェネレータで出来るあれこれまとめ

5、CSSはメディアクエリで切り替える

メディアクエリは、画面幅やアクセスデバイスに応じて読み込むCSSを切り替えるためのテクニックです。CSSファイル内に直接切り替え条件を記述することで実装することができます。

例えば

@media screen and (max-width: 320px)

と記述すると横幅が320px以下の端末、iPhoneやAndroidにCSSが適用されるようになり、

@media screen and (min-width: 321px) and (max-width: 768px)

とすることで、画面幅が321px以上768px以内、大型スマートフォン~タブレット端末にCSSが適用されるようになります。

(※メディアクエリはIE6,7,8環境については非対応である為、別途Javascript 等で調整する必要がある)

6、ルーズな幅感

横幅は100%

制作の際にpxなどで要素の縦幅・横幅を指定すると、レイアウトは乱れづらくなりますが、レスポンシブに対応することが難しくなります。レスポンシブの場合は%による指定をすることで端末ごとに自然な幅調整を行うことが可能です。

7、実機での確認は必須

特にスマートフォンやタブレットは“タッチの操作性”が重要であるため、制作したレスポンシブサイトを実機で確認するとともに、操作性(ボタンのタップのしやすさ、レイアウト崩れなど)に問題ないかの検証を行うことが非常に重要になってきます。

▼これらの内容はレスポンシブサイト制作や更新業務での一握りの基礎的事項です。制作や更新業務を進める中で、その他不明な点が発生すると思いますので、その際にはお気軽にaishipのサポートへお問合せいただき解決いただけましたらと思います。御社がレスポンシブサイトの制作・更新をスムーズに実施できるようにサポートさせていただきます。

”スマホで売れる”ためには必須の「レスポンシブ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
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+