UI Tipsで公開された「UI Tips for Landing Pages & Apps by Jim Raptis」より許可をもらい、日本語抄訳しています。 シンプルなUIデザインテクニックで、より良いユーザーインターフェースをデザインし、ユーザーが満足する方法を一緒に学びましょう。 現役UIデザイナーのジム・ラプティス氏が実際の製品でテスト、検証した実用度の高いテクニック集なので、手軽に試すことができ、効果的にホームページやアプリのUIを改善できます。 時間がない人のために、今回紹介するテクニックのまとめがこちら。 各項目では実際のサンプルをつかって、「良い例」と「悪い例」を比較。すぐできる解決策と一緒に詳しく紹介しています。 ユーザーが恋に落ちるUIデザイン実用テクニック1. ソーシャルログイン2. より良いメニューデザイン3. グーテンベルグの法則4. モーダルの削除5. 不揃

こんにちは、GaudiyデザイナーのTORAJIRO（@jirosh1998）です。 『英単語アプリ mikan』の副業デザイナーとして、Figmaリファクタリング&デザインシステムの一歩目を構築した話を書こうと思います。 このnoteの最後に、今回作成した『mikan DesignSystem』のデータを公開していますので、ぜひご覧ください👋（mizoさんをはじめmikanのみなさん、具体的なアウトプットの公開まで許可いただき感謝です！心広すぎ！） 読んで欲しい人 - これからチームでデザインシステムを作っていきたい - コンポーネントライブラリをFigmaで構築したい - Figmaをリファクタリングして、デザイナーの作業効率を上げたい デザインシステム本題に入る前に、このnoteで書いている「デザインシステム」の定義について触れておきます。デザインシステムとは「良いデザインを『効率

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

WebサイトやスマホアプリのUIデザインをはじめ、プレゼンなどのさまざまな成果物に使用できるSVGアイコンのセットを紹介します。 アイコンのスタイルも豊富で、ソリッド・ベタ塗り・デュオトーンなども揃っており、さまざまなデザインに適用できると思います。 Phosphor Icons Phosphor Icons -GitHub Phosphor Iconsの特徴 Phosphor Iconsのアイコンのダウンロード Phosphor Iconsのアイコン Phosphor Iconsの特徴 Phosphor Iconsは、WebサイトやスマホアプリのUIデザインをはじめ、プレゼンテーションやダイアグラムなどさまざまな成果物に使用できるフレシキブルなアイコンのセットです。 7，000種類以上のSVGアイコンが揃っています。 6つのスタイル（Thin, Light, Regular, Bold,

Reflective UIと呼ばれる表現がにわかに注目されています。そのいくつかの事例紹介や、私自身が実際に実装してみてどうだったかの所感を書き留めておこうと思います。 Reflective UIとはReflective UIとは、光や映像の反射表現を活用してUIの質感を高めた表現を指します。ジャイロや加速度センサーを使って擬似的に反射を表現したり、カメラで取り込んだ映像をUIのテクスチャとして活用して、より現実感を持たせた表現などがあります。 カメラを使う場合、例えばフロントカメラでユーザーの顔や背後の映像を撮影しリアルタイムに加工して、テクスチャとしてUIの見た目に反映します。これがスマートフォンで実装されるとまるでGUIが鏡のように映り込む質感を持った物体かのように錯覚するので、「クールな新しい表現」として注目されています。 Reflective UIに明確な分類や定義があるかは定か

A最低限の基準です。この基準を達成しないとWebサイトを閲覧できない人が存在しうるとされます。 AA望ましい基準です。この基準を達成すればWebサイトの閲覧が困難なケースは多くないとされています。 AAA発展的な基準です。この基準を満たすと最も閲覧しやすいWebサイトと言えます。

