色は私たちの認識や感情に大きな影響を与えます。正しく使用された場合、その色はユーザーの特定の反応を引き出す事ができます。ここでは下記の理由に則り、赤と緑という２つの色に注目したいと思います。 赤色と緑色はどちらも実用的な色であるため、UIデザインにとって非常に重要です。 UIのアクセントカラーとして赤と緑を使用する、一般的な方法を見ていきましょう。 重要さを意味します。即座に注目を集め、ユーザーに迅速な決断を促す非常に目立つ色です。 赤色はとても高い温度を示す色です。情熱から怒りというような感情が含まれている強烈な色でもあります。 警告または危険を意味します。 赤いライトが点滅している場合、人々は危険または緊急事態を連想します。 エラー表示 赤色は多くの場合、警告や非常に重要で確認が必要なもののいずれかに関連付けられています。そのため、エラー表示について考えるときに最初に思いつくのは赤色で

UIデザインとWeb開発に関するトピックのライター。個人ポートフォリオやWeb上のいたるところで彼の記事を見つけることができます。最新のアップデートなどを見るにはTwitterをフォローしてください。 Googleで検索すると、Webサイトのパフォーマンス改善のための便利なツールが数多く見つかります。 サイトの画像最適化から独自のCDN設定にいたるまで、さまざまです。 しかし、デザイナーの中でコード最適化について考える人はほとんどいません。 コード最適化とは、総HTTPリクエスト数を減らしたり、ファイルを軽量化したり、表示スピードアップのために最適なカスタムフレームワークに切り替えることを意味します。 最新のBootstrap v4は素晴らしいデザインですが、残念ながら最も重いフレームワークの１つです。 そこで今回の記事では、重いBootstrapの代わりに軽いWebフレームワークを厳選し

近年趣向を凝らした勉強会やセミナーが増えている中で、来場者の体験をどうデザインすれば良いか悩む方も多いのではないでしょうか。イベント設計ではユーザーとのタッチポイントが多くあるため、さまざまなことを考慮し全体の体験をつくっていく必要があります。 今回は『Future of Work』というビジネスカンファレンスのデザインを手がけた、株式会社ビズリーチの田村さんに、イベント設計について話を聞いてきました。 登場人物 株式会社ビズリーチ デザイン本部コミュニケーションデザイン室 ２グループ　田村なほ美氏 コンセプトを重視してデザインに一貫性を持たせる ── 最初に『Future of Work』についてと、田村さんがデザイナーとしてどのように関わっていたのかを教えてください。 田村：働き方改革が注目されている中で、個人ではなく会社として環境の変化に対してどのように適応していくか、そのための未来

Ningはコンテンツエディター、人類学者、デザイナーで、テクノロジーとUXマニアです。ブルース音楽とウェスアンダーソンの映画が好きです。 デザイナー以外の人たちがデザインに対して感じるものは、私がワインに対して感じるものとよく似ています。私はワインの良し悪ししかわかりません。アンデス地方で作られた$300のマルベックと、店で売られている$30のワインの違いを語ることができません。しかし、あまりにワインの味がひどければ、たとえタダでも飲めないほど不味いと伝えることくらいはできます。 デザインでもワインと同じ事が言えます。批評するトレーニングをしていない人はいつも、「これはいいね」「これは違う」と言います。当然色についてもコメントするでしょう。デザインにもワインのように、たくさんのテイストや好み、感覚があり、それらは全て主観的なものです。 では素晴らしいビジュアルデザインを見分けるときはどうで

スマートフォンの使い方が、脳に影響を与えることがあります。ある調査によると、毎日スマートフォンを使う人は、脳の体性感覚皮質が大きいことがわかりました。体性感覚皮質は、親指のコントロールをつかさどる部位です。 また、ほかの調査では、ほとんどのユーザーがスマートフォンを片手で操作していることが明らかになりました。スマートフォンを握っているとき、ユーザーは左右どちらかの親指で画面を操作しているのです。親指はユーザーにとってマウスのようなものですが、その動きには限界もあります。 親指はマウスの代わり デスクトップデバイスでは、ユーザーは画面の操作にマウスを使用します。ナビゲーションメニューまでマウスを動かすことは簡単です。なぜなら、マウスは手首の動きを制限しないからです。 しかし、ユーザーがスマートフォンを握っているとき、親指は限られた範囲でしか動けません。画面に親指が届かない領域があるのです。こ

