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

公開日: : 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コード)

関連記事

I20160130-110811.jpg

【解決】Redundant conformance of ‘NSDate’ to protocol ‘Comparable’エラーが出た時の対処方法

アプリ開発中に「Redundant conformance of 'NSDate' to pro

記事を読む

I20160122-095132.jpg

Swift 2のドキュメントコメントの書き方(JavaDoc的なやつ)

コード補完時やoptionクリック時などに説明が出てくるようにする「ドキュメントコメント(J

記事を読む

20140724-103334.jpg

iPhoneアプリ開発にオススメの本10選(2014年7月版)

@akio0911です。2013年12月に「レベル・目的別!iPhoneアプリ開発おすすめ本

記事を読む

20141222-120336.jpg

【Swift】PlaygroundでUIImageに画像を読み込む方法

SwiftのPlayground内にて、UIImageに画像ファイルを読み込む方法を紹介しま

記事を読む

I20150721-164252.jpg

【書籍】iPhoneアプリ開発の初心者にオススメの本「詳細! Swift iPhoneアプリ開発 入門ノート」

     Swift 1.1、Xcode 6.1、iOS 8.1に対応している書籍「詳

記事を読む

20150410-122409.jpg

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

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

記事を読む

20141227-125250.jpg

実践的な内容まで載っている!開発のプロが教える Swift標準ガイドブック

株式会社マイナビ様より「開発のプロが教える Swift標準ガイドブック」の見本紙を頂きました。早

記事を読む

I20160418-235604.jpg

XcodeのStoryboardで部品を選択しやすくする2つの方法

ストーリーボード上で部品が入り組んでくると選択しづらくなってきますが、そんな状況でも部品を選択し

記事を読む

20141027-113224.jpg

【Swift】「詳解 Objective-C 2.0 第3版」の著者による「詳解Swift」が予約受付中!

「詳解 Objective-C 2.0 第3版」の筆者「荻原 剛志」さんによる新しい技術書「詳細

記事を読む

I20160505-011515.jpg

iOS 9以降で使えるReadable Content Guideを試してみた

iOS 9から追加されたReadable Content Guide(readableConte

記事を読む

20170423-182541
良肌研究室のフェイスウォッシュとオールインワンジェルを使ってみた

株式会社ブラシナさんから、良肌研究室の商品をご提供頂いたので、

I20170228-002742.jpg
約3ヶ月で体脂肪率を6.2%も落とせたキッカケについて

(右上の赤枠内がダイエット開始前、左下の赤枠内が3ヶ月後の数値

I20161224-174949.jpg
「季節の野菜を直接配送!季節のスムージー」を買ってみた

「FiNCモール」で、「季節の野菜を直接配送!季節のスムージー」を

I20161002-152537.jpg
【メンズネイル】東京・新宿のネイルサロンでマットネイルしてもらった

2016年7月18日、東京・新宿のメンズOKなネイルサロン「Tot

I20160925-163452.jpg
タブバーアイコン非選択時の色を変更する方法【iOS 10】

UITabBarControllerで、タブバーアイコン非選択時の

→もっと見る

PAGE TOP ↑