クレジット：
高解像度画面を備えたモバイル デバイス向けのコンテンツを作成するデザイナーや開発者は、多くの場合、Retina ディスプレイを祝福であると同時に呪いであると考えています。たとえば、新しいiPadは、2,048 x 1,536 ピクセルの解像度を備えており、1080p HD テレビよりも 100 万ピクセル多くなっています。
しかし、新しい解像度は素晴らしい視覚体験を提供しますが、多くの場合、デバイスは 4G インターネット速度を必要とし、誰もがそれを利用できるわけではありません。さらに、デザイナーはそもそもマルチスクリーン プロジェクトを開始する方法について疑問を抱いています。
デジタル コンテンツを公開する場合でも、リッチ メディア ディスプレイ広告を構築する場合でも、次の 5 つのヒントを試してください。
1. 複数のデバイス向けにデザインする場合は、iPad から始めます。
これまでデジタル コンテンツの作成順序は、最初にデスクトップ、2 番目にスマートフォン、3 番目にタブレットでしたが、最終的にはエクスペリエンスをすべての画面に移植する必要があります。したがって、順序を逆にして、最高解像度の画面と最もインタラクティブなプラットフォームから始めてください。
機能と解像度の点で最高のインタラクティブな要素を処理できるデバイスである iPad から始めます。次に、デスクトップ、スマート TV、スマートフォン、それほど高度ではないタブレットなど、より限定されたデバイスに移植するときにアイデアを修正します。これにより、コンテンツがあらゆるデバイス上で最大限に最適化されることが保証されます。
2. Web フォントを使用します。
Web フォントを使用すると、最初に画像としてレンダリングしなくても、ほぼすべてのフォントを使用できます。フォントを個別にダウンロードし、@font-face 機能を使用してブラウザーでテキストをレンダリングします。これにより、高解像度画面で帯域幅が大幅に節約されます。
Web フォントをシェーディングやマスクと組み合わせて、高解像度のカスタマイズ可能な結果を実現します。これフォントの例新しい iPad にある手描きの看板のように見えます。さまざまなベンダーからのこれらのフォントにアクセスします。タイプキット。
または、通常はテキスト上に不要なアーティファクトを作成する圧縮テクノロジーを画像に適用します。テキストを分離し、Web フォントをデザインに使用することで、常に鮮明で読みやすいコンテンツを作成できます。
3. PNG の代わりに CSS を使用します。
などのウェブテクノロジーHTML5そしてCSS3帯域幅に優しい方法で高解像度ディスプレイを最適化するのに役立ちます。プログレッシブ エンハンスメントを使用してコンテンツをマークアップします。そうすれば、この機能を完全にはサポートしていないブラウザでも適切に表示されます。次に、色、丸い角、グラデーション、不透明度を利用して、一般的なグラフィック要素を作成します。ボタン、線、角、タブなどの形状ベースのニーズに PNG を使用しないでください。鮮明に見えないか、価値よりもはるかに多くのキロバイトが必要になります。
4. CSS メディア セレクターを使用して、正しいサイズの画像を配信します。
デバイス間で移植する写真やグラフィックを作成する場合は、コンテンツをキャンバスまたはブラウザ ウィンドウのサイズに合わせて拡大縮小するレスポンシブ デザイン アプローチを使用してみてください。一部の JavaScript テクニックを使用すると、高解像度の画像をダウンロードできますが、実際にはページが重くなる可能性があります。代わりに、CSS @media セレクターを試して、デバイス専用のサイズの写真をダウンロードしてください。
5. ゲームデザイナーからいくつかのトリックを借用します。
高解像度グラフィックスを効率的にすることは、ゲーム デザインにとって新しいことではありません。テクスチャ マップやスプライト マップなどの一般的なゲーム開発テクニックは、高解像度のモバイル画面上のコンテンツに最適なアプローチとなります。
これらのテクニックを使用すると、デザイナーは 1 つの大きな画像に多くの画像と背景を配置し、複数の画像をダウンロードして描画することを避けます。特に、リッチメディア広告やエンターテイメント コンテンツをデザインする場合によくあることですが、アニメーションや背景を扱う場合、帯域幅と表示パフォーマンスが向上します。