マテリアルデザイン プロダクトアイコン

まえおき:英語良く分かっていないのですが、原文を読んで、翻訳しながら解釈した内容を日本語で書いていますので比喩があるかもしれません。また、自分の感想を書いている箇所もあるので、文章全てがページに書いてある事と言う訳ではないです。

アイコン作成に関して

例としてgmailのアイコンの説明

gmailのアイコン等は実際に紙を折って影の着き方等を参考にし作成されました。
アイコンとして形を作成し、決まっている光の方向(左、145度(photoshop参考))から影をおとしマテリアルの原型をつくりスポットカラーが配置されました。

アイコンの形を作成する用のグリッド(ガイド)に形を落とし込み作成されました。プロダクトアイコンを作成するのにグリッドが手助けをしてくれます。位置決めなど、規則性を持たせることができ、アイコンをまとめる事によりシステムに統一した雰囲気が出てきます。

Gmailのアイコンのスポットカラーは「赤」だと思うのですが。このスポットカラーの矩形には影を付けずに存在する場所によって陰影がついているのみで、アイコン上にはっきりさせています。

キーラインの種類に関して

キーラインを統一する事で、アイコンがまとまります。
Square
Height: 152dp
Width: 152dp

Circle
Diameter: 176dp

Vertical rectangle
Height: 176dp
Width: 128dp

Horizontal rectangle
Height:128dp
Width:176dp

DP グリッド

androidの推奨するアイコンは48dpで作成する事です。ですが実際にアイコンを作成する時は400%の192dp*192dp(角の丸みは4dp)で作成することを推奨しています。
これにより拡大縮小しても、きれいなエッジラインをのこせるようになります。
1:1の大きさではなく、4:1の大きさで作成する。

幾何学

円、正方形、長方形、垂直、および対角線:プリセットの基準は、特定のキーラインで決定されます。この小さなパレットは、製品のアイコンを統一します。

アイコンの構造

アイコンを解剖するとグラフィック要素で構成されています。この構成はロゴの微妙な特徴を表しています。また、基本構成を意識する事によって、ロゴデザインの学習になります。

コンポーネント

重なっているコンポーネントは1つ前の上に配置されています。
コンストラクチャの視点
アイコンの構造を斜めから観た例
それぞれ番号に名称がついています
1. 仕上げ
2. Material 背景:背景要素
3. Material 前景:背景に影を落として上に配置。
4. 色
5. 影

背景:背景要素
全景:背景の上に素材を乗せている
色:ごく一部の素材の色(ポイントカラー。gmailでいうならば、「M」の形とっている赤の事。)
宙に浮いている:色だとしたら隅々までひかれる(gmailでいうならば、アイコンのポイントカラーがつく前の原型の事。)
色付きの縁:素材の上の淵に白いテクスチャーか明るい色をオリジナルで用意するか。
影の淵:素材の下の淵に暗い色または暗いオリジナル色
影:柔らかい影をまとった隆起した素材。
仕上げ:全ての素材の上に左上右下へ影を落とす。

テーマ別色選別方法

色彩、覆い、影の値

色合いと陰影が追加されたときの各色が異なって反応します。すべてのエッジの色合い、エッジシェード、および影の色は、その背後にある各色ごとに調整する必要があります。色の調和を確保するために、それぞれについて適切な値を利用してください。

プロダクトアイコンのパターン

物理的な物質はいろいろな環境に影響を受け、表面と触感でのセンスは規則を作ります。相互作用でたくさんのユニークな構成物になります。

色の要素は、平らな紙の上に存在してください。
色の要素をエッジまたはシャドウで飾らないでください。

レイヤー

紙のレイヤー要素は深さを作り、エッジと影と持ちます。
重なる数に注意してください。
あまりにも複雑になるとフォーカスが欠けてしまいます。

昇降

シンプルな素材の上の中心部から影を伸ばします。
消して他のシェイプをクロップしないでください。

折り目を入れたマテリアルエレメントは幾何学的な要素を失わずに深さの感覚を持たせます。
折り目は中心を通り、形をシンメトリーにします。
中心でなかったり複数の折り目は使用しないでください

折りたたみ

折りたたみ要素は、見た目よりもおおきく歪みます。改変または重要な要素を詐称避けるのでスポットカラーの場所には、避ける。

重ね

オーバーラップ材料要素は、ユニークなシルエットを作成します。すべての要素、エッジ、シャドウはシルエットの内部に閉じ込められています。1つ以上のオーバーラップを超えないようにしてください。あまりにも多くを持つことは、アイコンを複雑にし、フォーカスを欠いてしまいます。

アコーディオン

折り畳まれた要素は単一の素材に次元を追加させます。ただし、2つ以上の折り目を超えないようにしてください。あまり階層を多く持つ事はアイコンを複雑にし階層を分からなくします。

ゆがみ

プロダクトアイコンは歪ませたりしてはいけません。エレメントは幾何学的な形をしていなくてはいけなくて、歪ませたり、傾けたり、伸ばしたりしてはいけません。

プロダクトアイコンを読んで

アイコンを歪ませると言う視点に関しては、デザイン上そう言う事もあるだろうなとは思うけれども、そもそもプロダクトアイコンとはどういったアイコンの事をマテリアルデザインではさすのかと言う視点から見るとと言う話なのでとてもなっとく。

そして、プロダクトアイコンも構造から考える。全て構造化。
アプリケーションである事を分かりやすく伝えるために、androidにインストールするアプリケーションに関しては規約をそろえるということなんですよね。

次は、システムアイコン。

関連記事