近年では誰もがアニメーションを活用します。たとえばBttn.cssやHover Buttonsといった、ボタンに追加できる非常に小さなホバー効果や、Granim.jsを介して動く、魅力的でダイナミックなグラデーションスタイルの背景などが存在します。サイズにかかわらず、アニメーションはタイポグラフィやナビゲーション、ロゴタイプなどと同じように、インターフェイスにとって不可欠な要素です。アニメーションを短い時間で消滅する、ある種の無駄な要素だと考えているなら、それは間違いです。 アニメーションはただユーザーを楽しませるだけの要素ではありません。とても深い目的のために働くものです。ユーザー体験全体を結びつけるために使われるものもあれば、インターフェイスのアクセシビリティを向上させ、見つけやすく理解しやすくするために使われるものもあります。

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

全人口の４％以上の人が色覚異常を持っているということをご存知でしょうか。さまざまな色覚異常やその他の視覚障害は、あなたのWebサイトのリーダビリティ（可読性）とユーザビリティに影響を与える可能性があります。 どのように色が見えるかに関わらず、すべてのユーザーが利用できるようにデザインするのがあなたの責任なのです。 適切なツールを使えば、こういったデザインはあなたが思っているよりも簡単にできます。 アクセシビリティとは何か どのようなユーザーが見ても簡単に理解できるようなWebサイトを作るために、Webサイトのデザインに関しては数多くのアクセシビリティチェックとスタンダードがあります。 アクセシビリティはオーディオや、ナビゲーション、フィードバック、テキストのプロパティ、色など広範囲に関係します。今回は最後に挙げた「色」に注目します。というのも、これはデザインの初期段階で特定でき、問題を起こ

ゲームにおいては、ユーザーインターフェイス（UI）が全てです。ユーザーをゲームに没頭させ続けるために、見た目と動きから得られる体験を説得力のあるやり方で強化するのに役立ちます。ゲームは長年に渡り、UIがどのようにユーザーの信頼を損なうことなく重要な情報を表すことができるかを追求し、UIに対するアプローチを進化させ続けています。 私がUXの仕事を始めるずっと前、ゲームのレビューを読んで情報を得ていたことから、UIについては何でも知っているとも言える状態でした。ほとんどのWebデザイナー、ソフトウェアデザイナーは彼らのプロダクトはゲームからもっとも遠いものだと主張しますが、UIデザインに関してゲームから学べることは多くあります。 なぜゲームデザイナーはUIに夢中になるのか UIはゲームにとって不可欠なパーツです。ゲームデザイナーは、プレイヤーを先に進ませるための情報をどのように表示するかという

現在では、Webサイトの割合のおよそ50%を画像が占めるようになっています。パフォーマンスの低下は収益やユーザー満足度の低下と密接に結びついているため、私たちデザイナーはサイト上の画像の扱いにもっと責任を持たなくてはなりません。 Webサイトはどんどん重くなっています。httparchive.orgのデータによると、６年前の2012年2月15日には986KBだったWebサイトの平均的重量は、2018年2月15日には3,686KBもありました。 つまり、Webサイトはこの６年間で373.8%も重くなったのです。衝撃的な速度で悪化しています。 数年前と比べると、動画もサイトの主要なコンテンツになっていますが、それでもサイト全体の表示スピードにもっとも寄与しているのは画像です。 なぜパフォーマンスが重要なのか 優れたパフォーマンスの重要性について支持する調査は簡単に見つかります。 AMP Pro

アイコンは、GUIで最も頻繁に使用される要素の１つです。 どの様な要素があれば、よいアイコンなのでしょうか？ この記事ではあなたが使うアイコンがユーザーにとって機能するものとなるための簡単なチェックリストを紹介していきます。 １．認識しやすい 明瞭さは、優れたインターフェイスにおいて最も必要な要素です。しかし残念なことにそうでない場合が多々あります。 アイコンは何よりもまず意味が伝えられないといけません。アイコンが何を表しているのかが不明瞭な場合は、その意味がすぐに失われ、視覚的なノイズにしかなり得ません。 アイコンの優れているところは、ラベルを読まなくても意味が理解できるということです。 簡単なルールに従えば、意味が伝わらないアイコンの使用を避けることができるでしょう。 ユーザーになじみのあるアイコンを使用する ユーザーのアイコンへの理解は過去の経験に基づいています。 特殊なものではなく

マイクロインタラクションは2017年のもっとも大きなトレンドの一つとして、ビットコインと同様に話題になりました。デベロッパー達は進んでユーザー体験をよりよいものにしようとし、熱意を持ってこの仕事に当たりました。私たちは少しずつ、知的で分かりやすいインターフェイスの時代へと入っていったのです。 よいユーザー体験の根幹を成すものとして、上質なマイクロインタラクションはとてもよい効果をもたらします。この工夫のおかげでWebサイトは馴染みやすくより人間らしさを持ち、魅力的で遊び心にあふれたものになります。インターフェイスはより直感的に操作できるものになり、楽しさを提供しています。 これとは別に、優れたインタラクションとして、マウスを通したインタラクションがあげられます。タッチスクリーンの普及の勢いは凄まじいですが、多くのユーザーはマウス無しではやっていけないでしょう。ドラッグ&ドロップがよい例です

