コ・デザインのためのシンキングシート

突然ですが、ここに一つのプロダクトがあるとします。 そのプロダクトを見つめる視線には様々な種類があります。 そのプロダクトを利用しているユーザーの視点、利用していないが存在は知っているという人の視点、それをつくるデザイナーの視点、プロダクトを運営している会社経営者の視点… もしあなたがデザイナーであれば、デザイナーの視点だけが唯一自分で体感できる「主観」で、それ以外はすべて「客観」となります。 主観と客観のスイッチング プロダクトデザイナーはユーザーの期待通りに正しく動くしくみを設計し、「このプロダクトを利用した時に、ユーザーの生活はどう変化していくのだろうか？」と問いを立てながらアウトプットを評価していきます。 自らの考える理想像をデザインしながら、一方でそれに触れるユーザーの様子を想像する…プロダクトデザイナーは主観と客観を電気のスイッチのように瞬時に切り替えることに長けた人が多いイメ

すべてのボタンがアクションを実行するわけではありません。たとえばトグルボタンなどは、アプリの状態を変えるために使われます。１つのコントロールで複数の機能をもつので、UIのスペースを節約することができます。トグルボタンは押すと状態が瞬時に切り替わりますが、それ故に正しく設計しないと問題が発生します。 反転したカラースキーム vs 通常のカラースキーム トグルボタンの課題は、現在の状態をいかに明らかにできるかというところにあります。視覚的な手がかりが明確でない場合、ユーザーはアクティブな状態を認識できないことがよくあります。これにより、誤ったオプションを選択してしまい、意図しない状態を引き起こしてしまう可能性があります。 特に混乱が起きやすいのは、現在の状態を示す視覚的な手がかりが反転色である場合です。このトグルボタンは一般的ですが、最適解ではありません。ユーザーには、暗い色のボタンがアクティ

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 優秀なUXデザイナーについて書かれた記事はインターネットに多く存在しますが、本記事はそれらとは違います。今回は悪いUXデザイナーを見分ける方法について話したいと思います。 デザイナーが優秀かどうか見極めるのに役立つセリフを10個ご紹介します。 私はUXデザイナーなので、ユーザーにとって何が最善か知っています ステークホルダーよりも、チームメンバーよりもはるかに問題領域に詳しいと信じているデザイナーは少なくありません。ときにはユーザーより把握していると考える人さえいます。したがって、デザイナーが自分たちのソリューションに固執し、批評から逃れようとする状況がよく起こります。 理解しておくべきは、どれだけ長くデザイナーとして経験を積んでいようと、すべてのアイデアは仮説

岩根雅明　MASAAKI IWANE @animator1965 今日はホテルで描いてたピカチュウの振り向きアニメバリエーション。基本的にスタート12コマ止まってて振り向き12コマでラスト12コマ止め その１単純に原画2枚なのでアニメとは言えません（でも歴史上これで放送されたパターンもありますが pic.twitter.com/BPhLrnyDfE

よく知られているように、人間の行動は予測がつかないものです。重力、電気、摩擦とは違い、毎回いつも同じように振舞うわけではないようです。 そしてこのことが、フィッツの法則を興味深いものにしています。フィッツの法則とは、人間の振る舞いについての非常によくできた予測モデルです。 デザイン時にフィッツの法則を活用することで、標準的な人間の振る舞いを用いて、使いやすいインターフェイスを作れるようになります。あなたのWebサイトにも、ソフトウェアのプログラムにも、ゲームにも、これを用いることができます。食料品店のセルフレジから金融系のWebサイトまで、人間の行動は変わらずに同じままなのです。 どんなインターフェイスも、フィッツの法則から得られる教訓を用いることで、ユーザーが起こすエラーを減らして、彼らがタスクをより素早く達成するようにできます。 フィッツの法則とは何か フィッツの法則は、人間の行動をモ

この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 Staying in Touch with What Users Want Webデザイナーとして、私たちは専門知識に基づいてクライアントのためにサイトを構築します。ナビゲーションやCTAなどのアイテムを配置するための確かな方法論がある一方で、他のデザイン判断はより属人的です。多くの場合、私たちはユーザーが何を望んでいるかを考えて機能を実装するのです。 これはすべてのデザイナーにとって、特にフリーランスや小さな代理店にとっては、非常に困難なことでもあります。なぜならほとんどの場合、実際のユーザーテストを実施するための予算がつかないからです。小規模なプロジェクトを数多く行う場合、優れたUXを構築するために１～２個の何らかの根拠に基づいた推測を基に進めることもあるでしょ

