プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.10
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第10弾は、デザインの原則とフォントやシャドウに関するデザインのテクニックです。 UI & UX Micro-Tips: Volume Ten. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 近接: 重要なデザインの原則です、上手く使いましょう 2. UIに含まれる要素は常に区別できるようにデザインする 3. 見出しと本文の両方に最適なサンセリフフォント 4. 見出しと本文の両方に最適なセリフフォント 5. フォントの組み合わせを探す時はSuperfamilies 6. シャドウは繊細に はじめに 次の
ユーザーに直感的で分かりやすいボタンとは、UXの観点からくわしく解説
ボタンのクリックレートが低い、ボタンを配置したページにユーザーが長い時間を費やしている、これはボタンが直感的でなく、分かりにくいボタンが原因かもしれません。 コンテンツにおけるボタンの配置、ボタンの形状、導線に基づいた配色など、ユーザーに直感的で分かりやすいボタンをUXの観点から詳しく解説します。 5 Techniques to Make Mobile Call to Action Buttons Intuitive by UX Movement 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ユーザーが分かりやすいボタンとは 1. スキャンパターンに従ってボタンを配置する 2. 形を使って、ボタンをテキストから区別する 3. プログレッシブアクションにカラーを追加する 4. ラベルにあるテキストの太さを変える 5. 優先度の高
アダプディブデザインか、レスポンシブデザインか
アダプティブデザインとレスポンシブデザインは、両方ともブラウザのウインドウ幅に応じてUIを調整するという点ではとてもよく似ています。しかし、その調整の仕方において両者は異なっています。 UXデザインエージェンシー「Codal」の一員である私たちは、プロジェクトや予算、リソースに関する助言をよく求められます。それはそれでいいのですが、現場の人々の中にはアダプティブデザインというものがあることを知らない人もいます。 では、早速本題に入りましょう。 レスポンシブデザインでは、ブラウザのビューポート（表示領域）に基づいてWebサイトの見え方が変わります。通常、開発者はブラウザの幅によってページ上の要素を動的に変化させます。 レスポンシブなWebサイトは完全に流動的で、スクリーンサイズではなくビューポートに対応します。なぜならレスポンシブなWebサイトは、パーセンテージに基づいたCSSの指定を用いる
邪悪なUIチェックポイント - その先へ
ハロー、@seto_hiです。 北海道で避暑をしています。 アプリ開発をしていると様々なコンバージョン率がKPIになることは多いですが、誠実さを欠いたUIを作ると数字がよく伸びることが稀によくあります。 そういったものは一時的な利益には繋がりますが、長期的な利益には繋がらないと考えています。 自分が今後そういったUIを作らないための予防線としてこの記事を書きます。 不利益の排除 ・不利益な動線を奥深くに隠す ・ユーザーが設定を変更する手間を増やす ・「メールマガジンの解除にはメッセージを送ってください」 ・「メールマガジンの解除にはログインが必要です」 ・過度に警告を表示する ・「この設定をOFFにするとアプリが正常に動作しなくなる可能性があります」 ・「本当にOFFにしてよろしいですか」 ・不利益な動線を目立たなくする ・不利益な動線のシグニファイアを消す ・スマートフォンならスクロール
UXという言葉が登場する以前に私が見たUXデザイン：ユニバーサルデザイン編
オフィス機器メーカー、ユーザビリティ評価専門会社を経て、2013年に株式会社キトヒトデザインを設立。ユーザビリティ、UI/UXデザイン関連業務を行う。 趣味はちょっとマイナーな国への旅行。 UXという言葉が騒がれるようになる前にも、UXデザインらしきものは確かにさまざまな形態で存在していました。この寄稿記事では、株式会社キトヒトデザインでユーザビリティ、UI/UXデザインなどを手がけている萩本さんがご自身で体験したデザインのお話を不定期更新でお届けしています。今回は第８回目です。シリーズ全編はこちら UXデザインと同時に語られることはあまりないようですが、製品やサービスとユーザーの関係性についての重要な概念に「ユニバーサルデザイン（UD）」があります。 恥ずかしながら、自分で作ったWebサイトもユニバーサルデザイン仕様にできていない私が偉そうなことを言える立場ではないのですが、今回はこの話
UIのデザインはちょっとしたことで印象が大きく変わる、背景に適した色の選び方
背景の色に悩んだり、なんとなく決めてしまうことはありませんか？ Webサイトやスマホアプリの背景に適した色の選び方、明度と彩度を最適化するデザインのテクニックを紹介します。 Why You Shouldn’t Use Bright, Saturated Colors for Backgrounds 下記はUX Movementの記事を意訳したものです。UX Movementでは他にもUXデザインに関する記事が掲載されています。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 背景に明るく彩度の高い色を使用してはいけない理由 1. 明度と彩度 2. 注目と喚起に対する色の効果 3. ボタンのために明るく鮮やかな色を予約しておく 4. 背景に濃くて不鮮明な色を使用する 5. 背景に適した色の選び方 6. 見にくい背景と見やすい背景の例 7. 美しさとユーザビリティ 背景
現代のWebナビゲーションにおける４つのルール
Webサイトはあらゆる種類の情報にアクセスできます。ある企業についてもっと知りたい、商品を購入したい、寄付をしたい、リソースにアクセスしたいなど、探している情報を見つけるために私たちはサイトナビゲーションを頼っているのです。 多くのWebサイトが「十分」に機能するナビゲーションを備えており、ユーザーを必要な情報にアクセスさせることができます。しかし、それは試行錯誤を重ねたからなのです。この記事では、デザイナーがより効果的でわかりやすいナビゲーション体験を作り出せるようになるためのベストプラクティスをいくつか紹介します。 『ナビゲーションは検索よりも大切である』という記事で、著者のGerry McGovern氏は彼のチームが行った調査について紹介しており、「ユーザーの70%はリンクのクリックから始め、30%は検索を使用した」と述べています。また、「検索を使うよりもリンクをクリックするほうが簡
レスポンシブデザインとアダプティブデザイン、それぞれの長所と短所
レスポンシブデザインとアダプティブデザインの違いに目を向けると、それはデザイナーにとって実に重要な選択肢があることに気付きます。インサイトを踏まえてこれらの選択をすることで、より目的に沿ったデザインを考えることができるでしょう。 モバイルデバイスの普及と多様化に伴い、デザイナーはさまざまな画面サイズに対応する必要が生まれました。これは現在、すべてのWebとアプリのデザイナーが直面している課題です。企業向けの巨大なモニターからスマートウォッチまで、ユーザーがオンラインで情報にアクセスする方法は数え切れないほどあります。 そのようなデバイス間の差を埋めようとするデザイナーには、２つのデザインの選択肢があります。アダプティブなサイトか、レスポンシブなサイトです。 レスポンシブデザインとアダプティブデザインの違いについて混同している人が、一定数見受けられます。どちらのデザインも経験していない人にと
UXとUXデザインの概念｜Toshiya Sasaki
はじめまして。デザイナーのSasaki（@toshiyassk）です。 Fintech企業ではたらきながら、UXデザインやサービスデザインを軸とした研究をしたりしています。 先日会社でUXについての勉強会（初心者向け）をさせていただく機会があったので、UXとUXデザインの概念についての資料の一部を記録しておきます。（参考文献に基づいた内容ですが、表現を変えている部分もあります。） UXとは？UXの定義にはさまざまなものがあるが、決定的な一つの定義はない 2010年に世界のUX研究者30名によってUXの定義について議論され、UXを一つに定義する代わりにUXをとらえる視点が明確にされた。 27件のUXの定義が All About UX に掲載されている。 UXをとらえる3つの視点① 主観的評価 ユーザーが製品やサービスを使った体験を通して、結果としてどのような認識をし、どのような感情や評価を抱
マーケ担当も、代理店も、編集者も、ブロガーも、「コンテンツのUX」考えてますか？塩谷舞さん「いま求められるWebコンテンツの作り方」レポート｜坂口淳一
マーケ担当も、代理店も、編集者も、ブロガーも、「コンテンツのUX」考えてますか？塩谷舞さん「いま求められるWebコンテンツの作り方」レポート 「コンテンツのUXって、なんでみんな考えないんだろうね？」 金曜日のお昼過ぎ、上司はPCを眺めながら、こうつぶやいた。 読んでいたWeb記事が読みづらかったようで、それにイライラしたが故の発言だったようだ。 普段、Webサービスを作る仕事をしていて、サービスのUXを考える機会は多かったが、「コンテンツのUX」という言葉には耳馴染みがなかった。 そのため、その時は「あー、たしかに考えてる人、少なそうですねー」と流してしまった。 しかしその日の夜に「コンテンツのUXって大事なんだ」と、しみじみ感じながら帰る自分がいた。 2018年1月26日（金）、塩谷舞さんの講演「いま求められるwebコンテンツの作り方と届け方」に行ってきた。 なんと2分で90名分のチケ
フロントエンドスタイルガイド： 定義と要件、コンポーネントチェックリスト
フロントエンドスタイルガイドは、デザインやテストを効率化し、UIの一貫性を高める。今回は、スタイルガイドの要件8個と、一般的なコンポーネント25個を紹介しよう。 Front-End Style-Guides: Definition, Requirements, Component Checklist by Page Laubheimer on March 27, 2016 日本語版2016年6月23日公開 フロントエンドスタイルガイドとは何か フロントエンドスタイルガイドがUXの現場でますます一般化してきている。Jeff GothelfとJosh Seidenが彼らの著書『Lean UX』で説明しているように、フロントエンドスタイルガイドはアジャイルやリーンな環境で生まれたものである。 定義： フロントエンドスタイルガイドとは、製品のユーザーインタフェースにある全要素のモジュールコレクショ
UIにマイクロインタラクションを！ より良いUXのための７つの秘訣
Dmytroは、SoftServeのデザイン部門ディレクター兼SoftServe Unitedブログの寄稿者です。Dmytro氏はこの業界に13年以上携わっており、UIデザインやインタラクションデザイン、モバイルデザイン、IA及びUXを専門としています。 私たちは、本の良し悪しをその表紙で判断しがちです。良いデザイナーはそれを理解した上で、機能的なUIにおいてもキャッチーさを忘れません。しかし、キャッチーさはユーザーの興味を惹きつけることはできるかもしれませんが、購入などのコンバージョンに結びつくとは限りません。 きちんとビジネス目標を達成できるように彼らを引き込むには、どうすればよいのでしょうか？ この問の答えを探す中で、最終的にはユーザーに最も焦点を当てた「人間中心のデザインアプローチ」が不可欠であるということが分かるでしょう。つまり、人間らしさが大事であるということです。皆さんのアプ
マイクロインタラクションとは？UXに取り入れる際の5つのポイント
「"中身を読まずに"表紙のデザインやタイトルを見て本を買ってしまった」 あなたも、このような経験はありませんか？ この行動自体は、決して珍しいものではありません。 だからこそ、本や雑誌、書籍と同様に、ホームページも*「見栄え」や「タイトル決め」*というのは非常に重要な要素といえます。 しかし、「UXデザイナー」という職業が確立された昨今、今求められているのは外観（見た目）だけではありません。 ホームページでいえば『内容』や『体験』にフォーカスする必要があります。 それでは、どうすればユーザーに満足してもらえる内容・体験になるのでしょうか。 その答えのヒントとなるのが*「ヒューマンセンタードデザイン(Human-centered Design、人間中心デザイン)」*です。感情や日常表現も含めて普段使っている言葉と同じ言葉で語りかけ、必要な時にはあなたを笑わせたり驚かせたりします。AIチャット
2017年に注目されたインターフェイスデザインのトレンドを解説
2017年はインターフェイスデザインにとって多様性の一年でした。中でもユーザーフレンドリーに注目された年と言えるでしょう。 2018年これからのWebサイト、スマホアプリのデザインで押さえておきたいインターフェイスデザインのトレンドを紹介します。 Review of Popular Interface Design Trends in 2017 by Marina Yalanska 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 機能的なミニマリズム ブルータリズム 画像に統合されたタイポグラフィ アニメーションするヒーローイメージ オリジナルのイラスト 枠線がないレイアウト さまざまなインターフェースのアニメーション UIに優しいブランディング 単色のUI 進化した暗い背景の使い方 文字を読ませるためのスペース コントラストを
デザイナーから学ぶ、１枚の紙とペンで企画アイデアを整理する方法
UX MILK編集長。株式会社メンバーズ LXグループ所属。LX（ラーニングエスペリエンス）にまつわる新規事業立ち上げなどをしています。ゲームとパンクロックが好きです。 Facebook / Twitter。 企画がうまくまとまらない、または伝わらない、なんて経験は過去にありませんか？ 「企画を考える」というタスクは数多くある仕事の中でも掴みどころのないもののように感じませんか？ 今回はオンライン学習プラットフォームUdemyの中でも人気の講座から、企画の発想・整理の手法を学んでいきたいと思います。この記事では要点をかいつまんで紹介しますので、詳しく知りたい人は講座の本編を受講してみてください。 企画を「１枚の紙」にまとめてみる 今回取り上げるのは「〜デザイナーの頭の中、大公開〜 企画を「１枚の紙」で、伝えきる」という動画講座です。 トリプレットデザインの大森 剛氏が講師に立ち、企画を考え
読みやすさのデザイン備忘録 | 深津 貴之 (fladdict) | note
noteのコア体験は、「読む楽しさ」と「書く楽しさ」だと考えています。 本来ならコア体験は、調査でしっかりと導くべきものです。しかしアカデミックなUXとは異なり、実際のスタートアップ環境では時間とリソースに限界があります。このため調べながらも、走り出さなければなりません。 まず序盤はヒューリスティック（経験）ベースのデザインを行いつつ、調査やテストが可能なところから、裏づけやチューニングを行う流れになりそうです。 以下、「読書体験」における「可読性」のパートのメモ。noteチームにとりあえず提案する予定の諸々です（現時点では個人の見解です）。基本的には「当たり前のことを、当たり前に」やる予定。「これもやっとけ」的なことがあれば、タイポグラファーの諸先輩の方々には、ぜひご意見をお伺いできればと。 書体をサンセリフ系に変えるべきか？デジタルでは、一般的にサンセリフ体の可読性は、ローマン体よりも
ソシオメディア | OOUI – オブジェクトベースのUIモデリング
最近、OOUX という言葉を見聞きしました。これはオブジェクト指向の利用者体験（Object-Oriented User Experience）のことで、いくつかの記事を読んだところ、アプリケーション設計において画面とデータを対応づける際にオブジェクトを手掛かりにするという方法論のようです。つまり OOUX は「オブジェクトベースのUIモデリング」と言い換えることができそうです。そうすると実は以前からそのようなデザイン手法はあり、「OOUI（オブジェクト指向ユーザーインターフェース）」と呼ばれていたのです。最近になって OOUX という言葉が使われるのは、OOUI のことを知らなかったか、もしくは流行語である「UX」を用いた方がかっこいいと考えたからではないでしょうか。 「オブジェクトベースのUIモデリング」というデザイン手法は、GUI アプリケーションをデザインする際の基本的なテクニック
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
人にうれしいAIのためのUXデザインガイド（People + AI Guidebook）
最近のWebサイトやスマホアプリのワークフロー、モジュール型でパターン主導のデザインシステムを学べる解説書 | コリス
Amazon.co.jp: マイクロインタラクション ―UI/UXデザインの神が宿る細部: Dan Saffer (著), 武舎広幸 (翻訳), 武舎るみ (翻訳): 本
