Webデザイン

必ず知っておきたい！11月のWebデザインにおける3つのトレンド

デザイナーなら必ず知っておきたい11月のWebデザインのトレンドについて紹介しています。普段はデザインしない、今まで実践したことがないというモノかもしれませんが、事例を知ることで広い視野を持ってデザインすることが可能になるはずです。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。

本記事は、10年以上フリーランスのライターとして活躍しているCarrie Cousins氏によって投稿されました。

あなたのデザインの殻を破り、何か大胆なことにチャレンジしましょう。

大胆さ自体大きなテーマですが、11月のユーザーの目を惹き付ける3つのトレンドを紹介したいと思います。以下が11月のデザイントレンドです。

1. 紫色のデザイン

いつだって紫色はあまり使われません。

ある特定のシチュエーションで使いにくかったり、この色自体に大きな意味があったりしてデザイナーが避けるからです。

特定のブランドの色としてもあまり使われませんし、いろいろな色と干渉してしまいます。

しかしもうそれはただの言い訳です。際立った紫色があちこちに見られ、感心するはずです。

モノトーンカラーシステム

無駄な要素のないシンプルなデザイン
写真の利用を最小限にする
宇宙がテーマ(紫にはよくある選択肢です)
暗めの紫(パステルカラーよりはむしろ)

デザイナーが使う特に暗く、深い色に顕著なのですが、紫自体が目立つ色なのでシンプルなフレームワークが最適です。

また、明るいタイポグラフィと相性がよく、女性的な感じは受けません。

トレンドとしては明るい紫を選んで、力強さを感じるデザインパターンの素材と組み合わせるといいです。

kikk

cancer

Driver

portfolio

Poster Show

[PR] Webデザインで副業する方法とは

2. あえて大きくしたボタン

すべてのデザインの中でボタンは一番重要かもしれません。

フォーム提出などのステップアクションを助け、ボタンによってユーザーは次のページに導かれます。

アクションの最終段階であり、ユーザーとインターフェースの間で動作を完結させます。

近頃、ボタンのデザインは進化してきましたが、デザインの中に大きなボタンを取り込むという手法が大きなトレンドといえるでしょう。 (ゴーストボタンという以前のトレンドの全く逆の手法と呼べますね。)

大きなボタンはユーザーにとって楽しく、一種のトリックでもあります。なぜかと言うと、ユーザーはどれがボタンでどれがボタンでないか知る必要があるからです。

他のデザイン要素のように消すことはできません。

ボタンと認識させるのにいい方法として「ホバーアニメーション」が挙げられます。以下では、3つの事例紹介しています。どのデザインもユニークなアプローチをとっていて参考になるでしょう。

1. bark：ヘッドラインに大きなイメージが映し出され、サブヘッダーのホバーの動きはクリックできることを示しています。

2. Mt.CubaCenter：植物の見分け方のサイトでホバーボタンが画面から消えて色が同化し、サイズも変わります。
アニメーションは見逃し難く、クリックしたくなるような描写になっています。

このデザインには2種類のボタンがあります。下にあるようにカードスタイルの画像に大きな紫の丸ボタンがあります。

丸いボタンの何がいいのかというと、「ボタンっぽさ」を感じるのです。

3. Simon Foster：このポートフォリオサイトは面白くて、ただ単純にボタンとして使っているわけではありません。それぞれのポートフォリオが関わったプロジェクトであり、ボタンでもあるのです。

シンプルな黒白のデザインがマウスのホバーによって急に鮮やかな色が出現するので、ユーザーはボタンをクリックしたくなるでしょう。

bark

plants

Mt.CubaCenter

simon

Simon Foster

3. 幾何学的なデザイン

幾何学模様をデザインに使う方法はたくさんあります。ナビゲーション、ボタン、バックグラウンドのパターンとして形を使えるでしょう。

硬く鋭い直線状の幾何学模様は、ユーザーに大きなインパクトを与えます。

最初に紹介しているSean Klassenのポートフォリオサイトは、花を使うことによってソフトな印象を与え、幾何学的な描写にすることでハードな印象も同時に感じさせています。ソフトとハードを同時に見せることでユーザーの目を惹くことができるのです。

これらすべての要素を結びつけているのが色で、バラの緩やかな曲線と急な角度の三角形がうまく折り合っています。

Webサイトをデザインして、ビジュアルインフォメーションを欠いてしまっているとき、幾何学模様を織り交ぜることで、無の状態から何かを作り出すことができます。

最後に、一般的な要素を幾何学模様に落とし込むことでもっと面白いビジュアルにできます。

例えば下にあるCobay.esのマウスは、もしこの白いネズミが普通のデザインだったらあまり興味を惹けません。

ユーザーが見る画面では、幾何学模様のデザインとは違って、アニメーションされた動く形が視覚的に面白いのです。

klassen

Sean Klassen

conference

Projekcje

cpbay

Cobay.es

結論

今回紹介した大胆なデザインを試してみてはいかがでしょうか。

際立った色、大きなボタンと楽しい幾何学模様は、たとえそれ単体で使ったとしても使えるテクニックです。ぜひ好みのデザインを実践してみてください。

他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。Webデザインのスキル、概念を身につけたいという方はぜひご覧ください。

簡単にECサイトが完成する！ネットショップ作成でおすすめのテンプレート10選

ECサイト(ネットショップ)を作成する際におすすめのテンプレートをまとめています。最近では無料でもおしゃれなテンプレートが増えてきているので、サイト作成...

Webデザイン

入門向け！レスポンシブデザインの学習に役立つおすすめの本5選

Webデザインの制作においてレスポンシブデザインの知識はもはや必須となってきました。レスポンシブデザインを学ぶ際はネットで学ぶこともできますが、やはり本...

Webデザイン

クリエティブな仕事場を！デザイナーのためのワークスペースまとめ

本稿は、designmodoのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、フリーランスのWebデザイナーPaula Borows...

Webデザイン

【誰でも簡単に！】ドラッグ&ドロップでWebサイトが作れる「Weld」が便利すぎる！

Webサイト・スマホアプリ制作をする上で便利すぎるツール「Weld」が登場しました。これまでも【プログラミング要らず！】スマホアプリが開発できるおすすめ...

Webデザイン

Webデザインを勉強する時に参考にしたいまとめサイト・記事25選

Webデザインをこれから勉強しようと思っても、どこから始めていいかわからないということはないでしょうか？そこで、今回はWebデザイン（ホームページ）を勉...

Webデザイン

Webデザイナーの仕事内容！実際のデザイン業務を現役 Webデザイナーが解説

Webデザイナーの仕事内容についてまとめています。 Webデザイナーは未経験からでも働いている人が多くいます。スキルを身につければ環境に左右されずに働くこ...

Webデザイン

あわせてよく読まれている記事

今年のトレンド！2016年最も売れたフォント、トップ50を集めてみた

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。また、本記事は、Doru Ciobanu氏によって投稿されました。タイポグラフィは、独自の世界観、テクニック、統一感を組み合わせたアートです。素晴らしいデザインには、素晴らしいタイポグラフィがあります。 Webデザインまたは出版物のデザインでも、パンフレットやユーザーインターフェースのデザインでも、ロゴのデザインでも、プロジェクトを成功させるために重要な鍵となるものの1つはフォントです。フォント、色、その他デザインをどのように組み合わせるかという選択が、成功と失敗の分岐点となります。こうした細部に十分な注意を払わないがために、優れた製品を生み出すために費やした全ての努力が無駄になることもあります。しかし幸いなことに、優れたタイポグラフィのためのガイドとなるリソースは、豊富に存在しています。そして、これから紹介するのは、2016年に最も売れた50のフォントです。 1. FF DIN デザイナー：Albert-Jan Pool デザインされた年：1995 発行者：FontFont FF Dinは、1995年から2009年にかけて、オランダのデザイナーAlbert-Jan Poolｚ氏によって制作されたフォントです。FF Dinには、20のウェイト（フォントの太さ）があります。編集、出版物、広告、パッケージ、ブランディング、クリエイティブ産業（creative industries：知的財産権に関わるデザイン）、ポスター、看板、Webや画面の設計に適しています。なお、キリル文字とギリシャ語の書記体系については、サポートが限られています。 2. Brandon Grotesque デザイナー：Hannes vonDöhren デザインされた年：2010 発行者：HVD Fonts Brandon Grotesqueは、6つのウェイトとそれに対応する6つのイタリック体から成る、有名なサンセリフのフォントです。このフォントは、可読性を高めるために光学的な修正を加えた幾何学的形状から、インスピレーションを受けています。 Brandon Grotesqueは機能的かつエレガントなフォントです。ウェイトの太さをthinで色をブラックにすると、展示デザインに適しています。 Brandon Grotesqueは、洗練されたプロフェッショナルな印象を与えるデザインを生み出すには良い選択です。また、西ヨーロッパ言語だけでなく、中欧および東ヨーロッパ言語をサポートする拡張文字のセットもあります。 [PR] Webデザインで副業する方法とは3. Century Gothic デザイナー：Monotype Design Studio　Sol Hess　Morris Fuller Benton デザインされた年：1990-1995-2007 発行者：Monotype Century Gothicは、Futuraフォントの競合他社の2つの書体から派生したフォントですが、Futuraフォントの影響も強く受けています。軽くて広々とした印象の書体であり、クリーンな縁取りを備えた、細部まで完璧なフォントです。見出しや大きな看板のデザインには理想的です。 4. Proxima Nova デザイナー：Mark Simonson デザインされた年：2005 発行者：Mark Simonson Proxima Novaのフォントファミリーは、有名なProxima Sansフォントの完全な復古版です。OpenTypeフォント機能は48個に拡張されました。 3つの幅には、それぞれ16のフォントが対応しています。人間的な比率と幾何学的なデザインを組み合わせた、スタイリッシュなフォントです。ほとんどのラテン語系言語の文字をサポートしています。 5. Avenir デザイナー：Adrian Frutiger デザインされた年：1988 発行者：Linotype Avenirも、Futuraフォントの影響を受けたフォントですが、幾何学的なデザインを取り入れたフォントではありません。垂直方向の文字が、水平方向の文字とアセンダ（アルファベット文字において、標準的な高さのx文字よりも背の高いb、fなどの文字の、上に突き出た部分）よりも太い幅になっているデザインです。可読性が重視されるテキストに最適です。 6. Helvetica Neue デザイナー：Edouard Hoffmann デザインの日付：1983 発行者：Linotype Helveticaは世界で最も人気のある書体の1つであり、マーケティングが成功した例です。このフォントファミリーは51種類のウェイトから構成されています。古典的なサンセリフのフォントであり、時代を超えたニュートラルなデザインです。あらゆるコミュニケーションや情報媒体に適したデザインです。 7. Avenir Next Pro デザイナー：Adrian Frutiger　Akira Kobayashi デザインされた年：2004～2007 発行者：Linotype Avenirファミリーは、これまでに作成されたフォントファミリーの中で最も優れたものの1つですが、画面上での表示の問題があったため、これを解決するために代替フォントのAvenir Nextが開発されました。 32種類のフォントから構成されています。：それぞれに8種類のウェイトがあり、ローマ字とイタリックに対応しています。また2種類の幅を選択できます。グリフは、小文字と同じ高さの大文字、下付き文字、上付き文字、合字を含むように拡張されました。 8. Isidora デザイナー：Enrique Hernandez デザインされた年：2016 発行者：Latinotype Isidoraは、機能性に重点を置いて開発された、現代的な幾何学的フォントです。表現力豊かでフレンドリーな印象ですが、合理性を兼ね備えたフォントでもあります。 Isidoraは28種類のフォントから構成されていて、サブファミリーフォントとして、7ウェイトの2つのフォントがあります。ロゴ、ブランディング、見出し、パッケージ、Web上での利用、出版物に最適です。複数の言語をサポートしているユニバーサルデザインフォントです。 9. Sagona デザイナー：Rene Bieder デザインされた年：2016 発行者：Rene Bieder 力強いセリフ体を特徴とするフォントです。小さな文字サイズのテキストと見出しの両方に使用できる汎用の書体です。このフォントファミリーはイタリック体に対応していて、9つのウェイトがあります。 OpenTypeフォントの機能として、代替グリフ、合字、オールドスタイル数字などが幅広くサポートされています。 10. Trade Gothic デザイナー：Jackson Burke デザインされた年：1948 発行者：Linotype Trade Gothicは曲線的デザインのサンセリフ体のフォントです。サンセリフ体のフォント特有の厳密さを破っています。 Trade

