システム開発ブログ

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

参考までに主な機種の解像度を調べてみました。
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版のサイトを見ています。というのも、日頃見慣れたサイトはやはり見慣れた画面でみたいからです。ノミのように小さなリンクでもしっかりタッチ出来ますよ。

システム周りのお悩みを解決します

まずは無料ダウンロード

この記事に関連する記事の一覧


システム開発ブログ

Twitterでilovex_officialをフォローしてください

カテゴリー

以前の部署別ブログ

ページのトップ