• このエントリーをはてなブックマークに追加

デザイン・プロト作成のサイズ確認

HTMLファイルを作成して、viewportを書く。それをアップロードして、そのURLをQRコードで生成して読み込んで、ブラウザで確認すれば、コーディング前に文字やパーツ配置の間隔等をちゃんと確認することができる。原寸大でね。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>スマートフォンサイトのプロト確認</title>
<style type="text/css">
img{
width:100%;
height:auto;
}
</style>
</head>
<body>
<img src="sample.jpg">
</body>
</html>

コーディングの確認

PhotoshopやIllustratorなど、スマートフォン向けのデザイン・プロトの画像ファイルを開いた状態で、液晶画面にスマートフォンを隣り合わせて、同じ大きさに拡大・縮小して並べながら確認する。そうすると、文字が大きいのか小さいのか、パーツが適切な大きさなのかどうなのかを確認できる。