スマホ画面レイアウトのガイドライン/テンプレート

社内のスマートフォン(以下スマホ)向けのデザインガイドラインから、画面レイアウトデザインに絞って紹介します。


1. ガイドライン化の目的

2. 画面デザインの基本方針

3. HTMLで重要な「viewport」とは?

4. デザインしやすいフォントサイズ土台設定

5. フォントサイズパターンのガイドライン

6. 行間の設定

7. 左右の余白

8. 最後に「高さ」の余白設定


ガイドライン化の目的


ガイドライン化によるメリットを重視しない場合は意味を持ちませんが、テンプレートとして活用することで、サービスの立ち上げを短縮出来ます。

ポイントとして以下の3つでしょうか。

1. ブランディング
担当者の価値観に左右されない統一されたルールと表現


2. 効率化
サービスの立ち上げや運用コスト効率化をはかるため見せ方を統一


3. 精度の向上
都度ガイドラインの改修行い、精度の高いデザインに更新


画面デザインの基本方針


時間をかけてテクノロジーを導入し手の込んだ表層デザインにしても、ユーザーにはメリットがなく、自己満足で終わることがあります。

そういった傾向を回避するための方針が下記です。

1. シンプルに
2. ユーザー目線で
3. 新技術は追わない
4. 第三者チェック
5. 訴求は2~3秒で理解させる
6. アーティスティックな表層デザインは使わない
7. 明確な目的をページ毎に設定

ユーザーの目的達成に必要ではない要素は提供側のエゴになりますので、バッサリと割愛の判断して先に進むことが大事です。


HTMLで重要な「viewport」とは?


まずはスマホで表示されるweb画面の設定によりページの表示範囲や最適化に影響がある土台設定を行います。

ヘッダー領域の「Meta」内に下記「viewport」設定ソースを記述します。

******************Viewportソース_1******************
※ユーザーによるページのズーム不可
(アプリ的な固定画面を再現する場合はこちら)↓
<meta name=”viewport” content=”width=device-width,user-scalable=no”>
******************Viewportソース_2******************
※ユーザーによるページのズーム可
(文字、画像のユーザビリティー重視の場合はこちら)↓
<meta name=”viewport” content=”width=devicewidth,minimum-scale=1.0″>
*******************************************************

「viewport」とは、仮想的なweb表示領域を設定する機能で、
何も設定しない場合、

・iPhoneの場合の初期値は横幅980px
・Androidの場合の初期値は横幅800px

です。

スマホの物理的なティスプレイのリアルな解像度ではなく、
ディスプレイ内で表示される「ブラウザアプリケーション」などの仮想的Web画面表示領域/解像度のことです。

それでは「viewport」の設定による端末画面での見え方の紹介です↓


以上の設定による見え方の違いは理解できましたでしょうか。

スマホの場合は

“width=device-width”

の設定で、各デバイス側で適切にフィット表示してくれますので、設定はまずはじめに行いましょう。

ページ表示の土台が固定されたので次は「フォントサイズの設定」です。


デザインしやすいフォントサイズ土台設定


サービスで扱うフォントの大きさの設定をガイドライン化します。

基準点を統一必要があるため、HTMLタグの中で全体に影響がある「HTML」タグに、フォントサイズの基準設定を行います。

HTMLファイルとは別にCSS(スタイルシート)ファイルを設け、その中に以下の記述をします。

******************** CSSの記述例 ********************
html {
font-size:62.5%; /*10px基準*/
}


p.XXX {
font-size: 10px; font-size: 1.0rem; /*最小*/
}

*******************************************************

この設定を行うことで「rem」のフォント設定時に

1.0rem → 10px

という想定と扱いがしやすい明確な10px基準での大きさの設定がされ、

グラフィックデザイナーが「画面イメージ」をIllustratorやPhotoShopで作成する際に、
ピクセル数単位でフォントサイズの作業が進められます。
それによりコーダーとの組込み時の数値の乖離が少なくなるので有益です。


フォントサイズパターンのガイドライン


フォントサイズが10px単位で扱えるようになったので、ページ内で使用する用途別文字サイズを6種類に絞って設定してしまいます。

