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

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

 1) Retina対応(@2xサイズ)の画像を追加した場合に、想定よりも2倍の大きさで表示される
 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対応の画像はコメント、プレビュー、プレゼンテーションモードで表示されます。スクリーンにアップロードした画像が大きくなると、ページの読み込みが遅くなる場合があります。

もし解決しない場合 お問い合わせ お問い合わせ