【2024年版】UIデザインについて知りたい、学びたいときのおすすめ書籍12選 | 株式会社ニジボックス
「UIデザイン」という言葉は、今ではビジネスにおいて当たり前に使われる言葉になっています。 「UIデザイン」は単なる「見栄えが良いデザイン」とは違います。見栄えが優先されがちな、いわゆるビジュアルデザイン、グラフィックデザインは、視覚的にイメージを伝えるための表現だといえますが、「UIデザイン」は、ユーザーが直感的、かつスムーズにそのサービスを使いこなすことができるユーザーインターフェースを構築するためのデザインです。分かりやすくいえば使い勝手に特化したデザインといえるでしょう。 今回は、UIデザインについて学びたい、身につけたいというデザイナー、あるいはデザイナーと仕事をともにするプロデューサーやディレクターといった職種の方にぜひ読んでいただきたい本を紹介します。 UIデザインの基本は、ユーザーにストレスを与えないこと そもそもUIデザインの根本にある考え方は「ユーザーにストレスを与えな
モーダルウィンドウを考える | Accessible & Usable
公開日 : 2015年7月6日 (2024年2月12日 更新) カテゴリー : アクセシビリティ ウェブサイトのユーザーインターフェース (UI) に、「モーダルウィンドウ」と呼ばれるものがあります。ページ遷移を伴わずに、ページ上にウィンドウをオーバーレイ表示させるもので、このウィンドウが前面で開いている間は背景側にある元ページが操作対象外になることから「モーダル」という名称が付いています。実装例としては、フォーム、アラート、画像の拡大表示 (いわゆる Lightbox 系と呼ばれるもの) などが挙げられます。 モーダルウィンドウは、あるページを開いているというコンテキストを維持しつつ付加的にコンテンツの提示ができる利点がある反面、基本的なユーザビリティやアクセシビリティが欠落しているケースが多く見受けられます。以下の観点を意識しながらデザインや実装をすることで、基本的なユーザビリティやア
ストア評価★4.0以上のアプリが実践しているレビュー施策をまとめてみた｜宮﨑 晃
アプリをDLしてもらうために重要な要素の一つである★評価。 Apptentiveの調査では約8割の人がDL前にレビューを見ていて、DL率にも大きく影響をもつと言われています。 ★1で約12％、★2で約15％、★3で約50％、★4で約96％、★5で約100％のユーザーがDLしようと思う。 裏を返せば、アプリストアで見つけてもらっても★4以上ないと半分以上の人がDLをためらう悲しい事態に。 そこで今回は400個以上のアプリを触る中で良いなと思った｢レビュー依頼施策｣についてまとめました。 それでは、いってみましょう！ ※補足 ・評価点と評価数は2020/5/5時点のGooglePlayのデータです。 ・触る中で見つけた内容なので、実際の仕様と異なる可能性があります。 ①嬉しい体験をした時に依頼する購入完了など価値を感じている時に依頼を出すのが基本。発生しやすいイベントだと回答数も集めやすい。■
アプリのアップデート200本ノックから学ぶUI改善のヒント｜宮﨑 晃
こんにちは、HR業界でアプリマーケティングをしている宮﨑です。 ・アプリのアップデート前後のUI変化 ・Push通知など気になったGrowth施策 こうしたものを「#アプリノック」としてTwitterで毎日投稿しています。 本記事は11月も100本ノックをする中で感じた学びの第2弾になります。 それではいってみましょう！ ①何をする画面なのかの明確化 同じ粒度の情報が多いと何をすべきかわからず面倒に。情報に差をつけて直感的に何をするか伝わる画面にする。 ■メルカリ：メルペイ画面のUI変更 ボタンが8個→4個に減りキャンペーンが目立つ位置に移動。引き算×強調のお手本にしたいデザイン。 ■AWA：曲のアクション画面のUI変更 お気に入り、ダウンロード、プレイリストの3点が明確にサイズアップ。 ②プッシュする施策は納得感を アプリ側がやって欲しいことを勝手に押し付けるのはNG。ユーザーの行動に合
アプリのアップデート500本ノックから学ぶUI改善のヒント｜宮﨑 晃
「ザ・マイクロコピー」という本の中で次のような一説がでてきます。 何も考えずにこれしかないだろうと3回クリックするのと、これかなぁと迷いながら1回クリックするのとは同じ重みを持つ 。ちょっとした「？」がどれだけユーザーの集中力を邪魔しているか。 アプリの使い方に意識がさかれて、メインコンテンツへの集中がおざなりになっていたら勿体ない。アプリの運用者としては避けたい状況です。 そこで今回は「ユーザーに考えさせない工夫」を集めてみました。 それでは、いってみましょう！ ①補足はとにかくシンプルに 長い説明は読み飛ばされるもの。最低限の言葉におさえることでユーザーの心理的負荷を下げていきたい。■無印良品：初回起動画面のUI変更 繰り返しや補足は全て削除。「はじめてor復元」のシンプルな画面に進化。 ■アパホテル：クーポン画面のUI変更 挨拶/会員情報/長い注意書き…etcを全て削除。1番重要な｢
演出を作る時の心がけ
意識していること 飽きさせない これ！ 動きは見ていて工夫させないと飽きます。 主に、同じような場面、動き、スピードが続くと退屈に感じてしまうので、少しでもその感情をなくすために様々なところに変化をつけ、見ていて飽きないようにしていきます。 飽きさせないために何をするかですが、緩急、粗密、ジャンプ率、明暗に変化を加え、印象を変えて飽きさせないようにします。 緩急でメリハリ
よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ
Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。 フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSSで実装するレイアウト・UIコンポーネント CSS Layoutの特徴 CSS Layoutはよく使われるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。
ラジオボタンに初期値をおくべきかという議論 | バシャログ。
近ごろ職場近辺で「モーニングがある」「きちんと分煙されている」「携帯電話の電波が入る」の3条件をいずれも満たすようなカフェを探している kagata です。2つまではわりとどこも満足できるのですが、3つすべてとなるとなかなか難しいようです。 さて、先日弊社内で「ラジオボタンには初期値を設けるべき」とごく軽い気持ちで発言したところ、社内外で思いのほか活発な議論が巻き起こるということがありました。その際に調べた前提的な話を備忘のためここにまとめるとともに、今考えている疑問や課題をご紹介します。「そんなことも知らないの？」ということがあったら、ご教授いただければ幸いです… m(__)m HTML の仕様を確認する 「ラジオボタンには初期値を設けるべき」だとわたしが最初に学んだのは10年くらい前のことです。当時はプログラミングでなく主に HTML を書いて生計を立てていました。そのころに次の記事を
現役UIデザイナーが制作した入力フォームを自身で解説！【WEB屋必読】 | 株式会社パンタグラフ
現役UIデザイナーが制作した入力フォームを自身で解説！【WEB屋必読】 UI／UXデザイン 2017.12.15 入力フォームについて様々な角度から考察させていただいたPantographのUIデザイナーが、今回は実際にデザイン制作した入力フォームを解説させていただきます。 実際の制作物を、デザイナー本人がこうして記事を通して解説することは滅多にないので、UIデザイナーさんもそうでない人も、WEBに携わるすべての人にお読みいただけたら嬉しいです。 ▼入力フォームについて考察した関連記事 ・入力フォームの制作ルールを紹介･解説 【ヒューリスティック分析】入力フォームを改善して送信数を上げる10の技 【スマートフォン編】入力フォームの送信数・CVRを上げる5つの改善策 ・入力フォームの参考サイトを紹介･解説 【2018年版】入力フォームのデザイン設計に参考にしたいサイト事例8選 制作過程におけ
ログインフォームデザインの18の重要ポイントを解説！ユーザーに優しいサイトログイン環境のために
以下に、デザイナーがより良い登録フォームとログインフォームを作成するのに役立つヒントをいくつか示します。 1.バリュープロポジションを明確に定義する サインアップはユーザーが最後に行いたい作業です。一般的に、ユーザーはサービスの価値が見えるまでサインアップするつもりはありません。フォームに記入するバリュープロポジションを明確に定義するようにしましょう。メッセージは鮮明にしてください。 Linkedinはこれの良い例です。 2.ログインできる場所を明確に示す ユーザーがWebサイトに到着したときは、ログインやレジスターがどこでできるのかをクリアに示しましょう。これはログインが主なCTAである場合はなおさらです。 3.SNSのログインセッションを先に表示させる ログインがWebサイトの優先課題でなければならない場合は、サインインやサインアップのリンクの代わりに、FacebookやTwitter
UI Flowを簡単に記述できるguiflowが良い - note
画面遷移の図を起こしたり、それをアップデートしていったり、共有したり、といった作業ってじつはとても地味で重い。重要な作業に変わりないんだけど、その作業的な重たさに辟易してしまうこと多数。特に、Office系を使うと死が待っている。同僚のテクニカルディレクターが死亡していたので、ツライなーと思っていたらよいものを見つけたので、実際に触ってみた。 ＞もう保守されない画面遷移図は嫌なので、UI Flow図を簡単にマークダウンぽく書くエディタ作った - Qiita 魔法っぽい。マークダウンみたいなかんたんな記法でテキストを書くだけで機能遷移図になる。 graphviz というしくみを使っているようで、チャートを構造化しながら描画できるっぽい。しかもGUIのツール「guiflow」というものまで用意されているので、図の一部分をさわるとコードの該当箇所に飛べたりとか、いろいろ良い。 入れ方今回ほぼはじ
スマホUI考（番外編） なぜ機能追加をし続けるとアプリが破綻するのか？ | fladdict
この写真は、アーミーナイフの名門ウェンガー社のジャイアントナイフという最高級ナイフである。141の機能を持つ、ギネス認定もされた厚さ24cm、重量1.3kgの世界で最も高機能なナイフだ。トップメーカーが自社製品の全機能を１つに集約したこの製品こそが、機能拡張の行き着く先を指し示している。 なぜ適切な機能追加であっても、機能を追加しつづけることで破綻をするのか？本エントリは、「スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する」の続きになる。 本エントリでは以下の４つの側面から、機能を追加するリスクを考える。まず第一に「選択肢の数が必ずしも善ではないこと」。次に「人間の判断力は使うほど消耗すること」。そして「画面スペースが有限のリソースであること」。最後に「どんなに機能を増やしても、一画面で強調できるものは限られていること」。これらの４つは全て、機能追加が最
高齢者へのiPad導入を阻んだiOSのUI/UXの話
高齢者へのiPad導入を阻んだiOSのUI/UXの話 先月（2013年11月）、徳島県南部局と美波町が共催する「ITふるさと村」の講座で、iPadを使ったタブレット講座を開催しました。その成功と失敗の体験について書こうと思います。 Facetimeビデオ通話のデモで会場を一気に盛り上げたものの、参加者に実際に体験してもらう段階で「大失敗」。AppleIDの取得とそのためのiCloudメールの登録をしてもらってから、と進めたのですが、30名ほどの参加者のうち時間内にゴール出来たのは、たったの１名。好きなアプリをダウンロードしてもらい、タブレットの楽しさを感じてもらう目標が、そのスタート地点にも立てず(;_;) 企画や運営、インストラクターとしては完全に落第点でした。それを棚に上げると、高齢者とITに関する課題が大量に見えたという点では、ある意味「大成功」だったとも言えるでしょう。 【講座内容
ウェブユーザビリティ向上を支援するWebsite Usability Info
ウェブをはじめとするデジタルコンテンツの、ユーザビリティ、アクセシビリティ、情報設計 (IA) に関する話題をマイペースに発信。世の中のサイトやアプリがあまねく、インクルーシブで使いやすいものになることを願って。 Accessible & Usable では、ウェブサイトやアプリケーションのアクセシビリティ向上を支援させていただきたく、お仕事のご依頼、ご相談を承っております。詳しくは「お仕事のご依頼・ご相談」をご覧ください。 † 新着記事 † The WebAIM Million (100万のホームページに対するアクセシビリティ自動検証) : 2024年の調査 公開日 : 2024年4月11日 カテゴリー : アクセシビリティ 米国の非営利団体 WebAIM が実施した、「The WebAIM Million」という調査があります。メジャーどころの100万ウェブサイトを採り上げ、各サイトの
検索結果一覧のUI改善でKPIが17.5%向上した話 - CrowdWorks Designer Blog | クラウドワークス デザイナーブログ
こんにちは。デザイナーの上田です。たまにはサービスグロース系の記事を書いてみようと思います。 突然ですが、「サービス改善の一環でUI改善の施策をリリースしたけど、明らかな数字の変化が見られず、いまいち上手くいったのか上手くいかなかったのか評価がしづらい。」といった経験をお持ちではありませんか？ わたし自身は何度かそういった経験があり、UI改善が定量的な成果に結びつきづらく感じて、「UI改善の価値を主張しづらいな。」と頭を悩ましていました。 そんな中、担当したUI改善で、主要なKPIを17.5%改善することができ、デザインプロセスに汎用性を持たせられそうな感覚があったので、そういった事例を増やしていくために、今回はどんな風に設計したかプロセスを振り返ってみようと思います。 もちろんUI改善の効果は定量的な数字の変化のみで推し量れないと思ってますが、一方でUI改善で数字を伸ばせない訳ではないと
スタイルガイドジェネレーターの「Fractal」がかなり良さそう
ずっと自分好みのスタイルガイドジェネレーターを探していたんですが、ようやく見つけました！「Fractal 」というツールで、かなり良さそうなのでご紹介します。 初級編、中級編の2回に分けて、初級編ではインストールと初級設定からウェブUIの起動までを、中級編ではコンポーネントのより細かい設定などについてご紹介します。公式ドキュメントは初めてだとわかりづらいところもあったので、その辺を補う形でまとめてみたいと思います。 ※先日、スタイルガイドとパターンライブラリの違いについてまとめましたが、スタイルガイドやパターンライブラリを自動生成するツールは「スタイルガイドジェネレーター」というのが一般的なようです。「パターンライブラリジェネレーター」とは呼ばないみたいですね。 では早速、「Fractalのはじめの一歩」的な感じで行ってみましょう！ Fractalとは まずは、ざっくりとFractalをご
Alternative Atomic Designをさがして | よりデザイン
DMMのエンジニアで『React開発 現場の教科書』の著者でもある石橋啓太さんにお声がけ頂いて『ReactとAtomicDesignからみるコンポーネント開発』でお話をさせて頂きました。 テーマは個人的に関心のあった「Atomic Designの代替」を選びました。Atomic Designと言えば、いまや国内外含めてコンポーネント設計をする際に多くの人が参照する概念ですが、すべての環境に適切かと言えばそれはまだ疑問を残す余地があります。 「Atomic Designを採用してみたけどしっくりこなかったので自分たちに合った概念を考えてみた」という個人・組織がいるのはMediumの記事などを通じて知っていたので、そういった事例を集めてみたら面白いんじゃないかなと思ったのがこのテーマを選んだきっかけです。完全に趣味です。 Atomic Designへの疑問 Atomic Designについて知
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.life-is-bitter.com/entry/dailyui01
UI Movement - The best UI design inspiration, every day
UX/UIデザイン - OHAKO | 企画～実装をご支援
