社内のスマートフォン（以下スマホ）向けのデザインガイドラインから、画面レイアウトデザインに絞って紹介します。
目次
ガイドライン化の目的
ガイドライン化によるメリットを重視しない場合は意味を持ちませんが、テンプレートとして活用することで、サービスの立ち上げを短縮出来ます。
ポイントとして以下の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（スタイルシート）ファイルを設け、その中に以下の記述をします。
****************************************
★★★スタイルシートの記述例★★★
html {
font-size:62.5%; /*10px基準*/
}
p.XXX {
font-size: 10px; font-size: 1.0rem; /*最小*/
}
****************************************
この設定を行うことで「rem」のフォント設定時に
1.0rem → 10px
という想定と扱いがしやすい明確な10px基準での大きさの設定がされ、
グラフィックデザイナーが「画面イメージ」をIllustratorやPhotoShopで作成する際に、
ピクセル数単位でフォントサイズの作業が進められます。
それによりコーダーとの組込み時の数値の乖離が少なくなるので有益です。
フォントサイズパターンのガイドライン
フォントサイズが10px単位で扱えるようになったので、ページ内で使用する用途別文字サイズを4種類に絞って設定してしまいます。
これにより都度フォントサイズの設定に時間を取られることがなくなり、各項目ごとに決められたフォントサイズを割り当てることが出来るようになりました。
丁度良い大きさのメリハリをつけた4サイズが下記となります↓
実際のフォントの大きさの違い具合が確認出来るでしょうか。
見出しは大きく、
通常説明文は程良く、
利用者の便益がないレギュレーション上必要な表記文などは必要最低限に小さく設定してます。
フォントサイズはガイドラインとして設定はしてますが、幼児やシルバー世代などにターゲットする場合は見やすくい大きさのルール設定が行われる必要はあります。
行間の設定
行間については表示されるブラウザのデフォルトCSSなど端末依存でのブレが発生しますが、
文字サイズの1.4倍以上～1.7倍まで空ける(推奨)
で設定されていればテキストが読みやすい間隔が確保でき、それ以下になると詰まった読みにくい文章になってしまいます。
****************************************
★★★スタイルシートの記述例★★★
body {
line-height: 1.4; /*文字行間設定*/
}
****************************************
左右の余白
左右画面いっぱいまで文字が置かれていると文章体が把握しづらいく読みにくいため、適度な余白が必要です。
ガイドラインでは表示幅全体を100％とした場合の設定を行うことで端末依存に対応できます。
・テキストエリアの両サイドに、表示横幅の5％程度を左右にそれぞれ設定。
****************************************
★★★スタイルシートの記述例★★★
p.XXX {
margin:0 5% 0 5%; /*テキスト横空白設定*/
}
p.XXX {
width:90%; /*テキスト横エリア横サイズ*/
margin:0 auto 0 auto; /*エリアのセンター置き*/
}
****************************************
以上がフォントサイズまわりの設定となります。
最後に「高さ」の余白設定
ページレイアウトガイドラインの最後の設定は、テキストや画像などの要素間余白の高さです。
こちらの設定も絶対的なものではなく、ページ構成の作業を進める上でとりあえずこの値で設定しておけば「おおむね問題ない」値です。
この工程に多くの時間が使えるスケジュールがあれば厳密に設定することは効果的ではあります。
以上のように、サイズや高さや間隔などをガイドライン化することで、実績あるページ設計が効率的に組み込むことができ多くのメリットを生みます。
効率化によって確保できた時間を有効活用してアドバンテージを増やしていきましょう。
次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。
他の記事をさがす ⇒ 記事一覧へ