UIの基本と、設計方法│UI改善で成果6倍！
日常的にUIという言葉を耳にしますが、UIについて正しく理解している人は、ごく一部であるように思えます。UIはウェブマーケティングを成功させる上で非常に重要な要素で、UIを改善するだけでも成果が2倍3倍に向上するケースも珍しくありません。 そんなウェブマーケティングにおけるキーファクターであるUIの基本とテクニックに関して、ウェブマーケティングのプロが例を交えながらご説明いたします。 ※本記事は2014年4月24日に公開された記事をLISKUL編集部にて再編集したものです。 そもそもUIとは？「UIとは、User Interface（ユーザーインターフェース）の略で、ユーザと企業をつなぐ接点です。」というと、少し難しく聞こえるかもしれませんが、つまりは「誰かに、何かをしてもらうために、何を、どう伝えるか」というウェブページ上でのコミュニケーションの「伝える」部分（ウェブページの画面構成）の
【保存版】スマートフォンEFO（フォーム改善）のための15カ条 | UI改善ブログ by f-tra
スマートフォンの利用者が年々増加するなか、フォームのスマートフォン対策はもはや必須のものとなりつつあります。 このとき、ただスマートフォン向けにデザインを最適化するだけではなく、スマートフォン特有の制約や特徴をおさえたうえで改善することが大切です。 本日はスマートフォンの特徴をふまえながら、スマートフォン向けエントリーフォーム最適化（EFO）のポイントを「15カ条」にまとめてご紹介したいと思います。 スマートフォンEFO15カ条！ 本日ご紹介する「スマートフォンEFO 15カ条」は以下のとおりです！ 第1条: 表組みにするべからず 第2条: 拡大はオフにするべし 第3条: 項目は大きくするべし 第4条: 余白を充分に保たせるべし 第5条: リンクは極力配置するべからず 第6条: タップエリアとわかりやすくするべし 第7条: 項目数は極力減らすべし 第8条: 負担の少ない入力形式を使うべし
メガメニュー | Accessible & Usable
公開日 : 2014年5月12日 カテゴリー : アクセシビリティ / ユーザビリティ 「メガメニュー (Mega Menu または Mega Dropdown Menu)」と呼ばれる、面積の広いドロップダウンメニューがあります。情報量の多い大規模サイトを中心に、時折見ることができます。 メガメニューの例 : スターバックス (starbucks.com) メガメニューの例 : MoMA (www.moma.org) メガメニューの例 : LG (lg.com) JavaScript によるドロップダウンメニュー自体は昔からありましたが、それに比べると、メガメニューは以下のような特長があり、ファインダビリティの面で優れていると言えます。 サブメニューを二次元的に (縦だけでなく横にも) 展開できるので、たくさんのメニュー項目を、一度ですべて見渡せるように表示できる。 広い面積を活かして、情
入力フォームをユーザーフレンドリーにする便利なJSプラグイン4つ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れ様です、デザイナーのモモコです。 私がメンバー写真に使っている(｀・ω・´)クッションが思った以上に縦に細くて個人的にツボった今日この頃です。 今回は入力フォームを実装する際に入れておくとちょっと便利になるJavaScriptのプラグインを4つご紹介します。 jQuery Label Better http://www.thepetedesign.com/demos/label_better_demo.html form部品にフォーカスを当てるとplaceholderがふわっと上に移動するプラグイン。 全体的に動きのあるWebサイトを作るときには活躍してくれそうです。 formatter.js http://firstopinion.github.io/formatter.js/ 電話番号やクレジットカード番号など、パターンのある数列を1つのform部品内で扱えるようになるプラグイン
スピード診断ツールのPageSpeed Insightsでユーザー エクスペリエンスの問題も診断可能に
[対象: 上級] PageSpeed Insightsで、モバイル向けサイトにおけるユーザー エクスペリエンスの状態を診断できるようになりました。 構成が不適切なビューポートや読みづらいテキスト、タップしづらいボタンやリンク、機能しないプラグインなどスマートフォンからの閲覧の際に発生するよくある問題点を指摘してくれます。 パフォーマンス診断に加えてユーザー エクスペリエンス診断が可能に 「PageSpeed Insights（ページスピード・インサイツ）」はGoogleが提供する、ウェブページの高速化に役立つツールです。 指定したページの表示スピードの状態を診断し改善点を提示してくれます。 数カ月前にリニューアルし、モバイルサイトのパフォーマンスを診断できるようになりました。 このモバイルサイトの診断項目にユーザー エクスペリエンスが新たに加わりました。 ベータ版ですが、すべてのユーザーが
ほんとに使える「ユーザビリティ」 : could
ユーザビリティ本 ほんとに使える「ユーザビリティ」 「使いやすさ」という考えが異なるだけでなく、「明快さ」の表現も異なる日本。海の向こうの人々が考える理想を、そのまま押し付けるのではなく、本書から何を抜き取り、自分たちの仕事に合うように変形させるのかが課題です エリック・ライス氏が 2012 年に刊行した「Usable Usability」の訳書です。 この種類の専門書は原書で読むことが多いので、久しぶりの訳書になりました。訳書の魅力は、日本語で読めるのはもちろん、原作者の住んでいる国の文化やニュアンスを理解していないと、伝わり難い部分を補っているところです。世界中を飛び回っているライス氏なので、世界のユーザビリティに興味をもつ読者に向けて執筆しているはずです。しかし、それでも『日本から』という視点では見え難いこと、分かり難いことは少なくありません。そこを、訳者 浅野紀予 さんは工夫されて
UIディレクションのカバレッジ
タイトルでは「UIディレクションのカバレッジ」という表現をしましたが、今回はクオリティの高いUIを作るためにはどういう観点での品質管理が必要なのか、ということを自分なりにまとめてみたいと思います。 情報設計・レイアウト情報設計やレイアウトには無限に選択肢があるだけに、「どんなユーザーに、どんな接触態度で、どんな体験をしてもらいたいか」というマーケティング的な視点を持っているか否かで、アウトプットに大きな違いが出てきます。 ちなみに、初めにUIを設計する際には比較的このような視点を持ちやすいのですが、既にリリースしているサービスに対峙すると、どうしても既存のUIの延長線上で改善を考えてしまいがちです。そうならないよう、UIに関わる人たちは、常に提供したいユーザー体験の理想型を意識し、そこから逆算的にUIを考える癖をつけなければいけないと思っています。「なぜこれはこうしたのか？」と訊かれたら、
行動観察はユーザー自身も言葉にできないニーズを明らかにする。現場のコンテキストから提供価値を考える／大阪ガス行動観察研究所 | ユーザーエクスペリエンスのチカラ
久保隅 綾氏大阪ガス株式会社 大阪ガス行動観察研究所 主席研究員人間が無意識に行う行動を観察し、Webサービスやアプリの改善に活用する。こうしたユーザー中心のデザイン手法は、Webの世界で広まりつつある。今回は、行動観察の手法がビジネスにどのように応用できるのか、行動観察活用について研究・開発を進める、大阪ガス行動観察研究所の主席研究員である久保隅綾氏に、行動観察とは何か、エスノグラフィーやUXとの関係、具体的な事例などについて教えていただいた。 普段意識していない潜在的な領域を掘り下げる――まず行動観察手法とは具体的にどのようなものか教えてください。 大阪ガスの行動観察は、現場の観察からお客様の実態を捉え、商品やサービスの提供価値を作る手法です。サービス現場の生産性向上というテーマもあり、たとえばお客様向けのショッピングの新しい経験や価値を作るためにショップ（店舗やWebサイト）の導線を
無料でここまでできる！アプリの分析ツール３選（Flurry、Mixpanel、Localytics） | GrowthApp
無料でここまでできる！アプリの分析ツール３選（Flurry、Mixpanel、Localytics）みなさんはアプリの分析をどのように行なっていますか？ GoogleAnalyticsを入れてる方は多いと思うのですが、もっと詳しく分析したい、でもそこまでお金をかけられない、という人向けのオススメのツールを紹介します。 ▶Flurry Analytics 30万以上のアプリが導入している、スマホ市場調査会社が提供しているアクセス解析ツール。制限なく無料で使うことができます。 クライアントは、ワーナー・マイカル、スタバ、アングリーバード、SEGA、GROUPONなど。 ・特長 ①ユーザー獲得分析 どのメディアからどれだけユーザーが流入してるか分かります。 ②ファンネル分析 ファンネル分析は、スタートからゴールまでの各プロセスの離脱率が分かるというものです。どのユーザーが、どの画面まで利用し、課
藤田晋『分かりやすいＵＩ』
先日、ベストセラー「伝え方が９割 」の著者、 佐々木圭一さんと対談させて頂きました。 （この模様は後日、ダイヤモンドオンラインに 掲載されます） その時に佐々木さんから印象的な話を お聞きました。 それは、日本のメーカーなどの企業は どうして製品の魅力の伝え方が下手なのか、 という話題から出た話なのですが、 「国民の大半が移民によって成り立つ アメリカのような多民族国家では、 家庭で英語を話してない人にも 伝わるように努力している」 というような話でした。 逆にいえば、日本人は阿吽の呼吸の ような感覚で伝わると思っているので、 そこの意識が足りないということです。 この話を、ここ数日間の会議で何回も 引用させてもらいながら、Amebaの プロデューサーにＵＩの分かり難さを 指摘しました。 「色々盛り込み過ぎてるから、何のページ を意味していいるのか分からない」 「この内容では、前後の文脈が
ホーム -
アナリティクスを利用してマーケットより深く理解しようと務めているオンラインカジノもあります。そうしたデータを活用することで、興味は示したものの登録には至らなかった人々の注目を再び集めることも可能です。 オンラインカジノにデータを利用されないようにするためには、ウェブサイトにアクセスした際にクッキーの利用を拒否することが重要です。そうすることで、オンラインカジノを比較するたびに、彼らのターゲットになることもなくなります。次に、FacebookやGmailのアカウントで登録するのを避けることです。これらのアカウントには個人に関する貴重な情報が数多く含まれており、登録と同時に年齢、住所、趣味といった重要な情報がオンラインカジノに流れてしまうのです。 アプリの利用を検討する場合は、そのアプリがデータを転売したり譲渡したりすることがないかどうか確認しておきましょう。利用規約を読むのは細かくて大変です
【スマートフォン向け開発】ユーザビリティチェックリストを作ってみた
最近はスマートフォン系の開発から離れてしまっているので、感覚が鈍らないうちに（備忘録も兼ねて）スマートフォン向け開発（主にネイティブアプリ開発）におけるユーザビリティチェックリストを作ってみました。 ちなみに、このチェックリストは以下が前提となっていますのでご了承ください。 ・独自性を生み出すようなものではない ⇒現在のスマートフォンアプリのメインストリームの中で、アプリの印象をより洗練されたものにするためのポイントです。 ・案件の内容に関わらず意識すべきポイント ⇒ある程度汎用性の高いチェックリストになっているとは思います。 それでは、全てベーシックな内容ではありますが、その中でも特に基本的なものから説明していきます。 ※僕がiPhoneユーザーということもありiPhoneの画面イメージばかりが並んでいますが、全てAndroidでも使えるチェック項目です。 小さくし過ぎない、詰め込み過ぎ
selectボックスをシンプルなプルダウンに拡張するjQselectable(jQuery.selectable.js) :: 5509
セレクトボックスのユーザビリティを劇的に向上できるかもしれないjQueryプラグインです。バージョンアップでjQuery.selectable.jsからjQselectableに名前が変わりました。 サンプルを見てみる トピックス 特徴 ダウンロード 導入方法 スタイル 拡張 表示形式 selectable simpleBox エフェクト 透明度 プルダウン位置の調整(少し高度な設定) プルダウンの高さ カスタマイズ 独自のselectボックスに適用させる id、classの引継ぎ 日付で使う Callback関数を使う 動的にselect要素のDOMを書き換える場合（rebuildメソッド） サンプル 更新履歴・追記 動作環境 特徴 selectボックスの選択ってイライラしないですか？jQselectabeを使えば解決できるかもしれません。以下が主な特徴になります。 セレクトボックスの鬱
User Heat : どこが読まれているか見える！無料ヒートマップ・ツール
ヒートマップとは ヒートマップとは、温度を色で表すサーモグラフィーと同様に、ユーザーが注目している閲覧場所を赤緑青といった色で可視化する技術です。ユーザーのページ内行動を、マウスの動きから推定しています。 たとえば、 「ページをどこまで読み進めたのか(終了エリア)」「ページのどの位置を長く読んだのか(熟読エリア)」「ページのどの位置をクリックしたのか(クリックエリア)」を見える化します。これを利用すると、「読んでほしいのに読まれなかった箇所」、「意外とクリックされているリンクやボタン」「クリックしてほしいのにされていないリンクやボタン」などを発見でき、従来のページビュー(PV)やユニークユーザー数(UU数)などのアクセス解析だけではわからなかった改善点を、素早く浮き彫りにできます。 終了エリア 熟読エリア クリックエリア ヒートマップのメリットはどんなものですか？ ヒートマップツールを使う
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Usability Checklist [UPDATED 2021] 🤓![Usability Checklist [UPDATED 2021] 🤓](https://cdn-ak-scissors.b.st-hatena.com/image/square/308c59c8741cf01f627d38e772ec63af7a94f397/height=288;version=1;width=512/https%3A%2F%2Fteamsuccess.io%2Flogo.png)
in the looop | Looops communications