スマホアプリの作り方【超まとめ】
UI編:スマホアプリのデザイン/グラフィック描画に役立つ記事39選


@IT編集部
2012/1/6
2012/12/18 改訂

iOS(iPhone/iPad/iPod touch)AndroidWindows Phoneなど、さまざまなスマートフォンのプラットフォームのアプリを作るための@IT記事のまとめです。今後、順次更新・追加していきます。

 アプリのUI(ユーザーインターフェイス、見た目)をデザインするのに役立つレイアウトに関する記事、2D/3Dグラフィックを描画したり、アニメーションさせるのに役立つ記事としては、以下をお勧めします。


 

UIデザイン・レイアウトに役立つ記事17選

 画面サイズやデザイン/レイアウトの仕方を知りましょう。基礎知識記事や、各OSのUIの違いやデザインの仕方が分かる記事をまとめました。特に、Androidは画面の大きさの違いをいかに吸収するかが課題でしたが、FragmentsやCompatibility packageを学ぶと役立つと思います。

基礎知識


スマートフォンアプリデザインに役立つ基礎のまとめ!
一撃デザインの種明かし(14) iPhone/AndroidアプリのUIデザインに困っている方のために、アプリの事例や、作るときのコツ、画面サイズのデータ、参考リンクなどを紹介
タッチUXを実現する7つのポイント
HTML5アプリのタッチUX(1) 
思ったより指はじっとしていない。タッチスクリーン上のUIの特徴と癖を分析して、タッチUXを実現する7つのポイントを紹介する
HTML5+UX」フ ォーラム 2012/10/17

Androidアプリのレイアウト・画面部品


Androidアプリの使いやすさを左右する5つのレイアウト
Androidで動く携帯Javaアプリ作成入門(5) 
カッコいいウィジェットを配置するにはAndroidのレイアウトという仕組みを利用します。分かりやすさや入力しやすさも追究しましょう
Smart & Social」フォーラム 2009/4/9
XMLレイアウトでAndroidアプリに“設定画面”を追加
Androidで動く携帯Javaアプリ作成入門(19) 
アプリには欠かせない設定画面について、基になるクラスや使えるコンポーネント、XMLによるレイアウトの仕方を解説します
Smart & Social」フォーラム 2010/8/19
簡単でワクワクするAndroidウィジェット10連発!
Androidで動く携帯Javaアプリ作成入門(4) 
携帯Javaアプリの見た目はiPhoneに比べてカッコ悪いなぁ、と思っている方へ。同じJavaでもAndroidだとここまで違うんです!
Smart & Social」フォーラム 2009/3/6
Draw 9-patchでビューの飾りワクを作る
Android Tips(5) 
TextViewやLinearLayoutなどのビューで、任意の画像を背景として設定・利用することができる。また、Android SDKに含まれている「Draw 9-patch」ツールを使うことで、ビューやレイアウトの飾りワクとして使用可能な画像を作成できる

スマホとタブレットなどで変わるAndroidアプリの画面の大きさの違いを解決


Androidの画面の大きさの違いを解決するFragments
Androidで動く携帯Javaアプリ作成入門(24)
 スマホ向けの2.x系とタブレット向けの3.x系の違いを解決すべく、3.0から追加された新機能「Fragments」について解説します
Smart & Social」フォーラム 2011/8/23
Compatibility packageで2.x系でもマルチサイズ対応
Androidで動く携帯Javaアプリ作成入門(25)
 画面の大きさの違いを吸収するべく、Android 3.0から追加された新機能「Fragments」をスマホ向けの2.x系でも使う方法を解説
Smart & Social」フォーラム 2011/9/15

App Inventor for Android


App Inventor for Androidで使う基本的な部品を知る
App Inventorでアプリ開発はどこまでできるのか(2) デザイナで使える画面部品や、イベントや変数、ロジックを決めるブロックエディタの部品の概要や使い方を説明する
Smart & Social」フォーラム 2011/4/15

iOS


売れるiPad/iPhoneアプリのためのデザイン必須知識
一撃デザインの種明かし(10) 売り上げを左右する以前に、デザインが原因でアップルの審査落ちも起こり得ます。基礎データや注意点、素材サイトなど役立つ情報満載!
iPhone向けWebアプリを作ろう
Safari Web Content Guide for iPhoneを読み解く iPhone/iPod touch上のWebブラウザのSafariで動くWebアプリを作成し、UIを最適化するコツを紹介します
Smart & Social」フォーラム 2008/5/29
Xcode/Interface BuilderでUI設計+イベント処理
SDKで始めるiPad/iPhoneアプリ開発の勘所(2) BMI計算アプリをサンプルに、1つのiPhoneアプリが完成する過程を、デザインとコーディングの仕方を交えて解説します
Smart & Social」フォーラム 2010/7/23
タタミ12畳分の領域を「さあどうぞ、ご自由に」
ものになるモノ、ならないモノ(50)
 「7notes」に続けてMetaMoJiが出した手書きノートアプリ「NoteAnytime」。いったいどんなことができるのか試してみた
