Cameronはデザインの経験を持ち、『Color for Web Design』、『The Smashing Idea Book』という２冊のWebデザインの本を執筆しています。 ミニマルなWebデザインとは、具体的なデザインの外観ではなく、デザインの原則やガイドラインのことを指します。これらの原則にしたがうことで、必要最低限の要素だけでユーザーから期待した成果を引き出せる、シンプルなWebサイトができあがります。 「less is more（少ないほど良い）」という普遍的なコンセプトに加えて、こうした原則には色の数を抑えたパレットや空白のスペースを使うことなどが含まれます。 ミニマルWebデザインでは「少ないほど良い」 「less is more」という言葉は、Webデザインについて話していても、ほかの形のミニマリズムについて話していても、もっとも耳にする言い回しの１つでしょう。ではミ

NemanjaはBMWやSubaruなどのブランドも手掛けたことのある、UI /UXプロダクトデザイナーです。 プロダクトデザイナーは、短期間に多くの情報を表示してしまうことがよくあります。「スキャナビリティ（読み取りやすさ）」という言葉の意味や、一般的な視線の動きのパターン、そして現代のデザイン原則を理解していれば、消費しやすいコンテンツと、魅力的なUIをつくることができるでしょう。 インターネットの世界は日々新たなアプリ、Webサイト、記事などが現れて広がっていきます。溢れかえるコンテンツから自分に関係のあるものだけを探すことは骨が折れるため、ユーザーを情報に注意を引きつけることはますます難しくなっています。 マーケティングの専門家であるDavid Zheng氏によれば、60%以上のユーザーは15秒以内にサイトを離脱しているというのです。 調査によれば、ユーザーはサイトの一言一句をきち

UX Movementの著者および創設者です。UXのベストプラクティスとスタンダード、さまざまなテクニックに関する知識を共有することで、よりよいデジタルの世界をつくり出しています。 すべてのインターフェイスにはユーザーが存在し、そのユーザーはつねに多数派と少数派によって構成されています。たとえば、大半のユーザーは正常な視力をもっていますが、少数派となるユーザーは何らかの視覚障害をもっています。 正常な視力をもっているユーザーが見るものと、色覚異常および低視力のユーザーが見るものとの間には大きな隔たりがあります。何らかの視覚障害をもっているユーザーはテキストが小さすぎたり色のコントラストが低すぎると、文字がぼやけて見えたり、要素がよく見えなかったりする傾向にあります。 アクセシビリティの目標は、多くの場合忘れられがちな少数派のニーズを満たすことです。しかし、少数派のニーズを満たした結果、多数

UX Movementの創立者、ライターです。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始めました。 モバイルアプリをデザインするとき、ソリッド（塗りつぶし）かアウトライン、どちらのアイコンを使用するか決めなければいけないときがあります。ユーザー体験にはどちらが最適なのでしょうか。 単なる好みの問題だと考える人もいますが、研究によると、認識の速さに違いがあることがわかっています。 ソリッドアイコンとアウトラインアイコンのどちらを使うべきかがわかれば、モバイルアプリの操作がしやすくなります。ユーザーはアイコンをより早く認識し、正しい選択をすることができるのです。 「Filled-in vs. Outline Icons: The Impact of Icon Style on Usability」という調査で、アイコンのスタイルは作業効率

NatalyはウクライナのWeb開発者で、WordPressやITに関連する記事の執筆に情熱を注いでおり、サイトLand-of-Webを独自に運営しています。 ビジネスの成功にはブランドのアイデンティティが不可欠です。個人経営の法律事務所であろうと、デジタルの世界を牛耳る大企業であろうと、第一印象が多くを決定付けます。 あらゆる営業所はブランドアイデンティティを示す要素を誇り高く掲げるべきであり、それはWebサイトにおいても同様です。一般にオンラインショップでは、消費者の認識の中でほかのブランドと私たちのブランドを区別する際に、ブランドロゴが十分に役割を果たします。 Webサイトの美しさの根底には、大抵ブランドカラーとキャッチコピーがあります。しかしこれらだけでは、会社のイメージを形成し、適切なメッセージを伝えるのに十分ではないかもしれません。その際は、もう少し工夫が必要でしょう。その工夫

