はじめに UIを設計するときにオブジェクト指向UIは大きな効果を発揮することがあります。一方で、オブジェクト指向UIの考えをそのまま適用できないけれども、タスク指向UIと呼ぶのも微妙な画面があります。 例えば、ECサイトの購入プロセスです。よくあるECサイトの購入プロセスは以下の図のような構成です。これだけだと簡単そうですが、実際のECサイトの購入プロセスはある画面をスキップしたりしなかったりという制御があり、なかなかに複雑なものです。 今回の記事は画面遷移に順序があるがタスク指向UIと呼ぶのも微妙な、複雑な画面遷移を持つ画面にオブジェクト指向UIの考えを導入することで画面遷移制御を簡単にする手法を提案します。 対象読者 画面遷移の制御の保守性を向上させたいITエンジニア この記事の概要 複雑な画面遷移を持つUIに対して、オブジェクト指向UIの考え方を導入することで、制御フローをシンプルに

久しぶりに記事を書く。最近マルス端末のUIについてツイートがあった。 この件に関して、UIについてやUXに対して日々やってきている人間は「ダメなUI」という認識の人が多いように思う。一方で、システムの開発者にとってはこれは、その認識でない人間が多いようだ。なので、この辺を私なりに意見を書いておこうと思う。 まぁ、これはいつもなのだが、書いていることが散らかってる。基本的に音声入力のメモなので、読みにくいかもしれないが読んでくれ参考になれば幸いだ。 熟練が必要なUIは基本的によくない まず、基本的に熟練が必要なUIはそもそも良くないって話をしていく。順番に話していこう、まず、熟練が必要なUIが支持される理由を考え、それに対して、批判していき、なぜ熟練が必要なUIはダメかを語ってみよう。 熟練が必要なUIが支持される理由 その前に、こういった熟練のUIが支持される理由についてかいておこう。それ

初めまして。 面白法人カヤックでデザイナーをやっているばっこ（@is178）です。 一昔前は画面の中の要素をデザインをすることがWebデザイナーのお仕事でしたが、今や画面の向こうにいるユーザーの体験さえもデザインの対象となりました。 机の前に座っているPCユーザーだけでなく、利用シーンも様々なスマホユーザーの体験まで考慮する必要がある今、認知科学・行動経済学・脳科学などの知識もあると、デザイナーとしての強みになるのではないでしょうか。 そこで、各分野の個人的なおすすめ本を18冊紹介したいと思います。 認知科学 認知科学の対象領域を狭めないために明確な定義はないのですが、特徴づけをするならば「知的システムの構造、機能、発生における情報の流れを科学的に探る学問」です。 お馴染みのアフォーダンスやシグニファイアもこの分野ですね。 1.教養としての認知科学

Aiki @aiki__mokeiwork 学生生活とジオラマ制作の両立を目指す学生モデラー。 武蔵野美術大学工芸工業デザイン。 廃墟、廃道、ダム、橋梁。土木、山、地質、地形を好みます 後回し癖を治して提出物忘れないようにします… instagram.com/aiki_0320?igsh…

本連載では、SmartBankのデザイナーが「デザイナーの業務効率化」をテーマに、FigmaやNotionを活用した「業務効率改善のTips」を紹介していきます。今回焦点を当てるのは「プロダクト開発のスピードを上げる効率的なコンポーネントの設計」についてです。 こんにちは！SmartBankでデザイナーをしている福嶋（putchom）です。 2022年9月にふたりめのデザイナーとしてSmartBankに入社し、現在はおもにプロダクトのUIをデザインしたり、デザインシステムを設計したりしています。 私たちは、「B/43」というVisaプリペイドカードと家計簿アプリがひとつになった「家計簿プリカ」という新しいジャンルのサービスを運営しているのですが、SmartBankでは、より本質的な機能開発に集中できる環境を用意すべく、デザインシステムの構築や運用にも力を入れています。 私たちはFigmaで