Webデザイン

80年代スタイルが2017年注目のトレンドになる8つの理由

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、ライターのCarrie Cousins氏によって投稿されました。デザイントレンドには波があります。そして2017年のWebデザイントレンドの波は、まさに1980年代スタイルです。明るい色から、フラットデザイン、華やかな幾何学模様に至るまで、数多くのデザインに80年代スタイルの特徴が見られます。多くのデザイナーにとって、80年代スタイルは彼らの青春時代を思い出させるものでもあり、このトレンドに誰もが夢中です。この記事では、80年代スタイルが2017年のトレンドになる8つの理由と、このトレンドをプロのように使いこなす秘訣を紹介します。 1. すべての古いデザインは、新しいデザインとして再来する 80年代の申し子である人たちにとっては、少し心が痛むことかもしれませんが、80年代は一般的に古風な時代とみなされています。より婉曲して表現すると、80年代は「モダンレトロ」な時代といえます。この「古い」80年代スタイルの特徴は、かつての物理的要素または初期の画面用にデザインされた要素が、Webサイトやアプリに影響を与えているという点です。たとえば、初期の任天堂ゲームのレトロな雰囲気が漂うデザイン要素の使用、ピクセル化されたデザインの人気、ポスターやアルバムのレーベルのデザインの使用などです。しかし、80年代スタイルは新しいスタイルとして再来しました。それは、華やかな色使いを特徴とする80年代スタイルのすべての魅力を備えているだけではなく、素晴らしいアニメーション、スライダーから、読みやすいタイポグラフィに至るまで、現代のWebサイトに求められるものも備えています。そのため、これらのデザインは一見古い80年代スタイルに見えるかもしれませんが、実は新しくなったデザインなのです。例として、「The Vinyl Lab」のWebサイトは80年代美術のデザインですが、スクロールすると現代的な使い心地であることが分かります。また、スマートフォンやさらに小型のデバイス上でも同じように機能します。 2. パターンと図形は視覚的な魅力を生み出す幾何学図形とパターンを使うと、あなたのデザインに魅力を加えることができます。これらは、あなたのデザインを最近人気の高いミニマルスタイルから他のものへ修正したい場合にも、活用できます。幾何学図形とパターンのどちらを選択するとしても、モダンな印象を保ちながら、全体デザインの修正を行うことができます。どちらの選択が最適かは、あなたのデザインの外観から次のように判断するといいでしょう。デザインが整理されたものであり、かつ背景にあるものがコンテンツの邪魔にならない場合には、パターンを使用してください。画像や全体のデザインが少し退屈で無味乾燥な場合には、大胆でポップな色のまたは関心を引くような幾何学図形を、追加してください。以下の「Caava Design」の例では、カラフルな幾何学図形を追加することで、デザインに活気が生まれています。 [PR] Webデザインで副業する方法とは3. ファッションの影響 80年代のファッションは今年の最大のトレンドの1つになるとW Magazine（女性ファッション雑誌）は述べています。「なぜファッションがデザインに関係するのか」と疑問に思うかもしれませんが、これらには相関関係があります。ファッション、アート、インテリア、Webサイト、どのジャンルのデザインも、他のすべてのデザインに影響を与えています。パントン社の選ぶ今年の色の影響は、ポスターを制作するデザイナーだけにとどまらず、ほとんどすべてのデザインに影響を与えます。ランウェイに登場するものも、ビッグヘア（ボリュームのあるヘアスタイル）から、クロップトップ（丈の短いトップス）、レギンスに至るまで、Webサイトのデザインに影響を与えます。80年代スタイルは、ファッション雑誌の中のモデルの着ている服に現れるかもしれませんし、釣り合いが取れるように画像そのものに修正が必要になることもあるでしょう。たとえば、モデルの超特大サイズのヘアスタイルに合わせて、大きなタイポグラフィを使う必要があるかもしれません。服飾の生地のトレンドも、好まれる外観デザインの指標となります。もし消費者たちが、オレンジ色のシャツ、大胆なパターンのパンツを多く購入しているとしたら、彼らは同じようなデザインをオンライン上でも抵抗感なく好むだろうと予測できます。 4. メンフィスデザインのトレンドが牽引力となっている 80年代を代表するメンフィスデザインのトレンドは、明るい色、多くの図形や線を特徴としています。この美術パターンの起源は、1980年代のインテリアデザイナー集団であるメンフィスグループにあります。メンフィススタイルは、非常にフラットなベクトル化された要素を、漫画のようなスタイルで表現するのが特徴です。要素間のコントラストを最大限に高めるため、要素を白色や明るい色や黒色の背景の上にレイヤーで重ねることが、最近のデザインにはよくあります。これはメンフィスデザインのトレンドが牽引力となっていることの現れかもしれません。 5. 宇宙とダークカラーのスタイルは好奇心を刺激する 80年代スタイルは、暗い背景や宇宙のテーマの上にネオンを使用するアートスタイルでも、特によく知られています。「未知のもの」をテーマとしたデザインには強い魅力があり、カラーパレットには紫とオレンジまたは黄色の組み合わせが含まれていました。宇宙は特に80年代の支配的なテーマであり、宇宙をテーマとするデザインには今でも、80年代のデザインのノスタルジーが漂うものが多いのです。たとえば、最近のテレビ番組「Mars」は、以下のように、暗い背景と3Dデザインで明るい色のフォントのロゴを特徴としています。 6. マテリアルデザインとフラットデザインの影響力フラットデザインそしてマテリアルデザインは、デザインの最前線の話題に登場するようになりました。そのため、これら最新のトレンドがモダンレトロと融合しているのは、自然な成り行きです。 80年代のテーマと現代的な要素の融合は、色、レイヤースタイル、全体に見られるモダンな魅力などにも見ることができ、Webサイトへの訪問者が期待する新しいUIを生み出しています。 7. 「キュートな」アイコンのスタイルが再来している多くの80年代スタイルには、背景上にたくさんのキュートなアイコンを含んでいました。シャツの上の小さなヤシの木とサングラスから、ノート上の罫線や曲線に至るまで、アイコンはまさに80年代の「産物」です。そしてアイコンのトレンドも再来しています。数多くのスタイルを備えたアイコンは、デザインのフレームワークにおいて人気となるかもしれません。外観のデザインが不足している場合にも、アイコンを使うことで柔軟性が生まれ、コンテンツを整理するのに効果的です。 80年代のアイコンを使いこなす秘訣は次の通りです。小さなアイコンを全体的に散りばめてください。その配置がランダムに見えるほど、優れた80年代スタイルに近づきます。 8. 大胆な色は画面用に適している私のあるクライアントは、画面上のポスターが一般的にネオングリーン色でない理由を尋ねました。この理由は、画面上でネオンライトを本当にリアルに表現するためには、背景色が必要となるからです。明るい配色の人気が高まっているというトレンドは、フラットデザインやマテリアルデザインとも関係しています。これは、人気の高いミニマリズムが特徴とする、白と黒の配色への自然な反動とも考えられます。この変化は、デザイナーたちにデザインで遊ぶ自由さをもたらし、より独創的な色の自由が生まれるでしょう。結論 80年代のデザインが再来している最大の理由は、80年代スタイルがポップカルチャーに再流入していることです。あるいは、すべての世代がレトロな感覚を求めていること、またすべてのスタイルは、トレンドの周期を持っているということも、理由の一部かもしれません。しかし、ファッション、音楽などの分野に80年代の影響がある限り、同じ影響がデザインの考え方にも及ぶ可能性があります。80年代は楽しさのある時代であり、あなたのモダンレトロなデザインにもそれを反映するでしょう。 TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