Brendaはプロのライター兼ブロガー。個人ブランド「The Design Inkwell」を運営している。 フォントの選び方ひとつで、デザインの仕上がりが良くも悪くもなることは誰もが知っています。それ以上に、ネット上にはフォントがデザインの中心的な要素となっているケースが数多く見受けられます。あちらこちらに多くのフォントが散らばっているので、あるデザインに使われているフォントを特定することは簡単ではありません。 幸いなことにフォントを特定するのに役立つツールがいくつか公開されており、この記事ではその中でもおすすめなものをピックアップしています。ブラウザの拡張機能もあれば、Webアプリもあります。以下のリストをブックマークしておけば、デザインやWebサイトにどのフォントが使われているのかがすぐにわかるでしょう。 WhatFontIs WhatFontlsは、画像をアップロードするか、そのフ

ウクライナのセバストポリ出身のWeb開発者。Word PressとIT関連の執筆に日々熱中しています。自身のブログも運営しており、お役立ち情報やエッセー、チュートリアルをシェアしています。 ここ最近、色の使い方が大きく変わってきたようです。ほんの数ヶ月前まで、インターフェイスの細部の多くみられる強烈に目を引く色づかいが話題になっていました。ヒーローエリアにはグラデーションをかけたレイヤーを重ね、ページ中に明るく大胆な色のCTA（行動喚起）ボタンを散りばめるというスタイルです。 今日（こんにち）、一部のサイトでは単色のデザインへと移行しているようです。よく使われる見慣れた色と比べて、成熟した深みのある色が使われており、単色という言葉から想像される単調さとは少し違った印象をつくりだしています。 MUG MUGでは、最低限のヒーローエリアにメニューやロゴ、キャッチコピーといった重要なものだけが配

ChintanはYourUXTeamのファウンダー/チーフデザイナーです。YourUXTeamはスタートアップやソフトウェア会社、デザインファームなどと協業し、ユーザーテスト全体の設計やUXデザイン・UIデザインなどを手掛ける会社です。 この記事のタイトルを見たとき、「心理学がどうUXデザインと関係するのか？」と思った方もいるかもしれません。 今回の問いはデザイン心理学とは何か、そしてそれがなぜより良いUXに関連するのかということです。通常のデザイン心理学は規律のとれたデザインや人間の反応や行動のことです。この記事では製品またはサービスのUXに影響を与える心理的要因について説明します。また、企業が製品のパフォーマンスを向上させるためにどのように役立つかも説明します。 ユーザー体験と心理学 UXデザインと心理学は古くから親密な関係にありました（社会的、行動的、認知的な観点で）。人間の行動のほ

AnthonyはUX Movementの設立者で執筆者です。素敵なWeb体験をこよなく愛し、ユーザのために日々奮闘しています。 トグルスイッチを使うべき場合と使うべきでない場合があります。デザイナーが誤った使い方をするとユーザーの混乱とイライラにつながります。使うべきタイミングを知るには、さまざまなタイプのトグルの状態や選択肢について理解する必要があります。 文脈上の状態 vs システムの状態 トグルスイッチとトグルボタンをデザイナーは混同しがちです。両方とも状態を管理しますが、トグルスイッチとトグルボタンには根本的な違いがあります。トグルスイッチはシステムの状態を管理し、トグルボタンは文脈上の状態を管理します。文脈上の状態のトグルはユーザーが見ようとしている現在の画面にのみ影響を及ぼしますが、システムの状態のトグルはアプリ全体に影響を及ぼします。 トグルスイッチを文脈上の状態のために使う

ウクライナ出身のWeb開発者で、WordPressとITライティングに情熱を注いでいます。自身のブログを運営しており、記事、チュートリアルを通じて役立つ情報を発信しています。記事に関する感想などをメールでお知らせください。 私たちが競争社会で人の目を引いて生き残るには、他の人よりさらに多くの努力が必要となります。これが現代の、オンラインというジャングルで生き抜くためのまず最初のルールです。ただし、それは必ずしも、何かを新しく作り直したり、人より多くのお金を持っていなければならないというわけではありません。 重要なのは、大きなアイデアを取り巻くすべてのあわただしさの中でも、細かい部分のディテールに目を向けているかということです。それによって、違いを生み出すことができるのです。たとえ基本的な構造と従来のデザインをしたごく普通のWebサイトであったとしても、目立たせることは可能です。それには、ユ

