スマートフォン向けデザイン

橋本 (2011年6月 2日 10:12)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / Webサイト構築・Web戦略

こんにちワンダフル！デザインチームの橋本です。
携帯各社から夏の新モデルの発表もあり、スマートフォン市場も熱くなっていますね。
当社でも最近はスマートフォン向けのコンテンツ作成のお問い合せも多くなってきました。
ただ、ひと口にフマートフォンといっても、端末の画面のサイズだけをとっても色々でデザイナーの悩みの種でもあります。

参考までに主な機種の解像度を調べてみました。
iPhone3G/3GS　320×480px
iPhone4　640×960px
iPad　768×1024px
SoftBank GALAPAGOS 005SH　480×800px
XperiaTM arc SO-01C　480×854px
GALAXY S SC-02B　480×800px
docomo GALAXY Tab SC-01C　600×1024px
au IS03　640×960px
au REGZA Phone IS04　480×854px

ブラウザ上の縦方向の表示領域はこれよりも狭くなります。
そのため、デザインを作成する際には、実際のイメージに近づけるためにまずスクリーンショットを用意します。
・iPhoneの場合
　Safariを起動して、新規画面を開く。
　本体の上部右にあるスリープボタンを押しながら、ホームボタンを押す。
　そのままメールで添付する、またはPCと同期しても良いです。

Android 開発にはエミュレーターも用意されています。
　エミュレーター「Android SDK」インストールサイト
　http://developer.android.com/sdk/index.html

Dreamweaver の拡張機能で「iPhone site extension for Dreamweaver CS4/5」というのもあります。
　提供：株式会社エイチツーオー・スペース
　ダウンロードサイト
　http://h2o-space.com/web/product/iphone_dw/

とてもありがたい事に、iPhone用のUIパーツをまとめたPSDデータをダウンロード出来るサイトもあります。多くのデザイナーさんがお世話になっているのではないでしょうか？
iphone 3用
　http://www.teehanlax.com/blog/iphone-gui-psd-30/
　http://www.teehanlax.com/blog/iphone-gui-psd/
iphone 4用
　http://www.teehanlax.com/blog/iphone-4-gui-psd-retina-display/
ipad用
　http://www.teehanlax.com/blog/ipad-gui-psd/
　http://www.teehanlax.com/blog/ipad-gui-psd-version-2/

やはり市場先駆けのiphone用の情報が多いのは仕方ないですが、Android のUIパターンを解説しているサイトもあります。
Android Patterns
　http://www.androidpatterns.com/

携帯サイトも含め、実際に端末を見ながら作業出来ないのが難しいところですが、PC用とは違った視点で使い勝手を考えていく楽しさがありますね。

私自身は、iPhoneで普通にPC版のサイトを見ています。というのも、日頃見慣れたサイトはやはり見慣れた画面でみたいからです。ノミのように小さなリンクでもしっかりタッチ出来ますよ。

Movable Typeを使用したWebサイト構築

スマートフォン向けデザイン

システム開発のアイロベックスは、創業23年を迎える
プロフェッショナル集団です。