Webデザイン

心理学から学ぶ！心地よいUXデザインを作る方法

本稿は、Design School Canvaのブログ記事を、Design School Canvaより了解を得て日本語翻訳し掲載した記事になります。過去10年の巨大企業のWebサイトを見てみると、その変わりように驚くだろう。初期のWebのスクリーンには、できるだけ多くの情報が詰めこまれていました。現在のWebサイトは、高度な研究と徹底的な計画のもとにデザインされたものであり、正しい場所かつ正しいタイミングでオーディエンスの注意を捉えるように設計されています。最先端の神経科学と心理学的研究を使って芸術であったものを科学に変えようと試みている企業は、日に日に増えつつあります。ウェイバック・マシン(Way Back Machine)で1990年代のWebのページを見てみると、メジャーなブランドのWebサイトのデザインがひどかったことにショックを受けるでしょう。1997年のアップル(Apple)のサイトを見てみましょう。これが世界のデザインの頂点の昔の姿です。そして、これが現在の姿です。 Webデザインは、実に大きな進歩を遂げてきた。この20年強で一般的なデザインのスタイルは大きく変化しましたが、これ以外にもWebデザインの変化をもたらしたトレンドがあります。最先端の科学的な研究と技術をテクノロジーに利用するということの最先端にあったのが、「Webデザイナー」です。こうした変化は、タブレットPCやスマホ、進化し続けるソフトウェアなどがもたらす、これまでとは異なる方法によるWebの閲覧方法に対応するために必要なものでした。しかし多くのデザイナーは、神経科学や心理学的研究で得られた成果をWebに導入し、ユーザーにとってより直感的に、より理解とナビゲートがしやすく、究極的にはオンライン世界を過ごしやすい場所を作ろうとしているのです。では、Webデザイナーは神経科学や心理学における最新の研究を使ってデザインのインパクトを最大化するにはどうすればよいのでしょうか。ここに取り上げたのは、オーディエンスの脳に直接訴えかけるようなサイトのデザインに役立つ5つの最新の発見です。 01．オーディエンスの注意を捉える注意は、数十年にわたり神経科学が取りつかれてきたものであり、Webは注意を獲得するための新しいテクニックやアイディアの重要な実験場となってきました。注意の期間が短くなっていることは、良く知られています。インターネット上の注意の期間の平均は、いまでは5秒を切っています。人は一瞬でサイトを判断し、必要な情報がそこでは得られないと判断した途端にサイトを離れてしまいます。アイ・トラッキングは、長い間神経科学者が注意の測定に用いてきたツールです。ある一点をどれぐらいの時間注視していたかで、それが重要であるか否かを判断します。このアイディアをさらに一歩進めたのが、アイクアントというグループです。彼らは眼のトラッキングデータを使って予測アルゴリズムを作り、測定対象のサイト上でアイ・トラッキングを使うかわりにそのサイトのデザインをアイクアントのサイトにアップロードすれば、オーディエンスが対象サイトをどのように理解し、どこに注目したかを瞬時に答えてくれます。下の画像は、ジャストファブ(Justfab)というショッピングサイトのオーディエンスがどのパーツに注目したかのデータを表しています。ここでは数千人の参加者にドイツのあるWebサイトを見てもらい、注意を惹くものとそうでないもの、人々がサイト上の異なるアイテムをそれぞれどれぐらいの間見ていたか、さらにユーザーの眼を引くものは何だったかについての巨大なデータセットが作成されました。ここで明らかになったのが、何色であるかを問わずサイト上の色のコントラストが人の目を引くことで、サイト上のエッジの数はデザインが煩雑であるか否かを示し、ボールドのテキストやグラフィックのかたまり、そして人の顔がつねに注意を引くということだったのです。このページで取り上げたのは、ユーザーの眼を引きつけるために人の顔とボールドのテキストを使っているアマゾンの例です。ソフトウェアを使い、ビジュアルの明確さが経済上の決断にどう影響を及ぼしたかも研究しました。研究の参加者に食べ物が明示された場合、参加者は購買を決断する傾向が多く見られた。最新のアイ・トラッキング用ツールやソフトウェアは一般人には手が届かないかもしれませんが、人々が何をクリックしているかを見つける良い方法がいくつかあり、これで自分がデザインしたサイトを見てみると良いでしょう。スモミ（SumoMe）のヒートマップは、サイトを訪れたビジターがどこをクリックしているかを正確に示してくれるので、ビジュアル的な明確さを確保して最大限の注意を獲得するようにテキストやボタンを配置し直すことができます。脳の注意を獲得するコントラストやグラフィックに富み、人のイメージが多く使われたデザインは、脳の注意を獲得する。ただし、これがつねに正しいとは限らないことをデザイナーは理解していなくてはなりません。クールなグラフィックで誰かの注意を引くということは、それ以外に対する人の注意を逸らしているということでもあるのです。 [PR] Webデザインで副業する方法とは02.フィッツの法則を使ってボタンを完璧に配置するデザイナーがテキストやグラフィック、重要な情報をページに配置するのにアイ・トラッキングが役立つように、科学を使ってボタンがページのどこにあるべきかを決定するのに役立つテクニックがあります。 Canvaを使えば、簡単にいい感じの大きなボタンを使いやすい位置に配置できます。これらのボタンのサイズや位置には、偶然が入る余地はありません。ボタンは必要なときには簡単にアクセスできますが、それ以外のときは邪魔になりません。大きなサイズのおかげでCanvaデザイナーはカーソルでボタンを見つけることができます。 Canvaのデザイナーが知っていたかどうかは不明ですが、彼らはここにフィッツの法則を使っています。ポール・フィッツはアメリカの心理学者で、急速で目標を定めた人間の動き、つまりオンラインでボタンに手を伸ばすときと全く同じタイプの動きの定量化に初めて成功した人物です。フィッツの法則は、人間の動きにかかる時間は、目標までの距離を目標の大きさで割った数値に比例するとしています。すなわち、目標が近くにあるほど、あるいは大きいほど早く動けるということを意味します。これは当然だと感じられるかもしれません。ボタンを近づけるか大きくすればいいのでしょうか。必ずしもそうではないのです。ここが公式の複雑なところで、大きいことがいつも良いとは限りません。ボタンを大きくするのは良いことなのですが、ボタンが大きくなるにつれ性能の向上度合は下がってしまいます。小さいボタンは20％大きくなると性能も等しく向上しますが、大きなボタンにはこれが当てはまりません。フィッツの法則で最適なWebボタンのサイズを確実に決めることは出来ませんが、MITのザ・タッチラブ(The Touch Lab)にはこれが出来るようです。タッチラブの研究によれば、Webボタンの最適な幅は48ピクセルで、大人の指先の幅にほぼ同じである。 Webブラウジングの50％以上はモバイル機器が占めているため、デザイナーはカーソルとタッチの両方に対応したデザインをしなくてはなりません。フィッツの法則は、配置の重要性も示しています。ひとつのボタンから次のボタンに早く移動してもらいたいという場合は、ボタン同士が近接している必要があります。これは、チェックアウトやサインインなど、ユーザーがある手順に従い、ボタンを押してから次に進まなくてはならないという場合に極めて重要になるのです。アマゾンは入力フィールドとボタンをうまくまとめて配置し、次への動き確実にしやすくなるようにしています。最近、デューク大学の神経科学者たちがWebサイトのボタンのように位置も大きさも異なるターゲットを定め、動き、到達するという場合に、脳がどのようにしてこのような動きに正確に対応しているかに注目しはじめました。彼らは脳が実際の動きが始まる前に動きを計画し、身体の動きの制御を行う一次運動野の脳細胞が、信号を発する率がターゲットのサイズに比例することを発見しました。ターゲットが大きくなるほど信号の発信率が高まった。デザイン上の動きを計測するアプリで手に入れやすいものは少ないですが、UCバークリー校のサイトとこのサイトは、フィッツの法則を計測できるという優れものです。ここでは、Webデザインに使われているものと同じターゲットのサイズとそれらの距離をテストすることができます。その結果からターゲットへの到達のしやすさあるいは難しさが分かるので、そのデータを使ってデザインを改善することが可能になります。完全な脳のボタン到達しやすさのためにボタンを大きくすると、大きくなるほどにその効果は低減します。最適なWebボタンのサイズは48ピクセルで、人の指の幅にほぼ同じです。つねにボタン同士の位置関係を考えておかなくてはならなりません。ページの端から端に行くのにジャンプしなくてはならないようなサイトをデザインしてしまうと、ボタンが大きくても動きは困難になります。一連の流れに沿ってボタンをクリックしなくてはならないシステムをデザインする場合、どのページでも見つけやすいようにボタンは同じ場所に配置すべきです。 03. シンプルに、親しみやすくする第一印象は重要です。実は、第一印象は人が気づくよりもはるかに速く形成されています。スイスのバーゼル大学の心理学者のグループがグーグルと協力して、Webサイトを訪れた人の第一印象が、どれほど速く形成されるのかの発見を試みました。第一印象はどれほど速いのでしょうか。 Webサイトのデザインについての美的な決断は、17ミリセカンド(17/1000秒)以内に行われる。比較のために、瞬きにかかる時間は、150ミリセカンド以上です。Webサイトが好きかどうかは、瞬きの10分の1以内で決まってしまいます。実に速いのです。研究者たちは、実験の参加者にWebサイトを17ミリセカンド(瞬きの１/10)から1000ミリセカンド(1秒)までの異なる時間の間見せ、サイトについての意見を聞きました。そのWebサイトは「ビジュアル的複雑性」および「プロトタイプ性」に分類されるものでした。ビジュアル的な複雑性が低く、プロトタイプ性の高いデザインは、つねにビジュアル的に魅力があると評価されています。人は、どうしても慣れ親しんだシンプルなサイトを好んでしまうのです。ホールデザイン・スタジオ(Whole Design Studio)のホームページは、この事実を完全に証明しています。爽やかで美しいデザインですが、Webページとしては理解可能です。アレッサンドロ・ギウアのデザインはシンプルだが、プロトタイプ性が低いので、最初の17ミリセカンドでビジターは興味をなくしてしまうでしょう。これには明らかなデザインの関連性があります。デザイナーはエンベロープ（外側）を強調することでオーディエンスに今までに見たことのないようなものを見せようとしますが、これは人が実際にサイトにとどまるかどうかを台無しにしかねない効果を持ちます。この決断は数ミリセカンド以内の短時間で行われるため、大多数の人々は素晴らしくアバンギャルドなデザインをじっくり眺めるということはありません。よりシンプルで典型的な配置とデザインのサイトは、ビジターにより強くビジュアル的にアピールし、ビジターはより長い時間サイトに留まることになります。複雑な脳のためのシンプルなサイト：極めて短い時間でサイトについての決断を下す人間の能力は驚異的です。人は速やかに決断を下します。デザイナーは、自分のデザインのエンベロープを強調したがるでしょうが、典型的なデザインのWebサイトから離れれば離れるほどサイトに留まる人は少なくなります。デザインをクリーンでシンプルにし、ユーザーがクラシックだと思うWebデザインをいじくり過ぎないことが肝心です。 04. サイトはソーシャルでエモーショナルにフランスの哲学者ルネ・ジラールは、すべての人間は「模倣欲求」によって動いていると言いましたが、フランスの神経科学者たちも彼の説を肯定しています。模倣欲求は、他人が何かをしない限り人が何かを欲することはあまりないというアイディアです。すべての人間の欲求は、他人によって惹起されます。2015年にWebデザインに携わっている人間は、違う名前でこれを知っています。すなわち、社会的証明です。基本的に人はまず他人が何をしているのを見てから、行動を起こすことが多いのです。パリを基点とする神経科学者たちが、この模倣欲求に関連する神経の動きに注目しました。研究への参加者には、同じ物がふたつ見せられました。最初にある物を単独で見せておき、二度目には他人の欲求のゴールとしてそれを見せました。参加者の欲求は、どの場合でも他人が欲した物が高くなりました。このタスクを行っている間中、参加者の脳はスキャンされていました。神経科学者は、他人の行動の理解を担う脳のミラーニューロンシステムがビデオを見ることにより活性化し、これによりものの価値を決定するヴェントラルストリアトプリフロンタル・ネットワークが活性化したことを発見しました。 Webサイトに社会的証明を付加する方法は数多くあります。なかでもベストなのは、既存の顧客による評価を使ってブランドの良さを訴求することです。これが効果的なのは、その評価が新規の顧客と同じ価値観を持つ人々によってされたものだからです。互いに良く似た人同士であるから、彼らが欲するものが同じであることが分かることによってミラーニューロン、すなわち脳の価値判断システムが活性化します。これはヘルプデスクのソフトウェア会社であるデスク．コム(Desk.com)のサイトで、他のウェブ会社のCEOに対する社会的証明にユーザーによる評価を使っています。感情は、特に広告においてはオーディエンスを確保するための素晴らしい方法である。特にあらゆる広告において、エモーショナル(感情的)な要素のないデザインは、忘れられやすいです。しかしエモーションやエモーションが顕な人を加えると、そのデザインは脳にとってはるかに魅惑的で興味深いものになります。顔の表情がすべての文化において共通であることは、研究により明らかになっています。それゆえ、笑顔の女性を見た場合に、人は瞬時に彼女がどう感じているかを理解し、彼女の感情を旅に結びつけ、さらにユーバーというブランドと結びつけることになります。デザイナーは、つねに人間の社会的および感情的な側面への引き金になるものをサイトに加える機会を求めなくてはならない。ユーザーによる評価や推薦、会員数などの社会的証明をWebサイトに加えるのは簡単です。人と感情をサイトに加えることにより、ユーザーはサイトのデザインにより親しみを持ち、ブランドとユーザーを結びつけることによって他のサイトのユーザーと差別化します。 05. 流れに沿って進む人はある決まった方法でWebサイトを読むため、その流れに逆らうと、人々が望む親しみのあるデザインに対する欲求を満たせないサイトになってしまいます。新聞の全盛期には、「ビロウ・ザ・フォールド」というコンセプトがありました。新聞は売店で二つ折りされるため、折り曲げた部分より下にあるストーリーの重要性は低く、読まれる率も低いと考えられていました。 Webサイトの時代になっても、この不動産価格的な問題は生き続けています。マーケティングビデオ会社のウィスティア(Wistia)は、特にビデオの場合「アバウブ・ザ・フォールド」がいまだに現実であることを発見しました。彼らはページを７つのゾーンに分割し、各ゾーンにおけるビデオの再生率をテストしました。予想通り、ビデオはページの下部にあるものより最上部にあるもののほうが再生される回数が多かったのです。また、場所により急激に再生率が降下することも分かりました。ビデオは、ページの上部になければ再生されなかったのです。ウィスティアは、自社のサイトでもビデオを前面中央に配置し、このアドバイスを実践しています。重要な情報をすべて前面に配置することに加え、デザインではビジターはWebページをスキャンするという事実も考えておかなくてはなりません。人はどのようにWebサイトを読むのかの研究では、人の眼の動きとそれが固定する点が明確にFの形を形成することが明らかになりました。まず人はヘッドラインを読みます。続いて最初のパラグラフの一行目の文章を読み、その下にあるサブヘッドを次々に読んで行きます。眼の動きのヒートマップ上でこの動きが明確なFを形作るのです。心理学者のアリック・シグマンによれば、Webページをスキャンしているとき、人が真に探し求めているものは、ドーパミンなのだと言います。この過激なスキャン行動の理由は、人間がすぐに手に入る報酬、気分が良くなるような何かを求めているからだとシグマンは示唆しています。ドーパミンは脳における報酬の薬物であり、人が求めているものを獲得するとドーパミンが放出されます。わずかな情報やゴシップ、ニュースあるいは笑いをWebサイトで得ると、喫煙者や中毒者が欲しいものを得たときのようにWebサイトのユーザーも少量のドーパミンを得るのです。人がインターネット中毒になる理由は、これだ。ドーパミンの高騰が人を中毒者にするのだ。 Fパターンには、Webページを非常につまらなく見せてしまうという問題があります。優れたデザイナーであれば、研究の成果を利用しつつ驚異的なデザインを実現することも可能です。アイゼトル(iZettle)のページを見てみましょう。一見このサイトはFパターンではないように見えますが、実はFパターンなのです。メインのテキストは最上部にあり、眼の動きはそこから行動喚起部まで下がっていきます。デザイナーは背景に大きなイメージを使うことにより、この動きをビジュアル的に興味深いものにしています。脳の流れのためにデザインするあらゆるWebデザインにおいて、重要な情報は誰もが見ることができる最上部に置くべきです。テキストの多いサイトをデザインするときは、サブヘッドを使ってテキストを分割するか、イメージを使って分割すると良いでしょう。こうすると、読者は自然に焦点を合わせるポイントを見ることになります。次に必要なものは何か現代はWebデザイナーにとって、またデザインの変化を支える研究にとって刺激的な時代です。これからのトレンドは、タッチやボイス、ジェスチャーなど今までとは違うユーザーインターフェースに向かうでしょう。人間にとってより直感的な方法でコンピュータやWebとやり取りする世界、そしてポイント・アンド・クリックから触覚によるコントロールの世界に進むという場面には、完全に新しいデザインの機会が待ち構えています。その向こうには何があるのでしょうか。フィッツの法則の研究に携わった科学者たちは、機械の制御に関する次の大きな変化がどうなるかについてコメントしています。それは、マインドコントロールです。脳波を読み取れるヘッドセットはすでに市販されていて、思考で直接機器類を制御することが可能になっています。これからの10年でこれらはさらに洗練され、まったく新しいデザインの領域が開けるはずです。他にも、Webデザイナーとはどんな仕事をするのか詳しく紹介しているので、合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でもアプリのデザインができるようになるアプリUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

