WPF, デザイン, 開発環境

Fluent Designとは

Microsoftが2017年に提唱したデザインシステム。

Windows10の電卓など、一部アプリケーションはすでにFluent Designになっている。
また、Office・カレンダー・メール等、Microsoft製アプリケーションのアイコンデザインがFluent Designベースに変更された。

ソフトウェア開発, デザイン

Metro風・マテリアルデザイン風の画面を作成するにあたり、

便利なライブラリをご紹介します。

 

Metro Modern UI – Metro Framework

WinForm向けのMetroデザインUIを提供してくれるライブラリ。

 

MaterialSkin

WinForm向けのマテリアルデザインUIを提供してくれるライブラリ。

 

Material Design Themes XAML

XAML向けのマテリアルデザインUIを提供してくれるライブラリ。

デザイン, 素材

デザインで頭を悩ませるのがフォントの問題。

インパクトを重視するのか、読みやすさを重視するのか等、

フォントを変えるだけで読み手に与える印象は大きく変わります。

 

今回はフリーのフォントを中心に、Webフォントを利用できるサイトなどを

ご紹介いたします。

 

Google Noto Fonts

GoogleとAdobeが開発したフォントです。

様々な言語のフォントがそろっております。

日本語に対応したフォントはNoto Sans CJK JPです。

ダウンロードして通常のフォントとして利用する他、

スタイルシートで指定することでWebフォントとして利用することも可能です。

 

源真ゴシック

Noto Sansの派生フォント。

TrueTypeになり、等幅・プロポーショナルが混在していたのが明示的に分かれています。

 

M+とIPAの合成フォント

M+フォントはフリー・自由なライセンスで使える美しいフォントですが、

文字数が少々少ないというデメリットがあります。

そこをIPAフォントで補完したものがこちらのフォントです。

 

Rounded M+

角ゴシックであるM+フォントを元に、丸ゴシック化されたフォントです。

 

みんなの文字

イワタ・電通・ユニバーサルコミュニケーションデザイン協会が作成したユニバーサルフォントです。

通常のフォントは56,000円しますが、Webフォントとして利用する場合は無料です。

 

TypeSquare [タイプスクウェア]

様々なWebフォントを利用できるサイトです。

1万PV以内・1書体・1ドメインに限り、無料で使えるプランもあります。

 

書体の選び方|伝わるデザイン

どの場面でどのようなフォントを選択するべきかを、

丁寧に解説されているサイトです。

ソフトウェア開発, デザイン, 素材

ソフトウェアやWebサイトのアイコンを作成する際、必要になるアイコン素材。

無料で素材を配布しているサイトや、アイコンを作成するツールをご紹介いたします。

 

All-Silhouettes

シルエットのベクター画像を配布しています。

AIファイル・EPSファイル等、Illustratorで自由にリサイズでき、とても便利です。

 

Font Awesome

多数のアイコンを配布しています。

Webフォントとしても利用可能です。

 

Metro Studio

メトロ風アイコンを作成することができる、素材集兼作成ツールです。

ソフトウェア開発, デザイン

Webサイトを作るに当たり、配色はとても重要です。

またソフトウェアにおいても、強調したいボタンに色を付ける等、なにかと色が必要になってきます。

今回は、そんな配色を考えるのに便利なサイトをご紹介します。

 

色見本のサイト

メトロ色見本 | Metro Design – OZ CIRCLE

MetroUI カラーチャート

Metro UI CSS : Simple responsive css framework

Material UI | Material Design | Material UI Colors

 

配色を作れるサイト

Paletta – HSV Color palette for every Programmer

Adobe Color CC

Coolors.co – The super fast color schemes generator

shade

Color Tool – Material Design

 

蛇足ですが、配色を考えるためのフリーウェア「 Color Coordinator Plus 」を出しています。

配色に悩まれている方は、ぜひ一度ご試用ください。

Android, iOS, ソフトウェア開発, デザイン

アプリケーションのデザインをする際、ユーザビリティを十分に考慮する必要があります。

各社から、何をどのように気を付けたらよいか、どのような事例があるかなどが

インターフェイス デザイン ガイドラインとして提供されています。

 

Microsoft

ユーザー インターフェイス デザインのガイドライン

Windows デスクトップ用アプリを設計する

UX パターン

 

Apple

iOS Human Interface Guidelines

 

Google

Android Design

Material design

 

ボリュームは多いですが、是非とも一度目を通してみてください。

ソフトウェア開発, デザイン

アプリケーションの顔ともいえるアイコン。

また、ボタン等の意味合いをわかりやすくするためには、アイコンは不可欠です。

 

Microsoftでは、WindowsやOffice風のアイコンを配布しています。

Visual Studio Image Library

Infragisticsから、NetNetAdvantage Iconsという高品質なアイコンパックを販売されていましたが、

販売終了してしまった様子です。残念。

 

オリジナルで作成する場合は、PhotoShopでアイコンを作成し、PNG画像として貼るか、

@icon変換でアイコン形式のファイルに変換して読み込むと良いと思います。

またMicrosoftから、アイコンの作り方のアドバイスのサイトが提供されています。

記事は2001年と古いですが、今も同様の手法で作れます。

Windows XP 用アイコン作成法

デザイン

今回は、Windows等のOSの基本的なインターフェイスデザインをご紹介いたします。

 

Luna(Windows XP)

Aero(Windows Vista/7)

Metoro/Modern UI(Windows8)

Aqua(Mac OS X)

 

すべてのアプリケーションはOS上で動きます。

そのため、OSのインターフェイスデザインを踏襲しないと、

ユーザが操作しずらいアプリケーションとなってしまいます。

 

デザイン

巷ではよく「ユニバーサルデザイン」という言葉を耳にするようになりました。

いかに使いやすく、簡単に、目的を達成することができるか。

アプリケーションの使いやすさを得るために、デザインはとても重要です。

では使いやすいデザインとは何なのか、もう少し踏み込んでみたいと思います。