株式会社アンドパッドでUIデザイナーをしている、よつくらです。 2024年の7月、おそらく3年ぶりにアンドパッドで運用しているデザインシステムの、網羅的なカラーパレットを作成しなおしました。今回、カラーパレットのコントラスト比を揃えるのにOKLCHカラースペースが便利だったので紹介します。 網羅的なカラーパレットのコントラスト比を揃える前回カラーパレットを作成したとき、1段階目の網羅的なカラーパレットと、2段階目の意味を持ったカラーパレットを作成しました。そのときの学びは下記のnoteにまとまっています。 1段階目の網羅的なカラーパレットについて、色相の異なる色同士で同じコントラスト比を保っておいた方が、UIコンポーネントを作成するときに便利です。 毎回コントラスト比の計算で悩むのは嫌だ例えば上の図のように、いろいろな色で使えるタグコンポーネントを設計するときのことを考えてみましょう。 こ

PREDUCTS 代表 / THE GUILD 共同創業者 UX Designer / デザイン・テック・データ・アウトドア・ガジェット・旅行・犬 / デスク作ってます → http://preducts.jp

お久しぶりです。東京の端くれでひっそりデザイン会社を営むおりです。 最近、協力先企業においてデザイナーの採用をお手伝いすることが増えてきたのですが、その際に見えてきた最近のWebサービスのUXデザイナーの傾向について、やや引っかかる部分があったので、またぞろ筆を取った次第です。 UIやUXという言葉は広く一般に浸透してきたこれはとても喜ばしいことです。特にゲームなどの影響もあり、一般ユーザーであってもUIとUXの概念や関係性を正しく理解し、言及することが多く観測されるようになりました。 で、広く一般に浸透してきたということは、それらを作るデザイナーも増えてきたのかな？と思っていたのですが、どうやらそうでもないようで採用活動には大変苦戦しているという状況でございます・・・。 最近のUXデザインという業務の認識について募集要項上で職種としては、インターフェースの画面設計を独力で完結して欲しいの

今回の記事は特に私の意見であり、所属会社の意見ではないことをお断りしておきます。 最近になってまたウォータフォール vs アジャイルの議論を見かけることが多くなってきたので、私が勤務する米国の世界規模のクラウドプロバイダーでは2024年現在どんな開発をしているのかをご紹介したいと思います。私はこれが「正解」といいたいのではなく、何らかのポイントが皆さんの何らかの参考になったらいいなと思って筆をとりました。 ちなみに、2016年時点で私のウォータフォール開発に対する考え方は下記のブログの通りで今も変わっていません。ただ、2024年現在だからといってアジャイルをやるべきと思っているわけでもありません。 もし、今ウォータフォールをやっている人がいたら「そんなこと言ってもどうしたらええねん」となると思うので、自分なりの解決方法も考えてみました。 最初に自分的な結論を書いておくと「2024年の開発と

今回は、筆者が過去の転職活動の際に重視していたポイントを記載したメモが見つかったので、発達障害で職探しに悩んでいる方は勿論、定型発達だがいまいち仕事の軸が決まらない方の参考になれば幸いである。 勿論人によって重視したいポイントは異なると思うため、あくまで参考程度に留めて頂きたい。 以下が筆者が転職活動の際に重視していたポイントである。 【食堂の有無、昼寝出来る場所が存在するか】 【転勤の有無】 【大企業であるか、企業体力はあるか、安定しているか】 【ビジネスモデル】 【口コミサイトのスコアの数値】 【福利厚生】 【勤務時間】 【在宅勤務の有無】 【株式投資の制限有無】 【専門性が身に着くか、どのようなスキル獲得が期待されるか】 【英語力が活かせるか否か】 【スピードに追われる業務か、対クライアント業務か否か】 【当該業務は希望者が多いか否か】 【チームメンバーの雰囲気、年齢分布】 上記のポ

