PR

 Android Design PreviewはPC側のディスプレイをスマートフォンにミラーリングするツールです。Googleが開発しており「Google Code」から入手できます。

 デザイナーは通常グラフィックツールを使って画面のモックアップを作り、UIデザインを作ります。私の場合は操作に慣れたAdobe Photoshopを使っています。手順はWebページデザインに似ていて、最初にターゲットとするデバイスのピクセル寸法による表示サイズを参考に、画面サイズを作ることから始めます。例えばGalaxy SIIのようなWVGAの端末はポートレートの場合幅が480ドット、高さが800ドットですのでPhotoshopの新規画面作成コマンドで同じピクセル寸法の新規画面を作り素材を配置し始めるわけです。

 ところが1つ問題があります。それはPCのディスプレイで表示されるグラフィックの大きさと、スマートフォンが表示するグラフィックの物理的なサイズが全然違うことです。スマートフォンはPCよりもかなり高いピクセル密度を持っています。そのため、ピクセル寸法はそろっていても、物理的な表示サイズ的にはPCのほうが大きく、スマートフォンのほうがピクセルがぎゅっと詰まった小さいサイズで見えるのです。

 そこでよく起こりがちなのが「PCで作っていたときは大きく見えていたボタンでも、スマートフォンで表示したら案外小さかった」という問題です。物理的な画面サイズの大きいGalaxy SII(4.3インチ)向けのデザインよりもXperia ray(3.3インチ)のような小振りな端末で困ります。つまり、モックとして作ってみたはよいものの「このボタンは押せないわ..」とか「この文字はちょっと読めないね..」となってしまうわけですね。

 これまで実機で外観をチェックするには、開発者に静止画像を貼付けるビューを持つだけの確認用プログラムを作ってもらったり、画面キャプチャを端末側にネット経由で送るなどして表示してみるといったやり方もありました。しかし、レイアウトの編集作業をしながら実機で確認するということはできませんでした。

この記事は会員登録で続きをご覧いただけます

日経クロステック登録会員になると…

新着が分かるメールマガジンが届く
キーワード登録、連載フォローが便利

さらに、有料会員に申し込むとすべての記事が読み放題に!
日経電子版セット今なら2カ月無料