エンジニアのための
アイコン作成勉強会
2012/01/18

自己紹介
• @kurikazu
• Webのシステム作ってます
（最近はマネジメント中心）
• 活動場所
• ヒビノログ http://blog.songs-inside.com
• Shibuya.trac

これまでの作品

はじめに

デザインの知識、
すみません
基本的には独学です。

こういう希望がある方
デザインの基礎から知りたい
プロ並のアイコンを作りたい

すみません

自己紹介タイム

この勉強会をやろうと
思った背景

ふだんの開発の現場で...
• 担当するのはプログラム、機能作りの部分で
あることが多い
• スケジュールとか予算とかに追われ...
• 「（見た目は置いといて）まずは機能を先に
作ってしまおう」となりがち

でも、機能が似たようなものが
２つあったとき

「見た目が好み」かどうかが
選ぶ基準になるはず。
ぼくらはもう少し、
「見た目」にも気を配った方が
いいんじゃないかなぁ、と。

好きなデザイン

プロの仕事

http://www.youtube.com/watch?v=O5OVHIG_Nnc

アイコンとは

アイコンとは
• アイコンの語源はギリシャ語の「eikón」であ
り、これは「類似物」「崇拝の対象」などを
意味する。
• また「キリスト教で神様や天使を象徴として
模した像、絵」なども指すようになる。
出典 http://dic.nicovideo.jp/a/アイコン

頭に入れておきたいこと

4つの基本原則
• コントラスト
• 反復
• 整列
• 近接
「ノンデザイナーズデザインブック」より

コントラスト
• 類似するのを避ける
• 要素が同一でないならはっきり違わせ
る
• 視覚を引きつける要因になる

反復
• 視覚的な要素（色、形、質感、位置関
係、線、フォントの書体、サイズ、画
像）を作品全体を通して繰り返す
• 一体性の強化につながる

整列
• すべてのものを
意識的に配置し
なければならな
い
• 三分割法、黄金
律、...

統一感
• 線の太さ
• 図形の大きさ、傾き、効果
• 図形の位置（マージンなど）
• 使う色を決める
（アプリのテーマカラーをベース）

やってはいけないこと
• 10 Mistakes in Icon Design
（Secrets from the Chef）
• http://turbomilk.com/blog/cookbook/icon_design/
10_mistakes_in_icon_design/

やってはいけないこと
• アイコンのデザインの差があまりない
• 一つのアイコンに要素が多すぎる
• 不要な要素を含んでいる
• アイコンセットに統一性がない
• 小さいアイコンに不要な遠近感、シャドウ
（16x16px以下）

やってはいけないこと
• リアルすぎるアイコン
• 国民性や社会性に依存（言語）
• インターフェースで使われている要素をアイコン内
で使う（OSのインターフェースと混同する）
• アイコンの中にテキストがある
• ぼけてしまう

実際に作ってみる
• まずはラフデザイン
• 上手下手は関係ない
• 手を動かすこと、頭の中のイメージを
書いてみることが大事

既に定着したイメージはできるだけ使う
• ファイルを開く（フォルダ、書類）
• 保存（フロッピー）
• タグ（しおり）
• お気に入り（星）
• SNSに投稿（twitter、facebook）

「何を」「どうする」
• ファイルの新規作成
→ 「ファイル」「追加」
＋ →

画面に落とし込み
• 拡大、縮小したいのでベクトル化する

下絵の取り込み
• 自分で書いた絵をスキャナで取り込む
• イメージに近い画像を探す
（Googleイメージ検索など）
→いいなぁと思うデザインの
コピーから入る

下絵をもとにトレース

パスだとトレースは
結構大変

図形の合成や型抜きを
うまく使う

抽出しやすく色を変更

選択→パスに変換

ちょっとしたコツ

3つの効果をうまく使う
• シャドウ
• グラデーション
• 透過

シャドウ
• 少しだけ
• 色は少し薄め（または透過）

グラデーション
• 濃い→薄い、薄い→濃い
• 変化の度合い
• グラデーションの方向

透過
• 柔らかい印象になる
• ベースとなる図形の上に
光沢や陰の透過図形を重ねたり

余白を作る

使う色は3つくらいを目安に。
• あとはグラデーションをうまく使う

使用環境によるルール
• iPhone
http://developer.apple.com/library/mac/#documentation/
UserExperience/Conceptual/AppleHIGuidelines/IconsImages/
IconsImages.html
http://developer.apple.com/jp/devcenter/ios/library/
documentation/MobileHIG.pdf
• Android
原文 http://developer.android.com/guide/practices/
ui_guidelines/icon_design.html
日本語訳 http://www.techdoctranslator.com/android/practices/
ui_guidelines/icon_design

Android な感じ
• マットなアイコン
• 薄い 濃い
• グラデーションの境
界はぼんやり

iPhone な感じ
• 光沢のあるアイコン
• 濃い 薄い
• 光沢を別図形で作る
• グラデーションの境界
はくっきり

どのツールを使うか
• 無償
MS Paint、GIMP
• 有償
Photoshop、Illustrator、Fireworks
• 効率に関わるのでけっこう大事
• あとは慣れるのみ
個人的には Fireworks をオススメ

パーツの再利用
• 作るだけ作ったらとっておく
• うまく行かなかったと思っても
後々役に立つかも？

参考にしているサイト
• WebDesign RECIPES
http://webdesignrecipes.com
• fireworks Mania
http://fw.v-colors.com/
• Kuler
http://kuler.adobe.com/

Enjoy Designing!