売れる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メルマガ作成術
| 「デザインハック」コーナーへ |
- 5分で絶対に分かる、「Webマーケティング」とは (2010/7/27)
その概要や、「Webマーケター」の役割、Webマーケティングを行う際の流れ、歴史、ツール、PCとケータイの違いなどを5分で解説 - Windows 7でも「おばかアプリ選手権」は大爆笑でした (2010/7/26)
ARや3D、脳波センサ、Wiiボード、マルチタッチなど、今回も個性的なアプリがおばか度を競いあった。極め付けは貧乏ゆすりセンサで高橋名人が連射対決!? - Xcode/Interface BuilderでUI設計+イベント処理 (2010/7/23)
BMI計算アプリをサンプルに、1つのiPhoneアプリが完成する過程を、デザインとコーディングの仕方を交えて解説します - Flashで怒涛のごときイベント処理を捌きまくる3技 (2010/7/22)
インタラクティブコンテンツ制作に必須の「イベント」の仕組みを解説し、具体的な高速化の技をサンプルを交えながら3つ紹介
|
|
スキルアップ/キャリアアップ(JOB@IT)
スポンサーからのお知らせ
お勧め求人情報













