HTML5+CSS3 |
Smartphone編
|
Lesson 4 | スマートフォンサイトの デザイン |
||||
制作・文 | 山岸ひとみ(株式会社Gaji-Labo) |
スマートフォンらしさを生かしたデザインをするには、ガイドラインを押さえておくことが重要。iPhoneにもAndroidなど端末間の差異も意識して制作しよう。 |
各種ガイドラインをおさえる
※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】検索サイトNAVERをポートレートで表示した例
【3】検索サイトNAVERをランドスケープで表示した例。検索フォームも情報のエリアも画面サイズに合わせて伸縮している
テキスト+CSS3で表現
【4】画像でデザインしたアイコンとCSSで作成したものを並べた画面キャプチャ
【5】サンプルファイル(index.html)
【6】index.html の中で読み込んでいる画像ファイル
【7】Fireworks で作成した元ファイル
各種ガイドラインをおさえる
コントラストを十分に取る
部品をシンプルに分解できる
醍醐味
【8】サンプルファイルの画面キャプチャ
【9】サンプルファイル
【10】情報量の多いポンパレでは、情報の余白をできるだけ取らずに罫線 でセクションを区切っている
【11】日産のサイトでは、グラデーションを効果的に使ってメニューの区切りを表現している
リンクであることを明示する
【12】サンプルファイルの画面キャプチャ
【13】サンプルファイル(index.html)
【14】BEAMSのサイトでは、iPhoneのメニューと同じUIを採用することによってリンクであることを明示している
各デバイス標準の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)
>>目次に戻る