UI vs. UXIf you’ve done any kind of research about software design, you’ve probably heard of the terms “UI” and “UX”. But what separates UI from UX? At their most simple forms, UX design is what makes an interface useful, and UI design is what makes an interface beautiful. For UI, this includes a blend of visual hierarchy and interface elements. To understand what separates a great interface from

そもそもUXとは？なぜUXデザインが必要なのか？UXとUIの関係性UXデザインが目指すべきところUXが重要であることは、近年の議論からすでに認識されている方も多いことだろう。 しかし、UXデザインの定義や位置付けはとても曖昧で、人によって捉え方は様々なのではないだろうか。 筆者自身、これまでのプロジェクトを通して様々なバックグラウンドを持った人がUXという言葉を使っているのを目の当たりにし、その度に認識のズレを感じている。 結論から話すと、UXデザインについて定義することよりも、この言葉が世間でどのような使われ方をしているのかを知ることのほうが重要である。 今回は弊社の提供するイノベーションプログラムやデザインプロジェクトを通して蓄積した経験から「UXとは何か」といった捉え方や基本的な概念部分、そして「なぜUXを考える必要があるのか？」にフォーカスし、いくつかの観点をまとめて紹介する。 一

ホリデー株式会社 *1 の多田です。Holiday ( https://haveagood.holiday/ ) というサービスの開発を行っています。 アプリを通してユーザに価値を届けるためには、アプリの細部のインタラクションを軽視することはできません。細かい部分に気を配り使い心地を良くしてこそ、サービスで本当に実現したい価値をユーザにまっすぐ届けることができるためです。 iOS アプリの使い心地を良くするための基本的なインタラクションを以前当ブログで投稿した記事でいくつか紹介しましたが、今回は前回紹介しなかったインタラクションのうち、「読み込み中」の UI の基本パターンについて取り上げようとおもいます。 はじめに：なぜ読み込み中の UI を考えなくてはいけないのか Holiday iOS アプリでは、基本的にデータはクライアント側で持たずサーバと通信して表示するデータを受け取っており、

皆さんが普段使用しているアプリ。便利なものや楽しいものが多くありますが、UI/UXを気にして使用したことはあるでしょうか？多くの人が使用している人気のアプリは内容だけでなく、UI/UXが優れているもの。 どれだけ内容が良かったとしても、UI/UXが優れていなければ長期的に使ってもらえません。そこで今回は、2015年にリリースされたアプリの中で、「デザインが美しい」と話題になったものを紹介したいと思います。 1：PeekPeek 今では、スケジュール管理アプリは数多くありますが、このアプリは他にはない面白い部分があります。それは、ほとんどの操作をジェスチャーで行うというもの。メニューボタンなどはなく、長押しやスクロールといった方法で操作します。このような操作性は、Peekだけです。 2：KocriKocri どこの学校にもある黒板。そのあり方を「一変させてくれるかもれない」と感じさせるのが、

2014年6月にGoogleマテリアルデザインガイドラインが公開されてから、AndroidはもとよりiOSのアプリでも、このガイドラインを取り入れたUI/UXの優れた作品が多数出てきました。 今回はそんな相変わらずトレンディなマテリアルデザインのガイドラインをわかりやすく、ポイントを絞ってお伝えします。 目次 マテリアルデザインとは？ 平面なのに3D 紙とインク マテリアルデザインのカラー グリッドシステム アニメーション 心地の良い動き タッチフィードバック 意味を持ったアニメーション まとめ マテリアルデザインとは？ マテリアルデザインを直訳すると「物質的なデザイン」という意味です。 デジタルのデザインなのにどの辺が「物質的」なのか、それは次の2つの概念で表現されています。 平面なのに3D マテリアルデザインでは、要素の重なりを物理的にとらえ、平面の中に、明確なZ軸の概念を持たせていま

先日、ベースキャンプ名古屋にて開催された WCAN mini 2015 Vol.1 「UXデザインプロセスを活用したコンテンツの評価方法」（講師: 長谷川 恭久さん）の参加レポートとなります。 このセミナーでは、主に Web サイトにおけるコンテンツの実状と把握、その評価やより良いコンテンツを提案するための UX デザインの手法をレクチャーとワークショップを交え、5時間で学ぶというものです。 良いコンテンツを設計し提供するためには、ユーザーを理解すること・今のコンテンツを評価すること。これらは制作プロセスでは当たり前なことでも「できていない現実」に改めて気付かされます。いくつか自分なりの解釈も含めて、特に印象的だった内容をハイライトとしてレポートします。 良いコンテンツとは？ 「良い」は誰が決めるのでしょうか。利用者、ユーザーです。コンテンツ提供者は、ユーザーになり代わって良いコンテンツを

海外の2014年まとめ記事の中に、DropboxのUXデザイナーが自身のユーザビリティテストの模様をブログで発信しているものがありました。 他人のプロセスを知るのは勉強になり、せっかくなので日本語で残してみます。 ※実際にDropboxのサービスをPCで開きながら読むと分かりやすいです。 ■ テストの目的 Dropboxの「写真」ページの課題を明らかにすること ■ テストの内容 何をテストする？：DropboxのWebアプリケーション 誰に?：既存のユーザーで写真をアップしてる人 どこで行う？：コーヒーショップの外を通りすがる人に →サンフランシスコのカフェの外で、行き交う人にゲリラ的にインタビューしていたみたいです。 確かに、日程調整してインタビューするよりフランクな状態を作れるので率直な意見を吸い上げることができそう。 ■ テストの項目 １：写真をアップロードしてもらう ２：アップロー

オンボーディングのUXデザインの参考になる海外Webサイト 「オンボーディング」とは、初めてサービスや製品を使うユーザーがヘルプや説明書を読まなくても使っていくうちに操作方法がわかるように設計する手法のことです。 いかに素晴らしいプロダクトであっても、初めて使用するユーザーにストレスを与えてしまい、すぐにアンインストールされてしまっては意味がありません。 オンボーディングのUXデザインで参考にしたいのが、以下の2つのWebサイトです。 アプリデザインまとめ①　User Onboarding 「User Onboarding」は海外のアプリや有名Webサービスのオンボーディングについて紹介しているWebサイト。 オンボーディングを画面単位で切り分けて、参考になる点と改善が必要な点をピックアップしています。 サンプルはスライド形式で表示されます。簡単な英語で解説されているので、英語が苦手な人で

【本記事とセットで読みたい「UXを高めるTinder風UIで今後が期待される「非」出会い系アプリ10選」を公開しました!】 edited by Ryutaro Mori Follow us on Twitter Follow us on Facebook Tinder 出会い系アプリに革命をもたらしたと言っても過言ではない超人気アプリです。 Tinderの魅力は何と言ってもそのUI。 次々に現れる異性の写真をスワイプしながらハートかバツ印で判定していくシンプルなUIは、今までプロフィール＋顔写真の組み合わせが主流だった出会い系サービス内における異性の判定基準を顔写真(＋位置情報)のみに限定し、「余計な情報」を省くことで出会い系に新感覚のカジュアルさをもたらしました。 (Tinderの基本画像の下にはハートとバツ印が設置してあります。) (相手に好意があるときは、ハートに向けてスワイプします

ユーザー体験（ユーザーエクスペリエンス／User Experience: UX）という言葉が広く聞かれるようになってきた。半ばバズワードのように、特にウェブデザインやマーケティングの記事などの中では、この言葉を見ない日はない。しかしながら、多くの場合、UXという言葉の真意や可能性を取り違えてしまっている。本稿では、いくつかの観点からUXの本質を考えてみる。 １．UI/UXという誤用 1.1. UIとUX まず、多くの記事や講演などで見られる「UI/UX」という表現からとりあげてみたい。 UI/UXとは、もちろん、User Interface / User Experience（ユーザーインターフェイス／ユーザーエクスペリエンス）の省略形であるが、多くの記事などで「すぐれたUI/UXデザイン事例」、「UI/UX講座」などの表現が用いられている。 「ユーザー」という共通項があるため、共通でくく

TL;DR コーディングやシステムは分かるけど、最終的に使いやすい設計やクライアントさんが納得するようなデザインにならない。納品後に使いにくい箇所があると言われる。そうなる前に「何となく進めない」ようにサイト制作やサービス・アプリを作成する前の段階で知っておきたい知識。UX・UI・IA の違いが漠然としているときに。 IA（情報アーキテクチャ） １．基礎知識 情報アーキテクチャとは Web サイト全体の設計図、情報を分かりやすく伝えること。主にＩＡ（インフォメーションアーキテクト）が担当します。国内ではディレクターが担当する会社も多いと思います。情報アーキテクチャはサイトを見た目の印象だけでなく、目に見えないサイト構造をデザインすることで、わかりやすいサイトにする技術。 [スライド] 社内の IA（情報アーキテクチャ）研修の講師をしてみた。：そのフォローアップ | future-proof

UI変更批判バトルと複数のバージョンのウェブサービスを同時に配信することについて - hitode909の日記 を読んで，同じようなこと前から考えていて昨日ひょんなことからブレイクスルーがあったので共有します． ウェブサービス，UI変えると，改悪とか，元に戻してとか，そういう意見が出る． ウェブサービスだけじゃなくてアプリでも同じような問題抱えていて，アプリの場合はストアの評価システムみたいなのがあって，そこにこういう意見が書かれまくる． アプリの場合はウェブサービスと違って，ユーザの選択でアップデートしないとかもできるので，余計に状況が悪くて「こんなことならアプデしなけりゃよかった」とかも平気で言われる． 実際iOS 7が出たときに担当しているアプリで同じようなこと経験したことがあって，iOS 7のあたらしくなったiPhoneにいつも使っているアプリが完全に対応したら最高のユーザ体験だろ

いつも聞いた内容をアップするだけで精一杯で、自分の思考が残せていないのが残念すぎるので、 今日からは、自分の考えも入れつつレポートしようと思います。 さて、12月１７日は、大学時代の友人で、現在goodpatchのUXデザイナーである田中翔子ちゃんにお誘いを頂き、 「OpenNetworkLab × NTTドコモ・ベンチャーズ 共催　UX/UIのグローバル最新事例セッション！」を聞いてきました。 今回のセッションの目玉は、何と言ってもUI、UXのの分野で世界的に有名なFrog Design社 生でお話が聞ける長時間聞ける貴重な機会ですが、実は結論は始まって1分目に出てた。 「世の中の環境がどんなに変化しても、人間が体験するということは変わらない」 これは、当たり前に聞こえるけど、意外と浸透していない考え方でもある。 と、いうのも今日の朝、「2014年のCESはウェアラブル機器祭り？ 」とい

Webユーザーは、情報過負荷へ適応するため、重要でなさそう、あるいは広告のように見えるエリアから注意をそらすように自分たちを訓練してきた。しかし、サイドバーは適切にデザインすれば、コンテンツを発見しやすくし、ユーザビリティをうまく向上させることができる。 Fight Against “Right-Rail Blindness” by Hoa Loranger on October 12, 2013 日本語版2013年12月17日公開 残念なことだが、Webサイトクリエイターが右カラム（Webページの右レールとも呼ばれる）を広告の掲載によく使うので、ユーザーはこのエリアをチェックしないように自分たちを訓練してこざるをえなかった。これは右カラムはやめるべきということだろうか。いや、そんなことはない。 ページの右側で消費されるピクセルは利用可能な量のうちの20％程度だが、ピクセルとはコンピュータ

ブログサービス「マーケター通信」をご利用の皆さまへ 平素はITmedia マーケティングをご愛読いただき、誠にありがとうございます。 当サイトではこれまで、関連ブログサービスとして「マーケター通信」を長年にわたり運営してまいりましたが、全体的な利用の減少を鑑み、2020年9月30日にサービスを終了させることになりました。 このような結果になり残念ですが、何卒ご理解いただけますと幸いです。これまでご利用いただきましたことに対し、あらためてお礼申し上げます。 尚、ITmedia マーケティングは従来通り更新を続けますので、引き続きよろしくお願いいたします。 サービス終了までのスケジュール、および、これまで登録していただいたブログ記事の取り扱いにつきましては、以下の記載をご確認ください。 スケジュール 2020年9月25日（金）

Introducing Sessions: the latest product from Waldo!

皆様、こんにちは。 Ameba コミュニティ部門 チーフクリエイティブディレクターのサトウ（@sugaar）です。 今回は、弊社コミュニティ部門における、サービスクオリティの向上とデザイナーのスキルアップを目的として開催している、「デザイナーロワイヤル」についてご紹介すると共に、普段忘れがちなスマホデザインの5つのルールをまとめさせて頂きます。 デザイナーロワイヤルとはデザイナーロワイヤルとは、8～10名のデザイナーが、お題となったAmebaサービスを使い込み、自分なりのブラッシュアップ案を持ち寄って点数を競う、バトル形式の会議です。 発表者以外にも、誰でも傍聴参加が出来るこの会議。 他のデザイナーの提案を間近で聞けるという事で、 回を追う毎に傍聴人が増え、会議終盤では熱気に包まれるほどの人気会議となりました。 そんなデザイナーロワイヤルの詳しい内容については、弊社「広報ブログ」で取材頂い

UIデザインの新しいワークフローを作るために長谷川恭久さんとの共同プロジェクトとしてスタートした“Patch Project”。導入部分として長谷川さんにお話頂いたワークフローの提案について「これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編）」として記事にしました。後編となる今回は、デザイナーがするべき雰囲気のデザイン、また具体的なワークフローについての話をまとめていきます。 ルック＆フィールを考える photo credit: Crossett Library Bennington College via photopin cc ではHTMLプロトタイプを作っている間にデザイナーがするべきことは何なのか。それは雰囲気をデザインすること。レイアウト以外のデザイン、色やタイポグラフィ、写真や動画について考えていくのです。 具体的に言うと、スタイルガイドを作るこ