|
HTML5＋CSS3 |
Smartphone編
|
| Lesson 4 | スマートフォンサイトの デザイン |
||||
| 制作・文 | 山岸ひとみ（株式会社Gaji-Labo） |
| スマートフォンらしさを生かしたデザインをするには、ガイドラインを押さえておくことが重要。iPhoneにもAndroidなど端末間の差異も意識して制作しよう。 |
各種ガイドラインをおさえる
実装はもちろんのこと、UI やビジュアルのデザインをする際にもガイドラインはおさえておきたい。主なものとして、iOS Human Interface Guidelines ※ 01、Android User Interface Guidelines【1】※ 02、Smartphone User Interface Guidelines※03などがある。
※01
iOS Human Interface Guidelines
http://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/MobileHIG.pdf
※02
Android User Interface Guidelines
http://developer.android.com/guide/practices/ui_guidelines/index.html
※03
Smartphone User Interface Guidelines
http://msdn.microsoft.com/en-us/library/ms854546.aspx
【1】Android User Interface Guidelinesには、アイコン制作例や制作に必要な情報が豊富に掲載されている
※01
iOS Human Interface Guidelines
http://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/MobileHIG.pdf
※02
Android User Interface Guidelines
http://developer.android.com/guide/practices/ui_guidelines/index.html
※03
Smartphone User Interface Guidelines
http://msdn.microsoft.com/en-us/library/ms854546.aspx
【1】Android User Interface Guidelinesには、アイコン制作例や制作に必要な情報が豊富に掲載されている
基本はリキッドレイアウト
スマートフォンでは縦向きの画面表示（ポートレート）、横向きの画面表示（ランドスケープ）が存在する。何か特別な意図がない限り、その両方の横幅に対応で きるようにリキッドデザインを採用するのが普通だ【2】【3】。
【2】検索サイトNAVERをポートレートで表示した例
【3】検索サイトNAVERをランドスケープで表示した例。検索フォームも情報のエリアも画面サイズに合わせて伸縮している
【2】検索サイトNAVERをポートレートで表示した例
【3】検索サイトNAVERをランドスケープで表示した例。検索フォームも情報のエリアも画面サイズに合わせて伸縮している
テキスト＋CSS3で表現
画像装飾はできる限り減らして、CSS3での表現を前提にデザインしたい。各端末間の解像度の違いに煩わされることが減るし、表示速度といったパフォーマンスの面でもメリットが大きい。そのためには、CSS3でどんな表現ができるのかを知っておく必要がある。最低限、角丸／グラデーション／テキストシャドウ／ドロップシャドウあたりは押さえておこう【4】【5】【6】【7】。
【4】画像でデザインしたアイコンとCSSで作成したものを並べた画面キャプチャ
【5】サンプルファイル（index.html）
【6】index.html の中で読み込んでいる画像ファイル
【7】Fireworks で作成した元ファイル
【4】画像でデザインしたアイコンとCSSで作成したものを並べた画面キャプチャ
【5】サンプルファイル（index.html）
【6】index.html の中で読み込んでいる画像ファイル
【7】Fireworks で作成した元ファイル
各種ガイドラインをおさえる
コントラストを十分に取る
スマートフォンは持ち歩きによる利用が前提なので、どこで使用されるかはわからない。どんな環境でも見やすさを担保するために、光の加減で見えなくなる ような文字色や淡すぎる装飾は避けたほうが無難だ。
部品をシンプルに分解できる
醍醐味
表示領域が少ないので、余白を生かした表現には制限がある。できるだけ情報を多く見せ、なおかつ情報の切れ目がわかりやすいデザインにするために、罫線やグラデーションを上手に使いたい【8】【9】【10】【11】。
【8】サンプルファイルの画面キャプチャ
【9】サンプルファイル
【10】情報量の多いポンパレでは、情報の余白をできるだけ取らずに罫線 でセクションを区切っている
【11】日産のサイトでは、グラデーションを効果的に使ってメニューの区切りを表現している
【8】サンプルファイルの画面キャプチャ
【9】サンプルファイル
【10】情報量の多いポンパレでは、情報の余白をできるだけ取らずに罫線 でセクションを区切っている
【11】日産のサイトでは、グラデーションを効果的に使ってメニューの区切りを表現している
リンクであることを明示する
スマートフォンではマウスオーバーが使えないので、見ただけでリンクとわかるようにデザインする必要がある。ナビゲーションにはボタンUIなどをうまく利用するなどして、リンクが見落とされることを防ごう【12】【13】【14】 。
【12】サンプルファイルの画面キャプチャ
【13】サンプルファイル（index.html）
【14】BEAMSのサイトでは、iPhoneのメニューと同じUIを採用することによってリンクであることを明示している
【12】サンプルファイルの画面キャプチャ
【13】サンプルファイル（index.html）
【14】BEAMSのサイトでは、iPhoneのメニューと同じUIを採用することによってリンクであることを明示している
各デバイス標準のUIパーツを
利用する
フォームなどの部品は無理に装飾せず、各デバイス標準のUI※04を利用するのが 望ましい。特に異なるプラットフォームに対する実装をワンソースで実現する場合、「できること」と「できないこと」が顕著に現れてくる。標準UIパーツを取り入れれば、デザインと実装の間の矛盾を限りなく減らすことができ、トラブルが少なくなる【15】【16】。また、ユーザーが見慣れ たUIを使用することで使いやすさの向上も期待できる。
※04
参考URL
iPhone 4 GUI PSD (Retina Display) | Teehan+Lax
http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/
Google Android GUI PSD | BrumBrum
http://chrisbrummel.com/google-android-guipsd
【15】iPhone UI パーツの例（iPhone 4 GUI PSD）
【16】Android UI パーツの例（Google Android GUI PSD）
※04
参考URL
iPhone 4 GUI PSD (Retina Display) | Teehan+Lax
http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/
Google Android GUI PSD | BrumBrum
http://chrisbrummel.com/google-android-guipsd
【15】iPhone UI パーツの例（iPhone 4 GUI PSD）
【16】Android UI パーツの例（Google Android GUI PSD）
＞＞目次に戻る
