PowerApps x Daily UI #005 – App Icon

この記事は「PowerAppsでDaily UIチャレンジ!UI100本ノックに挑戦します」の#005です。

今回のpromptは「App Icon」です。アプリアイコンといえば先日、Officeの新しいアイコンが公開され、Office365環境には順次リリースされていますが、PowerPlatformのアイコンは古いままでちょっとさみしい気持ち…。ということで今回は、動作するPowerAppsアプリではないのですが、「新Officeアイコン風PowerPlatformアイコン」を作ってみました!

新Officeアイコン風PowerPlatformアイコン

※間違える方はいないと思いますが、あくまでジョークです!

新Office風 PowerPlatform アイコン

デザインのエッセンス

  • 新しいOfficeのアイコンの特徴を観察・適用
    • アプリのテーマカラーで示されるイニシャルバッヂ(Pa/Bi/Fl)
      • すでに刷新されたアイコンはすべて1文字ですが、ここでは2文字にしてみました。
    • 背景に用いられるシンボル
      • ニュアンスカラーのグラデーション。明度と彩度だけのグラデーションではなく、色味を少しずつ変えている
      • シンボルは3パターン
        • 同じシンボルを複数もちいて、大きさと色味を変える(SharePointタイプ):PowerApps
        • 四角や丸などのシンボルの中に特徴的なグラデーションをほどこす(Excel、OneNoteタイプ):PowerBI
        • Excelタイプと、より特徴的な要素を組み合わせる(Outlookタイプ):Microsoft Flow

反省点

  • フォントがこだわりきれなかった…
    • 悩んだ挙句メイリオにしました
  • Flowの接続線が味気ない感じ
    • 元のアイコンみたいに、接点を離したほうがよかったかも
  • Dynamicsも時間が許せばやりたかった

まだまだ新しいアイコンになっていないサービスがたくさんあるので、どんなデザインになるかな?と考えるだけでも楽しいですね。答え合わせ(?)ができるのを心待ちにしています!

追記:フォントをSegoe UIに/大文字に変更しました

この記事をTwitterに投稿したところ、たくさんのうれしい反応をいただきました。その中でも2点ほど、改良したほうがよさそうなフィードバックをいただいたいので対応してみました。みなさまありがとうございます!

  • フォントをSegoe UIに変更:Mr.Dang(@8bitclassroom) さんよりフィードバックをいただきました。Segoe系フォントはOfficeをはじめ、Microsoft製品の色々なところに使われていますね。特に「S」の字が開いていて特徴的な気がします。
  • 二文字目を大文字のアルファベットに変更:Guy In A Cube(@GuyInACube)さんよりフィードバックをいただきました。BIの表記は「B’I’」が正しい、とのことだったので、他のアイコンもそれにあわせました。
  • Flowの接続線の色を薄くしました。

新Office風 PowerPlatform アイコン (修正版)