ビジュアルウエイトとは ビジュアルウエイトとは、見る人を惹きつける力です。Webページ上のすべての要素にはビジュアルウエイトがあり、ウエイトが重ければ重いほど、よりユーザーの注目を集められます。 たとえば上の図では、白いボックスよりも黒いボックスの方が強く印象に残り、注目を集めやすいですよね。これは背景全体が淡い水色のため、相対的に黒が強調されるからです。一方で背景全体が暗色系の場合は、ビジュアルウェイトは白いボックスの方が重くなります。 ビジュアルウエイトを使いこなせば、フォーカルポイント（Focal point：磁石のように人を惹きつける焦点となるポイント）を意図的に作ることが可能です。 ビジュアルウエイトの測りかた 物理的な重さとは違って、ビジュアルウエイトは定量的に測れません。 しかし以下のようなテストを行えば、Webページ上のどのオブジェクトのビジュアルウエイトが重いかを理解でき

#UIのじかん https://graspy.connpass.com/event/138971/

一時的に操作ができない無効状態のボタンを表示する場合、どのようにデザインすると、ユーザーの混乱を少なくすることができるか、UXの観点から解説した記事を紹介します。 無効状態のボタンをグレーアウトにしてしまうと、他のボタンにグレーを使用できなくなったり、操作できない不具合かもとユーザーは思うかもしれません。 Why You Shouldn’t Gray Out Disabled Buttons by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 無効状態のボタンをグレーアウトにしない理由 無効状態のボタンをグレーアウトにしない理由 ページ上でアクティブになっていないボタンがある場合、あなたはどのように実装していますか？ ボタンを本来の場所から一度削除した後に表示すると、ユーザーは突然現れたボタンに驚くかも

赤いボタンは、通常のコールトゥアクション（CTA）に使用すべきではありません。ユーザーはそれを警告と捉えてしまうからです。赤いボタンは破壊的アクションのためだけに使用しましょう。警告をあまり感じさせない寒色系のボタンは、通常のCTAに適しています。 赤いボタンは、ほとんどのユーザーに警告を伝えますが、中には深刻に捉えないユーザーもいます。視覚的な合図を追加することにより、すべてのユーザーに対して、その警告をさらに強いものにすることができます。これは特に、色の違いが見えにくい色覚異常や視覚障害のあるユーザーに有効です。 警告信号をより強力にするために、確認画面に破壊的アクションを表すアイコンを表示しましょう。 たとえば、ユーザーが見慣れている削除のアイコンはごみ箱のアイコンです。このアイコンを目にしたとき、ユーザーは現在行っているアクションを削除と関連付けるのです。 画面上部に赤いストライプ

AnthonyはUX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 これまでにモバイルアプリをデザインしたことがある人なら、アイコンボタンがどれだけ便利で普及しているかはお分かりかと思います。しかし、それらが近すぎる位置に配置されたとき、どれだけユーザーの誤タップを招いているかご存知でしょうか。 これはアイコンボタンが一列に並んでいる場合によく発生する問題です。ユーザーは、ボタンの間に十分なスペースがない場合、隣接するボタンを簡単に押すことができてしまいます。このミスはユーザーを苛立たせ、行いたいタスクを遂行しづらくする可能性があります。 アイコンとアイコンの間に余分なパディングを追加する ユーザーの誤タップを防ぐにはパディングを追加します。アイコンの上に指を置いて、十分なパディングがあるかどう

UX movement UX Movement is a user experience blog that publishes articles showing how good and bad design practices affect user behavior. モバイルアプリを設計したことがあるなら、アイコンボタンがどれほど便利で普及しているか分かるでしょう。でもアイコンの並びが近すぎると、ユーザーが押し間違えてしまうことは意外と知らないと思います。 アイコンボタンが一列に並んでいるときによく起こる問題です。ボタン同士の間に十分なすき間がないと、ユーザーは隣のボタンを押しやすいのです。このような間違いをするとユーザーはイライラし、作業効率が悪くなってしまいます。 アイコン間に余分なすき間を加える ユーザーがアイコンボタンを間違えないようにするには、すき間を加えます。アイコンの

