Googleのアイコン 設計理念 ブランド表現 プロダクトアイコンは、ブランドや製品、そのサービスやツールなどを視覚的に表現したものです。 アイコンは、製品の核となるアイデアや意図を、シンプルかつ大胆に、そして親しみやすい形で伝えます。 それぞれのアイコンは視覚的に異なるものですが、ブランドのすべての製品アイコンは、コンセプトと実行を通じて統一されている必要があります。 このガイドラインは、製品アイコンの色と主要な要素にブランドアイデンティティを反映させるための出発点です。 デザインアプローチ マテリアルの触感と物理的な質感は、マテリアルのアイコンのデザインに反映されています。 それぞれのアイコンは、紙と同じようにカットされ、折り畳まれ、点灯していますが、シンプルなグラフィック要素で表現されています。 マテリアルの品質は頑丈で、きれいな折り目と鮮明なエッジを持っています。 表面は、微妙なハイライトと一貫したシャドウによって、光と相互作用しています。 物理的なプロトタイプ ライティングの研究 素材の試作 色彩の研究 グリッドとキーラインのシェイプ アイコンのサイズ アイコンを作成する場合、400% (192 x 192 dp) で表示・編集すると、エッジが4dpで表示されます。 この比率を維持することで、オリジナルに加えた変更は比例して拡大・縮小され、100％（48dp）に戻してもシャープなエッジと正しい配置が保たれます 1:1 単位グリッド 4:1 単位グリッド グリッド キーライン キーラインシェイプ キーラインシェイプは、グリッドをベースにしています。 これらのコアシェイプをベースラインとして使用することで、製品アイコン全体で一貫した視覚的なプロポーションを維持することができます。 正方形 高さ : 152dp / 横幅 : 152dp 円 直径 : 176dp 長方形 縦 高さ : 176dp / 横幅 : 128dp 長方形 横 高さ : 128dp / 横幅 : 176dp ジオメトリー 円、正方形、長方形、直交図形、対角線など、あらかじめ用意された規格に沿ったキーライン図形です。 製品アイコンを統一し、グリッド上の配置を一定に保ちます。 正方形 円 長方形 縦 長方形 横 続きを読む https://google.com/design/spec Material Design Product icons Icônes des produits Google Principes de conception Expression de la marque Les icônes de produit sont l’expression visuelle d’une marque et d’un produit, y compris leurs services et outils. Les icônes communiquent l’idée centrale et l’intention d’un produit d’une manière simple, audacieuse et conviviale. Bien que chaque icône soit visuellement distincte, toutes les icônes de produits d’une marque doivent être unifiées dans leur concept et leur exécution. Ces lignes directrices constituent un point de départ pour garantir que les couleurs et les éléments clés de vos icônes de produits reflètent l’identité de votre marque. Approche conceptuelle La qualité tactile et physique du matériau se reflète dans la conception des icônes du matériau. Chaque icône est découpée, pliée et éclairée comme le serait du papier, mais représentée par des éléments graphiques simples. La qualité du matériau est solide, avec des plis nets et des bords précis. Les surfaces interagissent avec la lumière grâce à des reflets subtils et des ombres cohérentes. Prototype physique Étude d’éclairage Prototype de matériau Étude des couleurs Formes de la grille et de la ligne de clé Taille des icônes Lorsque vous créez une icône, visualisez-la et modifiez-la à 400 % (192 x 192 ppp), ce qui permet d’afficher les bords à 4 ppp. En conservant ce rapport, toute modification apportée à l’original sera mise à l’échelle proportionnellement, ce qui permet de conserver des bords nets et un alignement correct lorsque l’échelle est ramenée à 100 % (48 dp). 1:1 Grille de l’unité 4:1 Grille de l’unité Grille Keyline Formes des lignes clés Les formes de base sont basées sur la grille. En utilisant ces formes principales comme base de référence, vous pouvez maintenir des proportions visuelles cohérentes dans toutes les icônes de votre produit. Carré Hauteur : 152dp / Largeur : 152dp Cercle Diamètre : 176dp Rectangle vertical Hauteur : 176dp / Largeur: 128dp Rectangle horizontal Hauteur : 128dp / Largeur : 176dp Géométrie Ces formes clés utilisent des normes prédéfinies : cercle, carré, rectangle, orthogonales et diagonales. Elles permettent d’unifier les icônes de produits et de maintenir un placement cohérent sur la grille. Carré Cercle Rectangle vertical Rectangle horizontal Lire la suite https://google.com/design/spec Material Design Product icons