これにより都度フォントサイズの設定に時間を取られることがなくなり、各項目ごとに決められたフォントサイズを割り当てることが出来るようになりました。

丁度良い大きさのメリハリをつけた6サイズが下記となります↓

実際のフォントの大きさの違い具合が確認出来るでしょうか。

見出しは大きく、
通常説明文は程良く、
利用者の便益がないレギュレーション上必要な表記文などは必要最低限に小さく設定してます。

フォントサイズはガイドラインとして設定はしてますが、幼児やシルバー世代などにターゲットする場合は見やすくい大きさのルール設定が行われる必要はあります。


行間の設定


行間については表示されるブラウザのデフォルトCSSなど端末依存でのブレが発生しますが、

文字サイズの1.4倍以上~1.7倍まで空ける(推奨)

で設定されていればテキストが読みやすい間隔が確保でき、それ以下になると詰まった読みにくい文章になってしまいます。

******************** CSSの記述例 ********************
body {
line-height: 1.4;  /*文字行間設定*/
}

*******************************************************


左右の余白


左右画面いっぱいまで文字が置かれていると文章体が把握しづらいく読みにくいため、適度な余白が必要です。

ガイドラインでは表示幅全体を100%とした場合の設定を行うことで端末依存に対応できます。

テキストエリアの両サイドに、表示横幅の5%程度を左右にそれぞれ設定。


******************** CSSの記述例1********************
p.XXX {
margin:0 5% 0 5%; /*テキスト横空白設定*/
}

******************** CSSの記述例2********************
p.XXX {
width:90%; /*テキスト横エリア横サイズ*/
margin:0 auto 0 auto; /*エリアのセンター置き*/
}

*******************************************************
以上がフォントサイズまわりの設定となります。


最後に「高さ」の余白設定


ページレイアウトガイドラインの最後の設定は、テキストや画像などの要素間余白の高さです。

***************CSSの記述例_ソース1***************
p.XXX {
    margin:10% auto 10% auto;
    }

***************CSSの記述例_ソース2***************
p.XXX {
    margin:5% auto 5% auto;
    }

***************CSSの記述例_ソース3***************
p.XXX {
    margin:1.875% auto 1.875% auto;
    }

*******************************************************
こちらの設定も絶対的なものではなく、ページ構成の作業を進める上でとりあえずこの値で設定しておけば「おおむね問題ない」値です。

この工程に多くの時間が使えるスケジュールがあれば厳密に設定することは効果的ではあります。

以上のように、サイズや高さや間隔などをガイドライン化することで、実績あるページ設計が効率的に組み込むことができ多くのメリットを生みます。

効率化によって確保できた時間を有効活用してアドバンテージを増やしていきましょう。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

スマホ広告バナーサイズ表_無料動画バナー紹介!

スマートフォンバナー


ネットワーク系バナー

★モバイル_バナー(横×縦)

 ・320× 50 ADNW
 ・640×100 ADNW【高解像度版】

 ・320×100 ADNW
 ・640×200 ADNW【高解像度版】

★レクタングルバナー(横×縦)

 ・300×250 ADNW
 ・600×500 ADNW【高解像度版】


インフィード形式(横×縦)

 ・ 300×300 ①_スクエア型
 ・1200×628 ②_バナー型

※掲載場所によりサイズに差異があります


スマホバナーサイズのメモの意味合いで現在出稿があるモバイル向け広告を中心にサイズ表を下記に作成しました。※2018.3.5時点のデータ

モバイル端末も「ケータイ電話」と呼ばれていたフィーチャーフォンから、スマートフォンへ移行しました。

そして、モバイル広告サイズも解像度が増えて「ドット打ち」と呼ばれる技法が有効な抽象的領域を越え、構成も通常の印刷広告のような余白のデザインが可能となりました。

参考で、かつてマス広告として絶大な広告効果を出していた、ケータイ電話モバイル広告時代の代表的な広告サイズと事例を紹介します。


フィーチャーフォンバナー

192×53 QVGA端末向け_バナー

フィーチャーフォン向けのデフォルトバナーサイズ。使用する「レスポンスフォーマット」(「CLICK!」文字入りの黒枠部分)の
カタチとサイズが決められている。2018年の現在でも運用されている代表的なバナーサイズ