UIデザインはシンプルで論理的なルールを理解することで、情報に基づいたデザインの意思決定を効率的におこなうことができます。UIデザインをより使いやすく改善する16の論理ルールを紹介します。 長い記事なので、時間がある時にゆっくりご覧ください。 16 little UI design rules that make a big impact by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スペースを利用して関連要素をグループ化する 2. 一貫性を保つ 3. 見た目が似ている要素は同じように機能するようにする 4. 明確なビジュアルヒエラルキーを作成する 5. 不要なスタイルを削除する 6. カラーは意図的に使用する 7. インターフェイス要素のコントラスト比が3:1であることを確

ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。 これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じるのか、ダークモードでもいい感じのグレースケールにするにはどうすればよいのかを解説します。 Darkmode by Dan Holick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ダークモードのグレースケールを作成するのが難しいのは、なぜだと思いますか？ それは、人がカラーとコントラストを知覚する感じ方に関係があります 👇

プレスリリースを眺めていると、製品名やサービス名のすぐ後に「Rマーク」が付いているのを目にしたことがある人も多いでしょう。これはその名称が登録商標であることを表していますが、そこに明記する必要はあるのでしょうか。見た目もよくないですし、読みにくい感じもします……。そんな疑問について考えてみました。 春休み、我が家には子供の教科書やノートが山積みされていました。たまには勉強でも見てあげるかと、教科書をパラパラとめくってみました。ふと家庭科の教科書を開くと、メーカー出身者としてはなじみ深いマークが紹介されているではないですか。なるほど、品質、環境、分別収集という区分に分けているのか……。 品質マークにはJIS（日本産業規格）マークやJAS（日本農林規格）マーク、特定保健用食品マークなどが、また分別収集マークにはなじみの紙パック、アルミ缶、ペットボトルなどのマークが並んでいます。環境マークにはグ

使い勝手の悪いサイトデザインを体感できるWebブラウザ向けゲーム「User Inyerface」がTwitter上で話題になっている。ドイツの制作会社BAGAARが2018年から公開しているゲームで、使いにくいUIを乗り越え、最後のページにたどり着くまでの時間を競う内容になっている。記者も実際にプレイしてみた。 まず初めに表示されるのは大きな「NO」のボタン。クリック可能だが押しても何も反応せず先には進めない。そのボタンの下部には「Please click HERE to GO to the next page」の記載が。「click」にはアンダーバーがあり、「next page」はフォントの色が変わっているがクリックしても何も起きない。 早速途方にくれている中、何の装飾もない「HERE」を押すと先のページへと進むことができた。マウスカーソルを合わせても、人差し指表示に変わらなかったためリ

ノーベル賞のパロディーで、ユニークな研究などに贈られる「イグ・ノーベル賞」の受賞者が発表され、ことしはペットボトルのキャップをあけるときなど、ものをつまんで回すときの指の使い方を詳細に分析した、千葉工業大学の研究グループが「工学賞」を受賞しました。 日本人の受賞は16年連続です。 「イグ・ノーベル賞」は、1991年にノーベル賞のパロディーとしてアメリカの科学雑誌が始めた賞で、人を笑わせつつ考えさせる研究に贈られます。 日本時間の16日、ことしの受賞者が発表され、このうち千葉工業大学の松崎元教授などの研究グループが「工学賞」を受賞しました。 この研究では、ペットボトルのキャップやオーディオの音量をあげるつまみなど、ものをつまんで回すとき指をどのように使うのか、つまみの太さを変えて調べる実験を行いました。 そして、つまみの太さと使う指の本数との関係や指の位置との関係を詳細に分析しました。 主催

コンポーネントを作るときや開発チーム、クライアントと話をするときに名称が一致していないと何の話をしているんだか、、？となってしまします。 忘れっぽい自分は毎回名前をうろ覚えでつけてしまっていますが、戒めとして記事を書くことでしっかり覚えていきたいと思います。 ※色んなところから引っ張ってきているので正式名称ではない（複数呼び名がある）ものがあるかもしれませんが、ご了承ください。 UIパーツ見づらくてすみませんが、エクセルのシートを画像にしたものを貼り付けていきます Onscreen keyboards画面上にキーボードの図形や文字を表示し、マウスあるいはペンなどのポインティングデバイスや、指先によるタッチ、あるいは十字キーなどで各キーを指定して文字入力を行うもの Onscreen keyboards (iOS) SegmentedControliOS独自のUIで水平方向に配置された複数のボ

