著者:takahashi
[WWDC 2019]iPadのOSが専用の”iPadOS”に変更！よりiPadに合ったシステムになる。
昨夜、Appleの開発者向け発表会”WWDC 2019″が開催されました！！！
実質Appleの新製品などを発表する機会となっているので、毎年、WWDCではビッグな発表が行われますが、今回のWWDCでも、なかなか大きな発表がいくつか行われました。
その中でも一番気になったのがこちら。
なんと、iPadのOSがiOSから独立し、専用の”iPadOS”に変更されるそうです！！！
具体的に何が変わるのかというと、主に画面の大きいiPad用にUIが最適化された形になるようです。
流石にmacOSのようなウインドウの概念はありませんが、全画面と縦画面？をうまく使い分けたような、よりマルチタスクに最適化されたUIになるようです。
他にも、USBメモリ、SDカードなどの外部ストレージにも対応し、ファイルアプリから参照可能になるなど、mac(PC)と同じことができる度合いが増えています。
これはiPadユーザーにとってはなかなかうれしい変更ではないでしょうか。
一方で気になるのはiOS向けアプリやWebページの開発について。
画面サイズの違いがあったとはいえ、今までは”iOS”というひとくくりのものになっていましたが、今後は”別OS”ということになってくるので、どれだけiOSと違いが出てくるのか気になるところです。
Apple、iPad用のOS「iPadOS」を今秋リリース – ねとらぼ
こちらの記事によれば、基本的にはiOSベースであることに変わりはないとのことなので、画面の大きさとiPadOSのみに搭載されている機能あたりにさえ気を付けて置けば、さほど大きな違いは出ないのかもしれません。
ただ、
iPadOSのSafariでブラウジングすると、Webサイトが自動的にデスクトップ版として表示されます。かつiPadの画面サイズに合わせてスケーリングされ、最適化されるため、Mac用Safariとは異なり、「タッチ」にも適切に対応しています。
Apple、iPadに特化したiPadOSを発表 – iPhone Mania
とあるので、iPadOSのsafariはレンダリング時に独特な解釈を行う可能性が出てきそうな気がします。
Webページの動作をデバッグする際は、iOS端末に加えて、iPadOSでも表示を確認するようにした方が無難かもしれませんね。
iPadOSは今秋リリース予定となっています。
著者:takahashi
Microsoft Officeのアイコンがfluent design準拠のデザインにリニューアルされるらしい。
Microsoft Officeのアイコンのデザインがリニューアルされるようです。
「Microsoft Office」のアイコンデザイン、6年ぶりに刷新へ – ITMedia
今回のデザイン変更は、Microsoftが提案するデザインFluent Design System に合わせた変更とのことです。
今までしばらくフラットなデザインが主流だったMicrosoftのアイコンデザインですが、今回のデザイン変更から、Googleのマテリアルデザインのような立体感のあるデザインへと変わりそうです。
そろそろ単色でフラットなデザインが見慣れててきたところだったので、新しいデザインは新鮮で面白い造形に感じました。
上の動画でちらっとWindowsの画面も出てきますが、そこに表示されるOffice以外のアイコンも変わったいたので、もしかするとWindowsも近いうちに大幅なデザイン変更が行われるかもしれませんね。
著者:杉浦
近接の法則とフォームデザイン
近接の法則はゲシュタルト心理学中のグループ化の原則の一つです。ゲシュタルト心理学は、雑多なものにあふれる世界を人間はどのような法則に従って意味づけて認識しているか、を理解しようとする心理学の分野です。ゲシュタルト心理学によって雑多なものを集団として意味づける原則がいくつか発見されています。このグループ化の原則の一つに近接の法則というものがあります。日本語wikipediaではゲシュタルト心理学のプレグナンツの法則の近接の要因として記述されています。ゲシュタルト心理学については英語wikipediaの方が新しく、詳しいです。Gestalt psychology – Wikipedia
近接の法則は直観的で明快です。近いものは同じ集団として認識される、というそれだけです。次の画像で複数の〇でできたグループはの数は4つであると認識する人が大多数です。
webページにおける入力フォームでデータを記入するにあたって必要なセット、グループがあります。ラベルと入力欄です。近接の法則に従う事によってラベルと入力欄をグループ化することができ、ユーザが読みやすいフォームを作れます。ラベルと入力欄のセットの配置の仕方は大体3パターン、入力欄のすぐ上のラベル、左揃えのラベル、右揃えのラベルです。それぞれ以下の画像の通りです。引用：Label Placement on Forms | CSS-Tricks
プレースホルダを使うこともありますが、これは入力した瞬間にラベルが消えるとも言えるので、ラベルとのセットを考える今回は除外します。入力欄の右側にラベルを置く手法は、画面は左上から右下に読むのが自然という原則に反するのでなしです。近接の法則に従って認識されやすいのは、入力欄のすぐ上のラベル、右揃えのラベルの2パターンです。引用した画像にも完了までの効率がベスト、良好とあります。フォームのデザインにおけるとりあえずのラベルと入力欄の配置はこの2パターンのいずれか従った方が良いでしょう。
著者:村上
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についてでした。
操作が直感的で分かりやすいし、チュートリアルもあるので、初心者にも安心してお使いいただけるかと思います。
なにより無料ですし、気になった方は是非使ってみてはいかがでしょうか。
著者:takahashi
SlackやFacebookの読み込み時に白抜きのサイトレイアウトが表示されるアレの名前
スケルトンスクリーンっていうらしいです。
Facebookアプリの記事ローディングに似たUIの実装 – Qiita
実際の画面に近いレイアウトが表示されるので、読み込み時のストレスを軽減する効果があるらしいです。
UXを向上させる５種類のアニメーションの使い方 – UX MILK
確かにロード時間が短く感じるかも…
最近はWebサービスのリッチ化に伴って、ロード時間もかなり長くなってきています。
今後Webサービスを作るときは是非真似したいですね。