Fluent Designとは
Microsoftが2017年に提唱したデザインシステム。
Windows10の電卓など、一部アプリケーションはすでにFluent Designになっている。
また、Office・カレンダー・メール等、Microsoft製アプリケーションのアイコンデザインがFluent Designベースに変更された。
Microsoftが2017年に提唱したデザインシステム。
Windows10の電卓など、一部アプリケーションはすでにFluent Designになっている。
また、Office・カレンダー・メール等、Microsoft製アプリケーションのアイコンデザインがFluent Designベースに変更された。
Metro風・マテリアルデザイン風の画面を作成するにあたり、
便利なライブラリをご紹介します。
・Metro Modern UI – Metro Framework
WinForm向けのMetroデザインUIを提供してくれるライブラリ。
WinForm向けのマテリアルデザインUIを提供してくれるライブラリ。
XAML向けのマテリアルデザインUIを提供してくれるライブラリ。
デザインで頭を悩ませるのがフォントの問題。
インパクトを重視するのか、読みやすさを重視するのか等、
フォントを変えるだけで読み手に与える印象は大きく変わります。
今回はフリーのフォントを中心に、Webフォントを利用できるサイトなどを
ご紹介いたします。
GoogleとAdobeが開発したフォントです。
様々な言語のフォントがそろっております。
日本語に対応したフォントはNoto Sans CJK JPです。
ダウンロードして通常のフォントとして利用する他、
スタイルシートで指定することでWebフォントとして利用することも可能です。
Noto Sansの派生フォント。
TrueTypeになり、等幅・プロポーショナルが混在していたのが明示的に分かれています。
M+フォントはフリー・自由なライセンスで使える美しいフォントですが、
文字数が少々少ないというデメリットがあります。
そこをIPAフォントで補完したものがこちらのフォントです。
角ゴシックであるM+フォントを元に、丸ゴシック化されたフォントです。
イワタ・電通・ユニバーサルコミュニケーションデザイン協会が作成したユニバーサルフォントです。
通常のフォントは56,000円しますが、Webフォントとして利用する場合は無料です。
様々なWebフォントを利用できるサイトです。
1万PV以内・1書体・1ドメインに限り、無料で使えるプランもあります。
どの場面でどのようなフォントを選択するべきかを、
丁寧に解説されているサイトです。
ソフトウェアやWebサイトのアイコンを作成する際、必要になるアイコン素材。
無料で素材を配布しているサイトや、アイコンを作成するツールをご紹介いたします。
シルエットのベクター画像を配布しています。
AIファイル・EPSファイル等、Illustratorで自由にリサイズでき、とても便利です。
多数のアイコンを配布しています。
Webフォントとしても利用可能です。
メトロ風アイコンを作成することができる、素材集兼作成ツールです。
Webサイトを作るに当たり、配色はとても重要です。
またソフトウェアにおいても、強調したいボタンに色を付ける等、なにかと色が必要になってきます。
今回は、そんな配色を考えるのに便利なサイトをご紹介します。
色見本のサイト
・メトロ色見本 | Metro Design – OZ CIRCLE
・Metro UI CSS : Simple responsive css framework
・Material UI | Material Design | Material UI Colors
配色を作れるサイト
・Paletta – HSV Color palette for every Programmer
・Coolors.co – The super fast color schemes generator
蛇足ですが、配色を考えるためのフリーウェア「 Color Coordinator Plus 」を出しています。
配色に悩まれている方は、ぜひ一度ご試用ください。
アプリケーションのデザインをする際、ユーザビリティを十分に考慮する必要があります。
各社から、何をどのように気を付けたらよいか、どのような事例があるかなどが
インターフェイス デザイン ガイドラインとして提供されています。
Microsoft
Apple
・iOS Human Interface Guidelines
ボリュームは多いですが、是非とも一度目を通してみてください。
アプリケーションの顔ともいえるアイコン。
また、ボタン等の意味合いをわかりやすくするためには、アイコンは不可欠です。
Microsoftでは、WindowsやOffice風のアイコンを配布しています。
Infragisticsから、NetNetAdvantage Iconsという高品質なアイコンパックを販売されていましたが、
販売終了してしまった様子です。残念。
オリジナルで作成する場合は、PhotoShopでアイコンを作成し、PNG画像として貼るか、
@icon変換でアイコン形式のファイルに変換して読み込むと良いと思います。
またMicrosoftから、アイコンの作り方のアドバイスのサイトが提供されています。
記事は2001年と古いですが、今も同様の手法で作れます。
今回は、Windows等のOSの基本的なインターフェイスデザインをご紹介いたします。
・Luna(Windows XP)
・Aero(Windows Vista/7)
・Metoro/Modern UI(Windows8)
・Aqua(Mac OS X)
すべてのアプリケーションはOS上で動きます。
そのため、OSのインターフェイスデザインを踏襲しないと、
ユーザが操作しずらいアプリケーションとなってしまいます。
巷ではよく「ユニバーサルデザイン」という言葉を耳にするようになりました。
いかに使いやすく、簡単に、目的を達成することができるか。
アプリケーションの使いやすさを得るために、デザインはとても重要です。
では使いやすいデザインとは何なのか、もう少し踏み込んでみたいと思います。