ユーザーに刺さるUIデザイン実用テクニック37選シンプルなUIデザインテクニックで、より良いユーザーインターフェースをデザインし、ユーザーが満足する方法を一緒に学びましょう。 現役UIデザイナーのジム・ラプティス氏が実際の製品でテスト、検証した実用度の高いテクニック集なので、手軽に試すことができ、効果的にホームページやアプリのUIを改善できます。 時間がない人のために、今回紹介するテクニックのまとめがこちら。 各項目では実際のサンプルをつかって、「良い例」と「悪い例」を比較。すぐできる解決策と一緒に詳しく紹介しています。
iOSアプリによく使用されているナビゲーションの最新パターンとそれぞれの特徴
iOSアプリによく使用されているナビゲーションのパターンとそれぞれの特徴を紹介します。 情報の階層ツリーを行き来するための構造型ナビゲーション、ユーザーの注意を引くためのオーバーレイ型ナビゲーション、特別なコンテンツで使用する埋め込み型ナビゲーションなど、最近のアプリに必須のナビゲーションばかりです。 Modern iOS Navigation Patterns by Frank Rausch 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 最新のiOSのナビゲーションパターン 構造型ナビゲーション オーバーレイ型ナビゲーション 埋め込み型ナビゲーション 参考資料 最新のiOSのナビゲーションパターン この記事では、ドリルダウン、モーダル、ピラミッド、シーケンスなど、iOSアプリを構造化す
はじめてのアプリUIデザイン。フローやWebサイトとの違いを解説します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの花ちゃんです！ 最近Webサイト制作だけではなく、アプリ開発にも携わることが増えてきました。 その中で「Webサイト制作に似ているな〜」と思ったり、「あれ、ここは違う！」といった気づきがたくさんありました。前職ではソーシャルゲームのUIデザインを担当していましたが、Web業界に転職したときも、まったく同じことを思ったのを覚えています。 今回は、Webデザイナーの方がはじめて「アプリのUIデザイン」をするときに必要な知識や考え方、意識したほうがよいことを、フェーズごとにまとめてみました。 アプリにおけるUIデザインとは そもそも「UI」とは、ユーザーインターフェース（User Interface）の略で、日本語では「ユーザーとの接点・接触⾯」という意味になります。 UIはユーザーの目に触れ使用する部分すべてを指し、このUIを通してコンピューターとユーザーは情報のやりと
ユーザーが直感的に理解できる「待ち時間」の適切なUIの選択方法まとめ
ウェブサービスの開発において、「待ち時間をどうするか」は大きな問題です。もちろん、待ち時間を減らせるのであれば減らしたいものですが、仕組みの都合上どうしても待ち時間が発生してしまう場合があります。そうした場合にユーザー体験を向上させるデザインのパターンについて、デザインを専門に行う企業の「Pencil & Paper」がブログでまとめています。 UX Design Patterns for Loading https://pencilandpaper.io/articles/ux-pattern-analysis-loading-feedback/ ブログによると、ロードのパターンは「パッシブロード」と「アクティブロード」の2パターンに分けられるとのこと。 ◆パッシブロード パッシブロードは、システムが最初にデータ量の多いページをロードするとき、ファイルを開くとき、または検索結果を表示する
最近のUIデザインのテクニックを解説！ より使いやすいボタンをデザインするときのポイント
WebサイトやスマホアプリのUIに使用されているボタンをデザインするときに気をつけるポイント、より使いやすくするためのポイントを紹介します。 UIのボタンは色だけに頼らない明確な視覚的階層が必要で、同じスタイルの場合は区別できるようにデザインすることが重要です。 Button design tips to avoid common mistakes by Adham Dannaway 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに UIのボタンで見かけるよくある間違い ボタンをデザインするときに重要なこと より良いボタンにする方法 より実践的なUIデザインのガイドライン はじめに 私はデザイナーになって20年が過ぎ、多くのプロジェクトでボタンを使用してきましたが、ボタンのデザインについて深く考察する時間を取っていなかっ
2022年中にreact-router-domの理解を深めたい - Qiita
この記事は、Ateam LifeDesign Advent Calendar 2022 シリーズ1の8日目の記事です。 はじめに react-router-domについて、ふわっと理解していた部分がありました。 このまま年を越すには、どうも気持ちが落ち着かない。。。 というわけこの際、1から全部実装して動作を確認していこうと思います。 React Routerって何？ Reactで作成したSPAに、UIとURLを紐づけるためのものです。 http://localhost:3000/top にアクセス -> Topコンポーネントを返す http://localhost:3000/todo にアクセス -> Todoコンポーネントを返す といった事ができます。 今回やること 今回はルーティングを確認したいので、react-router-dom を使用します。 react-router-domは
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI - ICS MEDIA
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI 2023年5月〜6月にリリースされたChrome 114とEdge 114には、「ポップオーバーAPI」というAPIが搭載されました。 ポップオーバーとはコンテンツの1番上に重ねて表示するUIで、ユーザーにアクションを促したり、補足の情報などを伝えるために画面に表示します。ポップオーバーAPIのMDNのドキュメントではオーバーレイ、ポップアップ、ポップオーバー、ダイアログなどを総称して「ポップオーバー」と呼んでいます。 ウェブサイトでよく見かけるポップオーバーですが、実装するには意外と調整や考慮の多いUIです。たとえば、画面の1番上に重ねるためにはz-indexで他の要素との重なり順を調整する必要があります。Escキーを押した時や要素外をクリックした時にポップオーバーを閉じるには、Java
実案件から学んだ、本当に役立つUIデザインの法則50 ユーザビリティチェックリスト総集編｜i3DESIGN Designers
「ユーザビリティチェックリスト」ということで、UIデザインの「あるある」を取り上げ、改善案とセットでまとめています。 今回は、10のヒューリスティクスをもとに分類してみました。10のヒューリスティクスについては、以前記事にまとめています。 具体的な事例を一緒に取り上げ、よりわかりやすく解説していますので、こちらもあわせてご覧ください。 また弊社ホームページにて、ユーザビリティチェックリストをダウンロードいただけます。こちらも合わせてご活用ください。 1. システムステータスの可視化（Visibility of system status）1-1. 入力項目が多いときはステップを分けるフォームの入力項目が多い場合は、項目をグルーピングして画面を分割しましょう。 フォームが長すぎると、ユーザーは入力を途中で辞めてページから離脱してしまうかもしれません。 その上で、ステッパーを設置して現在の進捗
ウェブ制作にも便利！React & Vueで始めるヘッドレスUI - ICS MEDIA
ウェブの表現がリッチになるに従い、コーポレートサイトやキャンペーンページのような「普通のウェブページ」でもモーダルダイアログやアコーディオンといった、ちょっと凝ったUIを見かけることが増えてきました。こうしたUIが必要な場合、皆さんはどのように実装していますか？ 2023年3月にモーダルダイアログの実装について聞いたアンケートでは<div>で自前実装派とJSライブラリ利用派で回答が二分されました。 この記事ではリッチで使いやすいUIを実装するための選択肢として「ヘッドレスUI」ライブラリを紹介します。ヘッドレスUIライブラリも大きな括りでは「JSライブラリ利用派」に含まれますが、古くから定番のBootstrapやMaterial UI・Vuetifyなどとはちょっと毛色の違う存在です。 ヘッドレスUIとは？ BootstrapやVuetifyとは何が違う？ ヘッドレスUIとは「デザイン（見
モダンフロントエンドで始めるつらくないReactディレクトリ構成 - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに こんにちは、ラクスフロントエンド開発課の斉藤です。 記事タイトルはReact開発者なら知る人ぞ知るりあクト！ TypeScriptで始めるつらくないReact開発のパロディです。とてもわかりやすい入門書なのでReact初学者の方には学びの第一歩として自信を持ってオススメできます！ さて今回は、モダンなフロントエンド技術を採用したうえで、極力シンプルで開発体験を損なわないようなディレクトリ構成を考えてみたので共有したく記事にしました。現在実際に運用しているのですが、今のところ大きな問題も無くチームからの不満も上がっていません。しかし、個人的に微妙な部分もあるのでそちらの紹介も行いたいと思います。 今回、構成を考えるにあたって重視したポイントは以下の3点です。 新しく参入するメンバーでもすぐに理解できるシンプルな構成にしたい テストやリファクタしやすい構成にしたい できればルールが厳
Vue.jsで再利用可能なアコーディオンのコンポーネントを実装する方法を解説
アコーディオンは、Webサイトやスマホアプリでよく使用されるUIコンポーネントです。TailwindCSSやBootstrapなどのライブラリにも必ずありますが、再利用可能な柔軟性のあるものではありません。 スタイルを簡単にカスタマイズできる再利用可能なアコーディオンのコンポーネントをVue.jsで実装する方法を紹介します。 How to Build an Accordion Component in Vue.js by by Luca Spezzano はじめに アコーディオンの実装 アコーディオンのコンポーネントの使用方法 終わりに はじめに Vue.jsのコンポーネントに関するHow to記事は今回で4回目となりますが、最もよく読まれているのはチュートリアル記事で、具体的に使用できるものをすぐに実装することができるだと思います。 Vue.jsで再利用可能なタブのUIコンポーネントを実
Vue.jsで再利用可能なタブのUIコンポーネントを実装する方法を解説
タブは、Webサイトやスマホアプリでよく使用されるUIコンポーネントです。TailwindCSSやBootstrapなどのライブラリにも必ずありますが、再利用可能な柔軟性のあるものではありません。 スタイルを簡単にカスタマイズできる再利用可能なタブコンポーネントをVue.jsで実装する方法を紹介します。 How to Build a Tab Component In Vue.js by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 実装の概要 AppTabs.vueコンポーネントの作成 コードの解説 コンポーネントの使用方法 終わりに はじめに タブはUIでよく使用されるコンポーネントの1つで、Bootstrapのような人気のあるCSSフレームワークやTailwindUIのようなUIコンポ
いま話題の 「stand.fm」 のUIを全力でトレースしてみた！｜kakeru tokunaga
皆さん stand.fmというアプリ/サービスを知っていますか？ そうです。音声サービス界隈に彗星の如く現れたニューヒーローとも言えるサービスです。そのぐらい今、勢いがあると思います。 皆さんご存知の通り、音声コンテンツ市場は近年、googleやspotifyの参入やスマートスピーカーの普及に伴ってかなり盛り上がっており、日本の市場も例外ではなく、RadiotalkやVoicy、Recなど様々なサービスが存在しています。 そんな盛り上がりを見せる市場で、最近、特にコンテンツの充実・サービスとしての伸びを見せているのが、この stand.fm だという事です。 僕は今まで、appleのpodcast、Voicy,Radiotalkのユーザーでしたが、そんな僕が最初にこのアプリを触った印象は、 「使いやすい！UIがかわいい！」 気軽にTwitterのタイムラインから飛んで配信を一度聞いたつもり
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
