WebのプロジェクトをRetina対応画像(@2x)で表示する

Retina対応の設定をしていない場合、プロジェクト設定を「Web」に設定したプロジェクトではスクリーンが追加した画像のサイズのままで表示されます。そのため、以下の2つの現象が発生することがあります。 

　1) Retina対応（@2xサイズ）の画像を追加した場合に、想定よりも２倍の大きさで表示される
　2) Retina対応のディスプレイで通常(@1xサイズ)の画像を見るとぼやけて表示される

スクリーンに「@2x」の設定をすると、 スクリーンの幅と高さが1/2で表示されるため、これら2つの現象を回避することができます。

スクリーンを「@2x」で表示する

「@2x」で表示する設定方法は2つあります。新しいスクリーンも、すでにProttにあるスクリーンも「@2x」に変更することができます。

新しいスクリーンとして「@2x」画像を追加する

1. 「@2x」サイズで書き出した画像のファイル名の末尾に「 @2x」を追記します。
   例： login.png　→　 login@2x.png
2. 新しいスクリーンとして、プロジェクトに追加します。
3. プレビューモードとプレゼンモードで確認すると「@2x」として表示されます。

すでにあるスクリーンを「@2x」画像に置き換える

すでにリンクエリアなどが設定されたスクリーンを「@2x」画像にする方法です。リンクエリアやトランジションの情報は維持されます。

1. 「画像を置き換え」またはドラッグ&ドロップで、「@1xサイズ」の画像を同じファイル名の「@2xサイズ」の画像に置き換えます。
2. スクリーン名の末尾に「@2x」を追記します。
   例： ログイン画面　→　ログイン画面@2x
3. プレビューモードとプレゼンモードで確認すると「@2x」として表示されます。

注意：

Retina対応の画像はコメント、プレビュー、プレゼンモードで表示されます。スクリーンにアップロードした画像が大きくなると、ページの読み込みが遅くなる場合があります。