スマホアプリやWebサービスなど、スクリーン上のUIには様々な形でモーション（動き）が使われています。
こうしたUIモーションは利用者として毎日何気なく目にしているものですが、そこには作り手がいて目的があるはずです。この記事ではUIモーションの目的と効果的な使用方法について考察します。 UIモーションとUIアニメーション「モーション」と「アニメーション」はどちらも動きを表す言葉として、同じ意味で使われることもありますが、元々の言葉の意味を踏まえると以下のような違いがあると言えます。 UIモーション：UI要素に動きを与えたもの。ユーザーの操作や時間経過に応じてUI要素が移動・拡大・縮小・変形などの変化が生じること。（例：モーダルウィンドウの表示・非表示など） UIアニメーション：時間とともに変化するグラフィックをUIに取り入れること。（例：Twitterのいいねボタンを実行した際の演出） 厳

Webユーザーは、情報過負荷へ適応するため、重要でなさそう、あるいは広告のように見えるエリアから注意をそらすように自分たちを訓練してきた。しかし、サイドバーは適切にデザインすれば、コンテンツを発見しやすくし、ユーザビリティをうまく向上させることができる。 Fight Against “Right-Rail Blindness” by Hoa Loranger on October 12, 2013 日本語版2013年12月17日公開 残念なことだが、Webサイトクリエイターが右カラム（Webページの右レールとも呼ばれる）を広告の掲載によく使うので、ユーザーはこのエリアをチェックしないように自分たちを訓練してこざるをえなかった。これは右カラムはやめるべきということだろうか。いや、そんなことはない。 ページの右側で消費されるピクセルは利用可能な量のうちの20％程度だが、ピクセルとはコンピュータ

自己紹介 こんばんは。 Qiita株式会社でデザイナーをしている綿貫佳祐と言います。 現在はCX向上グループという「売上とか利益じゃなくて、ユーザーの皆さんの体験向上だけを考えよう」と掲げる部署のマネージャーをしています。 TwitterやInstagramなど、こちらのidでやっていますので、良かったらフォローしてください。 Qiita株式会社ではQiita、Qiita Team、Qiita Jobsという3つのサービスを展開しています。 今日はQiitaとQiita Jobsをまたいで提供している機能を例に出してお話をします。 本題に入る前に 現場から学ぶモデル駆動の設計というconnpassグループにおいて、デザイナーから発表するのは結構プレッシャーもあります。 今日の私の話は、エンジニアからすれば当たり前過ぎるとか、モデリングのお作法としてはあまり正確ではないとか、そういう内容も多

デザイン業務ではしばしば“奇抜さ”が求められることがあります。人間は常に新しい形や刺激的な表現を求めていて、誰もが思いつくようなものでは受け入れられないことも多々あります。そのことは十分に承知の上で、私は良いデザインとはどこか“普通の形”をしているものだと考えています。普通というとなんだかネガティブにも捉われがちですけれども、環境に融け込んでいて違和感がないという意味で、普通であることはデザインの目指すべき一つの姿なのではないかと思います。はじめ奇抜な形をしていたものが次第に社会に受け入れられていって、いつからか「普通」になっているようなこともあります。｢新しくあること」と「普通であること」は必ずしも二項対立の関係ではありませんが、どちらを取るべきかでしばしば頭を抱えてしまうデザイナーは私を含め多くいらっしゃるのではないでしょうか。 UIデザインの世界を見てみても、やはりどこか「普通ではな

Recent Posts Afterword Manifesto of the Modelessist Party Counterpart User-Side Spatial Recent Commentsotktko on Syntax名無しのゲーマー on FPS vs RPG中内淑文 on Afterwordueno on Afterwordくぼた on AfterwordArchives January 2010 December 2009 November 2009 October 2009 September 2009 Categories Uncategorized Meta Log in Entries RSS Comments RSS WordPress.org

