UIデザインに特化したデザインツールとして人気のある「Sketch」。その強力なライバルとなる「Adobe XD」と主要な機能と使い勝手を比べてみると……。 Sketchは長い間、Photoshop(ときにはIllustrator)と比べられてきました。 Photoshopは主に写真の編集に使われてきたものの、同時にSketchと直接競合する唯一のツールであり続けたためです。アドビは、アートボード…

Loading...

UXデザインの現場ではユーザーリサーチが重視されますが、アクセス解析(分析、アナリティクス)のデータは活用できているでしょうか? 英国のUXコンサルタントであるLukeは、ユーザーリサーチのベースとして分析データの活用を勧めます。 残念ながら、Webサイトやアプリの分析(アナリティクス)は、UXデザインにおいてしばしば見落とされます。もちろん、Webサイトやアプリの分析はUXリサーチに代わるもので…

Loading...

SitePointのデザイナーであり、デザイン&UX分野の編集者でもあるAlexが振り返る、2016年のデザインツール事情。たくさんのツールが登場した中でもFigmaは特にお気に入りのようです。 2016年ももう終わりですので(日本版編注:この記事のオリジナルは昨年12月に執筆された)、この1年でワークフローがどう変わったかを振り返るのはおもしろいと思います。この1年で多くのツールや手法が大きく変…

Loading...

スマホアプリやスマホサイトではおなじみになった「マイクロインタラクション」。なぜUIに動きをつける必要があるのでしょうか? どんな意味があるのでしょうか。 今週、私はカレンダー機能用のマイクロインタラクションをデザインしていました。「ビジュアルデザイン」はだいぶ前に完成したのですが、モーションをコードに埋め込んで正しく動作させるのは、ビジュアルデザインよりも大変でした。 浮き上がる、折りたたむとい…

Loading...

すっかりおなじみになった「レスポンシブWebデザイン(RWD)」。その言葉の定義は(提唱者であるEthan Marcotteの本来の定義は別として)日本でもたびたび議論になりますが、海の向こうでも再び盛り上がっているようです。 「レスポンシブ(Responsive)デザイン」は、いまではとてもなじみがある言葉です。しかし、その正確な意味と印象は、本当に一致しているのでしょうか。「レスポンシブ(Ad…

Loading...

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...