自身の旅行体験をまとめているフリーWebデザイナー。オンラインの小さなリブランディング会社と仕事をしている。会社の理念は、顧客が希望を持ち、人生を新たにもっと楽しめるような製品を作り、提供すること。 マイクロインタラクションは、私たちの周りに溢れています。これはユーザインターフェイスの特定の瞬間のやりとりに用いられるものです。たとえば、ユーザーがモバイルアプリのボタンをタップするとナビゲーションメニューが開かれるなどが一般的なマイクロインタラクションになります。 より詳しく述べると、マイクロインタラクションとはユーザーがどこかでなにかの操作をしたときに起こる、インターフェイス上のアニメーションや変化を指します。ユーザーにとって有益な情報を提供するインタラクティブなアニメーションのことだと考えてください。マイクロインタラクションを利用する理由はたくさんありますが、ここでは４つの例を紹介しまし

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 ビジュアルデザイナーの間では、アニメーション効果がユーザー体験を向上させると考えられがちですが、全体の体験にはそこまで大きな価値を生み出すわけではありません。デザインにモーションを加えることは、あくまでデザインプロセスの最後に仕上げとして行います。 しかしもしこれを再考察し、飾りではなく体験の土台としてアニメーションを取り入れたらどうなるでしょうか？　この記事では、いつどのようにモーションを用いることで感情を作れるかを説明していきます。 ちなみに、この記事ではアニメーションの説明で「喜び」という言葉を使用していません。アニメーション効果で喜ぶ人もいれば、うっとうしく感じる人もいるためです。 ストーリーを伝えるためのアニメーション すべての体験は、物語的です。どの

Neilは、イギリスのAstraZenecaで働くUXデザイナーです。現在さまざまなUXデザインのプロジェクトを率いています。 「iPhone」と聞いて頭に浮かぶ単語はなんですか？　「最先端」、あるいは「魅力的」？　「Facebook」や「Uber」ならどうでしょうか？　それらをどのような単語で表現しますか？ 単語はコミュニケーションにおける通貨のようなものです。人、場所、もの、アイデアに対する日々の経験と感情を、私たちは単語によって表現します。何かを見つけたときに「役に立った」、「つまらない」、「楽しい」のように表現するかもしれません。単語は多くのことを語り、感情や経験に深い洞察を与えることができます。 ユーザーにプロダクトを説明する単語を選んでもらい、なぜその単語を選択したのか説明を求めることは、ユーザーから見える世界を知る効果的な方法です。貴重なユーザーフィードバックを引き出しつつ、

SeanはCodalの技術ライターおよびリサーチャーです。UXデザインからIoTまで、様々な話題のブログを投稿しています。 「UXデザイナー」の画像を検索すると、同じような結果ばかりが表示されます。恐らく、机に向かって背中を丸め、グリッドの入ったメモ帳にワイヤーフレームを描いている眼鏡の男性の画像が見つかるでしょう。あるいは、壁の模造紙に貼られたポストイットを眺めて考え込んでいる眼鏡の女性かもしれません。走り書きされたホワイトボードの前で話し合う眼鏡の社員たちの可能性も高いでしょう。これらの撮影者が、なぜUXデザイナーは全員視力が悪いと思っているのか、私には理解できません。 デザイナーの日常業務には、共通した静的なイメージがあるのでしょう。しかしながら現実のUXデザイナーは、必ずしもMacbookに張り付いてたり、会議室に閉じこもっているわけではありません。UXデザイナーの仕事はもっと動的

デザイナーが抱える大きな悩みのひとつに、「デザインを理解してくれる人がいない」というものがあります。最近では少しずつ変わっていますが、デザインの重要性を理解してくれる企業は全体としてはまだまだ少ないように思えます。 今回は、専任のデザイナーがいない企業に１人目のデザイナーとして入社したテモナ株式会社の大村さんに、「デザイン文化を組織に浸透させるために行った取り組み」を聞いてきました。 登場人物 テモナ株式会社 UI/UXデザイナー 大村 真琴氏 デザインを考慮する重要性 ── 最初に、テモナさんの事業と大村さんの仕事内容を簡単に教えてください。 大村：テモナ株式会社は、「たまごリピート」と「たまごリピートNext」というサブスクリプションに特化したECの販売管理システムを提供しています。「たまごリピートNext」は、10年以上に渡って提供してきた「たまごリピート」をリニューアルしたサービス

