カテゴリーアーカイブ Webデザイン

takahashi 著者: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)
著者:杉浦

認識しやすい色であるJIS安全色

 JIS安全色はJIS(日本工業規格)が定めた人間が認識しやすい色とその色の用途の規定です。
日本工業規格(JIS)を制定・改正しました(平成30年4月分)~安全色及び安全標識などのJISを改正~(METI/経済産業省)
安全色及び安全標識に関する JIS 改正-ユニバーサルデザインカラーを採用-
 規格本文の登録番号と表題は次のリストの通りです。

  • JISZ9101 図記号-安全色及び安全標識-安全標識及び安全マーキングのデザイン通則
  • JISZ9103 図記号-安全色及び安全標識-安全色の色度座標の範囲及び測定方法

 主な規定はシンプルで以下の色を、赤は禁止、青は指示、黄色は注意、緑は安全、を示す様に使うことです。
 
 黄赤、赤紫は少々マイナーでそれぞれ黄赤が注意や明示、赤紫が放射能、に使われます。
 画像の色指定はマンセル値(HSVに似た形式)によるものでプログラムに落とし込みにくいです。プリンタ用、RGBなどは色の指定値 | JIS安全色 ( JIS Z 9103 ) 改正内容の紹介にまとまっています。次の表はこのページからの引用です。

色名 塗装用の参考値 印刷・プリンター出力用
の色指定推奨値
デジタルサイネージ用
の色指定推奨値
HTMLの
推奨値
マンセル値 日塗工
色票番号※
16進表示


8.75R 5/12 K08-50V 0 85 95 0 255 75 0 #ff4b00
5YR 6.5/14 K15-65X 0 50 100 0 246 170 0 #f6aa00
7.5Y 8/12 K27-80V 0 0 100 5 242 231 0 #f2e700
5G5.5/10 K45-55T 85 0 80 0 0 176 107 #00b06b
2.5PB 4.5/10 K72-45T 95 40 0 0 25 113 255 #1971ff
赤紫 10P 4/10 K89-40T 40 90 0 0 153 0 153 #990099


N9.3 KN-93 0 0 0 0 255 255 255 #ffffff
N1.5 KN-15 50 50 50 100 0 0 0 #000000
印刷時に版ズレが起こりうる文字や細線
0 0 0 100
条件   Japan Color 2011 sRGB, ガンマ 2.2, 6500 K
  • この記事いいね! (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についてでした。
操作が直感的で分かりやすいし、チュートリアルもあるので、初心者にも安心してお使いいただけるかと思います。
なにより無料ですし、気になった方は是非使ってみてはいかがでしょうか。

  • この記事いいね! (1)
takahashi 著者:takahashi

SlackやFacebookの読み込み時に白抜きのサイトレイアウトが表示されるアレの名前

スケルトンスクリーンっていうらしいです。

Facebookアプリの記事ローディングに似たUIの実装 – Qiita

実際の画面に近いレイアウトが表示されるので、読み込み時のストレスを軽減する効果があるらしいです。

UXを向上させる5種類のアニメーションの使い方 – UX MILK

確かにロード時間が短く感じるかも…

最近はWebサービスのリッチ化に伴って、ロード時間もかなり長くなってきています。
今後Webサービスを作るときは是非真似したいですね。

  • この記事いいね! (0)