アプリデザイン

1900年代のデザインの歴史から学ぶ！デザインの基本とは

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Dmitry Fadeyev氏によって投稿されました。近年人気の高い「フラット」なインターフェースのデザインは、単なるトレンドではありません。それは真のデザインへの欲求の現れです。つまり、視覚的に過剰なものを抑え、偽物や余分なものを排除しようとする欲求です。技術の進歩はときに過剰なものを生み出すことがあります。 19世紀には、機械化された大量生産によって、装飾品を早く生産することができるようになり、その結果、製品は過剰に装飾されるようになりました。近年、同様のことがデザインの世界でも起きています。ディスプレイやスタイリングの技術の進歩によって、デザイナーたちはリッチな外観のインターフェースをデザインすることが可能になりましたが、その結果、スキュアモーフィックデザイン（現実の質感を模倣したデザイン）やスタイリングが過剰になりました。モダンデザインの運動は、本物のデザインを求める過程で、19世紀の過剰な装飾を抑制することによって、現代の大量生産によりふさわしいデザインを生み出しました。目次モダンデザインの誕生デジタルの装飾本物のデザインミニマリズムではない本物のデザインが重要である理由モダンデザインの誕生 1908年、オーストラリアの影響力の強い建築家であるアドルフ・ロースは、『装飾と犯罪』という挑発的なタイトルのエッセイを書きました。ロースは、「現代の装飾主義者たちは、文化的に遅れているか病理の症例である。彼らの作品は今後3年も持たないだろう。彼らの生産したものは、文化人には受け入れがたいものであり、他の人々にとってもやがてそうなるだろう。」と主張しています。さらに大胆にも、「人々の水準が低いほど、装飾は贅沢になる。装飾に依存するのではなく、形に美しさを見つけることが、人類が目指すべき目標である。」と主張しています。なぜロースは装飾を批判するに至ったのでしょうか？モダンデザインの先駆者であるロースのマインドセットを理解するには、初めに19世紀のデザインの実態を知る必要があります。蒸気機関の発明によって、機械化された大量生産の時代が始まりました。美術評論家のフランク・ウィットフォードは、「蒸気駆動の機械は、人間の手作業よりも速く、より規則的にほぼすべての物質を切って型抜きして、生産することができます。生産が機械化されたことにより、より低い価格でより高い利益が実現されています。」と書いています。しかし生産方式が人の手作業から機械に変化した一方で、製品のデザイン自体は変化しませんでした。建築や家具から衣類や食器に至るまで、ほとんどの製品には、ルネサンス時代からの伝統的なデザインに基づく、豪華な装飾が加えられていました。歴史的に、人の手作業による装飾品は生産コストが高く、富と贅沢の象徴とされてきました。しかし機械化によって、こうした需要の高い装飾品の模造品を安く早く生産できるようになりました。どのようなデザインが大量生産に適しているのかを立ち止まって考えることもなく、メーカーは低コストで歴史的なデザインを模造することができる機会に飛びつきました。その結果、アドルフ・ロースをはじめとするモダンデザインの先駆者たちが批判したような、低品質で装飾が過剰な製品が氾濫するようになったのです。有名な建築家であるル・コルビュジエは著書の『今日の装飾芸術』の中で、「ごみが豊富に装飾されているものである。」と遠回しに批判しました。また「贅沢な物は、しっかりとした造りで、美しくクリーンで、純粋で健康的です。無装飾なそのままのものには製造のクオリティが現われます。しかし、製造業界ではこのことが逆転しています。装飾の多い鋳鉄製のストーブは、普通のものよりも生産コストが低いのです。というのも葉のパタンの装飾が多く施されていれば、鋳造の欠陥が見つかりにくいからです。」と述べています。また、影響力のある批評家・ジャーナリストであるモントゴメリー・シュイラーは、19世紀のファサード（建築物の正面）の装飾について批判しました。「もし通りの建築物の表面の装飾を削り取ったとしたら、すべての建築スタイルを取り除いたことになるが、今までと変わらない良い建築物になるだろう。」と述べています。「超高層ビルの父」として知られる建築家のルイス・サリヴァンは、「元型として良く形成された美しい建築物を生み出すことに集中するために、何年もの間、装飾をやめるとしたら、私たちの美学的な利益に資するだろう。」と述べ、装飾を抑制することを主張しました。 1920年代には、ドイツで新即物主義という美術運動が起こりました。新即物主義は、純粋な実用性をデザインに求める運動でした。ドイツの建築家ヘルマン・ムテジウスは、彼自身が機械のスタイルと呼ぶものを生み出すために、実用性をスタイルにどのように適用できるかを説明しました。ヘルマンは、「鉄道列車の駅、展示ホール、橋、蒸気船などにその例を見ることができます。一方、他のモダンデザインの先駆者たちは、装飾を批判する代わりに、機能的な形態を高めることに集中しました。 1934年、近代建築家のフィリップ・ジョンソンによって企画された展覧会「マシンアート」が、ニューヨーク近代美術館で開催されました。展示品として、飛行機のプロペラや産業用断熱材など、さまざまな機械的な備品が並んでいました。この展覧会の目的は、純粋に機能的な目的に従った形態を持つ物の美しさを強調することでした。そして、美しさと上品さは、表面的な装飾からではなく、デザイン自体から生まれるということが示されたのです。モダニズムの運動が浸透するには、20世紀前半の時間の多くを要しましたが、最終的にはこの新しい手法が、伝統的なスタイルや技術に勝利しました。 Jonathan Woodhamは、著書『Twentieth Century Design』において、「現代の美学は、クリーンな幾何学的形状・クロムメッキ加工された鋼・ガラスなどの現代的な素材の使用、平面の明暗への人工的な操作によって特徴づけられる。色の使用はしばしば抑制され、ホワイト・オフホワイト・グレー・ブラックなどの色が強調される。」と述べています。モダンデザインの運動が全体として反装飾的なものであったと見なすのは誤りです。アール・ヌーヴォーやアール・デコなどに代表される新たなデザイン様式が、現れては消えました。未来派のスタイルは、誇張された技術的な美学を推し進め、一方、デ・ステイルのスタイルは、数を制限したパタンや形の中に調和を見出しました。しかし、これらのスタイルの変容の根底にあったのは、必要のない装飾からの脱却でした。モダンデザインの運動は全体として、よりクリーンで、美しさを表面的な装飾よりもスタイルや形態そのものに見出すような、抑制されたデザインを求める運動だったのです。 [PR] Webデザインで副業する方法とはデジタルの装飾モダンデザインの歴史とソフトウェア・Webデザインの短い歴史を比較すると、似ている点があることに気づきます。機械化された大量生産が装飾の過剰使用をもたらしたのと同様に、ディスプレイやスタイリングの技術の進歩は、ソフトウェアのインターフェースやWebサイトにおいて過剰な装飾をもたらしています。初期のWebデザイナーたちは装飾に積極的であり、画像にアニメーションや音を加えて、過度にリッチで派手なユーザー体験を生み出しました。グラフィカルユーザーインターフェイスを備えた初期のオペレーティングシステムは、外観や使用感は依然として基本的なものでした。もっとも、ファイルのディレクトリを表すためにフォルダの画像を示したり、ユーザーにクリックできることを伝えるために面取り効果の加えられたボタンが示されるなど、現実世界に近いデザインにするための試みがなされました。しかし、Webデザイナーが視覚的にリッチなユーザー体験を創造したいと思ったかどうかに関係なく、当時は白黒の低解像度のディスプレイであったため、デザインは全体的にフラットで抑制されたものでした。技術の進歩に伴い、デザイナーたちはインターフェースの外観デザインにおいてより大きな自由を獲得しました。MicrosoftはWindows XPで、カラフルなスタイルを導入し、ハイライト、シャドウ、グラデーションを豊富に使用した外観になりました。さらにAppleは、新たにリリースしたMac OS Xで、光沢感のあるプラスチック製の泡、ブラシ加工されたアルミ、リアルなアイコンなどをインターフェース上で表現することに成功しました。また、MicrosoftはWindowsに、光沢感のある透明なガラスのようなテーマを加え、Appleはカレンダーアプリに革のテクスチャを導入したり、ブックリーダーにページめくりの機能を加えるなど、デスクトップおよびモバイルのシステムにより実物に近いデザインを導入しました。現実世界のオブジェクトやテクスチャを模倣したスタイルのことを、「スキューモーフィズム」といいます。インターフェースをユーザーにとって親しみやすい外観にするという唯一の目的のために、デザイン要素は現実世界の物に似せて作られます。しかしデザイナーたちは近年、ノートアプリを紙のメモ帳に似せてスタイリングすることや、カレンダーアプリに革のテクスチャやページめくり機能を加えることの理由に疑問を感じ始めました。これらの効果はユーザーの関心を引く外観をデザインできますが、現実世界の静的な物体を、それとは相容れない流動性やダイナミズムのあるデジタル世界のインターフェースと結び付けようとする過去の遺物なのです。 MicrosoftはWindows 8のリリースで、こうした過剰な外観から脱するために勇敢な一歩を踏み出し、オペレーティングシステムを完全にデジタル化して「本物の」外観にすることを試みました。インターフェイスは、Microsoftが初期のモバイルリリース用に適用した原則に基づいて設計され、テクスチャや現実世界のオブジェクトの模倣をほぼ完全に排除した外観となりました。その代わりにデジタル画面に秩序と上品さをもたらすために、Windows 8は、タイポグラフィ・間隔・色に工夫がなされています。現実世界を模倣した効果、過剰なスタイルを排除した後に残ったのは、シンプルなコンテンツのみでした。かつてヘルマン・ムテジウスが、鉄道列車の駅を例として挙げたように、Microsoftのデザイナーたちは、「Metro」という名称で知られれるWindowsのインターフェースのインスピレーションを、地下鉄の駅の標識から得たと述べています。また、近年Webも同様の変容を遂げました。表やFlashに基づく初期のデザインによって、エンジニアはインターフェースをピクセルパーフェクトに制御することが可能になり、デザイナーもコンテンツのためにリッチな外観を備えたコンテナをデザインすることを躊躇しませんでした。しかし、新しいメディアの流動性を受け入れ、CSSを使用してデザインとコンテンツを分離するようになるにつれて、Webデザインはより拘束されるようになりました。装飾が多く加えられたコンテナは、幅や位置の変更が容易ではありませんでした。そのため、デザイナーは画像の数を減らして、レイアウトをより適応性が高く保守しやすくするためにCSSのスタイリングを使うようになりました。近年はレスポンシブデザインの進化、またデザイナーたちにはPhotoshopを使わずに最初からコードでデザインを始める傾向も見られます。こうした動向は、テクスチャや装飾的な画像を多用するのではなく、タイポグラフィ・間隔・色から美しさを引き出すような、よりシンプルでコンテンツに焦点を当てた、本物のWebデザインの美しさを推し進めています。 Appleも、モバイルのオペレーティングシステムであるiOS 7のリリースにより、本物のデジタルデザインへの第一歩を踏み出しました。縫製の革のテクスチャ、破れたページ端のデザインは消え、代わりにシンプルなアイコンと半透明な表面を備えた、ほとんどフラットなデザインのインターフェースとなりました。本物のデザインモダンデザインの先駆的な時代から、現代のソフトウェアおよびWebデザインの変容に受け継がれているものは、本物への欲求です。この欲求こそ約100年以上前にデザイナーたちの作品から装飾を削ぎ落としたものであり、現代のデジタルデザインをよりクリーンで、より機能的な美しさを備えたものに変える原動力となっているのです。しかし、正確には何がデザインを「本物」にするのでしょうか？本物のデザインの目的は、偽物を否定し余剰を排除することです。本物のデザインは、偽物のテクスチャで素材をマスキングしたりせずに、弱点を隠す代わりに強さを見せるものです。そして製品をより親しみやすく、または魅力的に見せるためだけの無意味な機能を排除します。機能は最適な形態で表現され、効率性にこそエレガンスさがあることに確信を持てるものです。そして表面的な装飾を排して純粋なコンテンツに美しさを見出します。本物のデザインにおいてスタイルが重要ではないということはありませんが、装飾によって追求されるものではないのです。むしろ、形態の美しさはコンテンツに依拠するものであり、スタイルはクリエイティブな解の結果として自然に生じるものです。スージック.Dは、アングルポイズスタイルのランプ（以下画像参照）について次のように言及しています。「ランプがどのように見えるかは――特にシェード（笠）の部分は――後付的なことでした。しかし、そのことは魅力的なことであったのです。ちょうどランドローバー（イギリスの自動車メーカー）の初期のデザインは、消費者受けを狙ったというよりも、技術的に独創的なアイデアを基礎としていたことで信頼性を高めたように、審美性を考慮しない本来のピュアな形態からこそ、本物が生まれるのです。」デジタルデザインにおいては、デザインは大きく次のように集約できます。デジタルな外観を保持すること金属、木材、革などのテクスチャをコンピュータの画面上で模倣する必要はありません。デジタルインターフェイスはこれらの素材から作られているわけではないので、模倣することには意味がありません。しかし、平面のフラットな背景色だけでデザインするべきだということでもありません。むしろ、現実世界のテクスチャを模倣しようと試みたり、それに拘束されるべきではないという意味です。スキューモーフィズムを排すること電子書籍は、ページをめくるときに実際の紙を模倣する必要はありません。またノートアプリも、革のカバー、破けた紙の切れ端、手書き風文字などを備えた実際の紙のメモ帳のように見える必要はありません。スキューモーフィズムはいつも悪となるわけではありませんが、インターフェース上に不必要な制約を生み出します。例えば、メモ帳アプリのインターフェースを、現実世界のものに似せて作ろうとしたら、物理的な模倣をすることに制約が生じます。一方、静的で一次元なデザインにするとしたら、そうした制約はありません。コンテンツを中心にしたスタイルにすることスタイリングや装飾よりも、コンテンツに集中しましょう。このことは当然に思えるかもしれませんが、多くのWebサイト上では、既製のテーマが繰り返されているのではないでしょうか？テーマは常にダミーのコンテンツをベースに作られているため、本質的に、最適なコンテンツを表現することは不可能です。ダミーのテキストによってテーマを作る場合には、すでにコンテンツは形骸化しているので、デザイナーはスタイリングと装飾に走ることになるでしょう。ミニマリズムではない機能性に美しさがあるデザインは、ミニマリズムのデザインとは同じではありません。前者は、使いやすく、効率性の高い、利用性が最大限に高められた製品を生産するために、デザイナーが余剰を排除して生まれるデザインです。一方、後者はミニマリズムの美学を追求することにより生まれるデザインであり、オブジェクトにシンプルさと美しさをもたらします。一方はデザインの基本原則であり、もう一方はスタイリングの選択肢なのです。インターフェースをよりシンプルで「本物」らしくするために、ミニマリズムのデザインを、スタイルとしてインターフェースのデザインに厳格に適用することは、間違いです。例えば、シャドウ、色、背景の多様なスタイルなどを見境なく排除する場合、必ずしもインターフェースが使いやすくなるとは限りません。ジョン・マエダは著書の『シンプリシティの法則』の中で、「シンプルさを達成する最も簡単な方法は、思慮深い削除です。不確かな場合は、削除してください。しかし削除するものには注意してください。」と述べています。要素を削除することがシンプルさにつながるのは、ユーザーが処理するアイテムが少なくなるからです。しかし、ユーザーがインターフェースの操作を理解するための視覚的な手がかりまで削除することは、――アイテムをまとめ、要素を目立たせるためにボタンやラベルを区別化するのが、グラフィカル要素の役割であるため――かえってユーザーの負担が増えて逆効果です。そのため、ユーザーへのガイドは、スタイルによってというよりも、デザインの原則によって実現するべきです。本物のデザインが重要である理由 Riseというアプリは、本物のデジタルデザインの完璧な例の1つです。目覚まし時計はすでにアプリとして開発されていましたが、このアプリを開発した会社Simplebotsは、純粋なデジタルキャンバスのコンテキストにおけるインターフェイスを再考することで、概念にゼロから取り組んだのです。 Riseのインターフェイスにはフルスクリーンのスライダがあり、時間設定した時の空の色に合わせて背景色が変化します。現実世界の時計、スライダー、テクスチャなどは模倣していません。その代わりに、Riseのデザイナーたちは、モバイル端末のタッチキャンバス機能に対応するデザインを生み出し、端末を最大限に活用できるようなユーザー経験を創造しています。革新的なデザインは、優れたユーザー体験を実現するだけではなく、アプリ市場で目立つことができます。 Riseのようなインターフェースは、現実の世界にソリューションを求めるというよりも、デジタルなコンテキストの中で、完全に設計上の問題に取り組む場合にのみ実現可能です。コンピュータの画面上では、抽象的なフォーム、アニメーション、明るい色、均一なシェイドを表現することが可能です。カラーパレットを抑制したり、静的表現に限定する必要はありませんが、スキューモーフィズムに縛られてもいけません。ピクセル単位のグリッドを使用して、コンテンツを表現する最良の方法を理解することによって、より良いシンプルなソリューション、使い心地が良い画面を備えた革新的なインターフェースを実現することが可能となり、より良いユーザー体験を提供し、その他大勢から目立つようなアプリのデザインを実現できます。まとめ近年人気の高い「フラット」なデザインは、1つのトレンドかもしれませんが、余剰な装飾を排除してコンテンツに集中することへの欲求の現れでもあるのです。19世紀に機械化された大量生産によって過度な装飾を生み出したように、またディスプレイやスタイリングの技術が初期のWeb・ソフトウェアデザインにおいて同様に過剰なデザインを生み出したように、技術の進歩は過剰につながることがあります。しかし、機能性に美しさを求めたモダニズムの先駆者たちによって、過剰な装飾が時間をかけて排除されたように、今日のソフトウェアにおける過剰も、やがて真のデザインへの欲求によって排除されることになるでしょう。 TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。今後Webデザイナーとして働きたい、自分で思った通りのデザインを再現したいと思っている方はぜひご覧ください。

