UI編：スマホアプリのデザイン／グラフィック描画に役立つ記事39選

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

 

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

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

■ 基礎知識

スマートフォンアプリデザインに役立つ基礎のまとめ！ 一撃デザインの種明かし（14）　iPhone／AndroidアプリのUIデザインに困っている方のために、アプリの事例や、作るときのコツ、画面サイズのデータ、参考リンクなどを紹介 デザインハック ＜ HTML5＋UX 2011/4/13

タッチ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」ツールを使うことで、ビューやレイアウトの飾りワクとして使用可能な画像を作成できる ＠IT MONOist > 組み込み開発 2012/1/27

■ スマホとタブレットなどで変わる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）　売り上げを左右する以前に、デザインが原因でアップルの審査落ちも起こり得ます。基礎データや注意点、素材サイトなど役立つ情報満載！ デザインハック ＜ HTML5＋UX 2010/2/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ピクセルのリズム」が生まれる。アプリ開発者が知っておきたい「デザイン」を学ぼう 自分戦略研究所 >エンジニアライフ 2011/9/27

■ 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アニメーションの基本を学ぼう ＠IT MONOist > 組み込み開発 2012/5/11

Androidアプリ開発におけるFrameアニメーション Android Tips（14）　前回のTweenアニメーションに引き続き、Androidアプリケーション開発におけるアニメーションについて解説する。今回はFrameアニメーションの基礎だ ＠IT MONOist > 組み込み開発 2012/5/21

□ 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グラフィックス描画にチャレンジする MONOist > 組み込み開発 2010/1/8

OpenGL ESプログラミングで本格3D描画体験 BREWアプリケーション開発入門（7）　OpenGL ESによる3Dグラフィックス描画プログラミングに挑戦！ 投影、ライトなどの各種要素を理解し、立方体の描画を行ってみよう MONOist > 組み込み開発 2010/2/23

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グラフィックスプログラミングについて詳しく解説する MONOist > 組み込み開発 2010/3/31

画像の認識・参照・編集に関する記事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 フォーラム トップページへ