Master of IP Network」フォーラム 2012/11/30
「iPhone、開発、すべての極意」=44
晴読雨読@エンジニアライフ 
美しく設計されたiPhoneアプリには「44×44ピクセルのリズム」が生まれる。アプリ開発者が知っておきたい「デザイン」を学ぼう

Windows Phone


iOS/AndroidとWindows PhoneのUI、ここまで違う!
Silverlightベースで作るWP7アプリ開発入門(1) 
従来のスマホと大きく違う世界観を持つWindows Phone 7。UIデザインの特徴を解説しアプリの開発環境を構築します
Smart & Social」フォーラム 2011/7/8
Windows Phoneの色使いとTileをアプリに生かせ!
Silverlightベースで作るWP7アプリ開発入門(2)
 ついに日本でもauから発売が決まったWindows Phone。最大の特徴の1つである「Tile」UIや色使いについて解説します
Smart & Social」フォーラム 2011/7/27
PanoramaでWindows Phoneならではの横スクロール
Silverlightベースで作るWP7アプリ開発入門(3)
 本日から日本で端末発売が開始となったWindows Phone 7.5 Mango。2大特徴PanoramaとPivotについて解説します
Smart & Social」フォーラム 2011/8/25

グラフィック・アニメーションなどUI描画関連記事10選

 グラフィック描画やアニメーションを使うための記事を各OSごとにまとめました。主に、ゲームアプリやペイント系アプリを作ったり、視覚的に映えるエフェクト(画面効果)をアプリに加えたりするのに役立つと思います。

Android


Androidアプリで“アニメーション”するための基礎知識
Androidで動く携帯Javaアプリ作成入門(20) 
さまざまなアニメーション機能のサンプル動画を表示し、実装の仕方やオプション、設定ファイル、使う際の落とし穴を解説します
Smart & Social」フォーラム 2010/9/15
アニメーションでAndroidに独創的な画面エフェクトを
Androidで動く携帯Javaアプリ作成入門(21) 
前回紹介したアニメーション機能の実装の仕方を基に画面遷移時にアニメーションを駆使したエフェクトを追加する方法を解説
Smart & Social」フォーラム 2010/12/22
Android 2.1の新機能で作る、美しく燃える“待ち受け”
Androidで動く携帯Javaアプリ作成入門(14) 
新しく追加された、動く壁紙「Live Wallpaper」機能のサンプル動画を表示し、構成、設定ファイル、実装の仕方を解説します
Smart & Social」フォーラム 2010/2/24
Androidアプリでマルチメディアを扱うための基礎知識
Androidで動く携帯Javaアプリ作成入門(30)
 音楽/動画ファイルを扱うMediaPlayerクラスの状態遷移や基本的な使い方、リモート操作、ロック画面からの制御などを解説
Smart & Social」フォーラム 2012/3/28
Androidアプリ開発におけるTweenアニメーション
Android Tips(13) 
今回は、Androidアプリケーション開発におけるアニメーションについて紹介する。まずは、Tweenアニメーションの基本を学ぼう
Androidアプリ開発におけるFrameアニメーション
Android Tips(14) 
前回のTweenアニメーションに引き続き、Androidアプリケーション開発におけるアニメーションについて解説する。今回はFrameアニメーションの基礎だ

iOS


Core Graphicsで作るiPad向けお絵描きアプリの基礎
SDKで始めるiPad/iPhoneアプリ開発の勘所(5) 画面を指でなぞって絵を描くiPad用アプリ作成の基本や、Core Graphicsフレームワークの便利なAPIを解説します
Smart & Social」フォーラム 2010/12/15
PerfumeのモーションデータをiPhoneアプリで動かす
Retinaに映える! iOS美麗アプリ制作入門(2) 先日GitHubで公開されたダンスのデータを使うopenFrameworks製のサンプルアプリをiOS用にして動かす方法を解説します
Smart & Social」フォーラム 2012/4/3

Windows Phone


[応用編]RSSリーダーWindows Phoneアプリの作り方
Silverlightベースで作るWP7アプリ開発入門(6)
 これまでの連載で学んだMetro、Panorama、Pivot、ビヘイビアなどを駆使して@ITのRSSを表示するアプリの作り方を解説
Smart & Social」フォーラム 2011/10/28

PlayN


PlayNアプリでグラフィックや入力情報を使うには
PlayNでクロスプラットフォームのゲーム開発(2)
 線や図形、画像、テキストを表示して動かす方法やキーボード、マウス/スマホのタッチによる入力情報の取得方法を解説
Smart & Social」フォーラム 2012/8/16

グラフィック描画高速化・チューニング記事4選

 グラフィック描画を速くするには、さまざまなテクニックがあります。特にAndroidはJNI(Java Native Interface)を理解することで描画を速くすることができます。

Android


