UI/UX – 株式会社シーポイントラボ｜浜松のシステム開発会社

著者:takahashi

Microsoft Officeのアイコンがfluent design準拠のデザインにリニューアルされるらしい。

Microsoft Officeのアイコンのデザインがリニューアルされるようです。

「Microsoft Office」のアイコンデザイン、6年ぶりに刷新へ – ITMedia

今回のデザイン変更は、Microsoftが提案するデザインFluent Design System に合わせた変更とのことです。

今までしばらくフラットなデザインが主流だったMicrosoftのアイコンデザインですが、今回のデザイン変更から、Googleのマテリアルデザインのような立体感のあるデザインへと変わりそうです。

そろそろ単色でフラットなデザインが見慣れててきたところだったので、新しいデザインは新鮮で面白い造形に感じました。

上の動画でちらっとWindowsの画面も出てきますが、そこに表示されるOffice以外のアイコンも変わったいたので、もしかするとWindowsも近いうちに大幅なデザイン変更が行われるかもしれませんね。

Say hello to Microsoft’s new Office icons – Microsoft

この記事いいね！ (0)

著者:杉浦

近接の法則とフォームデザイン

　近接の法則はゲシュタルト心理学中のグループ化の原則の一つです。ゲシュタルト心理学は、雑多なものにあふれる世界を人間はどのような法則に従って意味づけて認識しているか、を理解しようとする心理学の分野です。ゲシュタルト心理学によって雑多なものを集団として意味づける原則がいくつか発見されています。このグループ化の原則の一つに近接の法則というものがあります。日本語wikipediaではゲシュタルト心理学のプレグナンツの法則の近接の要因として記述されています。ゲシュタルト心理学については英語wikipediaの方が新しく、詳しいです。Gestalt psychology – Wikipedia
　近接の法則は直観的で明快です。近いものは同じ集団として認識される、というそれだけです。次の画像で複数の〇でできたグループはの数は4つであると認識する人が大多数です。

　webページにおける入力フォームでデータを記入するにあたって必要なセット、グループがあります。ラベルと入力欄です。近接の法則に従う事によってラベルと入力欄をグループ化することができ、ユーザが読みやすいフォームを作れます。ラベルと入力欄のセットの配置の仕方は大体3パターン、入力欄のすぐ上のラベル、左揃えのラベル、右揃えのラベルです。それぞれ以下の画像の通りです。引用：Label Placement on Forms | CSS-Tricks
　

　プレースホルダを使うこともありますが、これは入力した瞬間にラベルが消えるとも言えるので、ラベルとのセットを考える今回は除外します。入力欄の右側にラベルを置く手法は、画面は左上から右下に読むのが自然という原則に反するのでなしです。近接の法則に従って認識されやすいのは、入力欄のすぐ上のラベル、右揃えのラベルの2パターンです。引用した画像にも完了までの効率がベスト、良好とあります。フォームのデザインにおけるとりあえずのラベルと入力欄の配置はこの2パターンのいずれか従った方が良いでしょう。

この記事いいね！ (0)

著者:村上

Webサイトやアプリのモックアップ作成には「Adobe XD CC」が便利

タイトルにある通り、今回は無料で使用できるようになったAdobeのサービス「Adobe XD CC」のご紹介です。
最近利用し始めましたが、アプリなどのモックアップ作成にとにかく便利！

公式サイトはこちらから。

Adobe XD CCの購入｜UI/UXデザイン、プロトタイプ、共同作業ツール
 https://www.adobe.com/jp/products/xd.html

インストールもこのページからできます。

起動すると、まずこのウィンドウが立ち上がります。

iPhoneやiPad、Webなど、ベースとなるサイズはここから選ぶことができます。
チュートリアルもあるので、初心者さんはここから始めましょう。

チュートリアルはこんな感じ。

基本操作の仕方から、画像の配置方法などが説明されています。

また、左上のタブを「デザイン」から「プロトタイプ」に変更すると、画面遷移の指定ができます。

上記では、左のページの「ブログ」をクリックすると、右のページに遷移する、という動きを指定しています。

さらに、右上の三角をクリックすると、プレビューが表示され、実際の画面に近いデザインで動作を確認できます。

特にこの機能が便利ですね！
実際に動かすことで、ページの不足等が分かりやすいです。

が、こちらの機能ですが…何が悪いのか、ページ遷移のアニメーションが変更できない時が何度かありました。
例えば、iOSらしく、左にスワイプするアニメーションを指定したいのに、何故か変更できなかったり…。
原因は分からないので、現在調査中です。
まあ、画面遷移自体は問題なく行えるので、些事ではありますね。

以上、Adobe XD CCについてでした。
操作が直感的で分かりやすいし、チュートリアルもあるので、初心者にも安心してお使いいただけるかと思います。
なにより無料ですし、気になった方は是非使ってみてはいかがでしょうか。