【はじめに】この記事はBaaaaと何の関係もないただの学生（25卒）が執筆しています。 【Baaaaとは】カメラで現実世界を写すことで絵文字が生成され、それをコレクションしたり、レコードに載せて音楽を奏でられるアプリ。他の人のレコードを回したりスクラッチしたりとSNS的な側面も持つ。 日本企業のwedが制作しており、同社はONEというレシート買取サービスも開発している。 【感動した5ポイント】1.UIのサイズが激しく変化する下部にあるフッターナビゲーションの大きくサイズが変化するボタンを見て欲しい。選択されている場所を色、サイズ、テキストで強調できており、分かりやすい。また、指からはみ出すアニメーションはダイナミックでワクワクする。 フッターナビゲーションそして、一体感がすごい。フッターナビゲーションを左右にスワイプすることによって、指、ボタン、中央画面が全て同じ方向に動く。まるで指で引っ

結論話題の記事「UIの色を変えただけで大量のクレームを頂戴してしまった話」を読みました。ユーザーを軽視した内容に驚愕したのですが、それよりも記事が批判されている原因を理解できていない様子の方が存在することに衝撃を受けました。 現職のデザイナーあるいはデザイナーを目指している方々にお伝えしたいことは以下の3点です。 具体的な不都合を訴える問い合わせは無益なクレームではなく有益なフィードバックです。プロダクトの価値向上につながる貴重な意見ですから無視するべきではありません。 時間の経過でユーザーがUIに慣れることはありません。問い合わせをしても無駄だと学習して離脱したパターンを疑いましょう。受け入れられる場合も含めて画面の変更はユーザーに負担を強いているのだと自覚してください。 色覚特性や色とコントラストについて学びましょう。色だけで情報を伝えるデザインはアンチパターンですから避けてください。

120 アプリ 調査 : 統計編です アメリカ iOS App Store のアプリを 120 個ダウンロードし、オンボーディングについて調査。それらの UIUX を 15 種類に分類してメリット・デメリットについて考察したのが 前記事 でした。 今回は統計編として、実際にどのような UIUX が流行っており、また衰退しているのかを、客観的に数字を通して見てみます。好き・嫌い・使いたい・イケてない等の感情論を叩きつぶすための記事となっていれば幸い。 それこそ個人的な憎しみのあまり、本当は副題を「スライド式チュートリアルは絶滅しろ」としたかったのですが、結論から書くと僕の感覚は間違ってました。それが分かっただけでもリサーチして良かった。 00# こんな感じで集めた（再掲） ・　US iOS App Ranking Top 100 + 気になるもの 20 をダウンロード ・　ゲームは除外 ・　

前記事 では 120 アプリの統計結果を通して、どのようなオンボーディングが今トレンドなのか・何が衰退しているのかを統計的に見てきました。 今回はそうしたオンボーディング UIUX の中で個人的に自分が「これはすごい！よく考えられてる…！」と思ったアプリのオンボーディング体験の王者・「インタラクション型」の Duolingo / Twitter / Shazam / Reflectly の UX の何がすごいのかを独断と偏見で解説していきます。 01# Duolingo : 王者のオンボーディング解説「言語を手軽に無料で学べる」Duolingo ：細かく見ていく中で、本当に感動。ものすごく丁寧に考えられたオンボーディング。圧巻。この記事を読まれている方、というか UX に関わる人には全員マストで触ってほしい。公式サイト　AppStore みどころ ・　余計なものは入れず、ストレートにサービ

オンボーディングとアクティベーションについて考察した 前記事 の続き。今回は 120 アプリのオンボーディング体験を調査してそれらを 15 種類の UX に分類、それぞれの UX について共通項・個人的に思ったメリット・デメリットをまとめました。 次回はこれらの統計結果を公開。今回は実際の UX 事例について。現場で「これ使ってみる？」と今日から検討できる（かどうかは知らないけど…）記事になっていれば幸いです。全 6 記事予定の 2 記事め。 00# こんな感じで 120 のアプリ UIUX を調査した ・　US iOS App Ranking Top 100 + 気になるもの 20 をダウンロード ・　ゲームは除外 ・　アプリひとつひとつを 4-5 分触る。気になったもののみ深堀り。 ・　定義・種類は独断と偏見。 ・　複数種類の手法を使っている場合はそれぞれをカウント 01# スライド式

