売れるiPad/iPhoneアプリのための
デザイン必須知識
面白法人カヤック 意匠部軍司 奈水
2010/2/10
売り上げを左右する以前に、デザインが原因でアップルの審査落ちも起こり得ます。基礎データや注意点、素材サイトなど役立つ情報満載!
iPad/iPhoneアプリのデザインは、不要? 重要?
- - PR -
2009年11月に登録数が10万本を超え、毎日増え続けるiPhoneアプリ(参考:AppleのApp Store、登録アプリが10万本を突破)。「そろそろ作り始めてみたいけど、どこから手を出せばいいの?」というデザイナの方もいらっしゃるのではないでしょうか。
カヤック意匠部では、ネタアプリから本格的な楽器アプリまで、多くのアプリをリリースしています。そこで今回は、その経験を生かして、iPad/iPhoneアプリ制作を始めるに当たってデザイナが押さえておくべき基本的なポイントを、まとめて紹介します!
■ 「デザインを一切しなくても、アプリは作れる」
と、いきなりですが、デザイナがいなくてもアプリは作れます。アップルが提供している「iPhone SDK」という開発キットの中の「InterfaceBuilder」ツールを見ると分かるように、そこには標準的なメニューやボタン、スライドバーなどの素材が含まれており、それらをレイアウトするだけでも、一応のアプリはできてしまいます。
![]() |
| 「InterfaceBuilder」には見たことがある部品がずらり |
iPhone SDKはMac OS X専用ですが、ユーザー登録さえすれば無料で使うことができます。開発キットは、基本的にはプログラマ/エンジニアが使うものですが、デザイナでも、標準パーツの種類を確認したりすることで、アプリの全体像を想像できるので、一度触ってみることをお勧めします。
■ 人気アプリはデザイン重視?!
iPhoneやApp Storeをちょっと覗いてみれば気付くと思いますが、iPhoneアプリでは機能とともにデザインも非常に重要視されています。時計やカレンダーなど、多くの本数が出ているジャンルでは特に、ほかより優れたデザインであることが購入の決め手になることも少なくありません。
![]() |
| 時計ジャンルでロングセラーの「LCD Clock」。同じ時計でも、デザインがステキだと断然ダウンロードしたくなりますよね! |
準備をしよう! デザインに使えるiPhoneアプリも紹介
それでは、アプリデザインの準備を始めましょう。使うソフトは、アルファ値、つまり画像の透明度が扱えるグラフィックソフトであれば、PhotoshopやIllustrator、Fireworksなど何でもOKです。
■ iPhoneアプリの標準フォント
iPhone OSに標準で入っているフォントを覚えておくと、無駄に画像を使わなくて済むことがあります。何も指定しなければ、英字はHelvetica、日本語はヒラギノ角ゴ ProN W3がデフォルトです。開発環境に、これらのフォントを用意しておくと、カンプを制作するとき完成イメージに近いものを制作できます
![]() |
| 英字はHelvetica、日本語はヒラギノ角ゴ ProN W3が、デバイスフォント |
ほかにも、英字フォントなどさまざまな言語のフォントが数十種類用意されています。それらを一覧できるアプリもあるので、使ってみてもいいでしょう。
![]() |
| iPhone内のフォントを一覧できる便利なアプリ「Cedille」 |
■ 配色に便利なiPhoneアプリ
パソコンのモニタとiPhoneの画面では、表示する色が若干異なる場合があります。色にこだわりたい人は、iPhone上で色情報を視認できるアプリなどを使い、調整しながら配色していくことをお勧めします。
![]() |
| PANTONEを使い、色の確認できる美麗なアプリ「MyPantone」 |
| 1/5 |
| INDEX | ||
| 一撃デザインの種明かし(10) 売れるiPad/iPhoneアプリのためのデザイン必須知識 |
||
| Page1 iPad/iPhoneアプリのデザインは、不要? 重要? 準備をしよう! デザインに使えるiPhoneアプリも紹介 |
||
| Page2 要チェック! iPhone画面の基礎知識まとめ |
||
| Page3 初心者でもできる! iPhoneアプリ画面の制作テクニック |
||
| Page4 ショック! デザインが原因で審査落ち!? iPhoneだから、気を付けたい。5つのチェックポイント |
||
| Page5 ここで差が付く! アプリ以外で必要な素材 iPadやFlash CS5でアプリ制作はもっと楽しくなる! |
||
一撃デザインの種明かし バックナンバー 連載インデックスへ»
- 第1回 一撃必笑!名物『漫画名刺』の作り方!
- 第2回 ケータイFlashでさくさく動くIllustratorデータの作り方
- 第3回 Google 3Dを使って、1日でゲームグラフィックを制作!
- 第4回 常識破りの携帯Flashアニメーション術
- 第5回 最旬!世界の制作会社コーポレートサイト徹底比較!
- 第6回 いまからでも遅くない! ケータイデザインの基礎固め
- 第7回 アイデア力を高める! ビジュアルブレストのススメ
- 第8回 一攫千金! デザイナのためのmixiアプリ制作のコツ
- 第9回 師走を乗り切れ! 超速イケてる年賀状素材作り
- 第10回 売れるiPad/iPhoneアプリのためのデザイン必須知識
- 第11回 新人Webデザイナに贈る!美人/タレント素材の創り方
- 第12回 誰でも作れる! “崩れない”HTMLメルマガ作成術
- 第13回 デザイナは要注目! 明日から語れるHTML5&CSS3
- 第14回 スマートフォンアプリデザインに役立つ基礎のまとめ!
- 第15回 HTML5+CSS3時代のプログレッシブ・エンハンスメント
- 第16回 いますぐ使えるCSS3テクニック集 コピペ用サンプル付
| 「デザインハック」コーナーへ |
TechTargetジャパン
- 家電のUIになるブラウザ (2012/2/3)
未来の家電はインターネットに接続でき、ブラウザが内蔵されてくる。家電にブラウザが載ったらどうなるか? 未来のホームネットワークを想像しよう - 「汎用のUI技術」として広がるHTML5 (2012/2/2)
すさまじい勢いで成長しているHTML5を中心としたオープンなWebプラットフォーム。HTML5やAPI、Webブラウザのアップデート情報をお伝えする - ビヨンド・クールジャパン!? (2012/1/27)
コンテンツという文化力と、ものづくりという技術力を掛け合わせる。両方を国内に持ち合わせている国は多くない。チャンスなのだ - Qt5で10億人ユーザーへ、OSSコミュニティ化で健在に (2012/1/20)
ノキアから売却されてQtはどうなったのか? 弱体化してしまうのではとの心配をよそにダウンロード数は飛躍的に伸びている
|
|