BenはUXPinのコンテンツ戦略担当者です。 Webウェブデザイナーとバックエンド開発者の両方として働いています。 ユーザーテストは専門領域の中でも扱いが難しいものです。なぜなら、共感力や臨機応変な思考、事前準備、バイアスに振り回されない能力などが必要になるからです。テストする側は、ユーザーに特定の方法で行動して欲しいと思っているかもしれませんが、ユーザーテストをすれば真実を知ることができます。 この「真実」もまた厄介です。なぜならそれは主観的なものであり、人は皆それぞれ異なるアプローチで製品を使用するからです。デザイナーは、製品がどのように動作するのかを「知っている」ので、人がどのように行動するべきかに対して多少なりともバイアスを持っています。しかし、人々はその仮説を裏切って、デザイナーが予想だにしない方法を取るかもしれません。人々にとっては完璧に理にかなったものなので、もしその方法に

Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Webサイトを分割してチームでデザインをするときにチームメンバーが共通認識を持つには、デザインドキュメントまたはWebデザインのスタイルガイドを作成することが有効です。これは、エンジニアがデザインを変更してしまうことを防ぐのにも役立ちます。 異なるページの間に一貫した体験を作り出すために、スタイルガイドを用意するのはとても有効です。また、今後の開発やサードパーティ製品が生まれた際も、ブランドのガイドラインに沿い、ブランドの一部として知覚されるようにやすくなるでしょう。 Luke Clum氏は、Webデザインの第一歩としてスタイルガイドを利用することについて、昨年簡単に紹介をしました。この記事で

フローティングアクションボタン（FAB）は主にAndroidアプリにおいて、よく使われる操作方法です。FABは、UIの上に浮く丸いアイコンのような形で、デザイナーにとってはアプリの製品ストーリーの重要な部分を表現するためのツールです。 FABは非常にシンプルで導入しやすいUI要素ですが、実際にはデザイナーは間違ってデザインに取り込んでいることが多くあります。 この記事では以下の質問に答えていきたいと思います。 FABを使うタイミング FABのベストプラクティス UXを向上させるための、FABとアニメーションの組み合わせ方 FABを使うタイミング 特徴的なアクションを強調したいとき FABはもっとも関連性があったり、頻繁に使われるアクションを強調します。アプリの中でも、強い特徴を持つアクションに対してFABは使われるべきです。理想的には、以下の画像のようにFABはアプリ全体において中心的な機

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 インターネットの速度が速くなったことで、動画の人気がさらに高まっています。動画は、サイト上やアプリ内でユーザーが費やす時間を増やすと考えられてるのです。デスクトップ、タブレット、スマートフォンなどで動画を視聴するように、今となっては、動画は私たちの生活のどこにでも存在しています。 「百聞は一見にしかず」ということわざは、まさに動画にふさわしい言葉です。 効率的に利用すれば、動画はユーザーを引き込むのにもっとも強力なツールの１つになります。より多くの感情を伝え、商品やサービスを「感じてもらう」ことができるでしょう。しかし同時に、通信量が多くなり、スクリーンを動画で埋めてしまう可能性があります。ですので、特に注意して使用する必要があるのです。 この記事では、デザイン

