熟練が必要なUIについて、それがよくない理由と、UIの慣性について
久しぶりに記事を書く。最近マルス端末のUIについてツイートがあった。 この件に関して、UIについてやUXに対して日々やってきている人間は「ダメなUI」という認識の人が多いように思う。一方で、システムの開発者にとってはこれは、その認識でない人間が多いようだ。なので、この辺を私なりに意見を書いておこうと思う。 まぁ、これはいつもなのだが、書いていることが散らかってる。基本的に音声入力のメモなので、読みにくいかもしれないが読んでくれ参考になれば幸いだ。 熟練が必要なUIは基本的によくない まず、基本的に熟練が必要なUIはそもそも良くないって話をしていく。順番に話していこう、まず、熟練が必要なUIが支持される理由を考え、それに対して、批判していき、なぜ熟練が必要なUIはダメかを語ってみよう。 熟練が必要なUIが支持される理由 その前に、こういった熟練のUIが支持される理由についてかいておこう。それ
【爆速UI設計術】モダンなwebデザイン素材集 - Qiita
特徴 女性らしいイメージがやや多い 下記のような柔らかい印象のイラストが多いです。 【ガジェットストック】 ガジェット関連のものを使用したい場合は、下記を使用すると良いと思われます。 【アイコン系】 【human pictogram 2.0】 オリンピックで流行ったやつです。 本サイトでは、アタッチメントをつけたりすることでかなりカスタマイズ性が高いのが特徴です。 【EXPERIENCE JAPAN PICTOGRAMS】 特徴 海外から見た日本が表現されている これはシンプルにUIが凝ってたので紹介します。 和テイストを演出したい場合は、良さそうですね！ 【ICOOON MONO】 こちら色・サイズも変更可能です！ 【Icon-rainbow】 ICOOON MONOと異なり、こちらは、中が肉抜きされているのが特徴。 【IFN FREE ICONS】 このデザインはどのようなパターンにマ
知識０から、ちょっとUIデザインに詳しくなるnote｜やました
前回は、「UIデザインってそもそも何なの？」という概論的な説明と、UIデザイン未導入の組織の中でみんなでデザインを始めてみるための施策（プロトタイピングとユーザビリティ評価）を話しました。 今回はサービス、プロダクト開発において、デザイナーではない人でも知っていて損はないUIデザインの重要ポイントについて説明します。主に以下の３つのテーマについて順番に議論をしていきます。 デバイスやソフトによるUIの違い ユーザーにかかる身体的・認知的負荷を理解する UIの重要概念（ナビゲーション、インタラクションなど）を知る 「ちょっと」と銘打っておきながらめちゃくちゃ長いnoteになってしまったので、気になる項目だけ読むか、何回かに分けて読んでいただくことをおすすめします、。 ※どこか内容に間違ってる部分やご意見ありましたらコメントいただけたら嬉しいです。 デバイスやソフトによるUIの違い皆さんがお使
業務で説明に失敗したUIに対するモヤモヤをどう言語化すべきだったのか反省会 - Qiita
明けましておめでとうございます。 大遅刻で年が明けてしまいましたが、この記事はUIデザイン Advent Calendar 2023 23日目の記事です。 注意 本記事で取り上げている例は実在する企業・プロジェクトとは一切関係ありません。 本記事は、筆者が実際に業務中にしてしまった失敗をモチベーションに書かれているものの、具体例は完全に一から創作しており関連性はありません。 はじめに 某企業でエンジニアとしてスマートフォンアプリ開発をしています。 その中で、アプリの見た目や挙動を要件通りに実装する際、正直モヤモヤと違和感のあるデザインが何箇所かありました。 しかしながら、ユーザの期待操作や導線を考えてどうして改善したほうが良いと考えたのか、という形にうまく言語化できず、関係者の皆さんに全く伝わらない説明をしてしまうという悔しい思いをしました。 今後そのようなことがあった際に、せめて似たケー
【ゼロから始める】✨UI設計✨ - Qiita
【概要】 『UI設計』についてです。 経緯は、 ・筆者が初めてアプリの実装を行った際にUI設計が杜撰だったこと ・デジタル庁のサイトの記事を閲覧し、UI設計に興味を持ったこと からUI設計・デザインについて体系的に学びたいと思いました。 本記事では UI設計の考え方から実装方法 まで完結的に説明できるように考察していきたいと思います。 ※ 筆者は、駆け出しエンドエンジニアである為、知識が浅い部分もあると思います。間違い等ある場合はご指摘等いただけると幸いです。また、初心者のためのUI設計になりますので、より専門的に深めたい方は書籍などをご利用ください。 【対象者】 ・UIデザインを0から体系的に学びたい人 ・バックエンドエンジニアで個人アプリのUIを向上させたい人 ・フルスタックな開発を意識している人 【目次】 ※下記、全体に目を通してから作業することをお勧めします。 ・【概要】 ・【対象
UIテストはもうMaestroでいいのかもしれない話
App Router への移行は「改善」となり得るのか？/ Can migration to App Router be an improvement
Viewの実装がもっと楽しくなる考え方 - Qiita
開発者の皆様 デザイナーから上がってきたデザインを咀嚼して実装していますか？ なぜオブジェクトの配置はそうなのか、なぜその文言なのか、なぜマウスオーバーしたときにオブジェクトの色が変わるように実装しないといけないのか、なぜ私達はそのコードを書かないといけないのか。 ちゃんと納得していますか？ 「なんとなぁく、そのデザインのほうがが良いからじゃない？」とか 「まぁUIのことは分からないけど、我々は実装するのみだ！」とか思っていませんか？ ↑これは過去の私の意見です。 最近、「オブジェクト指向UIデザイン」という本を読んだことを皮切りに、デザインについてちょっと考えてみました。デザインについて理解が深まると、今までよりもViewの実装が楽しく感じられたので、考えた事を書き留めておくことにします。（本投稿の内容は本の内容とほとんどリンクしてません笑） はじめに 製品の機能はデザインにラップされて
それもまたUIだね。インタフェース散歩！(4) 人間の速さを意識しておもてなしする
人とコンピュータの関係を考えると、二者間には常にインタフェースが存在します。本連載では、人とコンピュータの間に介在するインタフェースに着目し、インタフェースとそれらを世に生み出すプロダクト開発について議論します。Helpfeelが、独自のインタフェースを実装しながら、便利さと楽しさを備えたWebサービスをどのように開発しているのかについてお伝えします。 こんにちは。yuisekiです。私はHelpfeelでメディアキャプチャーツール「Gyazo」のプロダクトマネージャー兼ソフトウェアエンジニアをしています。本稿では、Gyazoの設計・開発の中でユーザー観察やイベントトラッキングから得られた、人間の認知と判断や行動、操作に関する知見をご紹介します。 人間は極めて速い 本稿で最もみなさんへお伝えしたいのは、「人間は極めて速い」という知見です。一言で表現するならば、人間はとても「短気」で「せっか
「1枚のシート」でエンジニアとデザイナーのストレスが激減した話 - Qiita
「考慮もれ」「手戻り」をなくしたい モチベーションクラウドシリーズのデザイナーです。 フロントエンドエンジニアのみなさんは、画面デザインを見て「どう実装するんだ？」とストレスを感じたことはないですか？ 例えば... 👨💻 フロントエンド「Emptyのときはどうするんだろう？最初から考慮してほしいな...（ストレス）」 👩🎨 デザイナー「この状態も考えないといけないのか。確認するだけで1日終わるな...（ストレス）」 →お互いにとって、よくない！！！！！ こうした状態を受けて、お互いにとってストレスなく開発するために、デザイナーとフロントエンドで制作プロセスを改善しました。 今回は、プロセス改善のステップや導入してみて効果的だったツール（シート）についてお伝えします。 【まず初めに】 「UI Stack（状態デザイン）」の必要性の周知 UI Stackとは、UIの考慮すべき5つの
ITCSSを採用して共同開発しやすいCSS設計をZOZOTOWNに導入した話 - ZOZO TECH BLOG
こんにちは。ZOZOTOWN部フロントエンドチームの菊地（@hiro0218）です。 2021年3月、ZOZOTOWNは10年ぶりのリニューアルをしました。この記事では、そのリニューアルで再考したCSS設計について紹介します。 背景 今回のリニューアルでは、ウェブとアプリが部分的に共通のデザインになりました。 アプリ ウェブ このデザイン刷新には、CSSの大規模変更が必要です。チーム内で検討を重ね、最終的に、大きく書き換えるのであればコンポーネント駆動開発1ができるようにCSS設計を見直すべきという結論に至りました。 CSS設計で特別に考慮する点 現在、ZOZOTOWNのフロントエンドは、「Classic ASP」から「React」へのリプレイスを進めています。新規開発や変更のタイミングで、Classic ASPに依存した実装をReactへ改修します。 ただ、今回のリニューアルではClas
iOS とAndroid の違い クロスプラットフォームのアプリデザインで特に気をつけるべき点｜marin
私が一番最初にAndroid アプリをデザインしたのが2016年の初夏頃で、その頃はまだiOS・Android とデザインが違うのが主流でしたが、2021年現在のアプリはiOS もAndroid もプラットフォームごとの細かな違いはあれどほぼ同じデザインが主流となっています。 これは2016年の10月にAndroid APIがBottomNavigationView に対応してからじわじわ浸透していった変化だと考えているのですが、その辺の歴史の話は省略します。プラットフォームは違えどスマートフォンアプリである以上デザインは同じ方が楽なので、共通化されていったのは自然な流れだと思います。実際両者が全然違うUI・デザインだと大変ですしね……。 とはいえ、プラットフォームが違うので全て同じというわけにもいきません。iOS にはHuman Interface Guidelines、Android
フロントエンドを考える 〜概念編〜
この記事のシリーズでは私がフロントエンドに関して思っていることを徒然に語っていこうと思います。 ちょっと長くなり過ぎそうなので以下の4つに分けて書いていこうと思います。 1.概念的な話 - フロントエンドアプリケーションとは何でできているか フロントエンドアプリケーションを保守性とユーザへの価値提供を両立して開発するために、アプリケーションを抽象化して、いい感じの設計をする必要があります。 これの土台作りをするために概念としてフロントエンドアプリケーションとは何なのかを考えていきます。 2.技術的な話 - フロントエンドアプリケーションはどのように実行されるか Webフロントエンドはブラウザで実行され、表示のためには HTML, CSS, JS が必要です。当たり前のことではありますが、実際に開発を進めていく上では概念だけでなく、実際に動く How の部分を知る必要があります。 これらの要
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」:phpspot開発日誌
これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 2011年07月19日- jQuery EasyUI - help you build your web page easily これは注目の超リッチなUIを実装できるjQueryベースのUIライブラリ「jQuery EasyUI」 Ext.jsばりに美しくてリッチなUIをjQueryでも実現できちゃいます。さらに、使い勝手がjQueryなので誰でも簡単に実装できちゃいます。Extはなんとなく取っ付きにくいと感じたかたも簡単に使えそう。 サイト上のチュートリアルやドキュメントも充実していて分かりやすいです。 リッチなものが作れるのはいいけど使い方が難しかったりメンテナンス大変だと、使う気が少し失せてしまいそうですがこれなら大丈夫かもしれません。 テーマやマルチリンガルにも対応しているらし
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
30分で理解する、AWS の WEB Front-end Strategy / Serverless Front-end Strategy
加速するコンポーネント設計入門 / Component Design as an Accelerator
JSを一切使わないCSSでできたドロップダウンなどのUI実装「CSSUI」:phpspot開発日誌
オブジェクトベースUIとタスクベースUI - Qiita