マルチデバイス対応の基礎知識
Retinaディスプレイ対策

Retinaディスプレイで劣化が問題になるのは「ビットマップ画像」を使う箇所になります。ベクター形式の技術に置き換えることができない写真やその他の画像については、まず2倍サイズ画像を用意するかしないかを決める必要があります。
これについては、結論から言うと「フルートイメージは等倍のみ」「固定サイス画像は2倍サイズを用意する」という対応にするのが最も簡単な方法です。
レスボンシブサイトにおけるフルードイメージは、もともとレイアウト的に最も大きくなるサイズで素材を用意し、画面サイズに応じて縮小させていくという使い方をします。ということは、ピクセル密度の高い環境が集中しているスマー卜フォンにおいては、フルードイメージのほとんどは既に大きな画像が縮小されて高密度対応された形で表示される状態になっていると言えます。
これに対して固定サイズで表示される画像は常に原寸表示されることになりますので、Retina環境を考慮して最初から2倍のサイズで素材を用意し、1/2に縮小して表示する必要があります。

今回のサイトにおけるビットマップ画像は、

• フルードイメージ写真：ロゴ画像
• 固定サイズイメージ：見出しのポットアイコン

となっていますので、原寸の他に2倍サイス画像を用意するのはポットのアイコン画像のみ、という方針で今回は対応することにします。

Retina対策のもうひとつの柱に、「ベクトルデータで表現できるものは極力ベクトル形式の技術を使う」というものがあります。ベクトルデータで表現できるものとして代表的なものは

• 丸・三角・矢印などの幾何学オブジェクト（cssで描画）
• フォントデータ（Webフォント・アイコンフォン卜）
• SVG画像

などがあります。今回のデザインでもこれらを活用することでビットマップ画像を使わずに済むものが沢山ありますので、こういったものは画像化せずcss描画やWebフォン卜を活用して実装することにします。

まずは、2倍サイズ画像を用意した小見出しのポットアイコンを実装していきます。
アイコンは装飾なので、小見出しであるclass="heading"のbefore擬似要素に背景画像として表示し、Android4.0～4.3でも正しく2倍画像に差し替わるようにするために、メディアクエリを使った条件分岐を利用します。

2倍画像に差し替えるのは最新機能に対応しているOSだけで良いということであれば、image-set( )を使うこともできます。メディアクエリによる分岐の場合、2倍画像の方はbackground-sizeで1/2に縮小してやらなければなりませんが、image-set( )を使う方法だと自動的にサイズを合わせてくれるのでbackground-sizeの指定は不要となります。また、セレクタも分けずに済むのでcssの見通しがよく、メンテナンス性も高いと言えます。
image-set( )を使う場合は、非対応環境や将来プレフィックスが取れた時のことも考慮して以下のように記述します

見出しの右端にある「more」リンクボタンの三角アイコンは、cssで描画します。三角形の描画にはborderプロパティを使うので、古い環境でも問題なく再現可能です。

なお二等辺三角形以外の三角形は若干プロパティの調整がややこしいので、ジェネレターを使ってcssを自動生成すると楽に作ることができます。

グローバルナビ、見出しのデバイスフォン卜ではない欧文イタリック書体には、無料のWebフォントを使用したいと思います。しかしデザインカンプに使ったLucida Calligraphyは無料Webフォン卜の提供が無いため、Google Fontsの中から似たような印象になるものを選びなおして使用することにします。今回は「Cardo」というフォン卜を選んでください。
使用するフォントを選択すると、フォントデータを読み込むための記述と、目的のWebフォン卜を利用するためのcss記述が表示されますので、これをそれぞれ自分のHTMLとcssにコピー＆ペース卜して使用しましょう。

Webフォントを活用することはWebサイトにとって良いことづくめですが、必ずしも使いたい書体がWebフォントとしてライセンス提供されているとは限らないという問題があります。従って、特にデザイン的に重要な部分にWebフォントを使う予定であれば、あらかじめライセンス上問題のないWebフォン卜書体を先に決めておき、それを使ってデザインすることをお勧めします。また、日本語フォントについては無料で使用できるものは限られていますので、事前の調査が必要となります。

主な国内・海外 Webフォントサービス

• FONTPLUS フォントプラス
• TypeSquare タイプスクウェア
• デコもじ
• Fonts.com
• Google Fonts
• Adobe Typekit

SNSアイコンのように、Webサイトでよく使われる一般的なアイコンであれば、アイコンフォントを使って画像作成の手間を省くことができます。無料のアイコンフォン卜をダウンロードできるサービスはいくつかありますが、今回は「IcoMoon」というサイトのものを利用したいと思います。

フォントデータをダウンロードしたら、HTML上のSNSアイコンのa要素に指定のclassを設定します。アイコンフォントはbefore擬似要素として表示されるため、テキストデータは削除し、a要素のtitle属性に移しておきましょう。
最後に、アイコンのフォントサイズを設定したら完了です。

以上で今回のレスポンシブサイトのコーディング実装は完了です。あとは各種環境で表示・動作確認をして、おかしい所や気になるところがないか確認し、必要があれば修正を加えます。