普段何気なく使用しているUIのアニメーションもその仕組みや効果を理解すると、なるほどと考えされられます。 スマホアプリのUIに使用するアニメーションをGoodな良いものから、Greatな素晴らしいものに変えるUIアニメーションのさまざまなアイデアを紹介します。 Material Motion, IBM Animation Principles, The UX in Motion Manifestoのガイドラインに基づいた、気持ちのいい操作性に優れたアニメーションを楽しむことができます。 Good to great UI animation tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 タブのコンテンツをスライドさせるアニメーション カードをタップして詳細を表示するアニメーション コンテンツを表示するアニメーション コ

海外サイト Medium で公開された The ultimate guide to proper use of animation in UX by Taras Skytskyi より許可をもらい、翻訳転載しています。 最近では、UIデザインのアニメーションで感動させたり、驚くせることは難しくなってきています。画面上でのやり取りを示したり、アプリケーションの使い方を説明したり、ユーザーの注意を向けるなど、実装テクニックはさまざまです。 この記事では、UXデザインにおけるアニメーションの基本原則とルールをまとめてご紹介します。これからインターフェースデザインのアニメーションを作成したいというひとが、追加情報を探す必要がないよう、アニメーションのすべてをまとめた完全ガイドです。 アニメーションの持続時間とスピード 要素の状態や位置が変更されると、アニメーションの長さは、ユーザーに変更を通知し、

レスポンシブ対応のパンくずとマルチステップのナビゲーションを紹介します。 HTMLもCSSも非常にシンプルで、カスタマイズ性にも優れた有用なスニペットとしても利用できます。 デモページ HTML HTMLの基本構造です。 <nav> <ol class="cd-breadcrumb"> <li><a href="#0">Home</a></li> <li><a href="#0">Gallery</a></li> <li><a href="#0">Web</a></li> <li class="current"><em>Project</em></li> </ol> </nav> nav要素で実装し、各アイテムはol要素に「.cd-breadcrumb」で基本のスタイルを適用します。 基本のスタイル 基本のスタイルでは各アイテムを並らべるために「display: inline-block;

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

あなただったら画面にある大きなテキストを何と呼びますか？ 強調されたテキストが 2 つあるとしたら、それぞれどう名付けますか？ 「見出し」「タイトル」「ヘッダー」など様々な呼び名が考えられます。HTMLの知識があると、「H1, H2」と呼ぶかもしれません。これらは情報の意味を表す言葉ですが、「テキスト（大）」のように見た目で呼ぶこともできます。見た目を呼び名にするのは良くないという意見もあると思いますが、汎用性のある実装にするのに適している場合があります。 よく目にする要素でも言葉が合っていないことがよくあります。役職・背景が異なれば呼び名が違うだけでなく、そもそも何と呼べば良いか分からない要素も少なくありません。 2年前から実施している「パターンラボ」というワークショップでは、一貫性のない UI を視覚化するだけでなく、言葉も一致していないことを体験してもらっています。ワークショップでは

スマートフォンサイトのデザインを担当することになったけど、「どういうデザインにすれば良いの？」「PCサイトとどう変えれば良いの？」とお悩みの方も多いのではないでしょうか？ PCサイトと同じようにデザインしたのでは、 サイズも使用環境も異なるために、使い勝手の悪いサイトになってしまいます。 成果を上げるスマートフォンサイトのデザインに最も必要なことは、利用者の「ユーザビリティ」を考えることです。 本記事では、サイト制作やデザインなども含めて幅広くWebマーケティングを担当している私が、スマートフォンサイトで確実に成果を出すために押さえておきたい「ユーザビリティ」の8つのポイントを、初心者の方でも分かるようにご説明いたします。 ぜひスマホサイトの改良に「ユーザビリティ」の視点を活用していきましょう！ スマートフォンサイトを作成する意味まず、そもそもの話にはなりますが、スマートフォンサイトを作成

