11月28日（水）にUX居酒屋 UNDER 30 in FORKを開催します。 UX居酒屋 UNDER 30とは UX居酒屋はUXデザインや働き方についてお酒を飲みながらゆるくフランクにディスカッションができる、その名の通り「居酒屋スタイル」の勉強会・交流会です（ノンアルコールドリンクもご用意しています） 。 仕事帰りにフラッと寄っていただき、ご自分の抱えている課題や悩み、関心事を周りとシェアしてディスカッションできるような場です。 一方的な受講型のセミナーではなく、現場の方同士のカジュアルな交流から他者（他社）のやり方や工夫を見つけて持ち帰ってください。 ※運営側から何かノウハウや知識を提供することはありませんのであらかじめご了承ください。 今回の居酒屋は株式会社フォークさんのオフィスで開きます。同社含むさまざまな企業の現場の方々とともに、熱く飲み語りたいと思います。 UX居酒屋での飲み

アニメーションはユーザー体験において重要な要素です。モバイルアプリ画面のトランジションにおいて、アニメーションで伝えられることはたくさんあります。メッセージ送信、設定画面を開く、チェックボックス、別ページへの誘導などはすべて画面のトランジションです。それらをアニメーションで表現することはユーザーのアクションを促進する効果的な方法です。 この記事ではデザインを引き立たせ、ユーザーとの意思疎通やアクションを促すような効果的なアニメーション事例をレビューしていきます。 システムステータスの表示 何らかのアクションをユーザーが行った際には、そのアクションを受け取り処理していることをビジュアルレスポンスで明確に示す必要があります。アニメーションによるフィードバックがユーザー体験において有益なケースがいくつかあります。 ユーザーの操作に対する「反応」をきちんと返しましょう。ユーザーはシステムがアクショ

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 デザイナーがコンテンツを重視したアプローチの利点を理解するにつれて、タイポグラフィがデザインプロセスで欠かせないものになってきました。 Web上の95％もの情報は文字で書かれています（Oliver Reichenstein氏） しかしタイポグラフィは、その分野に不慣れな人にとって難しいものです。そこで、タイポグラフィのタスクを快適に行えるように、役立つツールリストを用意しました。この記事で取り上げるツールは、適切なタイポグラフィによってより良いデザインを作る助けになるものです。 以下の項目に分けて、ツールを紹介しています。 フォントを選ぶ フォントペアリングとスタイリングを選ぶ フォントに情報の階層を付ける インスピレーションを得る フォントを選ぶ タイポグラフ

これまでにモーダルウィンドウのメルマガ登録フォームを見たことがありますか？　世の多数のサイトで使われているので、おそらくあるでしょう。多くのサイトで使用されるにはそれなりの理由がありますが、同時にその使用を再考すべき理由もあります。 モーダルウィンドウによるメルマガ登録はコンバージョン率が高いため、多くのサイトで導入されています。サイトにアクセスするすべてのユーザーがまずモーダルウィンドウの対応をしなければならないためです。この操作をする人数が増えるほど、より多くのメールアドレスを入手できるようになります。 多くのサイトがメール購読者数欲しさに、あまり深く考えずにモーダルウィンドウのメルマガ登録フォームを設置します。しかし、これはすべての購読者に価値あるものではなく、運営側は幻想に惑わされているのです。 コンバージョン率の幻想 多数のメルマガ購読者に誰もが大喜びをするでしょう。しかし、その

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

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

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

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

統計とユーザビリティのコンサルティングを行っている会社、MeasuringUの創始者です。20以上の記事、統計とユーザーエクスペリエンスに関する５冊の本の著者です。 「あなたは年に何時間ボランティア活動をしていますか？」 「ネットの記事は、ビジネスで成功するために価値ある情報を提供していると思いますか？」 アンケートの質問を書くには、技術と理論が必要です。その方法が書かれている書籍も数多くあります。 しかし、適切に質問が書かれたアンケートであっても、バイアスが調査結果に紛れ込んで、回答や結論を歪ませてしまうこともあります。 アンケート調査は、見込み客や既存ユーザーの特徴（誰なのか、何を思っているのか、何をしているのかなど）を把握するもっとも効果的な方法です。 この調査で得られたデータが、セグメントやペルソナ、実現可能性、機能の優先順位などを決める判断材料になります。 相互に排他的でない選択