と思っている話です。もはやタイトルでぜんぶ言ってしまった。 せっかくなのでもう少し続けます。 2020/05/03追記：第二弾？書きました この本がまだ初稿になる前、共著者のみなさんと執筆真っ最中の頃に何度か打ち合わせがあったのですが、そこで「書籍的な文章を書き慣れてない人って、"という"と"こと/もの"を多用しがちなので、この2つを抑えるだけでも文章がシュッとするんですよ」とお話したら思ったより反応があったので、これは需要があるんじゃないかと感じたのがきっかけです。 ここから先は具体例を交えて解説していきます。 さすがに他人様のテキストを使うのは気が引けるので自分が書いた記事を例に挙げます。……でも自分はこのテクニックを使うようにしているので、該当する記事がなかなかないんですよねぇ……と思ったらあった！ （よりによってこれか……せっかくなので皆さんスタァライトを観ましょう！） 記事中では

多くの会社はWebで強力なプレゼンスが必要な理由を理解しているものの、しばしばユーザーをそのプロセスから放置しています。競争が激しいデジタル世界において、企業はシームレスなユーザー体験を保証するためにできる限りの努力をしなければなりません。 私たちの生きるデジタル時代において多くの場合、企業のWebサイトは人々がそのブランドに触れる最初の接点となります。人々は実際の店舗に（もしあるならば）入るはるか前にWebサイトを訪れます。Chain Store Ageによると、顧客の39%は、Webサイトで選択肢が多すぎると不満を覚え、離脱するそうです。 それでは、企業はどのようにしてデジタルプラットフォームを通じて良好な体験を提供し、ユーザージャーニーを充実させ、購買の意思決定に影響を与えられるのでしょうか？ 良いUXの秘訣はインタラクションデザインにある インタラクションデザインは、ユーザーをもて

インタラクションデザインとは、論理的かつ考え抜かれた動作と振るまいを備えた、魅力的なWebインターフェースをデザイナーが作るプロセスのことです。実際のアプリを実例に紹介しながらインタラクションデザインの概念についても理解しましょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査 本稿は、Designmodeのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また本記事はCarrie Cousins氏によって投稿されました。 「イ

シンプルにデザインする方法を学び、なぜデザインが過度に複雑になってしまうのかを知りましょう。もっとも成功した企業が作り出し、広く使われているプロダクトの多くは明らかにシンプルなものです。 また、シンプルさは一部の企業が競合よりも成功している主な理由でもあります。Googleの検索エンジンや、AppleのiPhone、WhatsAppメッセンジャー、よくできている天気ウィジェットなどは、シンプルさが表に出ている人気プロダクトのほんの一例です。 この記事ではシンプルさを見分けて獲得する方法と、シンプルさがすぐれたUIをもたらす理由を紹介します。 シンプルさとは何か？ 今シンプルなものが大流行しています。シンプルさは、成功した企業とそのファンの多くに支持されているデザイン哲学です。大成功を納めているApple社はデザインのシンプルさを求めて常に戦ってきました。米国出身の起業家であり投資家でもあっ

どうも、イケダです。最近よくTwitterで知り合った若いデザイナーにお会いしているのですが、どなたにも決まって聞かれることがあります。 「G●●dpatchってぶっちゃけどうなんですか?」 知りません、なんで僕に聞くんだw 2015年に「Dear G●●dpatch」という内容のサイトを作って持っていったところ、「あー、またこれね...」と土屋さんに非常に悲しいリアクションをされてしまったので別の方法で気を引くことをオススメします。 というわけで今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオ

サービスのUIを設計するとき、「なんとなくこんな機能があった方がいいな」とぼんやり考えたことはありませんか？ 今回お話しする「ランキング機能」も、なんとなくあったらいいなと思う機能の一つである場合があります。このようなサービスの付加価値を上昇する機能は、「本来の効果」を意識しなければ全機能の中での優先度が曖昧になり、どこに配置すれば本来の効果が発揮できるのかわからなくなってしまうのです。 本記事では、ランキング機能の本来の効果を、既存アプリ・サービスを参考に考えてみました。今後商品を販売するサービスの設計をする人の参考になれば嬉しいです。 この記事のランキング機能は、ゲームのランキング機能を除いた商品を売り買いするサービス（AmazonやZOZOTOWNなど）におけるランキング機能の話をします。 ランキング機能の有無 早速、日常生活でよく見るランキングを含め、ランキング機能とは何のために存

