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

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

関連記事

I20150720-150147.jpg

Apple Watchアプリを作りたいならこの書籍!「詳細!Apple Watch アプリ開発 入門ノート」

     Apple Watchアプリの作り方を学ぶのにオススメな書籍、「詳細!Apple W

記事を読む

I20160409-211651.jpg

Xcode 7.3の新機能についてまとめてみた

2016年3月22日にXcode 7.3がリリースされましたが、自分が知らない機能があるかもしれ

記事を読む

I20150808-104713.jpg

【Xcode】シミュレーターリストの表示がおかしくなった時の解決方法

Xcodeのシミュレーターリストの表示が、上のスクリーンショットのようにおかしくなってしまっ

記事を読む

I20160102-131507.jpg

Swift 2の文法が分かるオススメ本「詳解 Swift 改訂版」

Swift文法書の定番とも言える、荻原 剛志さんの「詳解 Swift」。 Swiftの文法をキ

記事を読む

20140721-170305.jpg

プロトタイピングのツールや手法を学べる「プロトタイピング実践ガイド」

株式会社インプレスさまより献本御礼。 プロトタイピング実践ガイド スマホアプリの効率的なデザイ

記事を読む

I20160124-111228.jpg

初心者がデザインを勉強するなら、まずこの本を読むといいかも

まず僕のスペックから話をすると、 アプリのコードを書いたり、ブログを書いたりしている

記事を読む

20141119-114354.jpg

【iOSアプリ開発】隙間時間で読んで学ぶのにオススメな入門本「はじめてのSwiftプログラミング」

「はじめてのSwiftプログラミング」という入門書が手頃なサイズで、持ち歩いてスキマ時間で読んで

記事を読む

I20160417-171311.jpg

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

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

記事を読む

I20160209-123839.jpg

【Swift】プロパティのsetとgetには異なるアクセス修飾子を指定できる

Swiftでは、プロパティのセッタ(set節)とゲッタ(get節)に異なるアクセス修飾子

記事を読む

I20160210-140020.jpg

【Xcode】モーダル表示で遷移先へ値を渡す時のハマりポイント

モーダル表示で遷移先の画面へ値を渡す際、最初はハマりやすいポイントについて解説したいと思いま

記事を読む

I20170521-225453.jpg
東京駅八重洲口の「羊肉酒場 悟大」で網焼きジンギスカンを頂きました!

ゆうせいさんと株式会社 大庄さんからご招待頂き、悟大withサッポ

I20170514-165235.jpg
iPhoneと連携できる体重体組成計「Withings Body Cardio」を使ってます

ジムに通い始めて体脂肪率が落ち始めたのをキッカケに、iPhoneと

I20170507-155440.jpg
【派手髪】ハーレイクイン風の髪色に染めてもらいました

2016年10月20日、ハーレイクイン風の髪色に染めてもらいました

I20170504-173110.jpg
【メンズネイル】東京・新宿のネイルサロンでターコイズのホログラムネイルしてもらった

ネイルネタが1年分くらい溜まっているので、ちょっとずつ書いていこう

I20170502-010117.jpg
SNUGGのライトニングケーブルが耐久性高し。8ヶ月使ってますが断線の気配なし!

iPhoneの充電&転送ケーブルであるLightningケーブルっ

→もっと見る

PAGE TOP ↑