Adobe Muse CC 2014 新機能［追加］／Retinaディスプレイ

MuseでRetinaディスプレイ対応／Adobe Muse CC 2014 新機能の徹底解説（3）

Adobe Muse CC 2014 の新機能「HiDPI」についての質問がありましたので、まとめておきました。参考にしてください。
更新日：2014年6月26日

［Muse 新機能の復習］Retinaディスプレイ対応ページの画像の扱い

「新規サイト」で「コンテンツ」の「解像度」から
「標準」を選択した場合：配置した画像は、100%で表示されます。

「新規サイト」で「コンテンツ」の「解像度」から
「HiDPI (2x)」を選択した場合：配置した画像は、50%で表示されます。

ページの解像度を「HiDPI (2x)」にしておけば、読み込んだ画像ファイルは自動的に「50%」になります。
Retinaディスプレイ対応のページにする場合は、配置する全ての画像ファイルを2倍の大きさにしておく必要がありますが、後はMuseがやってくれるので、今まで通りの作業でOKです。

例：
Retinaディスプレイ対応のページで、「500x500ピクセルの画像」をレイアウトしたい場合は、
「1,000x1,000ピクセルの画像ファイル」にしておきます。

［Muse 新機能の復習］システムフォントもRetinaディスプレイ対応

Museでシステムフォントを指定した場合、パブリッシュすると画像に変換されますが、ページの解像度が「HiDPI (2x)」に設定されていると、画像化されたテキストもRetinaディスプレイ対応になります。
高品質な表示になりますので、試してみてください。

［Muse 参考］Retina ディスプレイ対応ページのわかりやすい解説

Muse CC 2014 の新機能「HiDPI」については、先日お知らせした解説ビデオで紹介しましたが、MuseThemes.comが、YouTubeで公開している解説ビデオも参考になります。

Adobe Muse CC 2014 - Retina Display Graphics | Top 8 New Features by MuseThemes.com（3分）

ビデオの内容：

画像ファイルをファイルメニューの「配置」で選択
そのまま、ドラッグして「33%」に縮小する
アセットパネルを見ると配置した画像ファイル名の横に「2x」が表示される
縮小した画像を今度は拡大して「55%」にする
アセットパネルを見ると「2x」の表示が消える
再び、縮小して「48%」にする
アセットパネルを見ると「2x」が表示される

Retinaディスプレイに対応した画像になっているか、アセットパネルで確認できるというデモです。大量の画像が配置されている場合、アセットパネルでチェックした方が効率的ですね。

その他、Museに関する参考情報です。

［Muse 参考］オブジェクトの固定を活用したレイヤースクロールの事例

視差効果（パララックス）スクロールの欠点は、処理能力の低いデバイスで、ユーザビリティを極度に低下させてしまうことですが、このページのような多層スクロール効果なら、新規性で訴求しながら、処理も重たくないので、試す価値はありそうです。
※言語別に2種類のページがあります。

Łukasz Targosz. Film Composer. Music Producer.

［Muse 参考］ビデオをスムーズにフルスクリーン表示する事例

Muse The Site of the Day から。
ブラウザーのウィンドウ全面にビデオ映像を再生する例として参考になります。

BEYOND THE BEACH - Al Jazeera English

アルジャジーラ（英語チャンネル：Al Jazeera English）が提供する特設サイト。
ページを表示すると、ブラウザーのウィンドウ全面にビデオを表示します。
左側のナビゲーションから項目を選択できますが、すべてのページでフルスクリーンビデオを再生します。ビデオをスキップする場合は［SKIP VIDEO］をクリック。

Museのデザイン：
Konstantinos Antonopoulos（Al Jazeera English インタラクティブプロデューサー）

Adobe Muse のライブセミナー

Adobeは、毎月オンラインセミナー「Muse Jam」を開催していますが、終了したライブのアーカイブは誰でも視聴可能になっています。英語ですが、操作解説が中心なので役立つと思います。

19日に配信されたセミナーのアーカイブ
What’s New in Adobe Muse CC
Adobe Muse CC 2014 の新機能を紹介するセミナー（1時間）

※Adobe Connectというオンライン会議システムにつながります（要Flash Player）