384×106 VGA端末向け_バナー

「デフォルトバナー」×2倍サイズ。フィーチャーフォン向けのVGA端末向けに特化して一時的に運用されていたバナーサイズ。SB枠で使用されてましたが運用コスト減の影響からか現在は運用されていません。


192×53 QVGA端末向け_アニメGIFバナー

「デフォルトバナー」に「GIFアニメ」を使うことで複数コマの差し替えアニメーションを再現できました。コントラストに違いの大きい2つのバナーを交互に表示させるだけでも利用者の目線をバナーに向かわせることが出来、静止画バナーと比較して広告効果を大きく改善できました。


192×53 Flashバナー

「デフォルトバナー」と縦横サイズやレスポンスフォーマットは同じですが、当時のリッチ仕様としてFlashで掲載が可能でした。「5kバイト」という少ないバナー容量制限のなかで、アニメGIFバナーでは再現できない(容量が約4~10倍まで増大)細かいアニメーションが表現できる唯一の手段として、モバイル広告の表現に多大な力を与えました。

無料動画バナー:FP時代の広告面にあふれた無料訴求のバナーを一部紹介↓

※記事用にFlash形式を動画バナー(アニメGIF)に書き出ししています


最後に

以上、一部のプラットフォームとサイズについて紹介しましたが、状況に応じて修正と追加します。
スマートフォン向けのクリエイティブは情報量が多いので迷いと迷走に陥りやすいと感じますが、
明確なルールを設定して必然的で効率的な作業を続けていきます。

それでは次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

スマホ画面サイズとユーザビリティ/2018年版

今回はスマホ/モバイル端末を中心に、スマホの画面サイズ画素密度と、おまけで目の距離に関係するユーザビリティを考えてみます。

画面サイズと画素密度の相対関係を考えると非常に奥が深く楽しそうなので、まずは個人的に思い入れがある端末の画面サイズで画面サイズスペック表を作ってみました↓

iPhone端末別ディスプレイサイズ比較表

iPhone XS MaxとNintendo Switchディスプレイサイズ比較


主要画面表示機器スペック表

スマホ画面サイズ / ppi リスト

iPhone 3G
3.5 インチ 320× 480  HVGA 163ppi

iPhone 3GS
3.5 インチ 320× 480  HVGA 163ppi

iPhone 4
3.5 インチ 640× 960  Retina 326ppi

SO-01B
4.0 インチ 480× 854  FWVGA 254ppi

IS03
3.5 インチ 640× 960  WVGA 330ppi

iPhone 4S
3.5 インチ 640× 960  Retina  326ppi

iPhone 5
4.0 インチ 640×1136 Retina  326ppi

iPhone 5S
4.0 インチ 640×1136 Retina  326ppi

iPhone 6
4.7インチ  750×1334 RetinaHD 326ppi

iPhone 6plus
5.5 インチ 1080×1920  FHD 401ppi

iPhone 7
4.7インチ  750×1334 RetinaHD 326ppi

iPhone 7plus
5.5 インチ 1080×1920  FHD 401ppi

iPhone 8
4.7インチ  750×1334 RetinaHD 326ppi

iPhone 8plus
5.5 インチ 1080×1920  FHD 401ppi

iPhone X
5.8インチ 1125×2436 SuperRetinaHD 458ppi

iPhone XR
6.1インチ 828×1792 LiquidRetinaHD 326ppi

iPhone XS
5.8インチ 1125×2436 SuperRetinaHD 458ppi

iPhone XS Max
6.5インチ 1242×2688 SuperRetinaHD 458ppi


ガラケー画面サイズ / ppi リスト

W11H
2.2 インチ 240× 320  QVGA 182ppi

W52SA
2.8 インチ 240× 400 WQVGA 167ppi

W54SA
3.0 インチ 480× 800 WVGA 311ppi

MARVERA KYY08
3.2 インチ 480× 854 FWVGA 306ppi


ガラホ画面サイズ / ppi リスト

MARVERA KYF35
3.4 インチ 480× 854 FWVGA 288ppi