SurfaceViewならAndroidで高速描画ゲームが作れる
Androidで動く携帯Javaアプリ作成入門(12) 
Androidのグラフィックスに関する重要なポイントや、SurfaceViewでUIイベントを駆使した描画と背景を透過させる方法を解説
Smart & Social」フォーラム 2009/12/8
Android NDKでJNIを使用してアプリを高速化するには
Androidで動く携帯Javaアプリ作成入門(15) 
C/C++やOpenGL ESといったネイティブコードを使うためのNDKとJNIを紹介し、その使い方や注意点を徹底解説します
Smart & Social」フォーラム 2010/3/17
Androidアプリで高速描画チューニングをするコツ
インタビュー特集:Google直伝!(1) Googleのさまざまなサービスを使いこなすコツをグーグル担当者に聞くインタビュー。初回はいま注目のAndroidについて
HTML5+UX」フ ォーラム 2009/4/21
UnityでAndroidの機能を拡張する2つの手法とは
Unityで楽々スマホ用3Dアプリ開発入門(2) 
JNIでUnity側からJavaクラスを呼び出す方法や、Unityを実行しているActivity自体をカスタマイズする方法を解説します
Smart & Social」フォーラム 2011/7/4

OpenGL ES関連の記事5選

 スマホアプリのグラフィック描画を速くしたり、より精細なグラフィックを描画したりするにはOpenGL ES(Open Graphics Library for Embedded Systems)を学ぶ必要があります。以下の記事では、OpenGL ESを学んだり、OpenGL ESを基にしたグラフィック描画ツールを学んだりするのに役立つと思います。BREW(Binary Runtime Environment for Wireless)というプラットフォームを基にした記事が多いですが、他のプラットフォームでも応用できると思います。Unityは、さまざまなプラットフォームで使えますが、MascotCapsuleはeruptionという描画エンジンを搭載した端末(いくつかのAndroid搭載端末ですでにある)のみでしか使えません。

OpenGL ESプログラミング


はじめよう3D描画、BREWでOpenGL ESプログラミング
BREWアプリケーション開発入門(6)
 OpenGL ESプログラミングの準備とEGLインターフェイスの設定を行い、OpenGL ESによる3Dグラフィックス描画にチャレンジする
OpenGL ESプログラミングで本格3D描画体験
BREWアプリケーション開発入門(7)
 OpenGL ESによる3Dグラフィックス描画プログラミングに挑戦! 投影、ライトなどの各種要素を理解し、立方体の描画を行ってみよう
3DモデルがアニメーションするARをOpenGL ESで作る
モバイルARアプリ開発“超”入門(4)
 「両想いのAR」の第一歩として「モバイルデバイスのタッチ操作に対応してテニスボールがバウンドするAR」をAndARを用いて実装します
Smart & Social」フォーラム 2011/12/21

OpenGL ESプログラミングを楽にするツール


OpenGL ESが大変な3Dアプリ開発を楽にするUnity
ここが大変だよiPhone開発(最終回) iPhoneゲーム開発に必須のOpenGL ES。そのコーディングに手こずっている方に有用なツールを紹介し簡単なサンプルを作成します
Smart & Social」フォーラム 2010/1/27
MascotCapsuleによる3Dグラフィックスプログラミング
BREWアプリケーション開発入門(8)
 エイチアイ社の組み込み機器向け3D描画エンジン「MascotCapsule」を利用した3Dグラフィックスプログラミングについて詳しく解説する

画像の認識・参照・編集に関する記事3選

 画像を認識・参照・編集するための記事を各OSごとにまとめました。UI作りに欠かせない画像を表示したり、エフェクト(画面効果)を加えたり、画像を認識して新たな処理を加えたりするのに役立つと思います。

Android


ARに使えるOpenCVで作る画像認識Androidアプリ
モバイルARアプリ開発“超”入門(終)
 オープンソースのコンピュータヴィジョンライブラリ「OpenCV」を利用した画像認識アプリの作成について簡単なサンプルを交え解説
Smart & Social」フォーラム 2012/3/1

iOS


iOS 4の新機能13選&AssetsLibraryで作る画像ビューア
SDKで始めるiPad/iPhoneアプリ開発の勘所(終) iOS 4 で追加された主な機能をまとめておさらいし、お絵描きiPadアプリに画像ビューア機能を追加する方法を解説
Smart & Social」フォーラム 2011/4/20
画像をタッチ編集! アートなiPhoneカメラアプリを作る
Retinaに映える! iOS美麗アプリ制作入門(3) カメラの起動やピクセル情報の扱いが簡単なopenFrameworksを使ってタッチやドラッグで画像の色見を変えるアプリを作ろう
Smart & Social」フォーラム 2012/5/8

UI編以外のまとめは順次追加

 UIデザインとグラフィック/アニメーションの技術が身に付いたら、基本編を含めて以下のまとめを参照してください。今後、順次公開していきます。


 


 Smart&Social フォーラム トップページへ


Smart & Social フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Smart & Social 記事ランキング

本日 月間