ツールボタンアイコンにSegoe Fluent Iconsフォントを使った

ツールボタンアイコンを用意するのは大変

Windows向けデスクトップアプリケーションをDelphiで作っているのですけど、ツールバーを使うUIだとツールボタン用のアイコンを用意する必要があります。

ひとりWikiではアイコンを自作したのですけど以下のようなアイコンで手間をかけた割にはセンスがなくて見た目が良くないというものになってしまいました。

Icons8

最近のDelphiだとGetItというパッケージマネージャーでIcons8というアイコンの詰め合わせがダウンロードできます。種類が多くてかつ絵柄も統一されていておすすめです。公開しているアプリケーションではmyAnnivで使っていて次のようなものになっています。

これはカラーのアイコンを使っていますがモノトーンのアイコンもあってアプリケーションの雰囲気に合わせることができます。

Segoe Fluent Iconsフォント

今使っているのはSegoe Fluent Iconsフォントです。画像ファイルを使うのではなくてアイコンのようなグリフが含まれるフォントを使うやり方で、画像ファイルの管理がいらなくなります。

myWikiで使っていて次のような雰囲気です。

決められた中から選ぶしかないのでぴったりなものがないと困りますが、種類が豊富なので大抵はなんとかなると思います。

メリットは文字を表示しているだけなのでダークモード対応がやりやすいこと。Delphiの場合スタイルの切り替えで配色を変更することができるのですが、その仕組みでツールボタンの背景やフォントの色が自動で変わるのでダークモード用の画像を用意するような手間がありません。今後公開する予定のバージョンでは次のような表示ができるようになります。

デメリットはWindows 10対応の手間。Windows 11にはフォントが標準でインストールされているのですが、Windows 10にはインストールされていない可能性があります。ツールチップが出るので最悪ツールボタンに何も表示されなくても機能の利用自体はできますが、対策としてSegoe Fluentアイコンフォントがない場合はSegoe MDL2 Assetsフォントを使うようにしています。

手間といっても開発の手間はたいしたことはないので自分にとっては小さなデメリットです。仕事で使おうとすると端末の環境によってフォントが変わるために、例えばマニュアルを作ったときにマニュアルと画面のボタンの見た目が違うので混乱を招くというケースが起こり得るので、アイコンイメージを読み替えてもらうような配慮がマニュアルに必要になるという手間が出てきます。