連載
» 2011年04月13日 00時00分 UPDATE

一撃デザインの種明かし(14):スマートフォンアプリデザインに役立つ 基礎のまとめ! (4/4)

[林真由美, 田島絹絵,面白法人カヤック]
前のページへ 1|2|3|4       

デザインの面白いスマートフォンアプリ3選!

 アプリには便利なものや面白いものがいくつかありますが、UIのデザイン面で面白いものを3つ紹介します。

【1】ラップムシ(iPhoneのみ)

r12image12.jpg

 手書きのUIがかわいい、ラップができるiPhoneアプリです。このアプリはシリーズで出ているので、他のアプリもダウンロードしてはいかがでしょうか。

【2】color(現在は、iPhoneのみ)

 位置情報から近い場所にいる誰かと写真を共有するアプリです。すっきりとしたデザインで、解説などはほとんどないですが、機能自体もとてもシンプルで限定的なので理解しやすく、使われるシーンも想像しやすいです。

r12image07.jpg

【3】Trip Journal

 写真とメモで、旅行を記録するアプリです。ディテールにこだわったアナログ風デザインで、世界観のあるアプリになっています。アイコン付きのボタンなどでユーザビリティと操作性も考慮されています。

r12image11.jpg

参考UIデザインまとめサイト4連発+テンプレート集!

 参考になるUIをまとめているサイトがあるので、4つ紹介します。

【1】Mobile UI Patterns

 スマートフォンのUIパターンがまとめられています。

r12image01.jpg

【2】iPhone pttrns

r12image20.jpg

【3】iPhoneデザインボックス

 優れたiPhoneサイトデザイン集です。

r12image08.jpg

【4】Androidマーケット

 AndroidマーケットはWebブラウザで見られるので、人気のアプリのスクリーンショットなど参考にしてはいかがでしょうか。

r12image16.jpg

ダウンロードできる、スマホデザインテンプレートも

 スマートフォンデザイン時に役に立つ、デザインテンプレート集も紹介します。これらをうまく使い、デザインしてみるのもいいかと思います。

UI設計に役に立つ! PDFプロトタイプから始めよう

 画面のビジュアルを作り込む前のプロトタイプ作りで役立つのがPDFを使ったモックです。PDFは、AndroidでもiPhoneでも見ることができるので、画面遷移や、ボタンの大きさ、文字サイズなど実機で確認しながら制作できます。

 まずは、PowerPointやKeynoteを使って、リンク付きのPDFを制作してみましょう。以下は、PDFで作ったプロトタイプです。簡単なボタン配置をして、リンクを付けています。

r12image24.jpgr12image13.jpg

 モックの作り方については、記事「誰でもできるiPhoneアプリのプロトタイプのつくりかた【サンプルつき!】 | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話」をご覧ください。

 2012年には、PCの出荷台数をスマートフォンが超える?! なんて記事も出て、ますます盛り上がるスマートフォン市場。ユニークなアプリを作って、一時代築いてはいかがでしょうか?

@IT関連記事

r12icon_s1.gif

はじめまして。Androidアプリ開発&デザイン
@ITスマソ開設記念! 女子部部長に聞くAndroid 年末も大注目のAndroidのアプリについて。制作のコツ、注意点、アイデア、ソーシャルサービスの生かし方などを探った
Smart & Social」フォーラム 2010/12/7

r12iPhone_icon_s.gif

iPhone向けWebアプリを作ろう
Safari Web Content Guide for iPhoneを読み解く iPhone/iPod touch上のWebブラウザのSafariで動くWebアプリを作成し、UIを最適化するコツを紹介します
Smart & Social」フォーラム 2008/5/29

r12icon_s2.gif

Androidはオタクとオシャレのハイブリッドで流行る!
日本Androidの会 女子部に聞く 「女子部」の成り立ちや活動内容を中心に、Androidマーケットの問題点、UIデザインの重要性、ライバルであるiPhoneについて、など
Smart & Social」フォーラム 2010/1/21

r12icon_s3.gif

今日から始める! Androidケータイアプリ作成の基礎
いまこそ知っておきたい「Androidアプリ」とは 日に日に国内でのニュースが増えているAndroidケータイ。その特徴を押さえてアプリ作成を始めるための基礎を紹介します
Smart & Social」フォーラム 2009/11/19

r12andoh_icons2010.jpg

開発者は覚えておきたいアプリストア/マーケット大全
安藤幸央のランダウン(55) iPhoneの大ヒットにより一般的になった、アプリの新しい流通形態の現状をお伝えする。今の“アプリ”には多種多様なサービスが必要だ
Java Solution」フォーラム 2011/2/7

r12andoh_gra1.jpg

あなたのサイトはiPhoneで見られますか?
安藤幸央のランダウン(36) 携帯電話と違い、PC用のサイトも見られる小さな画面の端末が普及してきている。そんな時代のWebページはどうあるべきかを解説しよう
Java Solution」フォーラム 2007/9/14

著者プロフィール

r12hayashi.jpg

林 真由美(はやし まゆみ)

面白法人カヤック アートディレクター
TIAA、グッドデザイン賞、文化庁メディア芸術祭、Webdesign International Festivalなどまじめな賞を受賞しつつも、おばかアプリ選手権で2度受賞する。Webデザインだけではなく、社員の漫画名刺作りや貧乏揺すりガジェットも担当し、マジメから、おばかまで何でも幅広く活動するアートディレクター

r12tajima.jpg

田島絹絵(たじま きぬえ)

面白法人カヤック デザイナー
2度目の挑戦で4月よりカヤックにジョイン! 丁寧さとその落ち着きには定評あり!サイトデザイン、コーディングから、歌詞づくりなど幅広くしっかり担当しています



前のページへ 1|2|3|4       

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。