Adobe Muse を使用した高解像度 Web サイトの作成

Adobe Muse CC 2014.3 の機能強化 | 2015 年 2 月　

Adobe Muse では、Windows が動作する HiDPI ディスプレイがサポートされることになりました。Windows HiDPI ハードウェアを使用すると、Adobe Muse のインターフェイスが劇的にシャープに表示されます。

HiDPI とは high dots per inch のことで、画素密度の高いディスプレイ、または高解像度のディスプレイを指します。HiDPI ディスプレイは画素密度が高いため、標準的なディスプレイよりもテキストおよびグラフィックをより精緻に表示できます。たとえば、iPhone、iPad、iPod touch、一部の Windows デバイスなどで使用できる Apple Retina ディスプレイでは高解像度のテキストおよびグラフィックを表示できます。

Adobe Muse で作成された Web デザインは、Apple Retina ディスプレイなどの高解像度（HiDPI）画面が実現する表示品位をフル活用できます。

Muse で HiDPI を活かすのは簡単です。

• サイト解像度設定の HiDPI への変更
• サイトに表示されるサイズの少なくとも 2 倍（2x）の画像の作成

Muse から HiDPI サイトへのアップロードまたは書き出しを実行すると、生成されるコードに標準画像と 2x 画像がどちらも含められ、サイトが HiDPI または標準解像度のディスプレイで表示されると使用する画像が自動検出されます。

Adobe Muse での HiDPI の有効化

新しいサイトダイアログボックスの解像度メニューには、「標準」と「HiDPI（2x）」を選択するオプションが用意されています。

解像度設定はサイト作成後に変更できます。変更するには、ファイル／サイトプロパティを選択します。

2x 画像データを持つアセットの作成

HiDPI ディスプレイを最大限に活用するには、アセットが高画質表示できる高解像度を持っている必要があります。アセットのサイズは、サイト上で表示されるサイズの最低で 2 倍のサイズであることが必要です。

2x 画像の作成は簡単です。2x アセットは、画面上に表示される見かけの大きさの少なくとも 2 倍であることが必要です。以下に例を挙げます。

Web ページカンバス上に HiDPI アセットを配置すると、Adobe Muse はサイズを 50％ に縮小して画像を最適化します。見かけのサイズを縮小することにより、よりスムーズで効率的なデザインエクスペリエンスを実現します。このような画像はアセットパネルの「2x」で示されます。アセットが HiDPI ディスプレイで表示された場合、Adobe Muse は、元のアセットのデータを保存して画素密度の高い画像を提供します。ラスタライズされるテキストや画像として出力される効果は、Adobe Muse によるパブリッシュまたは書き出し時に 2x サイズと標準サイズで自動生成されます。

アセットが 2x であり、高画質表示に十分なデータを保持していることを確認するには、アセットパネルを表示します（ウィンドウ／アセット）。アセットに十分なデータを保持している場合は、リストの横に 2x アイコンが表示されます。アセットの横に 2x アイコンが表示されていない場合、そのアセットには最高品位で表示するのに十分なデータがなく、標準解像度で表示されます。

HiDPI 画像の書き出し

Adobe Muse が高解像度画像を書き出さない特別な場合があります。これは画像が 2x データの場合です。画像が背景画像、フルスクリーンスライドショーなどに適用可能なコンテナのサイズに合わせてある場合、Adobe Muse はパブリッシュ時に HiDPI バージョンの画像を書き出しません。とりわけ、次の場合は、標準バージョンの画像のみを書き出します。

• 100％ 幅：サイズに合わせて拡大・縮小／全体に拡大・縮小
• フルスクリーンスライドショー：サイズに合わせて拡大・縮小／全体に拡大・縮小
• ブラウザー／ページ背景：サイズに合わせて拡大・縮小／全体に拡大・縮小

また、並べて表示された背景画像は、サイズに合わせて拡大・縮小／全体に拡大・縮小が設定された背景画像とは異なった処理がされます。並べて表示された画像では、Adobe Muse は Web サイトに書き出すときに標準的なディスプレイおよび HiDPI ディスプレイのそれぞれに標準的な画像と高解像度画像の両方を提供します。   Adobe Muse を使用するときに、高解像度画像を 2x データで並べて表示すると、その他の画像として扱われ、Web ページカンバスには元のサイズの 50％ で配置されます。書き出しでは、寸法が半分になった画像（50％）が、標準解像度の画像として書き出され、ネイティブの画像が 2x データの高解像度画像として書き出されます。

サイト訪問者への配慮

HiDPI ディスプレイを使用する訪問者は、より多くの画像データを使用して最高の表示品質の Web コンテンツを表示できます。2x 画像サイズにすると、画像ファイルのサイズは標準解像度の画像より 4 倍大きくなります。そのため、HiDPI 画像を表示するには 4 倍のデータを読み込む必要があります。HiDPI サイトでコンテンツができるだけ速やかに表示されるよう、Muse では HiDPI アセットと標準解像度アセットを書き出します。標準解像度アセットが先に読み込まれ、HiDPI は標準バージョンの上からプログレッシブに読み込まれていきます。

HiDPI（オン／オフ）ボタンウィジェット

プログレッシブな読み込みは多くのサイト訪問者にとって都合のいい解決策ですが、制約のあるデータプランを使用している訪問者や、ダウンロード容量に制約があったり費用がかかったりする訪問者には問題になりえます。そのようなサイト訪問者向けとして、HiDPI（オン／オフ）ボタンウィジェットの追加を検討することをお勧めします。HiDPI（オン／オフ）ボタンがページに配置されている場合、そのページはまず標準解像度だけが読み込まれ、HiDPI ボタンがオフになります。訪問者が HiDPI ボタンをオンにすると、それ以降は HiDPI（オン／オフ）ボタンが含まれているすべてのページで HiDPI 画像が読み込まれます。この動作はサイト訪問者が HiDPI をオフにするか、ブラウザーを終了するか、cookie をクリアするまで継続されます。HiDPI（オン／オフ）ボタンを含まないページでは、HiDPI または Retina ディスプレイで表示されている場合、必ず HiDPI 画像が読み込まれます。サイトが HiDPI ディスプレイや Retina デバイスで表示されていない場合、HiDPI（オン／オフ）ボタンは選択できなくなり、標準解像度の画像だけが読み込まれます。