Jolinaは、アメリカやイギリス、オーストラリアの複数のスタートアップを相手にしているデジタルマーケティングの戦略家です。 長いアニメーションの歴史の中で明らかになったものがあるとすれば、それは動く画像はいつだってユーザーの心を掴めるということです。アニメーションの目新しさは薄れたものの、今ではエンターテイメント以外の目的でも使われることが多くなりました。実際、時代を問わない魅力と汎用性を最大限に活用することで、Webサイトのユーザーに好ましく魅力的な体験を作り出すことができます。 しかし、特にUXデザインの立場から見ると、アニメーションはすべてが同様に作られているわけではありません。いくつかのアニメーションは、問題を解決せず、むしろ新たに生み出してしまっています。善意から作られていても、間違ったアニメーションはユーザーの目的の邪魔をし、インターフェイスを乱し、Webサイトに悪影響を与え

UX Movementの著者および創設者。ユーザー体験を考えたデザインのベストプラクティス、スタンダード、およびテクニックを広く共有することで、人々にとってより良いデジタルの世界を作り出しています。 電化製品のスイッチを入れる方法はほとんどの人が知っていますが、インターフェイスでは困惑してしまう傾向にあります。スイッチに表示されているものが現在の状態なのか指示なのか判断しにくいことが多いためです。スイッチが「オン」であることを、ユーザーは現在起動していると解釈することも、切り替えたら起動すると解釈することもできるでしょう。 状態を表示する ユーザーにとって、トグルスイッチが現在の状態を示しているのかどうかは明確ではありません。このような混乱が発生するのは、スイッチにオンとオフのラベルや、緑と赤の色、チェックマークなどがついているときです。これらの手がかりは視覚的なノイズとなり、状態をユーザ

UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 ボタンには、押せる状態と押せない状態以外にも、ロード中という状態があります。このロード中という状態は通常数秒以内で処理されるため、ユーザーには見えません。しかし通常よりも処理に長い時間がかかる場合、ロード中の状態を見せないことはアクションエラーを誘発します。 アクションエラー もしアクションを実行するのに自分が想定したよりも長い時間がかかったら、ユーザーはシステムが自分のリクエストを実行しているのかどうかを知る必要があります。何も起こっていないように見えたとしたら、彼らは正しくボタンを押せなかったと思うでしょう。この誤解が、彼らに再度ボタンを押させてしまいます。 ユーザーが２回以上ボタンを押すと、システムの処理が増えるだけでなく、操作が二重にな

UX Movementの著者および創設者。ユーザー体験においてのデザインのベストプラクティス、スタンダードおよびテクニックを教え、それを広めることでより良いデジタルの世界を作り上げることを目標としています。 入力フィールドは、ユーザーに情報を要求するもっとも一般的なインターフェイスの要素です。入力フィールドにはさまざまなサイズや形状、スタイルがあります。そのような選択肢がある中で、最適なユーザビリティを提供するには、どのように表示すればいいでしょうか？ 強い視覚的な手がかり 最適な表示方法は、入力フィールドの機能と、ユーザーがどのように操作するのかによって決まります。つまり、入力フィールドには、ユーザーが何をすべきか示す強い視覚的な手がかりが必要です。 入力フィールドは、インターフェイスにテキストを入力するために存在します。したがって、ユーザーが視認したらすぐに行動を起こせるように、入力フ

