【マインドマップからアイコンデザインまで】初心者向け iphoneのUIデザインに役立つサイトまとめ

はじめまして、あゆこです。

今回は、今まで自分がiPhone用UIデザインをするときに考えていたことや、
お世話になったサイトなどをざくざくっと紹介して参ります。
 

まず何から考えればいいのか

自分が作りたいUIについて、以下のことを洗い出します。

———————————————————————-
(1)誰が使うの?
男性か女性か、若者か年配か、
今や赤ちゃんからおじいちゃんまで、ターゲットは様々です。

(2)どこで使うの?
盛り上がる場所で使うのか、1人のときにじっくり使うのか

(3)どうやって使うの?
歩きながらや、寝そべりながらなど、
シーンによってはボタンの配置場所がとても重要です。
———————————————————————-

ターゲットの行動パターンや、ターゲットを取り巻く環境などを調べてみると、
重要な要素がわかってきます。

たとえばレシピアプリ・サイトなどを作るときは、
主婦の皆さんの行動パターンを考えますよね。
料理といえば時間との戦い。めんどくさい操作は嫌われるかもしれません。

レシピの流れはボタン切り替えよりも、
大きい写真の一覧をささっとスワイプできたほうが良いかもしれないなぁ…
など考えるとデザインも考えやすいかもしれません。

ほかにも基礎知識として、
下記のサイトなどを参考にしてみましょう。
 

———————————————————————-

スマホサイトデザインの基礎知識

50のスマホサイト調査から見るナビゲーションのUIデザイン5パターン


マインドマップを書いてみよう

なんとなくイメージが固まってきたら、マインドマップを書いてみましょう。
書いているうちにどんどんイメージが湧いてくる…!なんてこともあるかと思います。
自分の思考整理にも、構成の決定にも、マインドマップは欠かせません。

またページの階層が深ければ深いほど、
ユーザーは「使いにくいなぁ…」と感じるものです。

ユーザの目的のページまで、
2ステップ程度でたどり着ける理想的な階層を目指しましょう。

マインドマップをPC上でざくざくっと作れる
下記のようなフリーツールもあります。

———————————————————————-
Xmind(windows)

MindNode(Mac)


モックアップを書いてみよう

じっくり構想を練ったら、実際にモックアップを作ってみましょう。
下記の素材をプリントして、まずはざかざか描いてみると良いです。

———————————————————————-
iPhone 5 Doodlers(PDF:A4)


Free Printable iPhone 5 Templates

Iphone4 Drawing Template Freebie(PDF)

 

———————————————————————-
 

描くのめんどくさいよ!って方はこんなのどうでしょう。
PC上である程度のモックアップの作成ができます。
 

———————————————————————-
iPhone Mockup

 

早速デザインしよう!

デザインの基礎が整ったら、いよいよ本番デザインに入っていきます。

まず何を作ろう…と思い悩むあなたに朗報です!
実際にiphone上で使われているものと同じ素材が、フリーで提供されています。

ぜひダウンロードして、よりクオリティの高いデザインを実現しましょう。

———————————————————————-

iOS 6 GUI PSD (iPhone 5)


Mobile – iPhone(iPhone 4)



Freebie iPhone 5 in black


※写真以外の角度のデータもPSD内にあります

Freebie iPhone 5(white)

※写真以外の角度のデータもPSD内にあります

iPhone 4s Psd Vector Mockup Template(white&black)

iOS App Icon Template



———————————————————————-

デザインしていくと、何かが違う…他のデザインも気になる…

そんな壁にぶち当たることって結構あると思います。

そこで、私が日ごろ参考にしていたデザイン集サイトを共有させていただきます。
日本のデザインもさながら、海外のサイトもとっても参考になりますよね~。
あなたに合ったサイトを見つけてくださいね。

———————————————————————-
 ●日本のUIデザイン集サイト

iPhoneDesignBox



 
スマートフォンサイト集めました。

meet i


iPhoneデザインアーカイブ



———————————————————————-
●海外UIデザイン集サイト

dribbble


CSS iPhone

iPad and iPhone Design Inspirations Gallery



iOS Mobile Patterns

TappGala



MOBILE PATTERNS



Mobile Website Gallery



Meerli



UI Patterns


———————————————————————-
●海外のアイコンデザイン集サイト

iOS icon gellery

APP icons



Apple Inspire Me


おまけ

アプリアイコンの切り出し、ひとつひとつやるのめんどくさーい!
というあなたに、こんなツールいかがですか?

———————————————————————-
スマフォアプリ開発支援ツール~ 各種サイズのアイコンを一括して制作 ~



AppIcon (¥85)

———————————————————————-

またデザインするときは、
上に表示されるステータスバーや、
下に表示するツールバーなどを意識してデザインすると、
後で気付いてあわててリサイズ…なんてことにならなくて安心だと思いますよ。

 
ざかざかと語ってみましたが、いかがでしたでしょうか?
素敵なUIデザインの一助にでもなれれば嬉しいです!
ではまた~。