[レベル: 上級] SEO と相性がいい Lazyload の実装を解説するドキュメントを Google はデベロッパー向けサイトで公開しました。 3つのアドバイス ドキュメントには3つの指針が書かれています。 1. viewport 内で見えるようにする viewport 内にあるコンテンツは、必ず Google にも見えるようにしておきます（viewport は簡単に言えば、スクリーンに表示される領域）。 つまり、重要なコンテンツが viewport に入ったときは確実に読み込ませます。 IntersectionObserver API と polyfill を実装するように Google は指示しています。 2. 無限スクロールでは paginated loading を使う 無限スクロールを採用している場合は、paginated loading を実装します。 paginated

Alanは、ITの領域において幅広い経験をもつ、テクノロジーに関する熱心なブロガーです。彼は現在、ロサンゼルスに拠点を置くSPINX Digital Agencyと連携して仕事をしています。 些細なことがユーザー体験を大きく左右することもあります。私たちがインターネット上で行うことの大部分は、無意識下で行われます。私たちは、漠然と画面を見て、Webサイトを訪れ、コンテンツを消費しています。 ユーザーはほとんどのことを無意識に行っていますが、Webサイトはユーザーの行動を強く意識しなくてはなりません。Webサイトは、いかなるときでもユーザー１人ひとりのニーズとウォンツに対して責任を負う必要があります。Webデザイナーは、顧客データとペルソナを活用してWebサイトのトーンやビジュアル要素を作り出し、ターゲットユーザーに最適な形でサイトを提供しなければなりません。 画面のスクロールは過小評価され

「ソフトバンク」というと、皆さんはどのようなイメージを持っているでしょうか？ 最近は、UberやWeWork、ARMなど有名企業への出資や買収で話題になっていますが、実際にソフトバンクでどのようにサービスが作られているのかイメージがある人は少ないのではないでしょうか。 そこで今回は、ソフトバンクのクリエイティブディレクターである梅津氏に、ソフトバンクにおけるUXデザインの現場と、その事例のひとつとして公式サイトのリニューアルについてお聞きしてきました。 インタビュイー ソフトバンク株式会社 顧客基盤推進本部 UX企画課 梅津 しおん氏 新設されたUX専任チーム ― 今回お話いただくにあたって、まずは梅津さんの仕事内容について教えてください。 梅津：簡単に説明すると、ソフトバンクが提供するサービスの情報設計やクリエイティブ全般を担当しています。私のチームであるUX企画課は約２年前に新設された

語尾に「ゾウ」と付けて、さりげなく象愛を主張するモリマミコです。都内でパソコン教室を運営するかたわら、ユーザーさんと提供者さんの架け橋になりたいと思っていますゾウ。 教室内にもゾウさんの置物を置いたり、写真を貼ったり、さりげなくみなさんにゾウさん好きになっていただきたいと思っているのですが、意外と？誰も見ていない。たまたま気付いた生徒さんに「そういえば、教室にゾウの写真多いわね」と言われて、ここぞとばかりに満面の笑顔で「はい、象好きなんですゾウ」と答えた後の、ちょっとした冷凍庫感がたまりません。ゾウゾウならぬ、ゾクゾクします。 ……⛄❄（ヒュ～ヒュルル～～～）❄⛄…… さて、今回は、新品のノートパソコンを持って、教室にやってきた牛田さん（仮名、54歳、女性）。 何を訊けばいいのかわからないのだけど、教えてもらえるかしら。 彼女が指さした先には「何でも訊いてください」という文字。それは、Wi

現代のビジネスで生き残るためには、ユーザーと常に良好な関係を維持しなければなりません。その最善の手段は、ユーザーを夢中にさせ、記憶に残る貴重な体験を作り出すことです。 Webデザインのようなコンテンツは、さまざまな画面やデバイスを介して直感的に訴える手段として、ユーザーの体験に決定的な影響を及ぼします。その中でもマイクロインタラクションはユーザーを夢中にさせる大きな可能性を秘めているのですが、見過ごされがちな手段です。 マイクロインタラクションとは、ユーザーが特定のアクションを実行したときに表示される小さなアニメーションや視覚的な反応のことです。たとえば、Twitterで「フォロー」アイコンを押すと色がついたり、「いいね」を押すと小さくてカラフルなアニメーションが出たりするものを指します。マイクロインタラクションは一見取るに足らないもののようですが、人間の心理に基づいており、ユーザーに大き