iPad画面サイズ / ppi リスト

iPad
9.7 インチ 768×1024   132ppi

iPad 2
9.7 インチ 768×1024   132ppi

iPad 3
9.7 インチ 1536×2048 Retina  264ppi

iPad 4
9.7 インチ 1536×2048 Retina  264ppi

iPad Air
9.7 インチ 1536×2048 Retina  264ppi

iPad Air2
9.7 インチ 1536×2048 Retina  264ppi

iPad (2018)
9.7 インチ 1536×2048 Retina  264ppi

iPad Pro9.7
9.7 インチ 1536×2048 Retina  264ppi

iPad Pro10.5
10.5 インチ 1668×2224 Retina  264ppi

iPad Pro12.9
12.9 インチ 2048×2732 Retina  264ppi

iPad mini
7.9 インチ 768×1024   163ppi

iPad mini2
7.9 インチ 1536×2048 Retina  326ppi

iPad mini3
7.9 インチ 1536×2048 Retina  326ppi

iPad mini4
7.9 インチ 1536×2048 Retina  326ppi


携帯ゲーム機画面サイズ / ppi リスト

Nintendo DSi LL (上画面)
4.20インチ 256× 192      76ppi

Nintendo 3DS (上画面)
3.53インチ 400× 240 WQVGA 132ppi

Nintendo 3DS LL (上画面)
4.88インチ 400× 240 WQVGA 96ppi

Nintendo Switch(携帯モード)
6.20インチ 1280× 720  HD 237ppi


モニター画面サイズ / ppi リスト

モニター/デスクトップ
24.0 インチ 1920×1080 FHD  92ppi

MacBook Pro
15.4 インチ 2880×1800 Retina 221ppi


TV画面サイズ / ppi リスト

ブラウン管TV
29.0 インチ  640× 480  SD  28ppi

ハイビジョンブラウン管TV
32.0 インチ 1280 × 720  HD  46ppi

フルHDTV
50.0 インチ 1920×1080 FHD/2K 44ppi

4K TV
60.0 インチ 3840×2160  4K  73ppi

8K TV
60.0 インチ 7680×4320  8K  147ppi


大きさと密度の移り変わり

2001年から3G携帯電話(フィーチャーフォン)がサービス開始されましたが、その当時の画面サイズは下記でした。

--------QVGA端末--------
・240×320 pixel (QVGA解像度)
・2.2インチ
・画像密度は182ppi
---------------------
※ppi (pixels per inch)
1インチ当たりの画素数
数値が大きいほど高精細


現在の端末と比較すると、
四角い大きな画素(ドット)がハッキリと認識できるもので、
いわゆる「8ビット的」な画質制約の中でサービスやその広告バナーを作っていました。

WEBページの容量制限(Web1ページ100KBまで等)もあり、質素倹約の時代だったのです。

その後は画面の高精細化と大型化が進み、「VGA解像度の端末」(QVGAの倍の解像度もつ端末)が登場することで、フィーチャーフォンは成熟期を向かえます。

-------- VGA端末 --------
・480×800 pixel (WVGA解像度)
・3.0インチ
・画像密度は311ppi
---------------------

そして、新しい市場/エクスペリエンスに向けて登場したのがスマートフォンです。

日本ではiPhoneやAndroid端末を発売開始した2010年あたりからスマートフォンの普及が始まりましたが、
大型化した画面と高細化した解像度を十分に処理できるスピードとOSの環境が整うまで時間がかかり、
特にAndroid初期端末の「モッサリ感」は苦い記憶として残っている方も多いのではないでしょうか。

-------- iPhone 6 --------
・750×1334 pixel (Retina HD)
・4.7インチ
・画像密度は326ppi
---------------------


最適視聴距離による体験

それでは本題である「画面サイズ/画素密度と目の距離に関係するユーザビリティと満足度」について「ブラウン管式の家庭用TV」の時代まで戻ってから考えてみます。

過去のブラウン管TVの場合、画面の高さの「5~7倍」離れて視聴する状態が「最適視聴距離」とされてきました。
「最適視聴距離」とは「1ドットを構成するRGB画素」が距離をとることで程よくぼやけ、溶け込み、画面全体が「綺麗な一枚絵」として視聴できる距離とされています。


