コ・デザインのためのシンキングシート

突然ですが、ここに一つのプロダクトがあるとします。 そのプロダクトを見つめる視線には様々な種類があります。 そのプロダクトを利用しているユーザーの視点、利用していないが存在は知っているという人の視点、それをつくるデザイナーの視点、プロダクトを運営している会社経営者の視点… もしあなたがデザイナーであれば、デザイナーの視点だけが唯一自分で体感できる「主観」で、それ以外はすべて「客観」となります。 主観と客観のスイッチング プロダクトデザイナーはユーザーの期待通りに正しく動くしくみを設計し、「このプロダクトを利用した時に、ユーザーの生活はどう変化していくのだろうか？」と問いを立てながらアウトプットを評価していきます。 自らの考える理想像をデザインしながら、一方でそれに触れるユーザーの様子を想像する…プロダクトデザイナーは主観と客観を電気のスイッチのように瞬時に切り替えることに長けた人が多いイメ

Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 優秀なUXデザイナーについて書かれた記事はインターネットに多く存在しますが、本記事はそれらとは違います。今回は悪いUXデザイナーを見分ける方法について話したいと思います。 デザイナーが優秀かどうか見極めるのに役立つセリフを10個ご紹介します。 私はUXデザイナーなので、ユーザーにとって何が最善か知っています ステークホルダーよりも、チームメンバーよりもはるかに問題領域に詳しいと信じているデザイナーは少なくありません。ときにはユーザーより把握していると考える人さえいます。したがって、デザイナーが自分たちのソリューションに固執し、批評から逃れようとする状況がよく起こります。 理解しておくべきは、どれだけ長くデザイナーとして経験を積んでいようと、すべてのアイデアは仮説

この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 Staying in Touch with What Users Want Webデザイナーとして、私たちは専門知識に基づいてクライアントのためにサイトを構築します。ナビゲーションやCTAなどのアイテムを配置するための確かな方法論がある一方で、他のデザイン判断はより属人的です。多くの場合、私たちはユーザーが何を望んでいるかを考えて機能を実装するのです。 これはすべてのデザイナーにとって、特にフリーランスや小さな代理店にとっては、非常に困難なことでもあります。なぜならほとんどの場合、実際のユーザーテストを実施するための予算がつかないからです。小規模なプロジェクトを数多く行う場合、優れたUXを構築するために１～２個の何らかの根拠に基づいた推測を基に進めることもあるでしょ

と思っている話です。もはやタイトルでぜんぶ言ってしまった。 せっかくなのでもう少し続けます。 2020/05/03追記：第二弾？書きました この本がまだ初稿になる前、共著者のみなさんと執筆真っ最中の頃に何度か打ち合わせがあったのですが、そこで「書籍的な文章を書き慣れてない人って、"という"と"こと/もの"を多用しがちなので、この2つを抑えるだけでも文章がシュッとするんですよ」とお話したら思ったより反応があったので、これは需要があるんじゃないかと感じたのがきっかけです。 ここから先は具体例を交えて解説していきます。 さすがに他人様のテキストを使うのは気が引けるので自分が書いた記事を例に挙げます。……でも自分はこのテクニックを使うようにしているので、該当する記事がなかなかないんですよねぇ……と思ったらあった！ （よりによってこれか……せっかくなので皆さんスタァライトを観ましょう！） 記事中では

どうも、イケダです。最近よくTwitterで知り合った若いデザイナーにお会いしているのですが、どなたにも決まって聞かれることがあります。 「G●●dpatchってぶっちゃけどうなんですか?」 知りません、なんで僕に聞くんだw 2015年に「Dear G●●dpatch」という内容のサイトを作って持っていったところ、「あー、またこれね...」と土屋さんに非常に悲しいリアクションをされてしまったので別の方法で気を引くことをオススメします。 というわけで今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオ

[レベル: 上級] SEO と相性がいい Lazyload の実装を解説するドキュメントを Google はデベロッパー向けサイトで公開しました。 3つのアドバイス ドキュメントには3つの指針が書かれています。 1. viewport 内で見えるようにする viewport 内にあるコンテンツは、必ず Google にも見えるようにしておきます（viewport は簡単に言えば、スクリーンに表示される領域）。 つまり、重要なコンテンツが viewport に入ったときは確実に読み込ませます。 IntersectionObserver API と polyfill を実装するように Google は指示しています。 2. 無限スクロールでは paginated loading を使う 無限スクロールを採用している場合は、paginated loading を実装します。 paginated

Alanは、ITの領域において幅広い経験をもつ、テクノロジーに関する熱心なブロガーです。彼は現在、ロサンゼルスに拠点を置くSPINX Digital Agencyと連携して仕事をしています。 些細なことがユーザー体験を大きく左右することもあります。私たちがインターネット上で行うことの大部分は、無意識下で行われます。私たちは、漠然と画面を見て、Webサイトを訪れ、コンテンツを消費しています。 ユーザーはほとんどのことを無意識に行っていますが、Webサイトはユーザーの行動を強く意識しなくてはなりません。Webサイトは、いかなるときでもユーザー１人ひとりのニーズとウォンツに対して責任を負う必要があります。Webデザイナーは、顧客データとペルソナを活用してWebサイトのトーンやビジュアル要素を作り出し、ターゲットユーザーに最適な形でサイトを提供しなければなりません。 画面のスクロールは過小評価され

大規模なユーザビリティ調査によって、現在、最も一般的かつ有害なWebデザインの間違いが明らかになったが、そうした間違いは意外なものでも新しいものでもなかった。つまり、それらは課題としてずっと続いており、Webサイトのユーザビリティを損ない続けているのである。 Top 10 Enduring Web-Design Mistakes by Amy Schade, Yunnuo Cheng, and Samyukta Sherugar on October 30, 2016 日本語版2017年2月23日公開 1996年以来、我々はWebデザインの間違い・トップ10のリストを作成してきているが、現在のWebデザインの間違いを調べるために、今年もアメリカとイギリスで215人の参加者からなる大規模なユーザビリティ調査を実施した。小さな地場企業からエンターテインメントサイト、非営利団体、グローバル企業に

コンテンツマーケティングとは何か？ 「コンテンツマーケティング」という考え方が日本でも浸透してきた。元々は2000年頃にアメリカで生まれたマーケティングコミュニケーションの考え方だ。新しいSEOの手法だという人もいれば、ブログを書くことだ、バズるコンテンツのことだ、いやネイティブ広告のことだという人もいる。コンテンツマーケティングとはいったい何なのだろう？生活者と企業の“つながり方”に注目すると、その革新的なコミュニケーション手法の本質が見えてくる。

ユーザーはデザインを見たいのではなく、コンテンツを求めてサイトにアクセスします。Web UI Patterns 2016 Vol. 1で説明した通り、デザインは直感的で分かりやすくコンテンツを表示するための手段にすぎません。 この記事では、Webにおける12通りのレイアウトのパターンを実際の例や良い実践方法、共通のシナリオを通して見ていきます。 1. カード 2. グリッド 3. マガジン 4. コンテナの不使用 5. スクリーン分割 6. シングルページアプリケーション（SPA） 7. Ｆパターン 8. Ｚパターン 9. 水平的なシンメトリー 10. 水平的なほぼシンメトリー 11. 放射線状のシンメトリー 12. アシンメトリー 1. カード

「モバイルファーストからコンテンツファーストへ」レスポンシブWebデザイン専門家が語る、コンテンツの捉え方 2014.11.11　火 モバイル端末の種類が増えた昨今、コンテンツはまずモバイルに合わせて作るべきというモバイルファーストという考え方。その本質はコンテンツファーストだ、と語るのがレスポンシブWebデザインの専門家である菊池崇氏。このコンテンツファーストについて詳しく聞きました。 関連する過去記事 コンテンツストラテジスト必見！レスポンシブWebデザインがアツい理由 レスポンシブWebデザインのワークフロー、デザイニングインブラウザとは レスポンシブWebデザインを語る上で欠かせない！コンテンツストラテジストが知っておくべき「HTML5」のポイント 今回は、レスポンシブWebデザインについて学ぼうとすると頻出するキーワード「モバイルファースト」を起点に、その根底にある概念「コンテン

