結論話題の記事「UIの色を変えただけで大量のクレームを頂戴してしまった話」を読みました。ユーザーを軽視した内容に驚愕したのですが、それよりも記事が批判されている原因を理解できていない様子の方が存在することに衝撃を受けました。 現職のデザイナーあるいはデザイナーを目指している方々にお伝えしたいことは以下の3点です。 具体的な不都合を訴える問い合わせは無益なクレームではなく有益なフィードバックです。プロダクトの価値向上につながる貴重な意見ですから無視するべきではありません。 時間の経過でユーザーがUIに慣れることはありません。問い合わせをしても無駄だと学習して離脱したパターンを疑いましょう。受け入れられる場合も含めて画面の変更はユーザーに負担を強いているのだと自覚してください。 色覚特性や色とコントラストについて学びましょう。色だけで情報を伝えるデザインはアンチパターンですから避けてください。
モバイルファーストのウェブデザインは、デスクトップで閲覧する際に重大なユーザビリティ上の問題を引き起こす。長いスクロールページにコンテンツが過度に分散され、余白が広がり、画像やフォントが拡大されるため、ユーザーが情報を把握し、理解することが難しくなるのである。 The Negative Impact of Mobile-First Web Design on Desktop by Kim Salazar, Tim Neusesser and Nishi Chitale on October 13, 2023 日本語版2024年2月6日公開 最近のウェブサイトの多くは、モバイルファーストなアプローチでデザインされている。こうしたページをデスクトップデバイスで表示すると、コンテンツが過度に大きく引き伸ばされて見えることがある。画面を覆い尽くすような画像、肥大化したテキスト、過剰な余白のせいで、
宇宙航空研究開発機構(JAXA)は1月20日、小型月着陸実証機「SLIM」の月面着陸を実施。着陸後に太陽電池の発電ができなくなるというトラブルはあったものの、探査機からの電波は正常に受信できており、日本初の月面着陸をついに実現した。これは日本の宇宙開発において、非常に大きなマイルストーンになったと言えるだろう。 SLIM着陸直後のサブ管制室内の様子 (C)JAXA 筆者は前日22時より、JAXA相模原キャンパスにて取材を開始。本記事では、そのときの様子をレポートしたい。 開場の30分前に現場に到着したのだが、すでに大勢の報道陣が プレスセンター内部の様子。筆者は右側最前列を確保できた ライブ配信された月面降下中のSLIMのテレメトリ画面 SLIMは同日0時に、最終降下を開始。高度15kmでメインエンジンを噴射して減速し、周回軌道を脱出、月面へと舵を切った。月のような重力天体では、一旦降下を
フォントのライセンスはわかりづらい？ モリサワnote編集部が法務担当を突撃してみた｜モリサワ note編集部
突然ですがみなさんは、フォントを使う際に「ライセンス」の存在を意識することはありますか？ 書体のあれこれをお話することはあっても、そのライセンスについて取り上げる機会は少ないかも、と気がついたモリサワnote編集部。実際、SNS上には「これって法的にどうなの？」という疑問や、「よくわからない……」「ややこしい！」といったつぶやきが多数みられます。 そこで今回は「社内でライセンス事情について一番詳しい人に聞いてみよう！」ということで、モリサワの法務担当を突撃！ 基本的な事項から実際に起こりうる具体的なケースまで、あらゆる質問をぶつけてフォントライセンスにまつわる疑問を解消していきます。 ※2023年6月時点の情報をもとに記事を作成しています。最新の情報は必ずご自身で提供元のライセンスのご確認をお願いいたします。 １. フォントのライセンスとは？社内弁護士に会いにいったら、営業担当もやってきた
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き
非デザイナーの僕が「デザインぽい」ことをする時に使う便利ツール17個｜苦しんでプログラミングを学んだ柴犬（くるしば）
※こちらの記事がはてブの総合人気エントリに入りました！ こんにちは。くるしばです。 元々コンサルタントの仕事をしていましたが、独学でプログラミングを学習し、Webサービスを作って起業しました。 その後個人で開発したサービスを売却したり、また別のIT系の会社を創業したりしています。 去年の8月から下記のTwitterにてプログラミング学習に関して発信し始め、ありがたいことに8000人の方々にフォローして頂きました。 プログラミング初心者に絶対覚えてほしい、ググる時の効率が10倍上がるコツ pic.twitter.com/hK1ZhNavwh — 苦しんでプログラミングを学んだ柴犬（くるしば） (@shiba_program) September 13, 2022 僕は普段はいわゆるPMやエンジニアとして仕事をすることが多いのですが、業務でも個人プロジェクトを作っている時でも 「最低限の見栄え
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 新たな価値を提供し続けるためには、コードの健全化が必要です。アプリは一度リリースして終わりではなく、新機能の開発を行っていきますが、新機能の開発を続けるには、コードの健全化も進める必要があります。 新しいOSへの対応や増えていく機能との兼ね合い、新しく出てきたより良い設計思想の取り込みなど、「適切な状態」というものは常に変化し続けるため、コードの健全化はどのソフトウェアにも必要です。 これを怠ると開発効率が悪くなっていき、新たな価値を提供できなくなってしまいます。Yahoo!天気アプリでは、新規開発と並行して技術的負債を返済していく、コード健全化の取り組みを行っています。 約3年前と現在のアプリを比較します。違いは見た目だけではあ
株式会社デパートは、基本的にデザインと実装（コーディング）は分業制です。だからこそ、日頃からデザイナーとエンジニアが協力し、スムーズに実装を進めていけるようなデザイン連携の仕組みづくりに取り組んでいます。 また、デザイナーは常にコーディングを考慮したデザイン制作を心がけています。 今回は実装を意識しながらデザインを行う中で、表現をどうデータへ具現化しようか行き詰まってしまった際のエピソードをご紹介します。 デザイナーが実際にエンジニアに実装を相談し、検討、可能にするまでの制作現場の一幕をお楽しみください。 とある子ども園のサイトをデザイン中のこと。 子ども園なので背景にも楽しげな柄を入れたくなり、ドット柄を敷くことにしましたが 「あれ、この背景って実装できるかな？」とふとギモンが。 デザインはこんな感じ コンテンツの背景にマスクをかけて、さらにドット柄のデザインにしたい。 社内のチャットツ
「ウチの事業部の商品、Webサイトで目立たせて！」 理不尽な社内政治のかわし方と解決法 | 【レポート】Web担当者Forumミーティング 2022 秋
理不尽のないプロジェクトか、そんなもんはこの世の中にありはしない───。Webサイトやアプリを運用していると、社内のあちこちから、さまざまな圧力や依頼が舞い込む。偉い人からの現場を知らない指示、発言力の強い部署からの高圧的な依頼、決裁者からの思いつきの要望……。その多くはその人から見た個別最適で、全体最適でのユーザー目線に欠けていたり、使いやすさを毀損する内容であったりする。Web担当者は社内の不要な衝突を避けながら、決裁者からは予算を引き出し、ユーザーに価値を届けられるWebサイトのかたちを守り続けなければならない。 そこで、日本ウェブデザインの羽山祥樹氏が「Web担当者Forum ミーティング2022 秋」に登壇し、「社内政治の理不尽なあるある」と「ユーザーに価値を届けられるWebサイトのかたち」への両立方法を紹介した。 「使いやすい」とは「同じルールが繰り返されること」事業部の担当者
CoreWebVitalsにINP(Interaction to Next Paint)が追加され、Webパフォーマンスに関するする技術は年々進化を遂げています。 このセッションでは、INPへの対策の他、BFCache、Private Prefetch Proxy、Priority Hintsなど、現在WebAPIとしてで検討されているパフォーマンスに関する内容をご紹介します。 また、これらを活かすことができるFEアーキテクチャとはどのような設計になるでしょうか？現在ヤフーで取り組んでいる内容も含め、今後のWebパフォーマンス改善の展望をお話できればと思います。
JSConf JP 2022 https://jsconf.jp/2022/talk/pack-front-end-practices-into-the-design-system-and-redistribute Twitter https://twitter.com/__sakito__
Web制作者はブックマークしておくと便利！ 各UIコンポーネントのさまざまな実装方法のまとめ -The Component Gallery
Webサイトやアプリでよく使用される各UIコンポーネントのさまざまな実装方法がまとめられたThe Component Galleryを紹介します。 コンポーネントは再利用可能な単一の部品として利用でき、実装するコードや名前の付け方など、Web制作者には非常に勉強になると思います。 The Component Gallery The Component Galleryの特徴 The Component Galleryの利用方法 各UIコンポーネントのまとめ The Component Galleryの特徴 The Component Galleryには、実際のデザインシステムで使用されているUIコンポーネントがまとめられています。フロントエンドのデベロッパーとして毎日経験する問題を解決するために作成されました。 The Component Gallery コンポーネントや要素に名前を付けるの
都合の良いUIデザイン〜わがままで怠惰で理不尽なユーザーのニーズに応える10のポイント〜｜SOMPO Digital Lab デザインチーム
こんにちは、SOMPO Digital Labデザインチームのデザイナーの金（https://twitter.com/seikei_kin）です。普段はUIデザイナー・ウェブデザイナーとしてサービスやプロダクトの開発・設計に携わっています。 突然ですが、みなさんは真面目で、協力的で、積極性があって、物覚えがよい方でしょうか？あるいは最新のアプリの動向に詳しく、それらを使いこなせるリテラシーを十分にお持ちでしょうか？ 果たして自分はどうかと振り返ってみると、少なくとも自信をもってそうであるとは言えないのが正直なところです。なまけものかつわがままで、物覚えや察しも良くなく、実際、馴染みのないウェブのサービスやアプリを利用する場合には、些細なことでつまづいたり悩んだりした結果、途中で嫌になり諦めてしまうこともしょっちゅうです。 そして、実は私のようなユーザーは決して少なくないのではないでしょうか
（映像もつくりました） prizmという、市町村から都道府県を当てる新感覚クイズゲームをReactで個人開発した話です。 内容 今までPHPやjQueryなどで開発をしてきた18歳です。 モダンなフロントエンド技術の習得を目的に、今回React・TypeScriptで初めて作った成果物です。 制作期間は1ヶ月弱ほどです。 もしよければ、読んで・遊んでもらえるとうれしいです！ TypeScript React Redux Firebase Realtime Database UIデザイン・ロゴデザイン つくったもの 「市町村から都道府県を当てる」 リアルタイム性のある新感覚クイズゲームです。 ランダムなある1つの都道府県から次々と市町村※が出題される中で、一番早く都道府県を答えられた人が勝ちの、地理力と反射神経が問われるゲームです。 モードは初級（市町村）・中級（市町村の頭2字）・上級（市町
「のどが渇いた」というユーザーに何を出す？ ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
2022年9月13日 株式会社メンバーズ ポップインサイトカンパニーでのウェビナーのスライドです。「ユーザーが欲しいと言った機能をつけたのに使われない！」という経験はありませんか。プロダクトをつくるとき「ユーザーの心理を理解しよう」とよく言われます。しかし、ユーザーに言われたままやることと、ユーザーが本当に望んでいることは異なります。「UXデザイン・UXリサーチ」は、ユーザーを理解するための専門技術です。ユーザーインタビューやユーザビリティテストを用いてファクトを集めることで、ユーザーの表面的な言葉に惑わされない、本当のインサイトにたどりつくことができます。かんたんなワークも交えながら、体系的に解説いたします。Read less
ノンデザイナーズ・Wantedly デザインシステム完全理解ペーパー | Wantedly Engineer Blog
Wantedly では新卒含む新入社員向けに研修を毎年実施しています。これは「新入社員向け」といいつつ既存の社員も自由に参加できるものです。今年はこの研修のフォーマットを借りて、Wantedly のプロダクト開発を支える重要な概念のひとつである「Wantedly の UI デザインシステム」についての研修を、ソフトウェアエンジニアの @izumin5210 (筆者) とプロダクトデザイナーの @NishaMe で実施しました。 デザインの構造を正しく捉えることは、UI の実装を専門にしているかどうかを問わず、正しい実装 - 開発生産性が高く、ユーザにとっても使いやすい実装 - のための重要なポイントです。よってこの研修は「広義のフロントエンドエンジニア」、業務中に UI を実装することがある全てのエンジニアを対象としました。 Web フロントエンドエンジニアモバイルエンジニア専門ではないが
この記事も例に漏れず、Web における組版は 1 段組みを基本としており、テキストが延々と下に伸びていく単調なレイアウトが主流です。 しかしながら新聞や雑誌等の組版を見つめ直すと、ブラウザでは実装されることのない縦横無尽に動き回るグリッドの配置、テキストの流し込みが当たり前のように実現されています。こうした自在な組版、Web でぜひ実現してみたいと感じませんか……？ できたもの 図 1: Web で新聞のような組版が実現されたスクリーンショット 図 1 の通り、新聞風のレイアウトを実現しています。 Web で自在なテキストレイアウトは不可能？ CSS3 にて導入された columns プロパティ は、ブラウザ上で段組みを用いたコンテンツの表示を実現します。論文のスタイルでよく見かけるアレですね。ところが、CSS3 の段組みの仕様には「段の高さが揃っていなければならない」[1]と規定があるこ
連載：徹底解剖！ SaaSのUI／UX 本連載では、B2B SaaSや業務システムを中心にUI／UXデザインを手掛けるベイジ（東京都世田谷区）が、SaaSにありがちなUIデザインの問題を実例を交えつつ解説。SaaSスタートアップなどが、ユーザーの満足度を落とさないための改善方法を説明する。 第3回は、画面表示や機能の意味を補ってくれる便利なパーツ、「アイコン」についてご紹介します。 アイコンはほとんどのSaaSで使われているUIデザイン上の重要な要素ですが、使用する上で守るべきルールがいくつか存在します。「どんな時もアイコンを使えば情報を省略できて直感的に操作できる」ということはなく、うまく使わないと画面がより分かりにくくなってしまうこともあります。 今回例として取り上げるのは、見積り・請求管理システムです。中でも比較的利用頻度の高い、見積りの編集画面を参考に、アイコン利用の適切なルールと
ユーザーが「使いやすい」と感じるアプリケーションは、良いUIデザインで設計されているともいえます。良いUIデザインでは、ユーザーの認知負荷を下げる工夫がされています。認知負荷を下げる仕組みを知るには、心理学とUIデザインの密接な関係を理解することが重要です。 行動心理学や認知心理学の発展により、人間の感情や行動は、脳の仕組みに基づいて様々な法則に当てはめられることが分かってきました。UIデザインでも、心理学を活用したアプローチでより良いユーザー体験を生み出すことができます。特に業務システムのような複雑なアプリケーションでは、メニューや画面レイアウトなど幅広く活用できます。 今まで心理学はマーケティング領域で応用されることが多く、ウェブサイトやアプリケーションのUIデザインで語られることはそれほど多くありませんでした。そこで本記事では、人の様々な心理現象や認知の法則を、UIデザインに活用する
認知バイアスとは、思考のプロセスにおける系統的な間違いのこと。簡単に言い換えると、思い込み。意思決定や判断を行う際の精神的な近道として機能するが、間違った判断を生み出すこともある。 年齢、性別、文化的背景に関係なく、誰もが認知バイアスの影響を受けていると言われる。 これを理解しておくことは、デザインを生業にする我々にとってはとても重要だと思う。なぜなら、人間である以上は、そこに認知バイアスがあり、それを熟知しておくことで、より適切なデザインをすることができるようになるから。 ユーザーエンゲージメントを向上させる7つの要素 認知バイアスが存在する理由我々の脳は、日々信じられないほどの量の情報を取り込んでいる。同時に、できるだけ思考エネルギーを節約したいとも思っている。そのため、難しい判断を迅速に行うために、一般論や経験則（ヒューリスティックとも呼ばれる）に頼っている。 脳がより効率良く判断を
リンクとボタンのビジュアルが似たものもしくは同じものになる理由のひとつに「押せる」[1]という共通点があるからだと思っている。 ビジュアルを似たもの・同じものにするかどうかは状況により判断されるので、そこに画一的な優劣は存在しない。しかしリンクとボタンは明確に異なる機能や振る舞いをもっている。その振る舞いやそれに対するユーザーのメンタルモデルから結果ビジュアルが同じになるのならいいのだが、ただ単純に「押せる」ことだけを基準にデザインされてしまうのは具合が悪い。このエントリーでは、リンクとボタンをデザインするにあたって「押せる」だけではなく、他にも判断材料となるものがあることを共有したいと思う。 前提と定義 今回の話はウェブブラウザで動作するUIを前提に考える。途中で言及するが、リンクがURLに関係していることと、URLをユーザーが意図的に変更できることが大きく関係するので、ネイティブアプリ
「日本3大許せない入力フォーム」に続々と候補と共感が集まる
Paul O'Leary McCann @polm23 @941 @asahiko 姓名や住所のところで半角英字を受け付けないやつですね。他には名前の読みがなで使用できる文字を明記せずカタカナや長音符を受け付けないのもあります（出前館はたしかに読みがながひらがなでないとエラーになるけどエラーはそれを説明してくれないとか…）。 2022-01-27 23:04:13
インタラクションのあるUIを作っていると、UIパーツのみからは挙動を読み解けない場合があって、そういうときには、一言説明を添える、ということをやる。 こういうときに、どこにどれくらいの説明があれば必要かつ十分か、ということを学べる機会はあまりない気がする。 アルバイト氏のPull Requestのレビューをしていたら、これだと何が起きるかわからないので説明を添えたいよね〜って話をしていたのだけど、そういえばこういうことはどこで学べるのだっけ?というのが気になってきたのだった。 ブログチームでブログを作っていた頃には、編集メンバーが画面のレビューをしてくれて、ここのUIの文言はこれくらいのことを書けば必要かつ十分で、ヘルプの言い回しや告知とも整合性が取れてよいのではないでしょうか、みたいなことを一緒に考えてくれていて、勉強になっていた。 ブログのサイドバーから、説明文を消し去ると、フォームに
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。
フロントエンドエンジニアのデザイナーとの向き合い方
記事の内容 本記事は、 @seya さんが立ち上げた エンジニアリングに興味があるデザイナー、デザインに興味があるエンジニア カレンダー2の4日目になります。 4日目は、株式会社iCARE フロントエンドエンジニアの@watsuyo_2 が担当します。 iCAREのUI周りは、主にデザイナー4人(12月から新たに1人Join)、フロントエンドエンジニア9人(内3人業務委託)、技術顧問1人で開発しています。 10月に、iCAREにおけるデザイナーとフロントエンドエンジニアのコラボレーション という内容でミートアップに登壇したのですが、それ以降の話を取り上げようと思います。 現状のデザイナー → フロントエンド開発のペインを探してみた 挙げようとすれば、いくらでも出てくるような気がするので、観測範囲内で5つ挙げました、 実装前のデザイン確認漏れが起きる ツール上のデザイン詳細度を信用しきれてい
フォームを改善するUIデザインのテクニックを紹介します。 フォームのデザインに少し手を加えるだけで、ユーザーにとって使いやすい、コンバージョンを高めるための実践的なテクニックが満載です。 15 UI Tips for Better Forms by Jim Raptis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 01. ラベルを常に記述する 02. Zパターンを避ける 03. ラベルを入力欄の上に配置する 04. 右揃えのラベルを使用する 05. 関連する入力欄をグループ化する 06. ユーザーフローを尊重する 07. スペースを与える 08. ラベルの繰り返しを避ける 09. エラーメッセージは分かりやすく 10. 必要に応じてドロップダウンを使用する 11. プレースホルダーを活用する 12. ボタンは1つに
おひさしぶりです🔅 最近は週末プロジェクトでアプリを2つリリースしようと動いていたり、一人暮らしを始めたり、バタバタした日々を過ごしておりました.... （toCサービス好きな人、一緒に週末プロジェクトやりませんか・・笑 週末プロジェクトはなかなか難しい....） 先日こんなイベントがあり、他社のサービスのFigmaファイルを見る機会が...！そして、Twitterなどで各社、各サービスがFigmaデータやDesign Systemをオープンにしているのを最近ちらほら見かけますよね...！ 私がUIを勉強し始めた時は、Apple社が提唱するHuman Interface GuidelinesやGoogle社が提唱するMaterial designなどのUI設計の原則を定めたガイドラインを読んだり、本やnoteを読んだり、AppleやGoogle社が開発するアプリを中心にトレースしたり..
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第8弾は、読みやすく・理解しやすくするためのデザインのテクニックです。 UI & UX Micro-Tips: Volume Eight. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. メッセージは正しい順序で構成する 2. すべての要素のシャドウは一つの光源を元にする 3. ホワイトスペースでビジュアルヒエラルキーを構築 4. 一行の長さを適切にすることで、読みやすさが向上する 5. 空の状態を工夫することで、ユーザーの初期行動を促す 6. 最適な読みやすさのために、x-heightに基づいてline
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. 薄いコントラストの文字適切では
久しぶりのnote投稿です。今回は自分の勉強がてら、UX・情報設計・アジャイル開発など、デザインに関わる様々な局面で知っておくと役立つフレームワークを集めてみました。 有名なものからデザイン以外にも使えそうなものまで幅広く選んでいますので、気になるものがあれば改めて実作業に生かすなり、掘り下げて研究するなり、資料に生かすなりしてもらえると良いのではないかと思います。 （ちなみにここでいう「フレームワーク」とは共通して用いることのできる考え方や思考の型や枠のようなもので、いわゆるCSSフレームワークの類ではありませんので、その点ご了承ください） 1.UXの5段階モデル まずは有名なUXの5段階モデル。アメリカのUXデザイナーであるJesse James Garrett 氏が著書『Elements of User Experience（ウェブ戦略としての「ユーザーエクスペリエンス」）』にて提唱
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第7弾は、テキストや要素をより分かりやすく魅せるデザインのテクニックです。 UI & UX Micro-Tips: Volume Seven. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. メッセージは分かりやすく簡潔に 2. 長文コンテンツには、20ptを試してみてください 3. エラーメッセージは色だけで情報を伝えないように 4. 4ptベースラインと8ptグリッドで調和のとれた縦のリズムを作成 5. 見出しは文字間隔と行の高さを小さくする 6. 要素をよりはっきりと魅せる はじめに 次のプロジェク
私が一番最初にAndroid アプリをデザインしたのが2016年の初夏頃で、その頃はまだiOS・Android とデザインが違うのが主流でしたが、2021年現在のアプリはiOS もAndroid もプラットフォームごとの細かな違いはあれどほぼ同じデザインが主流となっています。 これは2016年の10月にAndroid APIがBottomNavigationView に対応してからじわじわ浸透していった変化だと考えているのですが、その辺の歴史の話は省略します。プラットフォームは違えどスマートフォンアプリである以上デザインは同じ方が楽なので、共通化されていったのは自然な流れだと思います。実際両者が全然違うUI・デザインだと大変ですしね……。 とはいえ、プラットフォームが違うので全て同じというわけにもいきません。iOS にはHuman Interface Guidelines、Android
最近のアプリはどれも非常に使いやすいのが当たり前になった。 そのため、使いやすさ文脈でのUXデザインだけではユーザーのロイヤリティ獲得や他社との差別化が難しくなってきていると感じる。 差別化の要素としてブランディングを活用する手法もあるが、プロダクト自身の魅力を最大限発揮することで、ユーザーの心を掴み続ける方が持続性が高い。 80%のアプリは数日で使われなくなる顧客から素早くフィードバックをもらうことで、本当に求められるサービスを作ることが重要となっていることはもう説明する必要はないだろう。 アプリのマーケットはすでに飽和状態に近づいており多数のアプリで溢れている。 ちょっと使いにくかったりデザインがイケていなかったりしてもユーザーが我慢してくれる時代はとっくに終わっており、インストールされても数日で使われないアプリは80%にも達する。 数日で忘れ去られないために。モバイルアプリの高速プロ
結論から書くと、ちょっと思い当たらない。というおはなし。 そもそも「えきねっと」とはJR東日本の予約サイト。今週末にリニューアルを実施しました。 切符オタクの界隈では「あの切符が発行できない」「売ってはいけないはずの切符が検索結果に出てくる」などなど、いろいろな反応があったようですが、一般の方からすると「鉄道オタクがなんか騒いでいるなぁ」っていう感じかもしれません。私も個々論的なところはあまり興味がないから、そこについては書きません。 じゃあ、ここで何を書くかというと、UIの話をします。鉄道に限らず、いろいろなシステムにも言える話かな、と思ったので。 きっぷを買うまでの道のりが大変先述のプレスリリースには色々と変更点が書かれているんですが、1番目に書かれているのが「列車のお申し込みの操作方法が変わります」という点。 「えきねっと」トップページからダイレクトに、「乗車駅」「降車駅」や「日時」
6名のデザイナーがユーザビリティテストを内製で実施できるようになった話 - techtekt
UXデザイン部 UXリサーチグループでは、2020年10月から半年にわたり、デザイナーや企画者を対象として、"ユーザーをより深く知ること"を目的としたユーザビリティテスト実習を行いました。 運営は社内の専属UXリサーチャーが担い、インタビュー体験を主目的とした"ベーシックコース"、実際のインタビューでの言い回しなどにも言及するような"アドバンスコース"と、それぞれ3カ月ごとで一定レベル到達を目標とした構成です。 なぜ、半年にもわたる実習が必要だと考えたのか、実際に受けてみてどうだったのか――企画担当の坂部、講師を務めた瀧本と、アドバンスコースの受講者であるデザイナーの小倉、サービスデザイナーの高橋に話を聞きました。 「自分がつくったものを、ユーザーがどう思うか」という目の前の問いに、全てのデザイナーが自分で向き合える文化づくりを 「教える」のではなく、一緒に「体験してもらう」機会に 「サー
こんにちは。デザイナーの別所です。 本日はenigmoデザイナーの、最近気になっているデザインに関するトピックをご紹介したいと思います。 今回のテーマは「アプリUI編」です！ 心地よい使い勝手！映画レビューアプリ「Must」 「Must」は映画/TVファンのためのSNSアプリです。 作品のレビューを投稿したり、見たい映画や番組をコレクションとして保存できたり、友達と繋がって他の人がコレクションしている作品を見たりすることができます。 おすすめ作品をデイリーでレコメンドしてもらえたりもします。 2016年にリリースされたアメリカ生まれのアプリです。 引用：https://mustapp.com/ デザイナーのこだわりを感じるUI/UX Mustの一番の特徴は、画面の下半分の操作で完結するように設計されているUI/UXではないでしょうか。 レビューの入力や「観たい」「鑑賞済み」を選択するボタン
Leaks | GoodUI
Etsy ran a little A/B test where they probably tried to encourage more searches with the help of a stronger visual cue in their search bar. Instead of using a ghost-like icon only approach for the primary search, they stylized it as a high contrast button. Fast forward a few months and it now looks like the variation was implemented. View Leak
モバイルアプリのUXを考える場合、確認するダイアログの文章や文言は気を遣うべきです。 それは、YES/NOの質問で、その後の結果が変わることが多いからです。 文章が簡潔で、直感的に理解できるようにすべきです。 詳しく説明しようとして、文章が長すぎても理解しづらくなってしまいよくありません。 簡単な言葉で、誤解のないようにしたいところです。 アンチパターンとして、ドラクエウォークの例を紹介します。 ドラクエウォーク連戦 これはモンスターと連続で戦うシーンで、元の画面の「あきらめる」というボタンを押すと表示されるダイアログです。 「OK」ボタンを押すと「あきらめた」ことになり戦闘が終わります。 「やめる」ボタンを押すと「あきらめる」ことを「やめる」ことになり、元の画面に戻ります。 どこがよくないでしょうか。 「あきらめることをやめるという解釈がややこしい」ということです。 「戦わないことを選ば
こんにちは。クックパッド デザイン戦略本部長の宇野です。 いきなりですが「ユーザーファースト」って良い言葉ですよね。サービスのあり方の基本であり、モノづくりをしていてそれを無視したいという人はいないはず。 しかし僕はこのユーザーファーストという言葉をあまり使わず、使う際は慎重に取り扱うようにしています。この言葉の概念はとても難しいと考えているからです。 「ユーザー」って誰のこと？目の前にいるユーザーの話をそのまま取り入れれば必ず良いものが作れるの？ 答えは明確にNoです。 当然ですが無視するべきという話ではありません。ただ、向き合ってるユーザーがどんな人なのか、その人が本当に欲しているものは何なのかを徹底的に考え抜く必要があります。 お問い合わせをしてきている人はだれ？ ユーザーからのご意見やお問い合わせ、アプリストアのレビューはとてもありがたいですよね。そこから新たな改善案をもらったり、
3年で検索流入が50倍に。MAU1,000万人に成長した「LIPS」が語る、Googleボットさんへの「おもてなし思想」と、アプリとWEBでは目的が違うため「最適なUI」が変わる話｜アプリマーケティング研究所
3年で検索流入が50倍に。MAU1,000万人に成長した「LIPS」が語る、Googleボットさんへの「おもてなし思想」と、アプリとWEBでは目的が違うため「最適なUI」が変わる話 700万ダウンロードのコスメアプリ「LIPS」さんにお話を伺いました。 ※ 株式会社AppBrew 木全 佳梨さん、堀江 慧さん、阿部 栞さん「LIPS」について教えてください。木全： コスメのクチコミアプリです。アプリは700万ダウンロード、全体のMAUは約1,000万人、クチコミ数は累計180万件を超えています。 LIPSでは性別年齢を問わず「なりたい自分」を追いかける人のために、心地よい体験をしてもらえる場所を提供しています。 ここ数年だとLIPSは「WEB版」が伸びているそうですね。阿部： WEB版は、地道なコンテンツの改善が、Googleアップデートで評価されて、自然検索からの流入が3年間で50倍に成
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「UIの色を変えただけで大量のクレームを頂戴してしまった話」の何が問題か？｜moutend
モバイルファーストのウェブデザインがデスクトップに及ぼす悪影響
JAXA「SLIM」が月面着陸に成功、当日の様子をプレスセンターからレポート！
文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦
新たな価値を提供し続けるためのコード健全化の取り組み～Yahoo!天気アプリ
Webデザイン制作における課題！コーディング実装を考慮したデザイン制作の一幕をご紹介｜Blog｜株式会社デパート
Webパフォーマンス高速化とこれからのアーキテクチャ
デザインシステムにフロントエンドのプラクティスを詰め込んで再配布する
はじめてのReactで都道府県を当てるゲームをつくりました
Web だって組版の夢を見る――新聞のように自在にテキストを流し込むには
“アプリUIあるある”な6つのNGアイコン 見積り・経費精算SaaSを例に専門家が解説
UIデザインのための心理学：33の法則・原則（実例つき） | ベイジのUIラボ
デザイナー必見！知っておきたい10の認知バイアス デザイン会社 ビートラックス: ブログ
リンクとボタンを｢押せる｣だけでデザインしない
UI上のラベルや説明文をどこにどれくらい書くべきか - hitode909の日記
デザインに少し手を加え、フォームを改善する実践的なUIのテクニックのまとめ
勉強になったFigmaのデザインシステム8選｜東 莉緒／Rio Azuma
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.8
UIデザイン時にやってしまいがちな18の誤ち｜Mikio Kiura / ANKR DESIGN
デザインに活かせるフレームワーク20｜金 成奎
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.7
iOS とAndroid の違い クロスプラットフォームのアプリデザインで特に気をつけるべき点｜marin
ユーザーの感情に響くエモーショナルデザインとは？ デザイン会社 ビートラックス: ブログ
新・えきねっとは誰のためのシステムなのか？｜長沢めい
enigmoデザイナーの「最近気になるデザイントピック」- アプリUI編 - エニグモ開発者ブログ
ドラクエウォークから分かる確認ダイアログのUX改善
そのユーザーファースト、本当にユーザーファーストですか？｜宇野雄 / note inc. CDO