結論まず結論から申し上げると、生成AIでのマンガ制作はめちゃくちゃ楽しかったです。そして、生成AI×漫画に非常に可能性を感じました。 生成AIがスキルや脳内イメージを超えたアウトプットを出すためか、作り手でありながら、読み手の感動も味わえるところが制作体験を底上げしていました。 生成AIでの漫画制作の強みは３つ。制作時間の半減と高品質な作画、それと作風が人に依存しない点です。３つ目の属人性がない強みは今まで不可能なレベルでのタスクの細分化と人海戦術を可能にするので非常に画期的だと考えています。 制作した漫画 全編生成AI作画のカラー漫画完成しました！！ 死んだ人がアップロードされる天国クラウドサービスで、人生を取り戻そうと奮闘する少年少女の甘酸っぱい物語です。 (1/5)#漫画が読めるハッシュタグ pic.twitter.com/jnBqspwccQ — 比留間 大地 Daichi Hir

こんにちは。のっちです。 現在企業向けのSaaSのデザインに携わっており、その一環でWeb販促EXPOというイベントに参加しました。 Web販促EXPOは、企業向けの業務改善ツールが一同に介して、来場した方に対して自社のツールをPRするイベントです。 250冊ほどパンフレットをもらったのですが、全くもらってもらえないパンフレットや、もらって速攻で捨てられるものを見て、なんだかやるせない気持ちになりました。 サービス紹介のパンフレットに携わる機会のある方は多くいるのではと思い、今回はイベントのパンフレットが果たすべき役割を考えながら、含まれるべき要素、最後に良かったパンフレットの紹介をしたいと思います。 WEB販促EXPOとはWeb販促EXPOについて、もう少し詳しく説明します。 前述しましたが、これは企業の業務を改善するツールなどを告知するイベントで、東京ビッグサイトでやっている、こんな感

きっと、この記事を読もうとnoteを開いた人は、どこかすがるような気持ちがあってのことだと思います。 ようこそ、おいでくださいました。 もう大丈夫、と言ってあげたいのですが、わたしができるのはあくまでもお手伝いだけ。しかも、テキスト上で。 実際に、介護を受けるかどうか考え、決めて、関係各方面を調整し、いろんなところに出向くのはあなたです。 わたしは、正解を提示することができません。 自分らしい決断というものを信じ、突き進んだり軌道修正したりするのは、あなたです。 これが、この記事をこれから読み進める上でのマインドのひとつ。 あと、ふたつあります。 前置きが長くてごめんなさいね、でも大事なことだから。 ひとつは、プライドや見栄を捨ててくださいということ。 「介護を受ける」ということは、できないことや弱いことを社会的に証明する必要があります。国の税金を使わせてもらうということは、それ相応の理由

『はじめよう！ 要件定義 ～ビギナーからベテランまで』はそのタイトル通り、ソフトウェア開発に携わるエンジニアやPM向けに、要件定義の進め方について優しく解説してくれる書籍です。かわいいイラストと平易な文章がとっつきやすく、するすると読めてしまいますが、要件定義って何をどうやったらいいの？とお悩みの方に対して、まずはこれだけやっておくべき基礎知識を得ることができる、とてもわかりやすい内容になっています。 そしてそして、ここからが本noteの主な趣旨ですが、この3部作はデザイナー目線で読み解くと、極めて明瞭で本質的で実践的な、ユーザー体験設計とUI設計の進め方について学べるデザイン教則本と言えるのです。 以下、その理由と、本シリーズを使ってUIデザインを進めていく方法を実例を踏まえて解説していきます。 要件定義とはUI・機能・データを決めることいきなり『はじめよう！ 要件定義 』のキモ・コンセ

国内でも生成AIを使ったプロダクトづくりに取り組む企業は増えていますが、ユーザー体験の正解はまだほとんど体系化されていません。 そのため、サービスの実例を掲載しながら「生成AIサービスにおけるUXデザインのベストプラクティス」についてまとめました。 何でもかんでもチャットUIにしない Webサイトノーコード制作サービス「Wix」のAI機能は、テキストや画像など編集したい箇所をクリックした際にAI機能のボタンが出現する。 このように、制作系のサービスにおいて生成AI機能を提供する際には、むやみにチャットUIにせず、対象箇所に紐づいてAIをアシスタント的に呼び出せるようにするのがポイントだ。 Wixの生成AI機能のUXには以下のようなポイントも押さえられており、非常に参考になる。 ユーザーにプロンプトエンジニアリング力を求めない。UIのインプットフィールド側で必要な情報を過不足なく吸い上げられ

