レスポンシブサイトのグラフィックデザイン

1996 年当時、ウェブ構築に携わっていた多くの人々は、 20 年も経たないうちに、携帯電話やタブレット、テレビ、さらには自動車や家庭用照明でも機能するウェブサイトが開発されるようになると言ったら、笑っていたでしょう。しかし、今日、それは非常に現実的なものとなっています。この記事では、グラフィックニーズに最適なオプションを選択するための高水準の議論を行います。

テキストのボックスはもともとレスポンシブ対応なので、テキストコンテンツは問題ありませんが、グラフィックや複雑なレイアウトをページに含めるようになると、絵が醜くなり始めます — 特に、それらのグラフィックやレイアウトが様々な画面に適応する必要がある場合は、なおさらです。そのため、これらのトピックを扱うドキュメントの章を用意しました（現在表示されている章とアプリレイアウト）。

さらに最近では、地味な BMP、JPG、GIF、PNG 以外にも、非常に多くの技術から選択することができます。では、何を選べばよいのでしょうか。これは、どのような端末に対応しなければならないか、グラフィックがどれほど複雑である必要があるか、グラフィックがどれほどのインタラクティブ性を必要とするかによります。

CSS によって画像を選択的に提供する

一般的に、レスポンシブデザインでは、様々なレイアウトでほぼ同じグラフィック資産を使用しますが、状況に応じて若干異なる資産を含めることもあります。例えば、デスクトップ用のレイアウトに大きなヘッダーグラフィックといくらかのプログラムグラフィック（CSS3 のドロップシャドウやグラデーションなど）が含まれている場合、モバイル用のレイアウトでは特定の資産を簡素化したり削除したり、小さな画面に合わせてより小さな資産を用意したりすることができます。これは、一般的にモバイル端末の処理能力や利用可能な帯域幅が小さいため、処理やダウンロード量を減らしたいと考えるからです。また、モバイル端末は画面サイズが小さいので、モバイルレイアウトでは視覚的な混乱を減らすのが理にかなっています。

CSS メディアクエリーを使うと、ビューポートの大きさに応じて異なる CSS ルールを提供することができますが、可能な限りモバイルファーストメディアクエリーの使用を検討すべきです。つまり、 CSS 内でメディアクエリーが検出される前の既定のレイアウトは、大きな画面/デスクトップ用のレイアウトではなく、小さな画面/モバイル用のレイアウトにします。そのため、モバイル端末でページが読み込まれた場合はモバイル用の資産のみをダウンロードし、デスクトップ用のリソース資産はダウンロードしなくなります。

HTML の <img> をレスポンシブにするのは、それほど簡単ではありません。いくつかの回避策がありますが、どれも今のところ完璧ではありません。どのようなものがあるのかについては、Choosing a responsive image solution をご覧ください。

異なる解決策への対応

この節では、様々な解像度のデバイスで画像を動作させるための様々な戦略について説明します。ここで問題となるのは、ラスター画像を高解像度のデバイスで表示すると、同じ数のピクセルがはるかに小さな画面スペースに表示されるため、小さく見えてしまうということです。ほとんどの高解像度端末では、ウェブページ全体に既定の拡大率が適用され、コンテンツが少しでも読みやすくなるようになっていますが、この場合は、拡大された画像がピクセル化されて醜く見えてしまうことが欠点です。

  • 高解像度と低解像度の画像を用意する
    • 高解像度画像と低解像度画像を作成し、resolution メディアクエリーを使用して、高解像度画像を高解像度端末にのみ提供するという方法があります。
  • プログラム的な画像
    • プログラム／ベクターグラフィックスは、理論的に無限に拡大できるため、高解像度でも鮮明な画像が得られます。CSS3 プロパティを使用すると、ドロップシャドウ、グラデーション、角丸などの効果を生成することができます。また、他の UI 要素には、ラスターグラフィックス形式ではなく、SVGを使用することも検討できます。ただし、 CSS3 プロパティや SVG は IE6-8 などの古いブラウザーでは動作しないこと（ポリフィルがありますので、代替策を組み込むことは可能です）、 SVG は写真などの高精細な画像には適していないことなどの欠点があります。
  • アイコンにフォントを使う
    • もうひとつの手法として、アイコンにウェブフォントを使用することも考えられます。テキストはウェブ上で無限に拡張可能であり、また、 text-shadow や color などの CSS のテキストプロパティを使って、ウェブフォントのアイコンを装飾することもできます。自分でフォントファイルを作るのは少し面倒ですが、 font awesome のような優れたアイコンフォントサービスが数多くあります。

インタラクティブな画像

リンクやクリック可能なエリア、アニメーションなど、画像にある程度のインタラクティブ性を持たせる必要がある場合は、さまざまなオプションが用意されています。

CSS

CSS3 では、グラフィカルな効果をリンク（やその他の必要な場所）に加える場合に、プログラムによる方法だけでなく、宣言的なアニメーションやトランジションを書くことができます。これらは、 IE6-8 のような古いブラウザーでは対応していないかもしれませんが、一般的にはグレイスフルデグラデーションをかなり簡単に書くことができ、 JavaScript や他の技術と組み合わせることで、より柔軟で強力なものになります。

JavaScript

JavaScript には、アニメーションをはじめとしたあらゆる種類のインタラクティブ機能を実現する機能があります。他の技術と組み合わせることで非常に強力な機能を発揮しますが、その複雑さが開発者以外の人には障害となります。

SVG

SVGは、HTML/CSSと同様に、 JavaScript で操作することができます。ですから、インタラクティブ性を持たせることは難しくありません。また、 SVG に直接リンクを貼ることもできますし、SMIL (Synchronized Multimedia Intergration Language) を使ってアニメーションを作成することもできます。

WebGL/Canvas

HTMLの <canvas> 要素を使って、インタラクティブなグラフィックを描くためのキャンバスを作成し、 Canvas API を使って図形や線を作成したり、画像ファイルを読み込んだり、テキストを作成したり、合成操作を行ったりすることができます。そして、標準的な JavaScript を使用して、画像出力のアニメーションなどを行うことができます。通常の 2D Canvas コンテキストを使用して 2D 画像を作成することも、より新しい WebGL API を使用して 3D 画像を作成することもできます。

キャンバスは非常に強力ですが、注意して使用する必要があります。ゲームのビジュアルや複雑なデータの視覚化には適していますが、標準的なユーザーインターフェース要素にはあまり効率的ではありません。また、キャンバスは単なるラスター画像なので、その中で作成されたテキストにはアクセスできず、さらに拡大にも向いていません。