Webデザイン

【これからのトレンド！】フラットデザインのメリット・デメリットとは

本稿は、Design School Canvaのブログ記事を、Design School Canvaより了解を得て日本語翻訳し掲載した記事になります。そもそもフラットデザインについて詳しく知りたい方は、フラットデザインとはについても合わせてご覧ください。目次フラットデザインとはフラットデザインの一般認知メリットデメリットフラットデザインのこれからフラットデザインとはあなたは、フラットデザインがブログやデザイントレンド一覧で話題になっているのを見たことがあるでしょう。このシンプルなスタイルは、様々な表現ができますが明確には定義されていません。 3Dではないそのスタイルの名前は平らな形状。奥行きを表現する影、ハイライト、テクスチャなどの詳細を表現しないこと。の、2つの要素から名付けられました。スキュアモーフィックデザインではないフラットデザインはスキュアモーフィズム(実世界のオブジェクトやプロセスに似せた装飾スタイル)に対する反応として始まりました。スキュアモーフィズムは、ドロップシャドウ・リアルな質感・反射・面取りなどのような効果をよく使います。 [PR] Webデザインで副業する方法とはフラットデザインの一般認知フラットデザインの全貌が見えるようになったのは、2012年から2013年ごろです。 Windows8とiOS 7のリリースのおかげで、非常に認識しやすく(そして、より再現しやすく)なった年です。 Windowsの鮮やかなモジュール式レイアウトと、アップルのきれいに簡素化されたアイコンからフラットデザインの開発の経過、トレンドへの影響が見て取れます。 UXPinのスタッフは、Fast Co. Designでフラットデザインの発展の「山場」は、主流のトレンドとスキュアモーフィックデザインに葬り去られたと指摘しています。しかし、フラットデザインの勢いはまだ強く、主流になりそうな勢いです。それでは、その長所と短所、将来の可能性について見てみましょう。メリットレスポンシブデザインとの互換性柔軟なフレームワークきれいな、読み取り可能なタイポグラフィレスポンシブデザインとの互換性マイクロソフトとアップルが、フラットデザインに飛びついたので、フラットデザインはUXへの新たなアプローチとしてすぐに採用されました。それは、Webとモバイルのデザインとして一般的であり続ける良い理由になりました。フラットデザインは、そのグリッドベースのレイアウトとシンプルなグラフィックスのおかげで、簡単にサイズ変更し異なるデバイスと画面サイズで表示するように再配置することができるので、色々な設計カテゴリに適用することができますが、特にWebやモバイル設計に適しています。 Sergey Valiukhから、Webとモバイル間の一貫性のあるシンプルなUXを提供できる、レイアウトを再配置する例を紹介します。一方、たくさんの影とテクスチャーを持つスキュアモーフィックの非常に詳細なスタイルは、固定サイズイメージを拡大縮小すると、上手く変換できないことがよくあります。デザイン代理店Dapper GentlemenのRyan Allenは、Flat 2.0で「フラットデザインは1ピクセル単位の完全なデザインより、はるかに簡単にコンテンツに適したサイズにスケーリングできる」と書いています。柔軟なフレームワークフラットデザインは、グリッド・カード・モジュール・ブロックなどと相性が良く、均一な幾何学的形状になる傾向があります。このタイプのレイアウトは、どんなところに使っても、認識しやすく直感的に操作できます。グリッドはどんな状況にも適用できる柔軟性のあるフレームワークです。これにより、デザイナーは制限されたレイアウトに押し込むより、最適な配置を実現することができます。例えば、このBureau of Bettermentのパンフレットは、様々なサイズの正方形や長方形を使って、タイポグラフィやアイコンなどの様々な要素を際立たせています。均一な色とシンプルなイラストは、フラットな効果を演出しています。一方、このWebサイトは、違う方法でグリッドを使っています。メニューからスタッフの写真へ、さらにサービスのリストへグリッドを使っています。きれいな、読み取り可能なタイポグラフィまた、フラットな質感は文字へのアプローチへも影響します。より大きく、より合理的なタイポグラフィになります。影やその他の効果が無いことで、文字が読みやすくなります。サンセルフ書体は、このスタイルと相性が良く、一般的によく使われます。ですが、セリフ書体もあまり凝っていない文や、見出しやメニューの文字として、「大きい文字」でなら使うことができます。デメリットユーザビリティへの妥協識別性の欠如流行りに集中しすぎるユーザビリティへの妥協フラットデザインのクリーンで効率化された質感を出そうとするがために、美学的思想に熱中する罠に落ちるデザイナーもいます。これは、ユーザビリティにも悪影響を及ぼし、Webおよびモバイルデザインに潜むリスクになりえます。全てがフラットな見た目なら、どこがクリック可能で、どこがクリックできないのかが見えにくくなります。シンプルさを追求し過ぎると、重要な機能とアクションが見た目上分からなくなったり、ユーザーが慣れ親しんだ視覚的な手掛かりが無くなってしまう可能性があります。一例として、このWebサイトを見てみましょう。すべてのボックスはクリック可能ですか？その一部のみ？一見で判断するのは難しいでしょう。識別性の欠如デザインプロジェクトを計画しているすべてのビジネス、ブランド、または個人は、ユニークなデザインを望んでいます。彼らが、Webサイト、アプリ、名刺、イベントポスター、または他の何かを捜しているかどうかに関わらずです。フラットな設計の欠点の一つは単純化し、狭義のビジュアルスタイルに固執することで、似たデザインになりがちです。純粋なフラットスタイルを使用しているデザイナーは、自分のプロジェクトに適用できる原則の選択肢は限られています。例えば、これらの関係のないモバイルのインターフェースは、Marco La Mantia・Simone Lippolis(下の最初の画像)とLuis Vaz(2つ目の画像)によってデザインされましたが、両方ともサンセルフ書体の白い文字、基本的な幾何学的形状をしています。また、色合いも同じです。流行りに集中しすぎるフラットデザインが、現在のテクノロジーにおいて、近代的で直感的だとデザイナーに認識されれば、人気のスタイルとして定着するでしょう。しかし、この傾向には一つの問題があります。デザイナーの一部は本当にその有用性を考えることなく、流行に乗るために適用されることです。これは、目的のないデザインになってしまいます。初期のフラットデザインでは長い影を付けている例が良く見られました。 Alexander LototskyとErik Malmsköldのこの2つの例は、最も一般的な文字とアイコンに長い影のトレンドを付加した典型的な例です。両方ともフラットデザインの創成期、2013年に作成されました。流行りの見た目を追い求めるだけでは、前述したように、ユーザビリティに悪影響を与えることになります。視認性を犠牲にはしますが、薄く軽い書体を使うことによって、クリーンで最小限のデザインになります。視認性を考慮して文字の軽さを最適に調整しないと、名刺やモバイルアプリ、Webサイト向けには問題になることもあります。フラットデザインのこれからフラットデザイン2.0 デザイナーは、過去数年でフラットデザインを試してみて、ここで取り上げた長所と短所のいくつかに気づき、それを踏まえてスタイルを調整することにしました。フラットデザインの初期は、厳密な視覚単純化することを特徴としていましたが、最近の傾向は、美しさと機能的であることを両立するために、シャドウとテクスチャのような要素を少しだけ再導入するようになってきました。純粋にフラットなアプローチにこれらの調整したスタイルを、多くの場合、「フラット2.0(Flat 2.0)」または「ほぼフラット」なデザインと呼ばれるようになります。このスタイルは多くの妥協案を提供します。フラットでクリーンなシンプルさを残しつつ、見た目の多様性と高められたユーザビリティのためのスキュアモーフィックな質感を追加できます。テクニックの一つとしては、要素を階層や色の変化や影を追加することにより、平坦さに深さとレイヤーを追加します。別の一般的なハイブリッドアプローチとしては、写真だけではなく、イラストやアイコンの追加です。以下の例では、グリッドレイアウトと読みやすい文字は残りますが、レイヤー要素とテクスチャー化されたイラストを追加することにより、一層フラット2.0のアプローチとしての良い例となっています。マテリアルデザイン「ほぼフラット」なデザインと多くの共通点のあるマテリアルデザインは、Googleが開発した視覚言語で、グリッドベースのレイアウトや「意図的な色の選択、エッジツーエッジ画像、大規模なタイポグラフィ、および意図的な空白」を特徴とし、大胆な視覚効果があります。このスタイルはユーザーがすぐに理解できるように「現実に接地されている視覚的な手がかり」と「おなじみの触覚属性」を持つ紙風のアプローチを採用しています。それはスキュアモーフィズムにも少し近づいているようです。例えば、Tubik StudioからこのUIのコンセプトでボタンの微妙な影や色は、即座に明確にユーザの注意を引きます。背景の大きなスクリプト書体と紙のようなレイヤーは、マテリアルデザインの特徴をよく表しています。マテリアルデザインは、明らかにフラットデザインの要素を備えていますが、光と影、モーション、およびその他の詳細への注目が、フラットデザインはより便利で柔軟に適合させることができることを実証しています。 Googleによる自由に入手できるマテリアルデザインへの詳細なガイドは、ガイドラインに従うのか、好きな要素・テクニックを取り込むのかにかかわらず、デザイナーが自分の仕事にマテリアルデザインを簡単に導入しやすくしました。これはまた、デザイナーの独自の解釈や実験推奨し、フラットデザインやマテリアルデザインの両方の進化を促しました。つまり、デザイナーがトレンドと新しいもの何かを作る時に、マイクロソフトやアップル、Googleなどの大企業がデザインスタイルの大衆化にとても影響を与えていますが、次の「大きな波」を作る手助けをするのはデザイナーなのです。ディスカッションに参加しましょう「フラットなデザイン(視覚的なシンプルさ)とスキュアモーフィズム(視覚的な馴染みやすさ)の背後にある精神を考える時、両方の概念は確かに共存できることに気づくでしょう。この二つの完全な微妙なバランスは、ここ数年の未来が明確に証明してくれるでしょう。」 — UXPin for Fast Co. Design また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。今後デザイナーとして働きたい、自分で思った通りのデザインを再現したいと思っている方はぜひご覧ください。