液晶TV/ハイビジョンTVの場合は(共にフルHDレベルの条件)、ブラウン管(SD)と比較して高精細になった為、画面の高さの「3~4倍」の離れた距離で十分な絵が視聴出来るようになりました。


----最適視聴距離の基準設定要素----
・16:9のアスペクト比
・視野角33度
・視力1.0での走査線識別が出来ない距離
※ハイビジョンTV走査線数(1125本)
---------------------

過去のTVと比較して、液晶TVの画素密度(ppi)は「4K化」「8K化」など高精細化が進んでおります。
家庭環境において意識して見入る映画や鑑賞コンテンツについては、
視野角を踏まえたうえで今後も視聴距離が近くなっていく可能性があります。

それでは、そのTVよりも高精細な画素密度を持つスマートフォンの「最適視聴距離」はどうでしょうか。


スマホの最適視聴距離?

まず、スマートフォンについては「最適視聴距離」の概念は適切ではないと考えます。

理由として、手に持って使用するスマートフォンはTVなどの機器とは利用環境がそもそも異なり、目と端末の距離は常に意識せず一定に保たれています。
距離の違いは身体特徴のほか、近視、遠視、老眼など視力の個人差により出てきます。

目に負担の少ない利用距離の確認方法としては、今回詳しく紹介は行いませんが「ハーモン距離」と言われる距離測定の考え方もあります。

「画面の大きさ」「画素密度」の違いはユーザビリティと体験に大きな影響を与えます。
年齢によってはスマートフォンを使うこと自体が負担となり使いにくい場合もありますので、
自身の環境に適した使いやすい機器を選んでいくことが大切です。


年齢による距離の違い

下の表を見る限り、
「20歳」と「30歳」「45歳」の裸眼状態では文字を読める最適な距離がまず違うことが確認できます。


注目する部分は、「20歳」と「45歳」では距離の開きが3倍近い点です。
既に「45歳」の裸眼状態では、ピントが合わず「近く」が見えにくい為、
腕を伸ばし頭を引くといった、若年利用者とは異なる厳しい使用環境が待ち受けています。

素直に老眼鏡を受け入れる割合も少ないことから、
サービス設計する側は、利用者の大半をも占める興味深いこのターゲット層も踏まえてガイドラインを策定して、適切なサービス設計を行なうと良いのではないでしょうか。


最後に

モバイル端末の普及により目の疲労に拍車をかけているこの現代だからこそ、普段のデスクワークで使用するPCモニターの適切な配置が必要です。
幅広い利用者に向けてユーザビリティを考えていくのであれば、なお大切な心掛けなのではないでしょうか。

それでは次回も、サービスUX設計に関係した話題をします。
以上、デザインに関わっているデジマースのネモトでした。

アプリに必要なアイコンサイズ-Android編-

今回のテーマは、「アプリに必要なアイコンサイズ-Android編-」です。

前回私が作成した記事、「アプリに必要なアイコンサイズ-iOS編-」に続いて、Android端末のホーム画面に表示されるアイコンサイズについてご紹介したいと思います!
iOSのアイコンサイズも知りたいと言う方は、ぜひ「iOS編」の記事もご覧ください!


Androidのホームアイコンてどんな形?

さて、みなさんはAndroidのホームアイコンと言うと、どのような形を思い出しますか?四角でしょうか?丸でしょうか?

Androidのホームアイコンは、ベースの形に決まりはありません。視認性やコンセプトと整合性が取れていれば、自由に作ることが出来ます。
色合いだけでなく形も様々なので、ホーム画面が賑やかになり、見ていて楽しい気持ちになりますね!
また、アプリ開発者側としても、アプリの特徴や中身をより効果的に伝えることが出来ます。系統が同じアプリが並んだ場合も、より分かりやすい見た目である方がユーザーの意識が向きやすくなります。

私は各Android端末の「設定」アイコンが好きです。歯車や工具をモチーフとしていることが多く武骨な印象になりがちですが、ベースの形に決まりがないおかげで、モチーフの凹凸を活かした表現ができます。
端末やOSによってフラットだったりシャドウが効いていたり、アクセントカラーが入っていたりとシンプルながらも特徴が出ていて面白いです。

