ChatGPTをフル活用したUI勉強会！プロンプトも大公開｜つむら
はじめにこんにちは！つむです🐈 8月より社内で実施するchatGPTをフル活用したUI勉強会を実施しています📚 開催までの背景や内容決定までのプロセス、プログラムをご紹介します🚩 使用するペルソナ・ユーザーストーリー・情報アーキテクチャ図を生成するプロンプトも公開しますのでぜひご覧ください✨ 自己紹介2022年KDDIにUXデザインコースで新卒入社（KDDIアジャイル開発センターに兼務出向中） auショップ向けDX施策やワーケーション施設検索サービス「タビトシゴト」などでUIUXを担当 背景UI業務多いのにUIデザイナーが少ないKAGデザイナーは基本的に上流を主戦場に置くUXデザイナーやサービスデザイナーとして業務をしている方が多いです。 しかし私は学生の頃からUIが得意たっだため最初はUIデザイナーからスタートし、徐々に上流へ足を広げる方針にしていただきました🙌 配属直後はUIデ
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ～業務システムとSaaSのUIを考える
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
【保存版】心地よいWeb遷移アニメーションの基本ルール6個まとめ
※この記事は、Mediumで公開された「Transition animations: a practical guide」の著者Dongkyu Leeから許諾を得て、日本語翻訳しています。 Webサイトやスマホアプリにおいて、アニメーションと動きの重要さは年々高まっており、今では必須と言われるまでになっています。 ユーザー エクスペリエンスの権威ニールセン・ノーマン・グループは、「アニメーションは注目を集めるだけでなく、ユーザーの楽しみを高め、製品を新鮮でモダンなものに感じさせてくれる」と述べています。 アニメーションが十分に洗練されていれば、ユーザーにはっきりとしたフィードバックを与えることができ、インターフェイスをより直感的にすることができます。 特に遷移アニメーション（Transition Aniatiions）は、ユーザーをある段階から次の段階へとスムーズに誘導するため、重要な役割
ユーザーが迷わない、直感的に操作できるUIの作り方 | UX TIMES
こんにちは、デザイナーの小蕎です。UX DAYS TOKYOの読書会で学んだ”心理学や脳科学”の内容を取り入れた「脳科学で習慣化を促すアプリ（以下、習慣化アプリ）」を作ってみようということになりました。 アプリの画面設計をして、オーガナイザーである大本さんからUIを指摘されることで多くのナレッジを得られました。知識として頭にいれるだけでは身につかない、実際に作ってみたことで学べた事例をご紹介します。 CTAはメインカラーと異なるものを利用する 色を決定していく時に、ヘッダーや行動を誘導するボタン（CTA）もメインカラーにあわせた色にしていました。 それが左の画像です。ヘッダーと「次へ」ボタンが同じ色になっていて一見まとまりがあるように見えますが、馴染みすぎてしまいCTAであることや強調したい部分がユーザーに伝わりません。 メインカラーとボタンを同じにしてしまうと画面に馴染みすぎてユーザーの
伝わる文章 | 基本要素 | SmartHR Design System
相手に誠実に、わかりやすい文章を書くための心がけをまとめました。 どういう思考プロセスからどんな表現が生まれるのか、参考として実例を紹介しています。実際に読み比べ、SmartHRの従業員として何かを伝えようとするときの、参考にしてください。 伝わる文章のガイドライン何を伝えるかによって、必要な情報の量や説明の粒度は異なります。 情報が不足していたり、逆に情報が多すぎたりすると、読者が意図を読み取れないことがあります。 読み手となる相手の状況（読む場面、事前知識など）を踏まえ、言葉にする内容や表現を厳選することが大切です。 目的に合わせて情報を取捨選択する読者の目線に立ち、コンテンツの目的に合わせて情報を取捨選択しましょう。 実例1：法律や業務に関わる記事目的業務に関係する「厚生年金保険」について正確に知りたいと思っている人に、わかりやすく内容を伝える。 Before日本の年金制度は、全国民
都合の良いUIデザイン〜わがままで怠惰で理不尽なユーザーのニーズに応える10のポイント〜｜SOMPO Digital Lab デザインチーム
こんにちは、SOMPO Digital Labデザインチームのデザイナーの金（https://twitter.com/seikei_kin）です。普段はUIデザイナー・ウェブデザイナーとしてサービスやプロダクトの開発・設計に携わっています。 突然ですが、みなさんは真面目で、協力的で、積極性があって、物覚えがよい方でしょうか？あるいは最新のアプリの動向に詳しく、それらを使いこなせるリテラシーを十分にお持ちでしょうか？ 果たして自分はどうかと振り返ってみると、少なくとも自信をもってそうであるとは言えないのが正直なところです。なまけものかつわがままで、物覚えや察しも良くなく、実際、馴染みのないウェブのサービスやアプリを利用する場合には、些細なことでつまづいたり悩んだりした結果、途中で嫌になり諦めてしまうこともしょっちゅうです。 そして、実は私のようなユーザーは決して少なくないのではないでしょうか
UI/UXデザインを学び始めた頃に役立った「マイ・ベスト・◯◯」を紹介！｜root Inc.
こんにちは。root 採用広報担当です。 rootは「Design Doing for More〜デザインの実践を個から組織・事業へ〜」をVisionに、デザインの根源的な力をより多くの人々、より多くのものごとへ活用することで、世界をより良く前進させていくデザインファームです。 今回のnoteでは、 UI/UXデザインを学び始めた頃のメンバーがデザイン基礎を学ぶために活用した本や記事、デザイン業務において愛用しているツールなどを「マイ・ベスト・◯◯」として紹介します。 ぜひ日頃の学習、業務にお役立ていただけましたら嬉しいです！ デザインのクオリティを支える基礎知識・情報rootでは、クライアントの事業に対して伴走しながら支援に取り組みます。クライアントにはスタートアップ企業も多く、スタートアップ企業や新規事業開発の現場においては、スキルだけではなくあらゆる知識・情報・経験が求められます。
ユーザーの言う「欲しい」はウソなのか？ UXデザイナーが教える「本当のユーザー理解」 | 【レポート】デジタルマーケターズサミット2022 Winter
「ユーザーを理解する」の本当の意味を理解するお客様の目線になって考えよう 自分がユーザーだったらどうしてほしいか考えよう どちらも、よく聞く言葉だ。しかし、ユーザーのことを考えずにプロダクトを作る人はいない。誰しも、ユーザーのことを考えているはずだ。にもかかわらず、世の中には「使ってもらえないプロダクト」「使ってもらえない機能」「ユーザーに響かない施策」があふれている。これは「ユーザーならどうしてほしいかを考えるだけでは、プロダクトづくりの解像度に足りないからだ」と、羽山氏は言う。 のどが渇いているAさんに、何を出す？たとえば、Aさんが「のどが渇いたなー」と言ったとする。あなたは「のどが渇いているのか。自分だったら冷たいお茶が飲みたいから、お茶を出そう」と思う。これは、相手のことを考え、自分だったらどうしてほしいか考えた結果の行動だ。 しかしお茶を差し出すと、Aさんは「気持ちは嬉しいけれど
コーディングを助けるためにデザイナーができること② | knowledge / baigie
1. クリッカブルエリアの指定 ウェブサイトには、テキストリンクやボタン、フォームなど、ユーザーが操作できるインタラクションが存在します。多くの場合は、要素の外郭がクリック/タップできる領域（クリッカブルエリア）となりますが、デザインによっては、あえて要素の外郭＝クリッカブル領域としないことで、使い勝手が向上することがあります。 しかし、デザインデータにクリッカブルエリアの指定がないと、コーダーはそれを読み解くことができず、デザイナーが意図したクリッカブルエリアにならないことがあります。 そのため、以下のようにデザインデータを作り、どこまでがクリッカブルエリアになるか、明確に伝えるようにしましょう。 例：メニュータイトル 下記のようなケースの場合、デザイナー側からの指定がないと、Aのテキストリンクだけがクリッカブルとしてコーディングされてしまいがちです。しかし、Bのように写真エリアや説明文
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.8
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第8弾は、読みやすく・理解しやすくするためのデザインのテクニックです。 UI & UX Micro-Tips: Volume Eight. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. メッセージは正しい順序で構成する 2. すべての要素のシャドウは一つの光源を元にする 3. ホワイトスペースでビジュアルヒエラルキーを構築 4. 一行の長さを適切にすることで、読みやすさが向上する 5. 空の状態を工夫することで、ユーザーの初期行動を促す 6. 最適な読みやすさのために、x-heightに基づいてline
UIデザイン時にやってしまいがちな18の誤ち｜Mikio Kiura / ANKR DESIGN
WebデベロッパーのVictor氏による下記のツイートから始まるスレッドが大変参考になる内容だと感じたので、ご本人に許諾を得て日本語で紹介させていただくことにしました。 I reviewed 100+ user interfaces this year. Avoid the most common 18 mistakes to make your UI/UX design better 👇 — Victor (@vponamariov) July 30, 2021 私は今年100以上のユーザーインターフェースをレビューしました。あなたのUI/UXデザインをより良くするための、下記に示す18個の良くある誤ちを回避しましょう。本記事で使用する画像はすべてVictor氏のツイートから拝借しています。なお翻訳には一部私の意訳が入っていることをご了承ください。 1. 薄いコントラストの文字適切では
【フロントエンド初心者向け】ユーザビリティを上げるちょいテク
フロントエンドの開発が初めての人が意外と抜けがちな観点をまとめてみました。 初めにざっくりと概要を話すと「デザイナーが作るデザインでは表現しづらいもの」をまとめたものになります。 デザイナーが作るデザインは静的なものなので(たまにがっつりプロトタイプを作ったりもありますが)、いわゆる"状態"を表現するのが難しかったり抜けたりしがちです。 具体的に言うとローディング、Empty、エラーなどです。これらをよしなに補完できるフロントエンドエンジニアはデザイナーからもきっと「頼りになるぅ！」と思われること間違いないでしょう。 と言うわけでそんな例を紹介していきます。 今後も思いついたら追加する可能性が無きにしも非ず。 ローディングを出そう こう言うクルクルするやつとか こんな感じでシュインシュインするやつがあります。 基本的にユーザがアクションを起こした時に待たせる場合は必ず表示させましょう。 ロ
WebアプリのUIデザインを洗練させるための７つのヒント - NRIネットコムBlog
こんにちは、UI/UXデザイナーの東影です。 NRIネットコムで様々な会社のUI/UXの検討・デザイン制作をしていたり、HTMLのレビューなど、コンテンツ制作の領域で幅広い業務を担当しています。 普段の業務ではWebアプリケーションを制作することが多いです。 今回はデザインのクオリティを高めるときに、制作の過程で特に気をつけていることをまとめていきたいと思います。 今回はPCのブラウザで使う、↑こういう感じのWebアプリについてお話しします。 UIとは？ 冒頭で「UI/UXデザイナー」と自己紹介をしましたが、簡単に「UI/UX」についてご説明します。 UIは「User Interface（ユーザーインターフェース）」の略です。「Interface」とは「接点・接触部分」などを意味します。 つまりユーザーがWebサイトやアプリと触れる部分、レイアウトや文字のフォント、ボタンの操作性など、画面
14つのUXライティングルール・ガイドライン｜Hitomi Bremmer UI UX
最近、UXライティングのガイドラインについて会社でWikiページを作ったので、日本語だとどんな感じかな、と思い興味本位で調べてみました。日本語も英語も結局「わかりやすく、簡潔に」が一番重要なんですが、文法まで掘り下げて考えてみたので、皆さんと共有したいと思います。 １、ハッキリと簡潔に曖昧な表現は避けましょう。私たちは小説を書いているわけでないので、分かりやすく、読みやすく、役に立つ文章を意識してください。 DON'T：投稿を保存するには、「保存する」をクリックまたは「コマンド＋S」もあります。 DO：投稿を保存するには、「保存する」をクリックまたは「コマンド＋S」があります。 ２、一貫性を保つデジタルプロダクトの声のトーンは一貫性を保つようにしてください。時々フレンドリーになったり、時々ロボットのように話したり、しないようにします。また、「子ども」「子供」、「お客さん」「お客様」はなどの
「俺はこっちのデザインの方が良いと思うな〜」の倒し方 - Qiita
「それってあなたの感想ですよね」 ..... けど、これじゃ勝てないよね、現場はそんな単純じゃないですよね そんなあなたのデザインにひと摘みのエビデンスを添える手法をいくつかお伝えします。 そうです、ユーザーテストです。 .....まだ閉じないで...まだ諦めないでほしい。 いつものじゃなくて定量的に測るユーザーテストです。 タイトルのような主観的な感想を、客観的な数値で倒すことができるのです。 ここではプロダクトのデザイン（見た目やUI設計）をどう定量的にテストしていこうかというお話をします。 はじめに定量的なユーザーテストをすることで見える世界をお伝えするので、その後はこういう場面ではこう倒すといったような How to を列挙しようと思います。 エンジニアの皆々様はテストを書きますよね。 デザインのテストは疎かにしてませんか？ ユーザーテストをすることで実現できること たとえば Yo
UXライターが解説する超実践的UXライティング入門｜nao | UXライター / コピーライター | 著書『#秒で伝わる文章術』発売中
はじめに 私は事業会社（楽天→スタートアップ）でUXライティングを専門としてプロダクトの開発に携わっています。しかし、事業会社で私のような専任のUXライターやコピーライターを雇用している企業は決して多くありません。 多くの場合、UXデザイナーやUIデザイナー、エンジニア、プロダクトマネージャー、マーケターなど、UXライティングに比較的近い立場の方が、自分自身でUIテキストを書かなければならない、というのが実情だと思います。 そうした状況で試行錯誤されている方に向けて、自分に何かできることがあるのではないかと思い、このnoteを書くことに決めましたら。私がUXライティングの知見をしっかりと整理して伝えれば、役に立つのかもしれないと。 このnoteでは、私なりの実践的なUXライティングの方法論を言語化します。あくまで私が実践しているものなので、考え方もやり方も違うし、こんなのUXライティングじ
満たしておくべきWebアクセシビリティを向上させる5つの手法｜Yuji Mine
こんにちはフロントエンドエンジニアの峯です。 今回はアクセシビリティを向上させる５つの手法について紹介します。 みなさんアクセシビリティについて、どのくらい意識して普段のプロダクト開発に携わっていますか？ ここで紹介する５つは、あなたのサイトがより多くの方にとって有意義なサイトにするための基本的かつ、不可欠な要素です。 アクセシビリティについてまず、アクセシビリティとは「利用しやすさ」を表します。主にWebサイトなどでは、「情報へのアクセスしやすさ」などを意味します。 「環境や能力、状況にかかわらず、サービスの利用しやすさ、情報へのアクセスしやすさ」に配慮しようということです。 高齢者や障害を持った方に対する対応という印象が強いですが、健常者でも、一時的に障害を抱えた状態はこれにあたります。 高齢者や、視覚障害、聴覚障害、運動機能障害など、様々な障害を持つ方、持たない方、全ての人にとってア
画面をデザインするということ - Qiita
この記事は社内の勉強会で話した内容を再編したものです。 私自身はPC/ブラウザ/スマホのアプリ開発をしている１エンジニアにすぎないのですが、対客や要件定義から開発、運用、そしてUIのデザインを担当しており、自分なりに伝えられるものがないかと試みたものです。 デザインとは デザインとは単に見た目だけの話ではなく、「ビジネス」と「ユーザーが得る体験価値」から始まり、それを実データと結びつけながら人の認知を通してどう見せるのかという作業です。 始まりの部分は最近だとUXデザイナー、終わりの部分はUIデザイナーとかグラフィックデザイナーとか呼ばれるような人の仕事です。そしてそれらを形にするのがエンジニアです。 画面を設計するまでの作業 ギャレットのUX5段階モデルに従って、どういったことを考えないといけないのか確認します。 （実際にUX５段階モデルを意識して仕事してるわけではありませんが、何かしら
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【保存版】無料で学べるUXデザインの教材まとめ｜TSUYOSHI KANEKO / GOGEN株式会社CXO