スマートフォンUIのトレンドは、現実のものを模したデザイン（スキューモフィズム）からフラットなデザインとなりました。そんな中でもカードUIは、現実のもの（カード）を模したUIコンポーネントであり便利であるため、立体感や影などを付けながら使うこともあります。 カードUIはなんとなくとっつきやすく、エンジニアやデザイナーはよく使ってしまいがちなコンポーネントだと感じています。特にマテリアルデザインではガイドラインにCardsの項目があり、AndroidアプリやGoogleのアプリケーションではよく利用されています。 そこで今回は、そんなスキューモフィズムのなごりが残るカードUIを利用する際に注意しないといけないケース、最近筆者が感じた迷いどころなどについて、実例を交えながら説明していきます。 カードUIが効果的な場面 カードUIは前述したとおり立体感や影などを付けて使うことから、フラットなデザ

増えているアウトライン化しなくてもできること | ベテランほど知らずに損してるIllustratorの新常識 2022（3） ベテランユーザーが見落としがちな 今のIllustratorならできること　その3 前回に続き、ベテランユーザーが見落としがちな「 今のIllustratorならできること」を取り上げます。後からテキストを打ち替えたりフォント変更にも対応できたりする「アウトライン化しなくてもできること」をテーマに取り上げました。 なお、Twitterにて行ったアンケートの集計結果も参考までに添えてみます。 キャッチコピーに表情を持たせるために、1文字単位で位置や大きさ、角度などを調整することがあります。 従来はアウトライン化（または、現実的ではありませんが、1文字ずつバラバラのテキストに）しなければ実現できませんでした。 今のイラレなら、ツールバーの［文字タッチツール］を使って1文

現在、本業・副業ともにWEBデザイナーとしてデザイン・コーディングをしているゆるけーです。 本業で携わっているWEBサービスが割と高齢者向けのサービスで、ITリテラシーやUIが今の自分と考え方が異なるよなーと思っているなか、『高齢者のためのユーザインタフェースデザイン』という書籍に出会いました。 高齢者関係なく普通にアクセシビリティの観点でも重要な視点がたくさんあり、とてもいい書籍だったので、ざっくり大事だと思った箇所を抜粋しつつ自分で探した事例等をざっと記事にまとめていきますー。 視覚 高齢者になると視力が低下する傾向があります。ただ、視力の低下＝フォントを大きくするだけではありません。 視力の低下は老眼や光覚の減少などより複雑です。 主な視力の低下の具体例は以下のような点。 老眼：近く・遠くのものの焦点が合わない 周辺視野のぼやけ：画面の端に気づきにくい 中心視野の損失：画面の中央が暗

ゲーム開発者ますだたろう氏が投げかけた疑問が、反響を呼んでいる。その問いかけとは、ゲーム難易度の「EASY・かんたん」といった記載が嫌（不愉快）だと思うか、というもの。ゲームの難易度では、「EASY」「NORMAL」「HARD」といった項目が一般的。一方で、その項目の名前は多様化している。 【ゆる質】 あなたがこれから触ろうとしているゲームに3つの難易度があります。操作に自信がなく、一番下の難易度を選択することにしました。そのとき、一番下の難易度に「かんたん」「EASY」などと記載されていたら、嫌な気持ちになりますか？ — ますだたろう | MASUDATARO (@masudataro_) May 31, 2022 変わりゆく難易度表記 今年発売のタイトルに絞っても、難易度表記はかなり多彩。アクションRPG『STRANGER OF PARADISE FINAL FANTASY ORIGI

2020年12月17日 Adobe XDのstack機能を使ってline-heightを考慮したデザインを作る UIデザイナー 辛川 この記事はミツエーリンクス Advent Calendar 2020 - Adventarの17日目の記事です。 皆さんはこんな経験ありませんか。 デザイン上は美しい余白だったが、設計後想定よりも若干余白が大きくなってしまった。 デザインテンプレートを作成したページは想定通りだったが、別ページでその他のモジュールと組み合わせた際に、想定されない余白が生じてしまった。 開発後に上記が発覚しデザインの調整を行おうとすると、影響範囲を考えながらモジュールの調整を行うような大工事になる事もあり、想定外の工数が発生してしまいます。このような場合、デザイン時に何かしらの想定不足が考えられますが、その1つにline-heightの考慮があげられると思います。 大型サイトの