Carrie Cousinsはアナログ、デジタルの両方の出版物においてデザイン、編集、ライターなどのメディア産業において10年以上の経験を積んできました。 Webサイトやアプリにとって、優れたタイポグラフィには、単なる書体の美しさ以上の意味があります。タイポグラフィは、コンテンツと視覚的に強い繋がりを持つと同時に、読みやすくなければなりません。 かなり難しい注文ですが、少し練習すればほとんどのデザイナーにできることです。 本記事では、素晴らしいタイポグラフィのユーザー体験を作り上げる10のルールを紹介します。それぞれのルールでは、タイポグラフィが魅力的なWebサイトの事例も挙げています。 読みやすさの原則 サンセリフ体やWebタイポグラフィを使わなければいけないという考えは時代遅れです。しかし、その思考の背後にある理念は重要です。テキストは、読みやすくなくてはいけないのです。 斬新な書体や

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

UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？　ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に

Jenniferは20年近く、UXやデジタル戦略、リサーチ、コンテンツやデザインに関する努力をリードしています。複雑なものをシンプルにすることを専門としてます。 ユーザーがWebサイトのコンテンツを閲覧するとき、その期待値というものは往々にして高いものですが、その関心が持続する時間は非常に短いです。ユーザーの欲しいものに直結するメッセージやコンテンツ、機能が表示されない場合、ほかのサイトに去ってしまいます。そのため運良くユーザーを獲得することができたなら、企業はサイトやコンテンツに彼らを留めるために持てる力をすべて使うべきです。 Webサイトのパーソナライズは、ユーザーの関心をより効果的に集めることができる方法です。ユーザーにとってより良い体験を提供できるだけでなく、コンバージョン率を高め、より売上を伸ばし、ブランドに親近感を持ってもらうことができます。体験をパーソナライズできていない場合

UX Movementの創立者、ライター。ユーザーに優しいUXデザインのスキルを読者の方が上達できるよう、UX Movementのブログを始める。 デザインにピュアブラックを使うと可読性が低くなると知っていましたか？ 統計によると、「アメリカの成人の58％」がコンピュータ作業で眼精疲労を経験したことがあるそうです。デザイナーは使用する黒の色に注意を払うことで、目が疲れる可能性をある程度減らすことができます。 ピュアブラックの文字や背景 ピュアブラックの文字や背景と白の組み合わせは、ユーザーが文章を長時間読むとき目に不快感を与えることがあり、眼精疲労を招いてしまいます。 白は100％の明度であり、黒は0％の明度です。このように明度のコントラストが強いと光量に不均衡が生じ、ユーザーが明るさに順応しようとするために目が酷使されることになるのです。 この現象を実証するために、暗い部屋で明るい電灯を

RobertはGatherContentのコンテンツストラテジストです。 また、GatherContentブログの編集長でもあり、さまざまなWebマガジンで記事を書いています。彼のTwitterはこちら。 Webサイトプロジェクトのスタート時には、ローンチを成功させるために、プロジェクトのゴールを理解し、ユーザーと顧客について学ぶ発見フェーズが必要です。さらに、発見フェーズを進めるためのキックオフミーティングも同じように重要です。 受託制作と自社サービスのどちらの場合でも、キックオフミーティングと発見フェーズにおいてチームが協力し合うことで、組織の目的を共有することができます。これらの段階は、プロジェクトを上手く協力しながら進めるために、チームを立ち上げる段階でもあります。 いつキックオフミーティングをすべきか 理想的にはキックオフミーティングは、プロジェクトへの期待を共有するために、プロ