大規模なECサイトにおけるUXチームのリードであり、レンセラー工科大学でヒューマン・コンピューター・インタラクションの修士号を取得しています。Webサイト、Twitter。 私たちは日々、オンライン上でフォームを使っています。購入を完了するため、メーリングリストやソーシャルネットワークなどに登録するため、ディスカッションに参加するため、美味しそうなランチの写真を投稿するためなど、フォームを使う場面はさまざまです。オンラインで情報を入力するために、フォームは必要不可欠と言っても過言ではありません。 しかし、長きに渡ってフォームの改善はあまり見られませんでした。「使える」ものではあったものの、「使いやすい」ものには至らなかったのです。 近年では新しいテクニックを正しく使うことで、デザイナーはより早く、簡単で、生産性のあるフォームの作成が可能になっています。 フォームは短ければ良いのか 「フォー

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 ファーストビューだけで情報を伝える時代は終わりました。最近では長いスクロールや無限スクロールを用いるサイトが増えてきています。ユーザーが簡単にコンテンツをスクロールができ、スクロールすると自然に情報が表示されるサイトは以下のような利益をもたらします。 ナビゲーションがシンプルになる ユーザーをコンテンツにひきこみやすくなる モバイルサイトへの対応が楽になる このテクニックが普及した理由のひとつとしては、モバイル端末の画面を見る人が増えたことが考えられます。画面が小さいほど長いスクロールが必要だからです。 ジェスチャー操作は簡単にできて楽しいものですが、ユーザーは長いスクロールページにわずらわしく感じることもあるでしょう。ここでは、ユーザーの期待に応えるような長い

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 モバイルデバイスの利用が伸びるとともに、ミニマリズムもまた増加傾向にあります。ミニマリズムは、アプリやウェブサイトに読み込み時間の高速化や画面サイズの互換性などの利点をもたらします。 素晴らしいユーザビリティと組み合わせた美しくミニマルなアプリは非常に印象的です。そして、わかりやすくシンプルなアプリはコミュニケーションにおいて非常に重要です。 しかし同時に、ミニマリズムを正しく行うことは難しくもあります。ミニマリズムを試してみたい方は、始める前にいくつかの基本的な経験則をしっかり理解しておくようにしましょう。ここで、ミニマリズムを上手く機能させるヒントをいくつかご紹介します。 余計な要素をすべて取り除く デザイン内のすべてのアイテムには、目的がなければなりません

ZoltánはCentralway（チューリッヒのソフトウェア企業）のUXデザイナー長。元UstreamのUXディレクター。美しく、かつ使えるプロダクトを作ることに情熱を燃やしています。 Amazonのサイトはデータに裏付けされたデザインに定評がありますが、他のECサイトでもAmazonのデザインが同じように適用できるとは限りません。 Amazonの商品レビューを模倣した事例 たとえば商品レビューを見てみましょう。Target.comは、Amazonと同じ商品レビューのソフトウェアを取り入れました。ユーザビリティの専門家であるJared Spool氏が証明したのですが、まったく同じソフトウェアとインターフェースを使用しているにもかかわらず、Target.comの方にはまったくレビューが集まらなかったのです。 レビューが集まらないという結果に 「ハリーポッターと死の秘宝」が販売されてから１ヶ

いくらコンテンツが良くても、見やすいサイトでないとユーザーはすぐに離脱してしまうでしょう。「見やすい」というのは、コンテキストやユーザーに依存する部分も多いのですが、そこには最低限守るべきルールがいくつかあります。 この記事では、見やすいサイトを作るときに最低限チェックしておきたい項目をご紹介します。 フォントサイズ フォントサイズや行間などは文章の視認性を大きく左右します。 WCAG 2.0では英語などの場合は18ptまたは14ptの太字、日本語の場合はそれと同等の文字サイズが望ましいとされています。1pxは0.75ptと同等とされているので、18ptは24pxとほぼ同等です。さらに、行の高さ（line-height）は150%〜200%、段落の間隔は行送りの1.5倍以上が推奨されています。 ＊18ptは1.5emと同等、14ptは1.2emと同等 そのほか、Googleも読みやすいフォ

お店で誰かに商品の場所を尋ねたとして、その相手がただそこに立ったままだったとしたらどう思うでしょうか。きっとイライラして、その場を立ち去りますよね。同じように、ユーザーは長い間スクリーン上のスピナー（通信やローディング時にくるくる回るアニメーション表示の）を見ていると、このような心理状況に陥ります。 スピナーは時間のかかる処理には適さない スピナーは、その処理が終わるまでどのくらいの時間を要するのかをユーザーに伝えません。長時間の処理にスピナーを使うと、最終的にユーザーはアプリに何か問題が起こったのではないかと疑問に思うでしょう。フィードバック無しでは不確実性が生じ、ユーザーは最悪の場合を想定することになります。 ユーザーは読み込みに時間がかかるだろうと考え、待つ気をなくすのです。そしてしびれを切らして、戻るボタンを押したり、またはアプリを終了したりするでしょう。 ４秒ルール ユーザーをア