Webデザイン

ほとんどのデザイナーが気付いていない「UXの4つの間違い」とは

本稿は、Webdesigner Depotのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、HooktoWin.comの共同設立者であるAndrew McDermott氏によって投稿されました。デザイナーは不可能を可能にすることを期待されます。信じられないほど複雑なプロセスを、シンプルで美しいものに作り変えるよう求められることも、何度もあるかもしれません。そして成功したときには、ロックスターになったような気分を味わえるでしょう。しかし、こうした大きな期待に応えられなかったときには、ひどく落ち込むかもしれません。デザイナーには完璧主義者の人が多く、自分自身が自分に対する最悪の批評家であることもよくあります。間違いを自分の責任と見なして、全てを台無しにしてしまったかのように思うこともあります。それでも、落胆するような状況において間違いを受け入れることで、これを成長と学びの機会とすることができるはずです。もし本当のことをお伝えするとしたら…… デザイナーが気づいていない真実：間違いのほとんどは、デザイナーの責任ではありません。辛い現実：いずれにしても、デザイナーは責任を負うことになります。デザイナーに不足しているのは、人についての知識新規の仕事やプロジェクトにおける、デザイナーの目標設定の仕方が、間違いの原因というわけではありません。ほとんどの場合、実際はその逆です。デザイナーは、多くの人が気にしないような細部のデザインまで、こだわりを持って熱心に取り組みます。神は細部に宿ることを知っているからです。問題となるのは、人についての知識が不足しがちなことです。これは、デザイナーが学校で教えられないことですが、仕事に大きな影響を与えます。もしデザイナーが正規の（または非正規の）教育を受けていれば、その過程で自分独自のデザインを究めることを求められます。また、デザインの原則、デザインと配色の関係、色彩なども学びます。しかし、これだけでは十分ではありません。デザインや美術について教育を受けることはあっても、人について深く学ぶ機会はありません。こうした理解不足は、デザインに影響し、ひいては予期しないUXの間違いの原因となります。デザイナーに不足しているのは、人についての知識なのです。 UXの間違い1：ユーザーが実際以上に多くを知っていると思い込むことデザイナーは合理的な人々です。インターフェースの設計に多くの時間を費やすため、デザインがWeb上でどのように機能するかを直感的に理解しています。「これは常識だ！」とデザイナー自身が思っていても、実際はそうではないこともあります。デザイナーにとっての常識が、ユーザーにも通用するとは限りません。デザイナーは設計に多くの時間を費やしているために、よく知っているだけなのです。また、デザイナーがプロフェッショナルであるのに対して、ユーザーが同等の専門性を備えていないこともあります。こうした理由から、ユーザーに対して次のように仮定するのは、間違いです。適切な質問を選ぶことができる設定の操作について理解しているアイコン、マーク、ロゴの意味を知っているコンテンツに意識を集中し続けることができる Webサイトで提供している指示をよく読んでそれに従う必要とするコンテンツの見つけ方を知っている問題の核心が見えてきたでしょうか？デザイナーがこのように仮定すること自体は合理的ですが、問題を引き起こすおそれがあります。なぜなら、こうした仮定は現実に基づいたものではないからです。利用方法が全く分からないユーザーもいますユーザーの中には設定の操作が初めてという人もいますあなたの設計したサイトを、乱雑で混乱するようなデザインだと思うユーザーもいます関心が他に向いているマルチタスク型のユーザーは、コンテンツに集中するほど時間がありません指示に従うのを拒むユーザーもいますほとんどのユーザーは、見ているコンテンツについて詳しく知っていませんこうした場面でデザイナーに求められる仕事は、「迷える羊の群れを、頭数を減らして束ねる」ことです。条件に合うユーザーだけを選び抜き、意図したプロセス通りに彼らがサイトを利用できるような設計にします。その他の条件に合わないユーザーは、除外します。 UXの間違い2：ユーザーのためのデザイン「ユーザーのためのデザイン」は、ここ数年で繰り返し提言されているアドバイスで、頭にたたき込まれているデザイナーも多いかもしれません。デザイナーは、ユーザーのニーズをよく理解して、ユーザーを中心にデザインするよう教えられています。しかし、このアドバイスには見落としている点があります。「なぜ？」と不思議に思うかもしれません。見境なく教え込まれているアドバイスですから。その見落としている点とは、必ずしも全てのユーザーがターゲット・オーディエンス（Target audience：広告やマーケティングにおいて、目標とする顧客）と一致するとは限らないことです。サイトを利用しているユーザーが、「求めているユーザー」像と一致しないことがあるのです。例として、Googleを考えてみましょう。 Googleは、そのエネルギーや注意の大半をユーザーに向けています。Googleにとってのユーザーとは、検索者です。検索者により良いユーザー体験を提供するために、多くの時間と巨額の資金を投資しているのです。しかし、検索者がGoogleの唯一のユーザーでしょうか？実は、その他にもGoogleのユーザーは存在しています。広告主：Googleは広告主が自らの命令に従うことをよく知っています。Googleは、広告主やサイト運営者に対してポリシーを公開しています。もし彼らがGoogleのポリシーに違反して、好き勝手に利用するとしたら、広告掲載やサイトは強制停止されます。ボット（クローラ）：Googleは、ボットなどによってサイト上で「通常以上のトラフィックが検出」された場合に、これをブロックします。検索している主体が人間でも、誤検知（False positive）によりブロックされてしまうこともよくあります。詐欺者：Googleは詐欺サイトもブロックしています。例えば、偽のダウンロードボタンをクリックすると、ランサムウェア（ransomeware）がコンピュータにインストールされるよう仕組んであるサイトなどです。検索者：Googleの検索エンジンの利用者です。このユーザーたちこそGoogleに利益をもたらしています。彼らが広告をクリックしたり、アプリケーションを利用したり、ソフトウェアをダウンロードすることで、Googleに収益が発生する仕組みになっています。 Googleは、自らの目標や利益に反するユーザーに対しては、ユーザーエクスペリエンスの提供を拒否しているのです。 Googleは、ほとんど全てのユーザーに提供されていますが、Googleのユーザーリストに載っていない人々（ボット）は締め出されます。広告主が検索者にスパムを送信するとしたら、広告掲載を強制停止されます。Googleは、自らの目標や利益に反するユーザーに対しては、提供を拒否しているのです。「ユーザーのためのデザイン」は、デザイナーがターゲット・オーディエンスだけに意識を向けるという前提があってこそ有益なアドバイスになることは、十分理解できるかと思います。しかし、多くのデザイナーがユーザーについて見落としている重要な点は他にもあります。それは次の「UXの間違い3」で述べるとしましょう。 [PR] Webデザインで副業する方法とはUXの間違い3：フリクションが不十分であること Webデザインにおける「フリクション（friction）」とは、Webサイト（のレイアウトに使われている要素）の利用を阻害することを意味します。一般にデザイナーたちは、フリクションを悪いものだと考えています。Webサイトを上手く設計しなければ、意図した通りにユーザーが行動しないおそれもあります。こうしたイメージから、デザイナーはフリクションを恐れがちです。しかし、全てのWebサイトにはフリクションが必要です。もし音楽を聴いていて、うるさいと感じたらどうしますか？おそらく音量を下げますね？同じことがフリクションにも当てはまります。ユーザーは音楽に、フリクションは音量調節のダイヤルに、それぞれ例えることができます。望ましいユーザーだけをWebサイトに集めるために、いわばフリクションというダイヤルで、音量を上げたり下げたり調整するのです。フリクションを活用しているWebサイトの例を、次にいくつかご紹介します。 Craigslist（クレイグズリスト）：Craigslistは、同じ広告を50回連続で投稿されたりするのを嫌がります。そのため、Ghostingという技術によってフリクションを生み出しています。ユーザーがスパムを送信したり、広告を過度に多数回投稿した場合には、広告はブロックされて誰にも見えないように非表示になります。 Google：Googleはユーザーに自らのポリシーを尊重してもらいたいようです。もしサイトを悪用したり、検索結果を利用してWebスクレイピング（Web scraping）を行えば、「通常と異なる」ユーザーとして検出されます。さらに警告を無視するとブロックされます。 Quora：Q&Aのサイトです。利用ガイドラインはシンプルで、「Be nice, be respectful.（マナーと節度をもって利用すること）」というポリシーを掲げています。このポリシーを無視するユーザーには警告を与え、ブロックまたは利用禁止にします。フリクションを利用することで、他のユーザーにとって安全なサイトであることを保証しているのです。Quoraのサイトのシステムは、ユーザー体験の質を最大限に高めるようにデザインされています。デザイナーにとってフリクションは、問題となるかもしれません。しかしそれはデザイナーが、フリクションというダイヤルを調整する方法を知らなかったり、またはフリクションが存在すること自体知らないからです。デザイナーのフリクションに対する理解が不足していると、フリクションに過剰反応してしまったり、皮肉なことに望ましくないユーザーにWebサイトを悪用されることも起こり得ます。では、フリクションを具体的に実装するとしたら、どのようになるのでしょうか？例を見てみましょう。問い合わせフォームに、キャプチャを3～4つほど複数設けて、人間であることを判別する利用に至るまでのステップ数を必要以上に増やすことで、ユーザーをふるいにかける文字で埋め尽くされたページ、またはデザイン要素がぎっしりと並んだページにする入力フォームを必要以上に多く設置することで、ユーザーを疲労させ、興味を失わせる（逆に入力フォームを十分に設置しないとしたら、全てのユーザーのアクセスを容易にすることになります。）コンテンツと関連性の低いストックフォトや画像を使うことで、ユーザーがコンテンツの意味を理解する妨げとするユーザーに個人情報や支払い情報の入力を求める一方で、サイト運営者の顔写真や個人情報などは可能な限り非公開にしておくフリクションは重要な設計であり、その形やサイズは様々ですが、多くのデザイナーが理解に苦戦するのは確かです。 UXの間違い4：上司の指示にいつも忠実であることこの間違いを回避するには勇気を要します。それに加えて、さらに重要なことですが、目標を明確に理解していることも必要です。現在デザインしている要素は、どのような完成形が望ましいのか、開発しているWebサイトの目標は何なのかなどです。目標に関するこうした質問にクリアで決定的な答えを出しておくことは、必須ですその理由は、あなたの上司、会社の役員会、クライアント、関係責任者から、目標に反する要求をされることがあるからです。相手の要求通りに進めたら良い結果は生まれないと、経験から予測できることもあるかもしれません。当初の目標に反して進めた結果、失敗プロジェクトとなるおそれもあります。もっとも、「指示通りに仕事をこなしてさえいれば、彼らは報酬を支払ってくれるから構わない。」という考えで、上司に協調するのは簡単ですが。自分の意見を声に出して伝えることが非常に重要です上司が自分自身のために行動しない場合には、あなたが上司に代わって行動することが重要です。もし上司が、彼ら自身の利益を損なうような指示を出してきたら、あなたの意見を声に出して伝えましょう。悪いニュースを伝えるべき場面です。上司に彼ら自身が犯そうとしている間違いを理解してもらうためです。もし自分の意見を声に出して伝えないことが習慣化したら、平凡なポートフォリオしか生まれないほとんどのデザイナーは自分の意見をはっきりと伝えることはありません。仕事を失ったり、キャリアに傷が付くのを恐れているからです。しかし、そのことが逆にこうした事態を招く原因となります。この間違いに対処する手立てが何もない場合にはデザイナーとしてチームに参加したときに、計画やデザインがすでに決定されていた場合にはどうするべきでしょうか？まずチームの他のメンバーと話し合いを持ちましょう。そして自分の意見をサポートする根拠（例えば、リサーチ、レポート、データなど）を十分に用意した上で、プロジェクトの責任者に意見を伝えましょう。最初は不可能に思えるかもしれませんが、実際には行うことは可能です。小さなステップから始めて、段階を追ってゆっくりと進めてみましょう。あなたはデザイナーとしてプロフェッショナルです。デザインツールを活用すれば、他の人が見逃してしまうようなUXの間違いを見つけることもできると思います。間違いを正すことで、複雑なプロセスを、シンプルで美しいものへと作り変えることができるでしょう。 [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

アプリデザイン

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

必ず知っておきたい！11月のWebデザインにおける3つのトレンド

目次