UXデザイナーに学ぶ、ダークテーマをデザインする時に気をつけたい5つのポイント
iPhoneやAndroidでもダークテーマが採用され、ダークテーマが注目されています。サイトやアプリをダークテーマ対応にするには、単純に色合いを反転するだけではありません。読みやすく、バランスのとれた、快適なダークテーマをデザインする時に気をつけたいポイントを紹介します。 How to design delightful dark themes by Teresa Man 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ダークテーマをデザインするポイント1. 奥の面を暗くする ダークテーマをデザインするポイント2. 知覚コントラスト ダークテーマをデザインするポイント3. 明るい色の大きなブロック ダークテーマをデザインするポイント4. ブラックとホワイト ダークテーマをデザインするポイント5. カラーを濃くする 快
UXデザインプロセスの基本的な6ステップ デザイン会社 ビートラックス: ブログ
Step1 – 理解: UnderstandStep 2 – 共感: EmphasizeStep 3 – アイディエート: IdeateStep 4 – プロトタイプ: PrototypeStep 5 – テスト: TestStep 6 – ローンチ&計測: Launch&Measureユーザー体験を設計するUXデザインは、現代ではかなり高い認知度を獲得し、多くの企業が注目をしている。その一番の理由が、「スペック重視」から「体験重視」にビジネスもモデルが変換し始めたことだろう。 ユーザーのフォーカスが、所有することから利用することに移行したことで、プロダクト提供側も、より良い体験設計が求められている。 これからの時代にヒットするのはサービス化されたプロダクトだと言えるだろう。そこで最も重要な存在になってくるが、UXデザインであり、UXデザイナーである。 意外と知られていないUXデザインのプ
UIデザインにおける赤色と緑色の使い方
色は私たちの認識や感情に大きな影響を与えます。正しく使用された場合、その色はユーザーの特定の反応を引き出す事ができます。ここでは下記の理由に則り、赤と緑という２つの色に注目したいと思います。 赤色と緑色はどちらも実用的な色であるため、UIデザインにとって非常に重要です。 UIのアクセントカラーとして赤と緑を使用する、一般的な方法を見ていきましょう。 重要さを意味します。即座に注目を集め、ユーザーに迅速な決断を促す非常に目立つ色です。 赤色はとても高い温度を示す色です。情熱から怒りというような感情が含まれている強烈な色でもあります。 警告または危険を意味します。 赤いライトが点滅している場合、人々は危険または緊急事態を連想します。 エラー表示 赤色は多くの場合、警告や非常に重要で確認が必要なもののいずれかに関連付けられています。そのため、エラー表示について考えるときに最初に思いつくのは赤色で
スマホアプリの適切なボタンサイズと間隔とは？ユーザーのタッチミスを減らして使いやすさを向上させるために【2019年版】
ユーザーはあなたのアプリで的確にモバイルボタンを押すことができているでしょうか。また、ユーザーはターゲットを逃したりはしていないでしょうか？ ユーザーから苦情が来る前に、ボタンのサイズやスペースを見直してみましょう。 もしボタンが適切なサイズやスペースをしていなかったら、ユーザーは間違ったボタンを押しかねません。もしあなたが何が適切なのか自信がないのならば、この記事にその答えがあります。下記の寸法はCSSピクセルの96DPIを基準にしています。 ボタンサイズの基準 基準なしにはボタンが適切かどうか判断するのは困難です。幸運なことに、ボタンサイズやスペースについてのリサーチは年配の方を含めて大半のユーザーに当てはまるものとなっています。 この調査では、ユーザーは42ピクセル以下のボタンが一番正確性にかけたタッチをしてしまうことを表しています。72ピクセル以上のボタンもまた、正確性にかけること
独創的なページネーションのコードスニペット８選
Ericは20年以上の経験を持つWebデザイナーです。『Your Guide to Becoming a Freelance Web Designer』の著者でもあります。 ページネーションはデザインの中での必需性が低く、見過ごされることが多いもののひとつです。しかしブログやコンテンツの多いサイトでは、ページネーションはナビゲーションにおいて重要な意味を持ちます。サイトのページネーションが上手く作られていると、ユーザーはサイトを深くまで探求するようになるでしょう。 信じられないかもしれませんが、ページネーションのレベルを次のステップまで引き上げるデザイナーたちがいます。ここではWebサイト改善に役立つ、独創的なページネーションのコードスニペットを見ていきましょう。 シンプルで直観的なホバー効果 基本的なホバー効果によって標準的なページネーションは大幅に改善されます。カーソル移動に合わせて滑
プロのUXデザイナーから学ぶ！デザインをする時にグレースケールで始めると、デザインがよくなる4つ理由
Webページやアプリをデザインする時、空白スペースが効果的に使えない、要素のグループ化や情報の構造化が苦手、そんなデザイナーの人にお勧めなのが、カラー無しのグレースケールでデザインを始めることです。 カラーを使用する前に、グレースケールでデザインを作成すると、レイアウトを明確に考えることができ、UXデザインの優先順位を決めることができます。 4 Reasons Why You Should Design Without Color First by Anand Satyan 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. レイアウトとスペースの扱いに集中できる 2. クライアントは適した質問をするようになる 3. デザインを作成する時の重要なポイント 4. デザインに一貫性を作り出す 1. レイアウトとスペースの扱いに集中
2019年、UIとUXデザインのトレンドを解説！デザインのテクニックやツール、ブラウザ、フォントも進化している
デザイン業界の現在の流れを把握し、それらがどこに向かって進んでいるのか、何ができるようになるのか、チェックしておきたいUIとUXデザインのトレンドを紹介します。 昨年まではスマホ中心のトレンドが多かったですが、今年のキーワードは「コンテキスト」です。より良い方法でデザインするために、インターフェイスのトレンドを確認しておきましょう。 2019 UI and UX Design Trends by Moses Kim 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ブラウザの進化 02. 目的があるアニメーション 03. インターフェースの3Dとディープフラット 04. 超現実的なデザイン 05. グラデーション 2.0 -燃えるようなカラーと暗闇 06. 可変フォント 07. Figma 08. 音声UI 09. UXに
UI/UXデザインの基本：優れたユーザビリティをデザインする方法 | Web Design Trends
ユーザービリティはサービスの成功を左右する非常に重要な要素です。いくら機能が優れていても、それが使いづらければユーザーがそのサービスを利用し続けてくれません。 では、どうすればユーザビリティの優れたサービスを作ることができるのでしょうか。 今回は、ユーザビリティの基本と、優れたユーザビリティのサービスを作り上げるための方法をご紹介したいと思います。 2019年に流行するWebデザインの最新トレンド18個まとめ そろそろ2018年も終わりを迎え、2019年がやって来ようとしています。この1年でWebデザインのトレンドにも様々な変化がありましたが、2019年はどのようなWebデザインの手法が流行するのでしょうか... Web Design Trends
アニメーションを使った効果的なモバイルなトランジション例
アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ
ユーザーを魅了する！UXデザインの正しいアニメーション完全ガイド 2018年版 - PhotoshopVIP
海外サイト Medium で公開された The ultimate guide to proper use of animation in UX by Taras Skytskyi より許可をもらい、翻訳転載しています。 最近では、UIデザインのアニメーションで感動させたり、驚くせることは難しくなってきています。画面上でのやり取りを示したり、アプリケーションの使い方を説明したり、ユーザーの注意を向けるなど、実装テクニックはさまざまです。 この記事では、UXデザインにおけるアニメーションの基本原則とルールをまとめてご紹介します。これからインターフェースデザインのアニメーションを作成したいというひとが、追加情報を探す必要がないよう、アニメーションのすべてをまとめた完全ガイドです。 アニメーションの持続時間とスピード 要素の状態や位置が変更されると、アニメーションの長さは、ユーザーに変更を通知し、
モバイルではメニューを画面下に表示すべき理由
スマートフォンの使い方が、脳に影響を与えることがあります。ある調査によると、毎日スマートフォンを使う人は、脳の体性感覚皮質が大きいことがわかりました。体性感覚皮質は、親指のコントロールをつかさどる部位です。 また、ほかの調査では、ほとんどのユーザーがスマートフォンを片手で操作していることが明らかになりました。スマートフォンを握っているとき、ユーザーは左右どちらかの親指で画面を操作しているのです。親指はユーザーにとってマウスのようなものですが、その動きには限界もあります。 親指はマウスの代わり デスクトップデバイスでは、ユーザーは画面の操作にマウスを使用します。ナビゲーションメニューまでマウスを動かすことは簡単です。なぜなら、マウスは手首の動きを制限しないからです。 しかし、ユーザーがスマートフォンを握っているとき、親指は限られた範囲でしか動けません。画面に親指が届かない領域があるのです。こ
ベイジのweb制作ワークフロー2018（140のタスクと解説） | ベイジの社長ブログ
ベイジで社内のワークフローを整理しだしたのは確か2014年頃です。その頃はまだ4～5人しか社員がいない状態で、タスクの粒度も粗く、いくつかのタスクは各人の能力に委ねたものでした。しかし10人を超えて関わる人が増えたあたりから、仕事の進め方も徐々に変わり、ワークフローの綻びも色々と出始めてきました。そこで今年の春に、全社員参加のもと、これまでの進め方の問題点を話し合ったうえで、ワークフローの大幅な刷新を行いました。本エントリーはそのご紹介です。 刷新にあたって、受注から納品までをサブタスクを含めて約140に分解しました。また、各タスクで用いられるドキュメントもできるだけフォーマット化し、効率よくドキュメントワークができるようにしました。 合わせて、タスク毎の職能の再定義を行いました。プロデューサー、ディレクターといった業務範囲が曖昧な職能は、より厳密な職能の定義を試みました。例えばディレクタ
ユーザーが許可したくなるPush通知を考える｜sadakoa｜note
初めましての方もこんにちは、さだこえ (@sadako_a_ ) と申します。 DeNAに新卒で入社後、現在は株式会社FOLIOのデジタルプロダクトデザイナーとして、オンライン証券のUIデザインに従事しながら、スタートアップのデザイン支援を副業で行っています。 今記事では、主にアプリの機能として欠かせないPush通知に焦点を当て、記事を執筆します。 Push通知とはご存知の通りPush通知とは、アプリやwebサービスで何か変更や更新があった場合にお知らせをする機能です。一般的にこの業界で言われるPush通知は、Apple Push Notificationを指していることが多いと思われます。 その理由の1つとして、AndroidはPush通知に関してユーザーの許可を取る必要が無いからです。（ダウンロードする際にオプトインされるため、許可率は100%になる。） iOSやWeb Browser
UXを向上させる５種類のアニメーションの使い方 | UX MILK
Nick Babich氏はソフトウェアディベロッパーです。大のテクノロジー好きで、UI/UXをこよなく愛します。彼のwebサイトはこちらです。http://babich.biz。 モーションはストーリーを伝えます。長く複雑なストーリーではなく、「今ここを見て下さい」や、「操作は正常に完了しました」などのシンプルなストーリーです。 しかし、アニメーションの目標は、ユーザーを楽しませることではありません。ユーザーが何が実行されているか理解し、より便利にアプリを使う方法を理解するための手助けするためにあります。このアイディアは、Zurbの記事にある次の言葉の中ではっきりと表現されています。 We’re no longer just designing static screens. We’re designing for how the user gets from those screens
最近のWeb制作の勉強になる！Webサイトのワイヤーフレームやプロトタイプのまとめ
プロジェクトのメンバーでないとなかなか目にすることができないワイヤーフレームやプロトタイプ、他の人がどのように作っているか気になります。 最近のWebサイトやスマホアプリの制作で参考になりそうなワイヤーフレーム、フローチャート、プロトタイプを紹介します。 UXデザインのツールも、Adobe XDが先日ベータ版としてリリースされ、SketchもメジャーアップデートとなるSketch4がリリースされ、充実してきましたね。 Adobe XD Wireframe Kit for UX Designer for Adobe XD まずは年内にWindows版のリリースが予定されているAdobe XDで作成されたワイヤーフレーム用のキット。最近のWebサイトで使用されているコンポーネントが数多く収録されています。
ユーザビリティテストの被験者をしてみて感じた、テストの流れや重要ポイント
2016年9月1日 ユーザビリティ 8月某日、ワイヤーフレーム作成ツールのCacooなど、制作業務を円滑に進めるための様々な便利ツールを開発しているヌーラボさんにおじゃましました。そこで、まもなくプロジェクト管理ツールのBacklogをリデザインするということでしたので、ユーザビリティテストの被験者をしてみることに！ユーザビリティテストを行うことはありましたが、本格的なテストの被験者をすることはあまりなかったので、ワクワクしながら受けてみましたよ。 ↑私が10年以上利用している会計ソフト！ リデザインの経緯 長く愛用され続けてきたUIを改新するということですので、デザインを変更することを決めた理由や経緯について、中の人に聞いてみました！ 今までのUIは、少し前のWebアプリケーションで良く見られたような、1画面に多くの情報を載せてすべての機能を文字ラベルで表示するタイプでした。この方針には
新人Webデザイナーが知っておくべきWebデザイン専門用語30選
Web業界に入ってまず苦戦するのが専門用語の多さです。これからWebデザイナーとしてお仕事をする新社会人の方は、こうした専門用語を入社前にきちんと覚えておくと良いスタートを切れるのではないでしょうか。 そこで今回は、新人のWebデザイナーが知っておきたい専門用語をご紹介します。 すでに聞いたことのある用語でも、なんとなくのニュアンスで使っていないかチェックしてみてくださいね。 概念 UI 「ユーザーインターフェース（User Interface）」の略で、ユーザーがコンピュータなどのIT・デジタル機器/システムと情報のやりとりをするための仕組みや操作感のことです。ユーザーの目に触れる部分や使用する部分はすべてUIといえます。 「ユーザーエクスペリエンス（User Experience）」の略で、ユーザーがある製品・サービスを通じて得られる体験を意味します。その体験によってユーザーが抱く感情
Rettyの口コミ投稿数が220％増! 成功の裏にはユーザーとの対話を重視するUXデザインチームがあった | インタビュー
人気以外の基準で飲食店探しができ、“行って良かった”お店が見つかることがコンセプトだという日本最大級の実名型グルメサービスRetty。「サービスを通じて、お店を見つけてもらって、おいしかった、楽しかった」までデザインするのがRettyのデザイナーのミッションだという。また、思い切ったUI変更によって口コミ数が220％増したという。そのミッションに対し、どのようにデザインをしているのか、思い切ったUI変更ができる秘訣などデザイナーの近藤氏に聞いた。 ――「行って良かったお店が見つかる」というコンセプトにおいて、デザインチームの目標や社内での立ち位置を教えてください。 デザインチームの目標としては、ユーザーさんが求めるゴールまで、より良い方法で導くことです。そのため、そのゴールまでにどんなシナリオがあるのかやゴールまでの行動がスムーズに達成できるかを考えて分析や企画を立てて、それをUIに落とし
2016年に備えてしっかり確認しておきたい、Webとグラフィックデザインのトレンドと今後の展望
Webデザインやグラフィックデザインのトレンドをしっかり知っておくことは、非常に大切です。廃れゆくものを採用するのではなく、今必要とされているものが何なのか、そしてなぜそれが必要とされているのか理解することで、よりよいものが制作できます。 Webとグラフィックデザインのトレンドとその背景、目的、展望などを紹介します。 16 Graphic Design Trends To Watch In 2016 各項目ごとのグラフィックも分かりやすく、注目です。 01. ユーザーが使いやすいこと 02. レスポンシブデザインの考え方 03. アプリを彷彿させるWebデザイン 04. ナビゲーションの進化 05. モジュール式のテキスト 06. モジュール式と無限スクロール 07. Material Design 08. フラットデザイン 09. 1,000の言葉よりもビジュアルで 10. インフォグラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
本当に実践的なデザインドキュメントの書き方 第1回：なぜ渡されたワイヤーフレームは分かりにくいのか？ | アドビUX道場 #UXDojo - Adobe Blog
