前回はレスポンシブサイトの制作ワークフローについてディレクターの方がご理解いただく点をご案内いたしました。今回はより具体的なデザインや制作の際に、その担当者の方に最低限知っていただきたい７つのポイントをご案内いたします。
制作や更新などの実務業務を行う方が、これらのポイントを理解することで、スムーズにレスポンシブサイト制作更新の業務が可能となります。
※この内容は2013年1月現在のレスポンシブサイト制作で基礎的な事項をまとめたものです。日々の技術革新によりアップデートされた技術情報や発展的な内容が欠落する可能性があることをご理解ください。
スマートフォン／タブレット／PC全てで同じ文字サイズにしていると、見づらさやレイアウトの乱れが生じてしまいます。端末ごとに適した表示になるよう、javascriptやCSSでフォントサイズを調整する必要があります。
スマートフォンやタブレットではやや大きめに設定し、PCではやや小さめのサイズを指定していても読みやすさに問題はないでしょう。
上の例でいくと、画像を小さくした時の文字が読みづらいですね。
1つの画像を複数の端末で閲覧する場合、画像の拡大や縮小により画像内の文字が見えづらくなるケースがあります。画像内の文字は拡大／縮小をしても見える程度のサイズを保つように注意しましょう。
スマートフォンサイトを制作・更新する際に、テキストリンクをボタン化するなどしてタップのしやすさを確保する必要がありました。タブレット端末にも同様のことが言え、特に余白やサイズに注意し、デザインの時点で実機に画像を表示して検証を行うなどして、高いユーザビリティを実現しましょう。
通信速度や容量に制限の多いモバイルでの快適さを考えた時に、画像をたくさん使った容量の多いコンテンツよりも、容量を抑えたコンテンツの方が快適に閲覧することができます。
例えばボタンデザインにしても、画像で作ったボタンよりもテキストをベースにして、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を切り替えるためのテクニックです。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 等で調整する必要がある）
制作の際にpxなどで要素の縦幅・横幅を指定すると、レイアウトは乱れづらくなりますが、レスポンシブに対応することが難しくなります。レスポンシブの場合は％による指定をすることで端末ごとに自然な幅調整を行うことが可能です。
特にスマートフォンやタブレットは“タッチの操作性”が重要であるため、制作したレスポンシブサイトを実機で確認するとともに、操作性（ボタンのタップのしやすさ、レイアウト崩れなど）に問題ないかの検証を行うことが非常に重要になってきます。
▼これらの内容はレスポンシブサイト制作や更新業務での一握りの基礎的事項です。制作や更新業務を進める中で、その他不明な点が発生すると思いますので、その際にはお気軽にaishipのサポートへお問合せいただき解決いただけましたらと思います。御社がレスポンシブサイトの制作・更新をスムーズに実施できるようにサポートさせていただきます。
