デザイン初心者な僕がデザイナーさんにそこそこ褒められるアプリアイコンを作った方法

公開日: : iPhoneアプリ開発

デザイン初心者の僕がアプリアイコンを作ったら、本職のデザイナーさんにそこそこ褒められるという嬉しい体験をしたので、そのアプリアイコンをどのような方法で作ったのかを紹介したいと思います。

    

スポンサード リンク

僕のスペック

アプリ開発者。趣味で撮影した写真をレタッチしている関係もあり、Photoshopはそこそこ使える(ただし色調補正やフィルタ関係だけ)が、デザインをした経験はほぼ無し。Illustratorの使い方を覚えたのは去年の8月頃。以下はその時に書いた記事。

イラレを使った事の無かった僕がこの本で勉強したら、簡単な素材なら自分で作れるようになった – 拡張現実ライフ

    

学習に使ったのは以下の書籍。

    

今買うなら、CCに対応している以下の最新版が良いと思います。

    

アプリアイコンを作った手順

デザイナーさんに褒めてもらったのは写真を撮るだけで顔に自動でモザイクが入る「MosaicCam」というアプリのアイコンなので、これをベースに説明したいと思います。

カテゴリ: 写真/ビデオ 価格: ¥200

    

紙に落書きして、Illustratorでザックリと作る

まずは浮かんだアイコン案を紙(僕の場合はモレスキンという手帳)に落書きします。「これ良いかも」というアイデアが出来たら、Illustratorを使ってザックリと作ってみます。その結果できたのが以下のアイコン。

20140901-002111.jpg

「カメラアプリであること」「人を撮影すると顔にモザイクが入ること」が分かるようなデザインにしてみたんですが、ハッキリ言って酷い出来です。デザイン初心者が作っているのだから当然といえば当然。

    

iPhoneのドックに置く

20140901-112845.jpg

酷い出来のアイコンではありますが、とりあえずアプリに設定してiPhoneのドックに置いてみます。ドックに置いておくと嫌でも頻繁に目にすることとなります。すると「こんな酷いアイコンをドックに置きたくない」という気持ちが沸き起こり、「このアイコンをどうにかしてまともにしたい」と思い始めます。

例えば、アプリアイコンがiPhone上で表示される時はかなり小さく表示されるので、細かい要素はかなり見づらくなってしまいます。今回の場合だとモザイクをかけた箇所がそれに該当します。

そんな「駄目ポイント」を頭に入れつつ街中を歩いたりすると、いつもは目に入ってこなかった様々なデザイン(看板やポスターなど)などが目につくようになり、「あ、こういう色使いいいな」「こういうバランスいいな」というように様々な気付きが得られるようになります。

あとはその気付きをアプリアイコンに反映して、iPhoneのドックに置いて、また様々な気付きを得て、それを元にアイコンを修正する。この繰り返しです。

    

結果、こんなアイコンに!

結果、こんなアイコンになりました。

20140901-113705.jpg

デザイン上級者の方からしたらツッコミポイントが山ほどあるかもしれませんが、数名のプロのデザイナーさんから初めてそこそこ褒めてもらえたアプリアイコンとなりました。

    

@akio0911はこう思った。

もちろん学ぶべきデザインの文法などはたくさんあるのでしょうが、「とりあえず作る」「作ったものをよく見る」「他のデザインから学ぶ」「つくり直す」というプロセスを繰り返すことで、デザイン初心者でもそこそこのモノが作れるのだなと思いました。

これからも精進していきたいと思います。

この記事が気に入ったら「いいね!」しよう

follow us in feedly

Feedlyで最新記事を購読

Twitterで更新情報をゲット!

LINEでご感想・ご要望お送りください!
(スマホでLINEを起動 > 友だち追加 > QRコード)

関連記事

20160811-173801.jpg

【iOS】特定のセルがUITableViewの表示領域内に収まっているかどうかを調べる

特定のセルがUITableViewの表示領域内に収まっているかどうかを調べる方法を紹介します。


記事を読む

I20151201-120520.jpg

【Swift 2】switch内にてguardでbreakする

Swift 2のguard内ではreturnしないと文法エラーとなりますが、実はswitch

記事を読む

I20160212-000722.jpg

Swiftにおけるセレクタ(Selector)について調べてみた

NSTimerなどを使う際、引数に「Selector」という型があるのですが、これがSwiftで

記事を読む

20150522-105524.jpg

【書籍】初心者にオススメな本!「これからはじめる Apple Watchアプリ開発入門」

Apple Watchは買いましたか?使ってますか?アプリを作ってみたくはないですか? という

記事を読む

20150106-142403.jpg

Auto Layoutをコードで記述してビューを等間隔に並べる【Swift】

Auto Layoutをコードで記述して、ビューを等間隔に並べる方法について紹介します。ちなみに

記事を読む

I20160119-155700.jpg

Xcodeで80文字目のところにガイドラインを表示する方法

Xcodeで80文字目のところに線(ガイドライン)を表示する方法について解説します! 「ソース

記事を読む

I20151031-175009.jpg

初心者にオススメの本!Swiftではじめる iPhoneアプリ開発の教科書【Swift 2&Xcode 7対応】

     Xcode 7とSwift 2に対応したアプリ開発の入門書籍「Swiftでは

記事を読む

20150410-122409.jpg

複数バージョンのXcodeを共存してMacにインストールする方法

いよいよXcode 6.3が正式にリリースされましたね。 今回は複数バージョンのXco

記事を読む

20160802-232454.jpg

【Xcode 7】メソッドがどこから呼びだされているかを調べる方法

Xcode 7で、メソッドがどこから呼び出されているのか調べる方法を紹介します!     方法

記事を読む

I20160417-171311.jpg

Xcodeのブレークポイントで変数の中身を通知センターに表示してみる

Xcodeのブレークポイントの機能を使って、ブレークポイントを通過した時点での変数の中身を通知セ

記事を読む

【Mac】macOSのメール(Mail.app)でGmailをサクサク快適に使う方法

macOSに搭載されているメールアプリ、いわゆるMail.ap

【メンズネイル】新宿区大久保のネイルサロンで紫とピンクのネイルにしてもらった

2016年11月12日、東京都新宿区大久保にあるネイルサロン「

[Xcode][Swift]ボタンなどの同時タップを禁止する

iOSで、ボタンなどの同時タップを禁止する方法を紹介します。

【HomeKit】家の照明をSiriで制御できるようにしてみた

Apple製品と家電を連携するシステム「HomeKit(ホーム

【メンズネイル】新宿区大久保のサロンでターコイズとピンクのメタルネイルにしてもらった

2016年10月22日、いつもお世話になっているネイルサロン「

→もっと見る

PAGE TOP ↑