Natalyはウクライナ・セバストーポリ出身のWebデベロッパー。ワードプレスやIT関連の執筆に情熱を注いでおり、自身のブログサイトで、Webに関する有益な情報、記事、チュートリアルを提供しています。 Webサイトに最適なタイポフラフィを見つけるため、フォントを複数組み合わせることは珍しいことではありません。 デザイナーは見出しと本文のフォントをそれぞれ１つずつ選択するのが定石です。１つ目のフォントは、タイトルを目立たせるための装飾的で太いフォントで、それに対し２つ目のフォントは本文を読みやすくするために、シンプルなものである場合がほとんどです。 この領域には、流行りの組み合わせや、トレンドセッターさえ存在します。ときに斬新さや革新が求められますが、Webデザインにおけるフォント選びにおいてはクリエイティブ集団のトレンドに乗っておく方が無難でしょう。そしてつい最近、また刺激的なトレンドが現

すべてのボタンがアクションを実行するわけではありません。たとえばトグルボタンなどは、アプリの状態を変えるために使われます。１つのコントロールで複数の機能をもつので、UIのスペースを節約することができます。トグルボタンは押すと状態が瞬時に切り替わりますが、それ故に正しく設計しないと問題が発生します。 反転したカラースキーム vs 通常のカラースキーム トグルボタンの課題は、現在の状態をいかに明らかにできるかというところにあります。視覚的な手がかりが明確でない場合、ユーザーはアクティブな状態を認識できないことがよくあります。これにより、誤ったオプションを選択してしまい、意図しない状態を引き起こしてしまう可能性があります。 特に混乱が起きやすいのは、現在の状態を示す視覚的な手がかりが反転色である場合です。このトグルボタンは一般的ですが、最適解ではありません。ユーザーには、暗い色のボタンがアクティ

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

アプリはアイデアから生まれ、目的によって具体化されます。私たち起業家やデザイナー、開発者の関心は、最初から最後までスムーズな行程に沿ってユーザーを誘導して、有益な体験を与えることにあります。 あるリサーチによれば、65％近くのユーザーは、アプリ体験が好ましくないブランドを否定的に感じています。したがって決定的に重要なのは、ユーザーが労力を使わずに自分たちの課題の解決策にたどり着けるよう、インターフェイスのデザインをシンプルにすることです。 Gerry McGovern氏は『Usability: Navigation is More Important than Search』という記事の中で、機械に詳しい70％のユーザーはリンクをクリックすることからタスクを始めている一方で、残りの30％は検索から始めていることを明らかにしました。 これを踏まえると、ナビゲーションがユーザー体験でとても重要

UX Movementの創立者、ライター。ユーザーに優しいユーザーエクスペリエンスデザインのスキルを読者の方が上達できるよう、UX Movementのブログを作りました。 あなたのユーザーはスマホアプリやモバイルサイトのボタンをちゃんと狙った通りに押せているでしょうか？　きちんと押せているかをユーザーのせいにする前に、ボタンのサイズや間隔が最適化されているかどうか確認しましょう。 ボタンが最適なサイズと間隔になっていないと、ユーザーが狙いを外したり、間違ったボタンを押してしまいます。この記事ではどの程度が最適かを見ていきます。以下の数値は、96DPIでのCSSピクセルを基準にしています。 ボタンサイズの基準 まずは基準となるサイズがわからなければ、ボタンのサイズが最適かどうかを判断できません。幸いなことに、ボタンのサイズと間隔に関するリサーチによって、高齢者を含むほとんどのユーザーに有効な

「失敗の話をしよう」 この言葉は過去に例を見ないほど、賞賛されるようになったと思います。Googleで「失敗」を検索すると、「なぜ全ての成功は失敗から始まるのか」「なぜ失敗は成功にとって良いのか」といった刺激的な記事のタイトルが多く出てくるでしょう。また失敗は「早く失敗せよ、多く失敗せよ」のように、リーンUXのアプローチの中でもよく登場する概念のひとつです。 そんな状況の中で、私は革新的な意見を述べたいと思います。 失敗は悪いことです。 そう、それはこんなにもシンプルなことです。失敗を望まないのは人間の直感的な反応でしょう？　失敗を望まないのには理由があります。失敗は良い目標にはなり得ないのです。 失敗を美徳として褒め称えたり、「早く失敗せよ、多く失敗せよ」といった言葉の背景にある考え方を掘り下げている記事を実際に読んでみると、そこでは失敗は素晴らしいものだとは、まったく語られていないと気