Google Analytics「次はA/Bテストを無料にする」 はい。またしても唐突な無償版発表です。。 つい先日、AIによる指標指示機能『Analytics Assistant』のリリースで業界を騒然とさせた我らがGoogle先生ですが、さらなる衝撃リリースをぶっ込んできました。 画面上でUIパターンをかんたん作成・編集可能で、しかもGoogle Analytics連携でセグメント設定までOKな有料版Google Analyticsの限定機能、『Optimize 360』の無償版を出すよ！という告知が、突如公開されたんです。

グーグルは、「A/Bテスト・パーソナライズ」と「データレポーティング・ビジュアライズ」の2製品を無償で提供することを発表した。 また、Googleアナリティクスには機械学習による「セッション品質スコア」の機能を追加、Googleタグマネージャーには、TwitterやNielsenなどのタグを追加するなど、機能を強化する。 アナリティクス 日本版 公式ブログ: 新製品の発表：スマートに、より早くアクションに導く分析をすべての皆様へ新たに2つのツールを無償提供へグーグルは、次の2製品を無償で提供する。 Google オプティマイズ（ベータ） ―― ウェブとモバイル向けの、A/Bテストとパーソナライズのツール。 Google データスタジオ（ベータ） ―― レポーティングとビジュアライゼーションのツール。 Google オプティマイズは、これまでGoogle オプティマイズ 360として提供して

以下のタブコントロールに関する12のデザインガイドラインに従い、タブをサイトのナビゲーションと区別し、また、ユーザーが自信を持って、タブをクリックできるようにしよう。 Tabs, Used Right by Jakob Nielsen on July 9, 2016 日本語版2016年10月3日公開 Webのたいていの機能は非常にシンプルなGUIウィジェットで構成されている。しかし、すべてのダイアログコントロールを正しく利用しているサイトはめったにない。ラジオボタンやチェックボックスのようなシンプルなものでさえ、正しく使われていないことは多いし、ドロップダウンメニューに関しては、言うまでもない。というのも、ひどい扱いをされているからだ。そして、この記事では誤用されることの多い、もう1つのデザイン要素について論じる。その要素とは、タブである。 （今回論じるのは、下のスクリーンショットの例にあ

Googleは、答えを提供する点に関しては成功を収めている。しかし、Googleはどのようにして、成功しているかどうかを判断しているのだろうか？とりわけ、クエリが質問形式ではない場合は。 Googleによる評価方法 Googleが独自の基準を用いて、検索結果の品質を計測していることは明らかだろう。我々にとっての自身のサイトと同様、Googleはユーザーがクリックした結果を元にしたメトリックスをもっているはずである。事実、Googleは先日この点を認めている。 Googleがクリックの結果を分析する方針は理にかなっている。Googleが確認している可能性が高く、また、頻繁に話題になっていることも考慮に入れると、下記の要素を見ているはずだ。 ショートクリック(Short click) ショートクリックは、ウェブサイトからすぐにGoogleに引き返す行為を指す。当然だが、すぐに引き返されてしまう

SEO流入増。オンラインで商談・問い合わせ増加を達成。 1,700社が導入したコンテンツマーケ・オウンドメディア・ SEO対策分析サービス

しかし、サイトのカルーセルは果たしてユーザーの役に立つものなのでしょうか？　それとも、ただコンテンツを収納するための常套手段として利用されているだけなのでしょうか。 この問いを誰かに投げかけたとしたら、カルーセルはアンチパターン（よく陥りがちな避けるべき悪い典型例）だと答えが返ってくるでしょう。カルーセルが良いデザインだと思っていない人もいるのです。 Erik Runyon氏による調査によると、サイトの訪問者のうちの１％しかカルーセル上でクリックしないということが明らかになっており、しかもそのうちの84％の人が最初のスライドをクリックしているそうです。 Jared Smith氏は自身のサイトShould I use a carousel?で、もし選択の余地があるのなら、カルーセルを使うべきではないと言っています。おそらくSmith氏の主張はLee Duddell氏の考えからきているもので、