はじめに ここ最近はデザインシステムの構築や支援を行なっています。そこで、デザインシステムを作ることが目的になっていることを感じることがあります。私はデザインシステムは作ることよりも、育てていく考え方が重要だと思っているので、その考えについてお伝えします、どなたかの参考になれば幸いです。 デザインシステムとは？まずはデザインシステムそのものについてです。デザインシステムの事例から学んでみます。 GoogleのMaterial DesignGoogleのMaterial Designは「チームがより高品質なデジタル体験を各OS上で構築するためのもの」と表しています。 Material is a design system created by Google to help teams build high-quality digital experiences for Android, iO

（注１）本記事では、ゼルダの伝説 Tears of the Kingdomのラストバトルを全てネタバレします。クリアした人だけ読んで下さい。まだクリアしてない人は、感動を奪いたくないので、引き返して下さい。 （注２）本記事は、以下のTotK批評記事のネタバレ部分のみ切り出した形式のものです。 両方お読み頂くと、より理解が深まると思います。 軽く↑の記事で説明した前提だけ共有しておくと、私は「BotW以前の3Dゼルダが大好きだった、BotWはちょっと自分の期待と違う方向に行ってしまった」と思っていたプレイヤーでした。 では、ここに残っているのはゼルダTotKをクリアした人だけだと思って、存分にネタバレを含めて解説していきます。 遥か空中で「私にできることがある」と直感した唯一無二の体験Tears of the Kingdomのラストバトルの最終盤の黒龍戦。 魔王ガノンドロフが秘石を飲み込んで

ひとえにUIデザインといっても、プラットフォームや分野によって考えることも作る内容も変わってくるので、彼らをすべて「UIデザイナー」と一括りに呼ぶことにはいささか無理があるように感じることがあります。エンジニア職でいう「Webフロントエンジニア」と「iOSデベロッパー」の区別がされていないような状況に近いかと思います。かといって職能や肩書きを細分化することを提案しても、それが適切に社会に支持され、お金を稼ぐことができるひとつの職業として認められなければあまり意味がないので、理想だけを語っても仕方がありません。その代わりに、大きくUIデザイナーと呼ばれる職種には具体的にどのようなタイプが存在しているのかについては、なんとなく言葉にできるような気がしました。この発想でスキルマップを作ったりして当てはめてみることで、さまざまな個性の存在や捉え方といった発想が見えてくるのではないかと考えました。

多くのアクセスがあったので無料化しました 要求定義テンプレも記事内でDLできます。 はじめにはじめましてUX プランナーのShoty(@shoty_k2)です。 今回は「要求定義」をつかった、UX デザインについてご紹介します。 実践用テンプレートも記事内にて配布しておりますので、参考にしてください。 「要求定義」とは要求定義とは、「事業や施策によって実現したいこと」です。ユーザーにどのような状態になって欲しいのか・何をしてほしいのか、ビジネスで何が必要なのかなどを取り決めることです。 要求定義という言葉は、もともとはシステム開発の現場では頻繁に使われている単語で、非技術者の企画者がシステムに求める仕様を定義することです。 「要件定義」と「要求定義」の違い多くの方が「要件定義」という言葉を聞いたことがあるかと思いますが、「要件定義」と「要求定義」の違いについてご存知でしょうか？ ★要件定義

「ユーザビリティチェックリスト」ということで、UIデザインの「あるある」を取り上げ、改善案とセットでまとめています。 今回は、10のヒューリスティクスをもとに分類してみました。10のヒューリスティクスについては、以前記事にまとめています。 具体的な事例を一緒に取り上げ、よりわかりやすく解説していますので、こちらもあわせてご覧ください。 また弊社ホームページにて、ユーザビリティチェックリストをダウンロードいただけます。こちらも合わせてご活用ください。 1. システムステータスの可視化（Visibility of system status）1-1. 入力項目が多いときはステップを分けるフォームの入力項目が多い場合は、項目をグルーピングして画面を分割しましょう。 フォームが長すぎると、ユーザーは入力を途中で辞めてページから離脱してしまうかもしれません。 その上で、ステッパーを設置して現在の進捗