Anna Dzhulii氏はVintage Web ProductionのUIデザインのリーダーです。ビジュアルデザインのテクニックと実践についてのブログを執筆しています。 私たちデザイナーにとっては受け入れがたい事実ですが、クライアントの目標達成の助けにならなければ、どれだけ美しい作品でも意味がありません。どのクライアントにとっても最優先すべきことは、Webサイトと商品に魅力を感じてもらうことです。 攻撃的なデジタルマーケティング（Web広告やバナー、ポップアップ）の時代は終わりました。ミレニアル世代や高齢者も含め、現在のネットユーザーは余計なもののない「クリーン」で美しいWebサイトの閲覧体験を求めています。広告ブロックアプリについての検索数がこの５年間でどれだけ増えたかを考えてみてください。 あらゆるデバイスに広告ブロッカーがインストールされているので、Web広告やバナーなどの簡単で

この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 10 Outstanding Call-to-Action Examples 古き良きコールトゥアクション（CTA）はWebにおいて必須な要素です。CTAはユーザーに対してとって欲しい行動を正確に伝えるためにあります。たとえばこの本を買ってください、無料ガイドブックをダウンロードしてください、もっと情報が欲しい場合はご連絡ください、などがそうです。 しかし、時折これらは陳腐なマーケティング文句にしか聞こえない場合があります。ひどいときなどは、意図と正反対のアクションに繋がっていることすらあるかもしれません。 では、優れたCTAとはどんなものでしょうか？　ここではデザインがすぐれている、コピーが巧みに書かれている、とにかくユニーク、といった優れたCTAを10点紹介しま

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

この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 When to Point Web Design Clients Towards Third-Party Services フリーランスのWebデザイナーは、クライアントからさまざまなサービスを求められます。たとえばデザインやカスタム開発、モバイルアプリ、SEO、ソーシャルメディア管理など、思い浮かぶありとあらゆるものです。依頼される仕事をすべてこなそうとするデザイナーもいますが、すべてを習得することは難しいでしょう。それぞれの仕事内容は奥深く、細分化され、専門分野に分かれています。 デザイナーは、クライアントが求めているコードのいくつかを書けるかもしれません。しかしデザイナーが専門以外の仕事をしてコードを書くよりも、クライアントにより効率的なサービスを提供するサー

この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 Keys to Designing a Great Mobile Website Experience さまざまな画面サイズのデバイスがあることから、今ではレスポンシブデザインが当たり前になっています。ユーザーがデバイスに関係なくコンテンツを利用できるように、さまざまな環境でテストをしながらWebサイトをデザインする必要があります。 ほかのあらゆるWebデザイン同様、モバイルなどの小さな画面向けのデザインに対する考え方はさまざまです。しかし考え方の違いに関係なく、Webデザインに関わる者であれば知っておくべきレスポンシブデザインの基本があります。 次にWebサイトをデザインするときは、以下の点を踏まえてモバイル用にもカスタマイズしましょう。 リーダビリティとユーザビ

UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 ユーザーがオンラインで読むことを想定して、文言を書いていますか？ アイトラッキング調査によると、多くのユーザーはオンライン記事の見出しを数単語だけ読み、最後までは読まないそうです。 さらなる調査で、ほとんどのユーザーが見出しの最初の２単語だけに目を通していることがわかりました。ユーザーはCTAをクリックする前に、見出しを見て内容を予測しているのです。 ユーザーは早くキーワードを知りたがる 見出しの最初の２単語でユーザーに本文のヒントを与えないと、ユーザーは見出しをスキップするだけではなく本文自体も読まないでしょう。 ユーザーが情報を手に入れるまでの忍耐力と行動力は長く続きません。そのため、彼らの興味を引くために見出しの最初の数単語に強いキーワー

Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 いままでにない新しいマーケットを探すことは、ビジネスにおけるよくある間違いです。競合が少ないことが唯一の良いことなのでしょうか？ 残念ながらこのアプローチには、２つの問題があります。まず、既存のマーケットがないということは、製品に対する需要もないという強い兆候となります。次に、マーケットが確立していない場合、潜在的な消費者になぜその製品が必要なのかを教育するために膨大な資金を必要とするからです。 実際、競合の存在は、製品やサービスに対する需要があることを示す健全なサインです。そして、新製品によって利益を得られるサインでもあります。しかし同時に、競合は市場への参入障壁を築き上げます。さらに、ほかのさまざまな要因が市場参入への障壁を作り出すかもしれません。 学術

インターフェイスの色にユーザーの目を刺激する色を使っていませんか？ もし、背景に明るく鮮明な色を使っているのであれば、ユーザーがページにとどまるのを困難にしています。明るく、鮮明な色はユーザーの興味を引きます。しかし鮮明な色を広い領域で使うことは、目を圧迫し網膜を過剰に刺激します。 たとえば、上記の画像の色見本を見てみてください。左のグループは、最大の明るさと彩度を持つ色で成り立っています。右のグループは、80%の明るさと彩度を持つ色で成り立っています。明るさのせいで右のグループより左のグループを見るほうが辛いでしょう。彩度のある色は目によくないのです。 明るさ vs 彩度 明るさと彩度は異なる色の特性を持っています。明るさは色にどれだけの白や黒が混ざっているかで、彩度は色にどれだけグレーが混ざっているかです。 明るさの上昇は、彩度の減少と同じではありません。彩度を少なくすると、色はグレー