アダプティブデザインとレスポンシブデザインは、両方ともブラウザのウインドウ幅に応じてUIを調整するという点ではとてもよく似ています。しかし、その調整の仕方において両者は異なっています。 UXデザインエージェンシー「Codal」の一員である私たちは、プロジェクトや予算、リソースに関する助言をよく求められます。それはそれでいいのですが、現場の人々の中にはアダプティブデザインというものがあることを知らない人もいます。 では、早速本題に入りましょう。 レスポンシブデザインでは、ブラウザのビューポート（表示領域）に基づいてWebサイトの見え方が変わります。通常、開発者はブラウザの幅によってページ上の要素を動的に変化させます。 レスポンシブなWebサイトは完全に流動的で、スクリーンサイズではなくビューポートに対応します。なぜならレスポンシブなWebサイトは、パーセンテージに基づいたCSSの指定を用いる

BogdanはDesignYourWayのデザイナー兼エディターです。彼はハムスターがニンジンを食べるのと同じくらいデザインについての本を読みあさり、デザインの原則やベストプラクティス、トレンドについていつも話しています。 目を引くWebサイトをデザインすることは素晴らしいことです。しかし、見た目を良くする以上に行わなければならないことがあります。 企業のWebサイトを、直接人と会ったときの最初の30秒間と比較してみましょう。それは第一印象が形成される時間です。Webサイトのインターフェイスが、以下のような要素で機能性を伝えていないとしたら、第一印象が形成される時間はより短いかもしれません。 シンプルで使いやすく、サイト構造に気を散らされない。 訪問者から企業への肯定的な印象を引き出す。 魅力的でプロフェッショナルな見た目を提示している。 一目見ただけで、とても使いやすいフォーマットを提供

Interaction Design Foundationはグローバルにデザインレベルの向上を目指す、デンマーク発の非営利団体です。 問題と向き合い、挑戦すべき領域を決めたら、そのプロジェクトの担当者や発案者は仲間を集める必要があります。このとき、複雑な環境や大規模な組織では、ステークホルダーマップ（Stakeholder Map）を作成し、内外の関係者や影響を与える人、影響を受ける人をまとめることが不可欠です。 あなたがプロジェクトの担当者または発案者であるとしましょう。あなたのタスクの１つは、自分の行動によって影響を受ける、内外のさまざまな関係者を理解し、まとめあげることです。最初のステップの１つは、チームを結成することです。しかし、多くの場合、影響を受ける人と影響を与える人のリストを作ったあとでなければ、チームは結成できません。 リストを集めるには、何らかの計画が必要です。多くの組織

Stephen Moyersはオンラインマーケティング担当者、デザイナー、テクノロジーに精通したブロガーです。 彼はロサンゼルスに拠点を置くSPINX Digital Agencyと提携しています。 シンプルで素敵なWebデザインの体験は、シームレスです。ユーザーは自信を持って快適に１つのコンテンツから次のコンテンツに簡単に移動することができます。Webデザインにおいてシンプルで完全なユーザー体験を実現することは、デザイナーや開発者が直面するもっとも困難な課題の１つです。 ここ数年の間にモノやアイデア、コンテンツが過剰に溢れたことで、世の中のトレンドはシンプルな方へとシフトしてきています。法律の専門用語は素人向けの言葉に言い換えられ、作家は飾り立てた表現よりも簡潔なコンセプトを提供するように努め、住宅所有者は牧場のように広い家を下取りに出して小さく効率的な家を手に入れています。料理人さえも

株式会社GMOペパボ UXデザイナー。ホスティングサービス、電子書籍プラットフォーム、アプリ開発などを経て、現在はtoB/toCのEC領域のサービスデザインに従事。今後の労働人口減少社会に対するサービスに強い関心がある [Facebook][twitter]。 ドッグフーディングとは、自社の製品を自分たちで日常的に使い、改善の必要な箇所を探ることです。この手法には、以下のようなメリットがあります。 ドッグフーディングの４つのメリット 1. 共感できる その商品のユーザーが、何が嬉しく何が怖いのか、肌で感じることができます。 2. ユーザーテストの仮説を立てる元になる ユーザーテストをする際には、その様子をただ闇雲に観察するのではなく、仮説を立てて観察することが必要です。「ここが問題なのではないか」という仮説を立てるには、あらかじめドッグフーディングで製品を検証しておくことが有効です。 3.