Snapchatの独特なUXと迎えつつある限界点
SeanはCodalの技術研究者およびライターであり、UXデザインからIoTなどのトピックに関するブログ記事を執筆しています。 もしあなたが25歳以上なら、Snapchatを利用していない可能性が高いでしょう。そのため、SnapchatのUXがほとんど完全に壊れていることを伝えるにしても説明が必要でしょう。私を信じるかどうかはあなた次第ですが、Snapchatに不満を述べた記事はこれとこれとこれとこれとこれのように、無数に存在します。 これらの批判に意味がないわけではありません。Snapchatのアイコンは不可解で、説明のラベルは存在しませんし、アプリの機能は隠れていてわかりにくいです。 中途半端なメッセージ機能、中途半端なコンテンツ配信、中途半端な画像共有機能サービスをもつSnapchatのアプリは、UXデザインの神を怒らせるために、この３つの機能の悪い部分だけを集めて、奇妙で不愉快な合
デザインの名著に学ぶUIデザインに関する10のルール
Ben Shneiderman氏の『Designing the User Interface』とJakob Nielsen氏の『Ten Usability Heuristics』の著書に基づく、インタラクションデザインに関する10個の原則というものがあります。 この原則は、「ヒューリスティック」と呼ばれるもので、経験則による広範なルールであり、特定のユーザビリティに関するガイドラインではありません。 １．一貫性を重視する 同じことを意味する複数の名称や状態があることは、ユーザーにとって好ましくありません。ユーザーの混乱を招かないように、用語と動作を一致させるようにしましょう。相手の驚きを最小限にする「驚き最小の原則（The Principle of Least Surprise）」に留意することが大事です。 アプリ内のすべての要素に一貫性を持たせるようにしましょう。たとえば、同じスタイルの
モバイルのUXデザインにおけるベストプラクティス
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 アプリはコンテンツやサービスを提供するための、今日（こんにち）の主流かつ確かな方法です。しかし、飽和状態の市場でユーザーを満足させ、その興味をつなぎとめるために、どうすればモバイルアプリは意義や価値のあるものとなるのでしょうか。 この記事では、素晴らしいモバイルUXを作る鍵となる、UXデザインのための７つのヒントをご紹介します。 １. 一つの画面につき、一つの操作 ユーザーが情報を取得する際の努力を軽減する 皆さんがデザインするアプリの画面では、ユーザーにとって最も価値のある一つの動作を助長するものでなければなりません。各画面を一つの目的だけのためにデザインし、Call to Action（行動喚起）は一つに留めましょう。こうすることで、ユーザーはアプリを理解・
アニメーションが心地よいマテリアルデザインのUIサンプル５選
徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。 マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方 この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト５選 1. ミュージックプレイヤー 楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア
大型化するスマホに対応する時に確認したい「親指ゾーンマップ」
Scottは元Tinderのプロダクトマネージャー兼リードデザイナー。現在はプロダクトコンサル会社Philosophie所属。ウェブやモバイル製品の構築を15年以上行っています。https://twitter.com/scotthurff。 本記事はTinderの元リードデザイナーであり、今はGoogleや任天堂をクライアントに持つプロダクトコンサル会社Philosophieに所属するScott Hurff氏のブログエントリーからの翻訳転載です。記事自体はiPhone 6発表時に書かれたものですが、議論自体は現行のものにも適用されますので、時事的な部分は割愛しつつ翻訳してお届けします。 親指のためのデザインとは、親指が自然な動きで弧を描く動作で使えるように、最適な形でインターフェイスを構築することです。 しかしこれは非常に複雑な問題です。私たちは画面上の至るところに点在するUI要素に触れよ
ボタンデザインの歴史と進化から学ぶベストプラクティス
ボタンは私たちにもっとも身近な、ごく普遍的なインタラクション要素です。とてもシンプルなUI要素でありながらも、ここ数十年でそのデザインは大きく変化しましたが、いつの時代も大事なのはその明確さと認知性でした。 この記事では、ボタンデザインの進化を振り返り、効果的なボタンを作るための方法論について見ていきたいと思います。 スタイルの進化 立体的なボタン 昔からOSのボタンデザインは、周りの要素からボタンを見分けるためにレリーフとシャドウを使ってきました。 なぜこのデザインなのかというと、シンプルな原理が基本となっています。ボーダー、グラデーション、ドロップシャドウを使用して背景とコンテンツに対してボタンを引き立たせ、クリックできる要素だということを簡単に識別できるようにしているのです。
コピペで使える！マテリアルデザインなUIアニメーション | UX MILK
近年、UIにおけるアニメーションやインタラクションの重要度が増していますが、それらをデザインしたり実装する際、様々なものを参考にすると思います。 実在するアプリもさることながら、DribbbleやBehanceなどのポートフォリオサイトではデザインコンセプトとしてアップロードされているものも多く、参考になるものはたくさんあります。 中には独創的なものもあって、実用性に欠けると感じるようなものもあるかもしれませんが、それでも固定概念を覆す機会になったり、断片的にインスピレーションを得たりもできますし、何よりも、見ていて楽しいものです。 今回は海外のUIコンセプトをたくさんストックしているMaterialUpからいくつかの作品をピックアップしてご紹介していきます。MaterialUpはその名のとおりマテリアルデザインの文脈を組んだ作品を多くそろえているサイトです。 そして多くのGIFだけのサイ
魅力的なイラストを活用したアプリのUIデザイン７選
Appleは完璧を追い求めることで有名であり、それは 私たちがUpLabsで称賛しているところでもあります。 Appleはとりわけインターフェイスに関しては常に境界線を押しひろげ、 他社にとっては高いハードルを作りあげてきました。彼らはスキューモーフィズムを世の中に広めた企業であり、彼らの方針にコミュニティ全体を従わせたのです。 フラットスタイルの時代となった今もなお、彼らはなんとか自分たちに忠実であり続けようとし、崇高なピクセルパーフェクトなデザインを生み出すための製作者を奨励していました。 より現実的なモチーフのマテリアルデザインなどに比べ、半現実的なディテールのコンセプトは、明快さやエレガントさにおいて劣りますが、芸術的な美学を保つことはできます。 美しいグラデーションや、表現豊かなタイポグラフィ、想像性豊かなアニメーション、滑らかなグラフィック、そして豊富なドローイング を使うこと
マテリアルデザインに見る機能的なアニメーションの６つの法則
機能的なアニメーションとは、演出のみのアニメーションと違い、その意図が明確かつ論理的に校正された、控えめなアニメーションのことです。それはUIにおける認知的負荷を軽減させ、変化の見落としを防ぎ、そしてよりその空間の記憶を呼び起こしやすくさせ、何よりもUIに命を吹き込みます。 その動きは、増えたり、分かれたり、その形やサイズが変わることで、画面をさらに生き生きと見せることができます。機能的なアニメーションは、ナビゲーション上でユーザーをスムーズに移動させ、スクリーン上の要素の配置の変化を説明し、要素の階層を明確にするために使用するものです。 成功する機能的なアニメーションには、以下の６つの特徴があります。 1. レスポンスがよい UIデザインにおいてビジュアル・フィードバックはとても重要です。なぜなら、ユーザーの認知に対するごく自然な要求に訴えかけるからです。現実世界ではボタンやコントロール
古典絵画から学ぶデザイン
デザインという言葉は今日では一般的ですが、デザインという言葉がなかったような過去の古典美術の世界でもデザインの概念はありました。絵画というと、デザインというよりファインアートの印象が強いですが、過去の画家たちから学ぶことも多くあります。そこで、今回は古典絵画から学ぶデザインについて説明します。 絵の情報量 モチーフの置き方で変化するもの こちらに2枚の絵があります。 Aは木の隣に猫がいます。Bは木の後ろに猫が配置されています。どちらも同じ要素で描かれていますが、違いは何かわかるでしょうか。 答えは「情報量」です。 Aの場合、木と猫が並んではいるものの、3次元で考えたときに「どちらが前にあるのか」や「どちらが後ろにあるのか」がわかりません。わからない、ということは観るほうにとって情報が与えられてない、ということです。 一方、Bは確実に「木が前で猫が後ろにいる」という情報を観る人に与えます。つ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
