シンプルの心理学 ― 心地良いデザインのために | POSTD
私たちの誰もが理解する”シンプル”という概念の正体を突き止めることは、難しそうに見えますが、実はそうでもありません。 私たちが製品やWebサイトをシンプルと感じるかどうかの背景には、”見れば分かる”ということだけではなく、単なる直観的な反応にとどまらない何かがあります。 Steve Jobs は次のように述べています。 シンプルであることは、複雑であることより難しい場合がある。物事をシンプルにするためには、思考を整理して懸命に考えなくてはならない。しかし、努力する価値はある。ひとたび達成すれば、山をも動かすことができるのだから。 シンプルにものを作ることにそんなに力があるのであれば、なぜ私たちはそうできないのでしょうか。 なぜシンプルであることは、こうも複雑なのでしょうか。 人生における多くの事柄と同じように、シンプルさには表面的に見えている以上の何かがあります。ここでは、私たちの脳が新し
≡ ←ハンバーガーメニューのデザインでクリック率は違う（2014年のA/Bテストの結果から）
スマートフォン対応サイトで右上や左上にある「≡」こんな形の三本線のメニューはいわゆるハンバーガーメニューと言いますが、ハンバーガーメニューのデザインに関してA/Bテストを行っていた記事があったので紹介します。 ●ハンバーガーメニューのデザインパターンハンバーガーメニューは色々なデザインがあって、例えば以下の様なパターンがあります。（サイトイメージは「グラシン工房」から） まずはBootstrapの標準に近い形式。三本の線があるだけのパターン。 次に三本の線のしたにメニューという文字を配置して、アイコンの意味を説明するパターン。 三本線を線（border）で囲い、ボタンらしく見せるデザインのパターン。 他にもいくつかデザイン・表現方法がありますが、それは前に書いた「【Web制作】スマートフォンサイトのメニューのアイコンデザイン・表示を比べてみた」の記事をご覧ください。 ●アイコンだけ・文字付
Apple Watchアプリを作るべきかUIUX評価雑感 | fladdict
事前レビュー「UI考（番外編） AppleWatchについて、あまり語られてない視点」の続き、週末に使ってみた雑感。 通知マシーンとしての素晴らしさ 通知マシーンとしては文句なく素晴らしい。手首に対する自然なノックからはじまる通知と確認のプロセスは、ミニマルで合理的に設計されている。Facebookのメッセンジャーやカレンダーなどとの相性は抜群だった。 全てをぶちこわす致命傷 いっぽうアプリのプラットフォームとして考えた場合、これはまだ実用に達していないと判断した。おそらく一番致命的な問題はレスポンスの遅さだ。 Apple Watchの謳う最大の価値は、「携帯を取り出すより楽」なことと「グランサビリティ（一目瞭然性）」だった。ところが実際触ってみると圧倒的に遅い。これはiPhone本体とのBT通信が全てを台無しにしているためだ。 例えばグランスやアプリを使用する場合を考えてみよう。アプリ利
KPIを設定してからUIデザインする | keisuke tsukayoshi
最近デザインで失敗してしまったことがあって、そのときの話。 それはぼくがあるUIの改修に取り組んでいたときに起こった。 起：「ある機能が完成したから、組み込んで」 ぼくに与えられた仕事は、もともと組み込む予定だったある機能のバックエンド側が完成したのでフロント側に組み込む（デザインする）、というものだった。フローのなかに組み込むので置き換える機能があったり前後の流れを変えることも含めて、色々考え始めた。 どういうものがユーザーに求められているのかを軸に、インタビューする前に考えを整理した。 承：ユーザーの使いやすさを求めてデザイン その後何人かにユーザーインタビューをして、どういうものが求められているのかとかどう使っているのかなどだいたいの感触をつかんだら、インタビューでわかった事実をもとに導線設計を始めた。 なかなかいい感じかと思われたが、UIモックが完成したあとのユーザビリティテストで
デザインの役割からみる「トーン」と「マナー」
こんにちは。デザイナーの山口陽一郎です。 去る2014年2月19日（水）に、株式会社パソナテック様主催のセミナー「クリエイターのためのトーン＆マナー設計」にて登壇させていただきました。 皆さんは「トーン＆マナー」という言葉を耳にしたことがありますか？「トンマナ」と略されることの方が多いかもしれません。その説明の前に、ちょっと寄り道をさせてください。 デザインのふたつの役割とトーン＆マナーの演出 デザインには大きく分けてふたつの役割があります。 1. 機能性を高める これはユーザーにとって製品をより使いやすくしたり、誤操作の危険をなくしたり、迷わないようにサポートするための役割です。 そしてもうひとつが今回のセミナーのテーマとしてとりあげた、 2. トーン＆マナーの演出 です。製品に、それが使われる場にふさわしい属性・キャラクターを付与する役割です。 たとえばレジャーグッズなら「楽しさを想起
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
スマホデザインで見やすいサイズ、行間は？デフォルトのアプリ等を調べてみた｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは、デザイナーの小林です。 最近スマホデザインで、アプリデザインや、機能性を持たせたUIのデザインが求められることが多くなってきました。 Photoshopで幅640pxで作成後、実機で確認をするのですが、どうも文字サイズを決めるのに毎回迷ってしまいます。 「小さすぎるんじゃないか？」 「見出しと本文の違いがパッと見で分かるだろうか？」などなど… そこで普段見慣れているだろう、スマホのデフォルトの純正アプリや有名アプリの文字サイズを調べてみました。 検証方法 iPhone4S（古くてスイマセン）でキャプチャーとる Photoshopで上からテキストをトレース。（このときの文字設定の数値を記載しています。） ホーム画面 通話履歴 メール リマインダー メモ帳 ミュージック Google Chrome Facebook Twitter Youtube はてなブックマーク evernot
アプリデザインの参考になるUI/UXデザインギャラリーサイト10選 - 株式会社モンスターラボ
オンボーディングのUXデザインの参考になる海外Webサイト 「オンボーディング」とは、初めてサービスや製品を使うユーザーがヘルプや説明書を読まなくても使っていくうちに操作方法がわかるように設計する手法のことです。 いかに素晴らしいプロダクトであっても、初めて使用するユーザーにストレスを与えてしまい、すぐにアンインストールされてしまっては意味がありません。 オンボーディングのUXデザインで参考にしたいのが、以下の2つのWebサイトです。 アプリデザインまとめ① User Onboarding 「User Onboarding」は海外のアプリや有名Webサービスのオンボーディングについて紹介しているWebサイト。 オンボーディングを画面単位で切り分けて、参考になる点と改善が必要な点をピックアップしています。 サンプルはスライド形式で表示されます。簡単な英語で解説されているので、英語が苦手な人で
第6回 UI/UXの発想を広げるキーワード | gihyo.jp
今回は、テクノロジの激しい変化の中でUI/UXを学び続けるためのヒントとして、どういったフィールドを学べばよいのか、筆者がUI/UXの着想や考え方のヒントをどう得てきたかをいくつかのキーワードを通じて紹介します。 生態心理学 UI設計がなぜ難しいのかの根本を問えば、端的には「人間というテクノロジ」がわからないからです。 コンピュータは人間が作り出したテクノロジですから、設計した通りに動作します。一方で、「人間」はどのように動いているのかについては、さまざまな科学的実験や心理実験、あるいは社会学によって分析考察されてきていますが、その理解は一面的なものにすぎません。 たとえば、「あなたが家から駅までたどり着く」というごく日常のことであっても、そのしくみを客観的に説明することは非常に難しいのです。ほかにも、気分のような感情、心や意識と呼ばれている現象が、何に由来しどういう原因で変化するのか
情報がないことを伝えるUIデザイン | UXデザイン会社Standardのブログ
「Empty Data（またはEmpty Status）」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日本では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります（Webでの404に近いですが、少し違います）。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。 参考：モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 Empty DataはUIである Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでし
ユーザーとサービスの最初の出会いでのUIデザイン | UXデザイン会社Standardのブログ
はじめまして このブログに興味を持って頂きありがとうございます。そしてはじめまして。STANDARDでデザイナーをしている鈴木智大と申します。本日よりこのブログの執筆をさせて頂きます。私にとっては、ブログを読んで頂ける一人一人がユーザーであり、このブログ自体がサービスです。しかし、まだこのブログというサービスがどのような形でゴールを達成するかは明確には考えていません。ゴールは今後、ブログを読み続けてくれるユーザーの声を聞くと共に、私自身も発見と学習を重ねることで一緒に作ることができればと思います。 ユーザーがサービスを最初に使い始め、まず出会う画面に会員登録の画面があります。サービスの改善フェイズでは、問題がないかをまず第一に注目する部分のひとつです。改善にあたり、この登録画面がユーザーにとってのハードルとなり、予期的UXから一時的UXの間の体験にギャップが生まれていることがよくあります。
webデザイン業界で「UI/UX」という言葉が流行った理由を現場視点から勝手に語る
Web業界で、「UI/UX」っつって、この２つが同列のように書かれることが多いのも、大いに違和感があるんだけどね。UXはUIよりも、はるかに上位の概念だろうに。さらには、Web上だけで済むような話では、まったくないし。 — い (@hii1969) 2014, 6月 2 ユーザーの体験において、UIにふれるのは、ほんの一部の時間だ。 「UI/UX」と並列に書いたら、「それは違うよね・・・」とみなされる風潮ではあると思うんだけど。 じゃあ、この違和感がある「UI/UX」という言葉はなんでうまれたんだろう？ なんでwebデザイン業界では並列に使われてきたんだろう？ そんな問いがふと頭によぎった。 同時に、自分の現場感覚でこの言葉が流行る理由についてもわかる気もした。 というわけでwebデザイン業界で「UI/UX」という言葉が流行った理由を、現場視点から書いてみようと思う。 ※なお、これは私（と
JINS MEME（ミーム） | JINS - 眼鏡（メガネ・めがね）
ウエアラブルデバイスの、遥か彼方へ - 世界初、自分を見るアイウエア。MEME（ミーム）とは、個人の中に存在する感情や習慣、好みなど、人間の生き方を左右する形のない情報のこと。あなたはJINS MEMEを通して、自分の内側を知ることになる。今の自分の疲れが見える。気分が見える。眠気が見える。それはまさに、最適なミームを選択し、育て、より豊かな未来をつくっていくこと。私（ME）が 出会う、もう一人の私（ME）。内なる自分を見るその眼が、外の世界を見る眼を変え、人生の景色を変えていく。ウエアラブルを超えるアイウエア、誕生。 これからは、ビッグデータよりも、ディープデータ。JINS MEMEをかけたあなたの眼やその付近からは、今まで得ることのできなかった圧倒的に高精度な身体情報（DEEP DATA）を取得することができるのです。人間の感覚器の約８割が頭部に集中し、五感の約９割は眼から感知されると
メガメニュー | Accessible & Usable
公開日 : 2014年5月12日 カテゴリー : アクセシビリティ / ユーザビリティ 「メガメニュー (Mega Menu または Mega Dropdown Menu)」と呼ばれる、面積の広いドロップダウンメニューがあります。情報量の多い大規模サイトを中心に、時折見ることができます。 メガメニューの例 : スターバックス (starbucks.com) メガメニューの例 : MoMA (www.moma.org) メガメニューの例 : LG (lg.com) JavaScript によるドロップダウンメニュー自体は昔からありましたが、それに比べると、メガメニューは以下のような特長があり、ファインダビリティの面で優れていると言えます。 サブメニューを二次元的に (縦だけでなく横にも) 展開できるので、たくさんのメニュー項目を、一度ですべて見渡せるように表示できる。 広い面積を活かして、情
eBay でヒドいデザインの方がコンバージョン率が高かった、という話
先日日本のWEBデザインが2003年で止まっていると話題にという記事で楽天のサイトなどのことが取り上げられていましたが、これを読んで思い出したポッドキャストインタビューがあったので一部抜粋してみます。 このインタビューはスタートアップ向けレクチャーイベント ZURBsoapbox シリーズのひとつ。昨年11月に、「サンフランシスコでの投資とギークな日々の20年間」といったタイトルで 500 Startups 代表のエンジェル投資家デイブ・マクルーア氏が語ったものです。 「チームのメンバーに求める特徴は？」という客席からの質問のデザイナーの部分について、彼はこのように答えていました。 一緒に働くのが辛いデザイナーもいた。自分はなんでも知ってる、みたいなデザイナーと働くのにはほんとに苦労した。デザイナーと口論したいわけじゃないんだ。俺が見たいのは数字とお客さんの利用例。そして何がうまくいってい
米国市場の高校サイトでは、今、何が起きているのか？
ブログサービス「マーケター通信」をご利用の皆さまへ 平素はITmedia マーケティングをご愛読いただき、誠にありがとうございます。 当サイトではこれまで、関連ブログサービスとして「マーケター通信」を長年にわたり運営してまいりましたが、全体的な利用の減少を鑑み、2020年9月30日にサービスを終了させることになりました。 このような結果になり残念ですが、何卒ご理解いただけますと幸いです。これまでご利用いただきましたことに対し、あらためてお礼申し上げます。 尚、ITmedia マーケティングは従来通り更新を続けますので、引き続きよろしくお願いいたします。 サービス終了までのスケジュール、および、これまで登録していただいたブログ記事の取り扱いにつきましては、以下の記載をご確認ください。 スケジュール 2020年9月25日（金）
実例で納得！シニアが使えないサイトの例 | マミオン有限会社-パソコン・数学研修、法人研修
パソコン教室でシニア層にインターネットの使い方を教えているときほど 「ああ、ここがもう少し改善されれば！」と吠えたくなる時がある。 「知りたい事」「申し込みたいもの」「買いたいもの」があって ワクワクしているのに、多くの人が、若い人に取っては「些細な」ミスで サイト上で目的を達成できずに諦めたり、 諦めきれないからとサポートセンターに電話して 「その情報はホームページに載ってます」と言われ落ち込んだりしている。 今日は大学の公開講座に申し込もうとしている70歳代後半女性の話。 ウキウキの申し込み「大学の公開講座申し込みたいの。英語をやり直したいのよ」といらしたMさん。 「新聞の折り込みで講座を見たのだけど、ホームページから申し込んでって書いてあって。 ホームページを見たのだけどどうすればいいのかわからないけど ホームページからしか申し込めないらしいから、やり方教えて」 とのこと。 チラシに
iOS 7 の UI が分かりにくいワケ
［iOS の UIPicker を比較する］ 新しい iOS 7 の UI が識別しにくいと思っていたら、Sean Woodhouse がデベロッパの立場から同じことを指摘している。 iOS 6 と iOS 7 の UIPicker の違いを比較したものだ。 Itty Bitty Labs: “Lifting the lid on the iOS 7 UIPicker” by Sean Woodhouse: 30 September 2013 ＊ ＊ ＊ やっと iOS 7 ピッカーがよくなった？ iOS 7 の見かけが大きく変わった原因のひとつは UIPicker（およびその関連で UIDatePicker も）がフラットになったことだ。新しいピッカーは表面上はよりクリーンになったように見える。自分は iOS 6 のピッカーのビジュアル偏重と疑似３次元回転効果が好きではな
iOS 7はもっさりか？比較検証してみた | TOKOROM BLOG
今回の記事はUIデザイナの Morino氏 からの寄稿です。 iOS 7が正式リリースされました。既にアップデートを行って実際に試されている方も多いと思いますが、今回はUIに大幅な変更が加えられたために、まだ操作に戸惑いのある方もいるのではないでしょうか。 特にiOS 7にしてから重く感じる、もっさりしているという意見もけっこう多いようです。iOS 7をしばらくいじってからiOS 6の端末を触ると、たしかにiOS 6の方がきびきび動いているように感じます。 今回は半透明やぼかし、視差効果などの画像エフェクトをふんだんに使用しているために画像処理の負荷が高いことも確かでしょう。しかし、全てが端末の性能のせいというわけでもないことを、今回はご紹介したいと思います。 頻繁に操作を行う以下の4つのシーンについて、ちょっとした比較検証を行いました。 ロック解除してから、ホーム画面のアイコンが全て出現
スマホUI考（番外編） なぜ機能追加をし続けるとアプリが破綻するのか？ | fladdict
この写真は、アーミーナイフの名門ウェンガー社のジャイアントナイフという最高級ナイフである。141の機能を持つ、ギネス認定もされた厚さ24cm、重量1.3kgの世界で最も高機能なナイフだ。トップメーカーが自社製品の全機能を１つに集約したこの製品こそが、機能拡張の行き着く先を指し示している。 なぜ適切な機能追加であっても、機能を追加しつづけることで破綻をするのか？本エントリは、「スマホUI考（番外編） 顧客やユーザーの要望に全て対応すると、アプリは99%破綻する」の続きになる。 本エントリでは以下の４つの側面から、機能を追加するリスクを考える。まず第一に「選択肢の数が必ずしも善ではないこと」。次に「人間の判断力は使うほど消耗すること」。そして「画面スペースが有限のリソースであること」。最後に「どんなに機能を増やしても、一画面で強調できるものは限られていること」。これらの４つは全て、機能追加が最
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