話が少し逸れてしまいましたが、ここからが本題です。自由に形が作れても、サイズには決まりがあります。
下記は、2016年12月16日時点のデータです。仕様に変更があった際は、都度都度ブログにまとめていきたいと思います!

それでは、以下がサイズ一覧です。


Androidホーム


Android番外編

いかがでしたでしょうか?

サイズ内に収まっていれば、形は自由です。iOSでは出来ないようなデザインに挑戦するも良し、AndroidとiOSでも形を統一してブランディング重視のデザインにするも良し。
アプリの良さが伝わるような素敵なアイコンを作ってみてください。

今後も、作成に必要なサイズの調査は行っていきますので、新情報が出た際は、随時こちらでまとめていきたいと思います。

iOSに必要なアイコンサイズは、下記のページにまとめてありますので、興味のある方は覗いてみてください!
アプリに必要なアイコンサイズ-iOS編-

それではまた!デザイン業務に関わっております、デジマースのコンでした。

アプリに必要なアイコンサイズ-iOS編-

こんにちは!
今回のテーマは、「アプリに必要なアイコンサイズ-iOS編-」です。(2018年8月更新)
ここで言うアイコンとは、iPhoneのホーム画面などで表示される角丸の付いた四角いアイコンのことです。

pic_161124_01

表示される場所は4ヵ所あります。上記の「アプリアイコン(App)」と、「スポットライト(Spotlight)」「設定(Settings)」「通知(Notification)」です。
「スポットライト」は、ホーム画面を左スワイプした時などに出てくる、検索画面の候補や結果として表示されます。「設定」は、設定アプリ内のリスト左側に表示されます。

pic_161124_02

初めてアプリを作る方は、サイズはいくつ?何個作ればいいの?そもそも1サイズじゃ駄目なの?と疑問が沢山かと思います。
そんな時の為に、iOSアプリに必要なアイコンのサイズをまとめました。

留意事項として、アイコンのサイズは、OSのバージョンアップのタイミングで変化する場合があります。あくまで、2018年8月時点のデータですのでご注意ください。
サイズが変わった際は、都度都度ブログにまとめていきたいと思います!

それでは、下記からサイズ一覧となります。


アイコンサイズ

iPhone

Xcode サイズ(px)
iPhone App
(iOS7-11)
180×180 (60×60 @3x)
120×120 (60×60 @2x)
Spotlight
(iOS7-11)
120×120 (40×40 @3x)
80×80 (40×40 @2x)
Spotlight
(iOS5,6)
Settings
(iOS5-11)
87×87 (29×29 @3x)
58×58 (29×29 @2x)
Notification
(iOS7-11)
60×60 (20×20 @3x)
40×40 (20×20 @2x)

iPad

Xcode サイズ(px)
iPad Pro App
(iOS9-11)
167×167 (83.5×83.5 @2x)
iPad App
(iOS7-11)
152×152 (76×76 @2x)
76×76 (76×76 @1x)
Spotlight
(iOS7-11)
80×80 (40×40 @2x)
40×40 (40×40 @1x)
Settings
(iOS5-11)
58×58 (29×29 @2x)
29×29 (29×29 @1x)
Notification
(iOS7-11)
40×40 (20×20 @2x)
20×20 (20×20 @1x)

App Store

Xcode サイズ(px)
App Store 1024×1024 (1024×1024 @1x)

※記載されている情報はXcode9向けのものとなっております。(2018年8月更新)


角丸について

iOS向けのアイコンは全て角が丸くなっています。
この角丸ですが、単純に半径の値を設定するだけでは表現出来ないApple独自の楕円になっています。
公式のテンプレートがありますので、アイコン作成の際はこちらを使う事をオススメします。

Human Interface Guidelines【Apple Design Resources】
※Apple公式の開発者向けページへ遷移しますので、テンプレートをダウンロードして下さい。


いかがでしたでしょうか?
コチラを確認しながらぜひ素敵なアイコンを作ってみて下さいね。

それではまた!デジマースのコンでした。