OOUI の目当てについて考えたいと思います。 私はここで「目当て」という言葉を「オブジェクト」の訳語として使っています。このタイトル自体に同語反復的な響きを持たせてみたのです。 OOUI は「オブジェクト指向ユーザーインターフェース」のことですから、OOUI について考える上ではオブジェクト指向とは何かということについて考える必要があります。するとさらにオブジェクトとは何かというところまで遡って、このコンセプトの本質を見ていく必要があるのです。 そこで、O（object）、O（oriented）、OO（object-oriented）、U（user）、I（interface）、UI（user interface）、OOUI（object-oriented user interface）という風に言葉を分解して、それぞれの意味を確認しながら、OOUI の目当てを探っていきます。 オブジェク

TwitterがまだTwttrという表記だったころから、Twitterらしさの定義のひとつが「140文字のツイート」でした。この140文字の制限を挑戦として楽しまれる方もいらっしゃいます。文字数制限が、創造性を駆使した簡潔なメッセージにしようと思うきっかけにもなっているようです。中には、文章力の向上に役立ったという方もいらっしゃると聞きました。その一方、この文字数制限によってTwitterに不満に感じる方も多くいらっしゃいます。文字制限があるために書き方を考えなくてはならず、表現能力に制限を与え、結局はツイートを行うことを諦めさせてしまうことも少なくありません。簡潔であることはTwitterにとってとても大切なことですが、皆さんにもそれぞれのお考えを共有していただきたいとも思います。 ツイートの長さについてのデータを見て、興味深いパターンを発見しました。この140文字の制限が、使われている

インタラクションコストとは、ユーザーが目標を達成するため、サイトとインタラクトするのに必要な、精神的・肉体的な努力の総計である。 Interaction Cost: Definition by Raluca Budiu on August 31, 2013 日本語版2013年9月18日公開 理想的には、ユーザーがサイトに行ったら、探している答えがすぐ目の前にあるといい。それはつまりインタラクションコストがゼロになるということで、ユーザビリティという領域の究極の目標はそこにあるからである。 しかし、残念ながら、インタラクションコストがゼロになることはまれだ。ほとんどのサイトやアプリはユーザーがやりたそうなことを多数提供しているからである。したがって、大体の場合、ユーザーはあちこちを見回して、場合によってはスクロールをし、見込みのありそうなリンクを探して、クリックをし、そのページが読み込まれる

フォームを改善するUIデザインのテクニックを紹介します。 フォームのデザインに少し手を加えるだけで、ユーザーにとって使いやすい、コンバージョンを高めるための実践的なテクニックが満載です。 15 UI Tips for Better Forms by Jim Raptis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 01. ラベルを常に記述する 02. Zパターンを避ける 03. ラベルを入力欄の上に配置する 04. 右揃えのラベルを使用する 05. 関連する入力欄をグループ化する 06. ユーザーフローを尊重する 07. スペースを与える 08. ラベルの繰り返しを避ける 09. エラーメッセージは分かりやすく 10. 必要に応じてドロップダウンを使用する 11. プレースホルダーを活用する 12. ボタンは1つに

…というものを最近考えていました。「画面デザインのOKももらったし、私の仕事は終わり！あとはエンジニアに指示書を渡すだけ」と一息ついた時にこそ、改めてデザインを見つめなおすべきです。 つよいUIであるための7つの視点 1.本来、そこにあるはずの情報がない場合はどうなりますか？ リストUIで載せる情報が0件、文章が空っぽ、画像がない時など 2.表示する要素が想定よりすごく多い/すごく少ない場合はどうなりますか？ 数字の桁数、文章の行数、文章が入りきれない場合は文中・文末のどこを省略すべきか…など 3.ユーザーさんの立場によって、表示要素に変化はありませんか？ ゲストとログインユーザー、無料会員と有料会員…など 4.ロード中、もしくはロードされるまで何が出ていますか？ 通信中の表示、読み込み中の画像エリア…など 5.予期せぬエラーが起こった時、画面はどうなりますか？ 通信エラー、リンク先のコン