紙面又はオンライン出版でのデザイン、編集、ライティングを含むメディア業界で10年以上の経験があります。スポーツが大好きでフットボールやバスケットボール旅行の計画に時間を費やしたり、統計データにも夢中です。 この記事はDropboxやGmailなどの実例を参考にしつつ、自然でさりげないUXを生み出すための実践的なガイドです。 ここ数年で最も成功しているインタラクションデザインの分析をしたとき、Gmailの自動保存機能やUberのクレジットカード入力フォームのような、基本的な機能を完璧に作り込む会社に軍配が上がります。彼らは人間の自然な行動を巧みに取り入れ、私たちが今まで気づかなかった障壁をひそかに取り除いているのです。 インビジブルデザイン（インビジブル＝透明な）とは、ミニマリズムのことについて言っているわけではありません。ミニマリストのインターフェイスはインビジブルデザインを実現するための

MatthieuはUpLabsの創設者で、MaterialPaletteとWOW.js.のクリエイター。 良いユーザー体験のためには格好良いデザインだけではなく、仕組みや構造、使いやすさにも気を配る必要があります。近年ではUXデザインの重要性が叫ばれ、こういった考え方も徐々に浸透してきてはいますが、だからといってビジュアルやインタラクションのデザインを軽視してもいいと言うわけでもありません。 この記事では過去にも何度か取り上げている、UIコンセプトギャラリーサイトのUpLabsからまたいくつかのUIコンセプトを実装コード付きでご紹介します。ユーザーがサイトを使うときの心地よさを演出するためのヒントがたくさん詰まっていますので、是非参考にして下さい。 ※各項目ごとにCodePenを埋め込んでいるため、読み込みに少し時間がかかる場合があります UpLabsのオススメUIコンセプト５選 1. カ

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 近年のUIデザインでは、不必要な要素を省き、機能性に焦点を当てるのがトレンドになってきています。デザインの機能面はプロダクトの成功への鍵である一方、その機能面をサポートするという意味で、ビジュアルへの細かい配慮も同じくらい重要です。 この記事では、シャドウなどの視覚的な要素がどのように処理された情報を伝達するものなのかを見ていきましょう。 UIの進化 : 疑似3Dからウルトラフラットデザイン インターフェイスにおける奥行きの幻覚 ユーザーの見るスクリーンは平らですが、デザイナーやエンジニアたちはスクリーン上の全ての物が3Dにみえるように多大など労力を割きました。疑似3D効果（シャドウ、グラデーション、ハイライト）は、ユーザーが操作可能な動作をひと目でわかるように

Webライティングを行うときには、文字数、誤字脱字、言い回し、構成、キーワードなど気を付けなければいけない点が数多く存在します。今回はWebライティングを行うときに便利なWebサービスを紹介します。 どれも無料で使用できるので、作業の効率化やより高品質な記事を作成するためにぜひ活用してみてください。 文章校正 Enno Enno タイポ、余分なスペース、誤字脱字、変換ミス、入力後の編集ミス、文字化け、スペルミスなどを自動的に判別してくれるサービスです。 使い方は画面右側のフォームに文章を入力し、フォーム下にあるボタンを押すだけです。そうするとチェックが行われ、おかしい箇所をハイライトしてくれます。さらにハイライトされた箇所がどのような間違いであるかを画面下の方で指摘してくれます。 文章校正ツール 文章校正ツール 文章を解析し、間違った表現や不適切な部分を表示してくれます。フォームでテキスト

JerryはUXPinにおけるコンテンツストラテジストであり、そこで非常に活発な想像力をもって日々文献を執筆しています。過去には、Braftonの顧客を対象にコンテンツ戦略に取り組み、DDB San Franciscoにおいて、従来型の広告事業に携わりました。 マーケティングツールを提供するHubSpotのサイトは、毎月400万人以上のユーザーが訪問し、90カ国、18,000社以上の企業にサービスを提供しています。 HubSpotにとってこのサイトは、ビジネスの要となる存在です。HubSpotが一民間企業から、世界規模の組織へと大々的に成長する段階で、サイトのリニューアルが必要となりました。 リニューアルは突如限られた期間内で行わなければならず、プロジェクトのキックオフからわずか1.5カ月後に控えた、HubSpotが年に一度行う産業イベント「INBOUND」での新製品のグランドリリースに間