2016年もUIデザイン界隈で大流行した「マイクロインタラクション」。イージングの効果と意味を理解すると、自然なアニメーションでUXを向上させることができます。 アニメーションの長さやスピードを変更すると、非常にユニークなトランジションを作成したり、マイクロインタラクション(『「BMWのドア音」に学ぶ、完璧なUXデザインのためのマイクロインタラクション』参照)のユーザーエクスペリエンスが向上したり…

Loading...

アドビのUIデザインツール「Adobe Experience Design(Adobe XD)」にWindows 10用のベータ版が登場しました(アドビの発表)。 Adobe XDは、スマートフォンアプリのUIデザインやプロトタイピングに使えるデザインツール。ワイヤーフレームを作成して画面遷移を確認したり、画像やテキストを配置してチームやクライアントとデザインを共有したりできます。 Sketchラ…

Loading...

2016年のWebデザインのトレンドの1つは「シネマグラフ」。静止画の一部が動く表現は、Instagram広告などでもよく見かけました。なぜ注目されたのか、振り返ってみましょう。 なぜスノードームはこんなにも魅力的なのでしょうか? 正直なところ、中の小さなプラスチックの景色はたいてい雑に組み立てられ、おおざっぱに色が塗られています。スノードームはポストカードよりもはるかにリアリティに欠けています。…

Loading...

「Webの閲覧パターンはF字型」。Webレイアウトの基礎的な知識ですが、この法則に則ればどんな写真を選ぶべきでしょうか? 実例をもとに解説します。 ユーザーの行動を観察した研究によると、Webサイトの右上部分は人の目がもっとも集中しない場所だということです。これは単純に読み方の問題です。私たちは左から右へ読み、次に上から下へと視線を移動させています。 Webサイト閲覧者の多くはWebサイトを「Fパ…

Loading...

まるで「見えないペン」で描いているような手描き風のSVGアニメーション。CSSとJavaScriptの知識があれば実装できる、定番アニメーション表現ですが、Vivusならもっと手軽に実装できちゃいます。 90年代初期のBLINKタグから、最新のCSS3トランジションやアニメーションに至るまで、Webページやアプリケーションの要素を移動する機能は、いつも魅力的な目標であり続けています。 今日では、S…

Loading...

Chrome上で使えて、リアルタイムの共同編集もできるーーそんなGoogleドキュメントライクな特徴を持つUIデザインツール「Figma」がすごいと評判です。Sketchと比較してみました。 デザイン系のブログをフォローしている人なら、新しいUIデザイン作成ツール「Figma」の話題はもう知っているかもしれません。サンフランシスコのプロダクトデザイナーがFigmaを絶賛して注目されるようになりまし…

Loading...

モバイルアプリ相互送客ツール「Tapdaq」のメインデザイナーであり、Dashboard UI Kitの作者として知られるJan Losertさん。4年間のダッシュボードデザインの経験からまとめた26のステップは、UI/UXデザイナー必読です。 過去4年間にわたってダッシュボードとアプリケーションのデザインを続ける中、プロダクトをさらに良く効率的なものにするために、いろいろな部署と付き合っていくこ…

Loading...

既存フォントをIllustratorで加工するのも楽しいけれど、ときにはグラフィックデザインの楽しさを思い出してみませんか? 優れたタイポグラフィを作ろうとすると大変な作業になりますが、デザイナーはその中でも楽しむことを忘れてはいけません。細かいフォントやタイポグラフィの文字を作っていると、あまりにも緻密な作業で肩がこってくることもありますが、この記事をきっかけに、より表現力豊かで遊び心のあるタイ…

Loading...

神は細部に宿る--。たとえばBMWの「完璧なドア音」が究極のUXを生み出すように、 Webデザインではマイクロインタラクションが大切なのです。 BMWのような自動車会社がサウンドエンジニアのエリートチームを雇っていることは、驚くべきことではありません。なぜなら自動車は大きな音を出すものだからです。しかし、彼らがクルマの出す音を小さくすることよりも「チューニング」することに時間をかけていることは驚く…

Loading...

ここ数年のデザイントレンドになっている、背景に動画やアニメーションを使ったWebサイト。海外の優れたサイトから、デザインのヒントを探ります。 Jakob Nielsonが1999年に発表した『Who Commits The "Top Ten Mistakes" of Web Design?(Webデザインでありがちな10個の間違いをしているのはどのような人か)』というリストをいま振り返ってみると、…

Loading...