Stephenはオンラインマーケティング担当者、デザイナー、テクノロジーに精通したブロガーです。彼はロサンゼルスに拠点を置くSPINX Digital Agencyと提携しています。 ユーザーは常にサイト内の機能とインタラクションをしています。そして、あなたが想像する以上にそのような小さなインタラクションは重要です。 小さなインタラクションは全体の体験に影響を与えます。これを利用してユーザー体験を向上させて、ユーザーが最後までインタラクションを続けてくれるようにしましょう。 マイクロインタラクションとは何か これらの小さなインタラクションには、マイクロインタラクションという適切な名前があります。マイクロインタラクションは、ユーザーがサイトとインタラクションをする際に行う基本的なタスクです。上手にデザインされているサイトは、ユーザーが操作するときにポジティブなフィードバックを与えます。ユーザ

ページを読み進めるほどにユーザーは疲れていきます。ユーザーの集中力を回復するとっておきの方法を教えます。 Webに関わっている人なら、ユーザーがコンテンツを一字一句読んでいないと知っているでしょう。スーパーマーケットの売り場に並ぶ食品のラベルを次々にながめるのと同じで、ユーザーはWebサイトのコンテンツを無意識に読み流しているのです。 なぜ読み流すのか なぜ読み流すのか。理由は簡単で「楽だから」です。「ざっと目を通して」注意を引く部分があれば、「じっくりと考え」ます。重要な部分だけ集中して読むのです。 スーパーマーケットで、50種類のパスタソースがあっても、すべてのラベルを注意深く読みませんよね。ところが、パスタソースのビンを手に取って原材料を確認するときには、「じっくり考える」スイッチが入り、頭脳のエネルギーを消費します。 「フォーカスポイント」の導入 こうした頭脳エネルギーをゲームにな

Alan Smithは、ITの領域において幅広い経験をもつ、テクノロジーに関する熱心なブロガーです。彼は現在、ロサンゼルスに拠点を置くSPINX Digital Agencyと連携して仕事をしています。 Webデザインのスライダーやスライダーコントロールの使用について、デザイナーにとっては賛否両論です。好きな人もいれば、嫌いな人もいます。タイミングが悪いカルーセルパネルや、ギャラリーの自動スライダーは、サイトのより重要な項目からユーザーの気をそらしかねません。 一方で、手動で動かすスライダーであれば、ユーザーはWebサイトのさまざまなコンテンツの機能やオプションを素早く操作することができます。そのため、スライダーやスライダー操作を追及し、Webデザインにおいてもっとも便利な機会を突き止めましょう。 スライダーとは？ スライダーとは、Webサイトのスライドショーを表す用語です。たとえば、製品

サイト全体の統一感やクオリティの底上げへと繋がるスタイルガイド。まだ作ったことがない方に、スタイルガイドのメリットと考え方、サンプルを紹介します。 デザイナーの方は経験がないでしょうか？ 案件のサイト制作が進むにつれて「あれ、パーツにばらつきがあるな…」「この動きじゃないのに…」「もっと早くエンジニアに伝えていれば…」ページが出揃いだしてから微妙な差異に気付いたり、納期直前で指摘しづらくなってしまったり。かく言う私もそんな経験のあるデザイナーの一人でした。 ほとんどのサイトがデザイナー1人で作られているわけではありません。サイト規模、プロジェクト規模により、チーム体制も変わりますが、エンジニアやデザイナーが複数人でサイトを作り上げることも多いのではないでしょうか。フリーランスのデザイナーであれば外部リソースとのやりとりなどが必要になる場合もあります。 今回はサイト制作時に役立つだけでなく、