限定公開でまとめを作れば、相互フォローやフォロワー限定でまとめを共有できます!

【デザイン】 Androidアプリアイコンのデザイン過程晒してみた 【QR Scanner】

簡単に使える!かわいい!AndroidのQRコードリーダーアプリ「QR Scanner」のアイコンを作った時の過程を晒しました。
サイト制作 プログラミング Design アプリ icon アイコン Webデザイン イラレ デザイン Illustrator 晒し Photoshop
14054view 2コメント
12
ショコ @chocolatina
paperboy&co. デザイナー 小山田 @chocolatina です。先週、みんなで作ったAndroidアプリ「QR Scanner」がリリースされたので、アイコンを作った過程をつぶやきます!#PPB_design http://t.co/HNcQyTNk
ショコ @chocolatina
今日リリースしたアプリでは、お店や街中でQRコードをすぐに簡単に読み取ることができます。ダウンロードはこちら!#PPB_design http://t.co/HNcQyTNk
ショコ @chocolatina
【アイコン作成の目的】散らかったホーム画面でも、QRコードリーダーであるのが一瞬で分かるようにする。自分のスマホの画面に置いておきたくなるようなやつで、ユーティリティ系アプリなので、かっこいい系で。 #PPB_design http://t.co/HNcQyTNk
ショコ @chocolatina
【アイコンに使いたいモチーフ】QRコードの画像、もしくは「QR」の文字。あとは‥虫眼鏡? #PPB_design http://t.co/HNcQyTNk
ショコ @chocolatina
【そもそも人は何を見て「QRコード」だと認識するのか】アイコンは小さい画像なので、可能な限りQRコードをディフォルメしたい。人は何を見て「QRコード」だと認識するのか考える。#PPB_design http://t.co/HNcQyTNk
ショコ @chocolatina
【素材用のQRコードをイラレで描く】 後で使う。 #PPB_design http://t.co/HNcQyTNk http://t.co/JYyzMV5u
 拡大
ショコ @chocolatina
【黒いと可愛くない】色々な色を合わせてみたらどうだろう?と思ってやってみたけど、予想通り、小さい画像にすると汚くなるのでボツ。大きい画像のままならポップで可愛いのになー。 #PPB_design http://t.co/HNcQyTNk http://t.co/YyMWMp5y
 拡大
ショコ @chocolatina
【立体にしてみる】大友克洋っぽくて良いけど、表面と影がごちゃごちゃしすぎて、よく分からなくなった #PPB_design http://t.co/HNcQyTNk http://t.co/d3UkpwJa
 拡大
ショコ @chocolatina
【虫眼鏡を作ってみる】失敗!だめすぎる!!!しかもアイコンに組み込むと収まりが悪い。 #PPB_design http://t.co/HNcQyTNk http://t.co/0i2JiEOy
 拡大
ショコ @chocolatina
【QRという文字を使ってみる】QRコードの四角形がランダムに並んでるのを、モザイクぽくして、背景に敷いたらおしゃれかも。 #PPB_design http://t.co/HNcQyTNk http://t.co/kEMM7QFu
 拡大
ショコ @chocolatina
【みんなの意見を聞く】QとRをQRコードぽい感じにしてみたら、と、チームからアドバイスをもらう。やってみる。 #PPB_design http://t.co/HNcQyTNk http://t.co/PC4eeUPi
 拡大
ショコ @chocolatina
【エヴァQを観に行く】観に行ったせいで、あまりのショックに精神状態が若干おかしくなった時期。 #PPB_design http://t.co/HNcQyTNk http://t.co/tdcZOguo
 拡大
ショコ @chocolatina
@getsukikyu ATフィールドが侵食されるなんて‥
ショコ @chocolatina
@daiskip先生からの助け船、来たる】 かっこいい。dribbbleぽいですね。やってみよう! #PPB_design http://t.co/HNcQyTNk http://t.co/DsBvtnxe
 拡大
ショコ @chocolatina
【がんがん作る】QRコードの模様と「QR」の文字を両方目立たせたかったけど、やっぱり無理っぽいので諦める。小さくしたら何だかわからない。 #PPB_design http://t.co/HNcQyTNk http://t.co/gU1vafm5
 拡大
ショコ @chocolatina
【できた?】どうやったら下から光が抜けてるように見えるのか10分ほど悩んで、結局この形にする。未来ぽくてユーティリティぽくていいんじゃないかと思う。 #PPB_design http://t.co/HNcQyTNk http://t.co/eMjC9D59
 拡大
ショコ @chocolatina
【やっぱりダメ】同時進行だったアプリのUIデザインがこの頃に固まり、ポップな色のタイルぽいデザインにすることにしたので、やっぱりアイコンも変更する。また考える。 #PPB_design http://t.co/HNcQyTNk http://t.co/MkEooVP2
 拡大
ショコ @chocolatina
【色をためす】ストライプかタイルぽいデザインがいいねということになったので、色の組み合わせを考える。 #PPB_design http://t.co/HNcQyTNk http://t.co/yrp93aHX
 拡大
ショコ @chocolatina
【最終形態】実機で確認したり色々して、この派手な色を選ぶ。出来ました!!!!!!おいしそう!!!!!!飴にしたい!!!!!! #PPB_design http://t.co/HNcQyTNk http://t.co/j1GaHX1V
 拡大
ショコ @chocolatina
【おまけ:AndroidAppを作る時に必要な画像1】アイコンの他にも、いろいろな画像が必要です。こちらはマーケット用の画像。 #PPB_design http://t.co/HNcQyTNk http://t.co/DvhvtKZB
 拡大
ショコ @chocolatina
【おまけ:AndroidAppを作る時に必要な画像2】キャプチャも必要です。 #PPB_design http://t.co/HNcQyTNk http://t.co/yIovjTzA
 拡大
ショコ @chocolatina
他にもデザインの作成過程を晒してますので、こちらも一緒にどうぞ! #PPB_design http://t.co/CWdx08Xr

コメント

のりしあん @noricyan2 2012年12月10日
なんか書かないといけない気がした
I love cats. @YStwtr 2012年12月10日
参考になります。機械は何を見て「QRコード」だと認識するのか。特許にある 1:1:3:1:1 を押さえていると技術屋としてはうれしかったけど, これは人間用のアイコンだものね。
ログインして広告を非表示にする
ログインして広告を非表示にする