TechAcademy（テックアカデミー） UX/UIデザインコース スマートフォンアプリ開発 アプリデザイン 優れたデザインを作るための社内コミュニケーション術とは
icon
icon
アプリデザイン

優れたデザインを作るための社内コミュニケーション術とは

ユーザーにとって使いやすいデザイン(UI/UX)を生み出すためには、デザイナーのスキルだけでなく、エンジニアやディレクターとのコミュニケーションが必須です。より良い成果を出すためのコミュニケーション術を詳しく説明しています。

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

本稿は、Studio by UXPinのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また本記事はLaura Klein氏によって投稿されました。

 

もしあなたにUXデザイナーとしての経験があれば、新規プロジェクトの立ち上げで次のような会話を耳にしたことがあるかもしれません。

  • 「楽しくて使いやすい製品を開発したい。」
  • 「ユーザー調査が必要だ。」
  • 「オンボーディング（新規ユーザーを自社の製品やサービスに慣れさせるためのプロセス）を改善したい。」
  • 「新規ユーザーのためにプログラムの誤りがないかチェックする作業を行う必要がある。」
  • 「ペルソナ分析、Photoshopで使うモックアップ、ワイヤーフレーム、ランディングページ、追加の挿入が必要だ。」
1時間でできる無料体験！

しかし、これらの会話は全て無意味なものです。なぜなら、製品について考えるべき問題や、製品の改良方法を決定するのに直接的には役に立たないからです。

 

UXのプロジェクトにおいて、誰かから「これを改良してほしい。」などの曖昧な指示しか与えられないまま、具体的な成果物を求められたら、あなたは会話の方向性を変えた方がいいでしょう。

その方法として、次のような質問を投げ返すことが有効です。

  • 「この製品や機能がターゲットとするユーザーはどのような人でしょうか？」
  • 「ユーザーのために解決しようとしている問題は何でしょうか？」
  • 「このプロジェクトには会社にとってどのようながニーズあるのでしょうか？」
  • 「何についての判断基準を変えようとしているのですか？」
  • 「このユーザーの問題を解決することが、なぜ判断基準を変えると思うのですか？」

 

ユーザーにとってのメリット

これらの質問は、デザインのプロジェクトを成功させるために重要な、次の3つの要素を定義するのに役立ちます。

  • 解決するべき問題
  • 問題を解決するべき理由
  • 成功の判断基準

これらの3つの要素はUXデザインに不可欠なものです。これらなくしてはUXデザインは絵に描いた餅です。

デザインの目的とは、ユーザーの問題と自社のビジネスの問題を、両方とも解決することです。

もしユーザーの問題を解決すること（例として、ユーザーが必要とするものを提供したり、生活の質を向上させること）によって、自社のビジネスの問題を解決すること（例として、利益を生み、会計上の自己資本比率を上げること）ができれば、デザインの至高の目的が達成されたといえます。

これらの質問に答えを出すことが、ユーザーの必要とする製品を開発し、また自社のビジネス成功の鍵となる判断基準を改善することにつながります。

 

デザイナーにとってのメリット

これらの質問に答えることのデザイナーにとってのメリットは、プロジェクトを再構成することで、デザイナー自身がより自由に問題解決を行えるようになることです。

他の人から与えられた指示をそのまま実行するのではなく、判断基準をどう改善できるかを、デザイナーが自分自身で仮説から考えることができます。つまり、「オンボーディングのプロセスを変えてください。」といった指示を受ける代わりに、「新規ユーザーのための10日間のライセンス認証について、基準を再考してください。」といった指示を受けて、デザイナー自身が考えることができるのです。

さらに重要なことに、成功の判断基準が存在していれば、自分のデザインについて直接的な評価を得られるため、デザイナーとしての成長につながります。

 

[PR] UI/UXデザインで挫折しない学習方法を動画で公開中

エンジニアにとってのメリット

これらの質問に答えることのエンジニアにとってのメリットは、プロジェクトの範囲が定まることです。もしプロジェクトの要件定義が上手くなされていないとしたら、プロジェクトの範囲の肥大化を引き起こすおそれがあります。

つまり、解決するべき問題や成功の判断基準が定まっていないとしたら、プロジェクトの仕事の増大を引き起こしやすいのです。一方これらを明確に定めておけば、新たな作業が発生しても、直接的に問題解決に役立たないものは後回しにすることができます。

 

答えが思い浮かばないときには？

あなたが会話の方向性を変えようと試みても、最初は上手くいかないかもしれません。クライアント、プロダクトマネージャー、エンジニアなどに、これらの質問を繰り返し投げかけてみましょう。

もしすぐに答えを得られなくても、プロジェクトを開始する前までには、協力して答えを出しておきましょう。そうでなければ、ユーザー、会社、チーム、あなた自身にとってメリットの少ないプロジェクトになってしまうおそれがあります。

[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

実際のアプリに学ぶ！モバイルデザインにおける配色の重要性

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、エンジニアのNick Babich氏によ...
アプリデザイン

実際のアプリから学ぶ！UX向上のためのアニメーションの使い方

本稿は、Babich.bizのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、ソフトウェア・デベロッパーのNick Babich氏によって投...
アプリデザイン

作る前にチェック！海外のiPhoneアプリのデザイン集サイト18選

スマートフォンの普及に伴って、Webサイトをスマートフォンサイト用に対応するのはもちろんのこと、スマートフォンのアプリのリリースを検討している方も多いのではない...
アプリデザイン

【プロトタイプを作る！】初心者でもすぐに分かるProttの使い方

プロトタイピングツールとして有名な「Prott」の使い方について解説しています。 Prottは作業画面からサポートまで全て日本語対応のプロトタイプ作成ツー...
アプリデザイン

「Sketch vs. Figma」デザインツールとして優れているのはどちらか

本稿は、Smashing Magazineのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、WebデザイナーであるChristian...
アプリデザイン

【事例から学ぶ！】聞いたことはあるけど「UIデザイン」とは？

「UIデザインとは」何なのか、歴史などを踏まえて解説しています。 そして、UIデザイナーを目指す上で参考になる勉強サイト等も紹介しています。初心者の方でこ...
アプリデザイン

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

具体的な方法を学ぶ！優れたアプリのデザインプロセスとは

本稿は、Studio by UXPinのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。 「問題を解決するためには、まず最初に、問題が存在すると認識することです。」- ジグ・ジグラー 製品の問題定義は、製品開発の土台であり、ひいては製品の成功のための鍵となります。デザインに関する問題の解決策も、この問題定義を土台として導くことができるのです。 つまり製品のデザインは、深い理解と定義が要されるような問題から始めるべきです。最初に何となく正しいと思える問題から、深く考えずにデザインを始めるとしたら、良い結果は期待できません。 画像：「理解」→「定義」→「アイデアの形成」→「デザイン」→「テスト」の循環。UXPinからMarcin Treder氏による「デザインプロセス」より   問題定義を中心としたアプリのデザインプロセスについて見ていきましょう。身近な問題を解決するアプリをデザインすることを想定します。 1つは「ストレス過多」の問題です。 私は友人を集めて、ストレスの問題を抱えているかどうか聞いてみたところ、12人中9人が「はい」と答えました。「いいえ」と答えた3人は、超人的な禅僧のような精神の持ち主ではないかと思えたくらいです。 アプリのデザインにおいて考えるべき問題を見つけたら、次は問題定義（解決するべき問題の範囲を定める宣言文）を書きます。 チームのメンバーに上手く問題を提示できるような、質の高い問題定義の書き方をご紹介します。あなたが素晴らしい製品アイデアを思いついたり、フィードバックを受け取ったときには、次の方法が思考の指針として役立ちます。   問題を認識する 私は、DAPPER GENTLEMENという会社でアプリのチーム開発の仕事をしていますが、アプリのデザインや機能の設計方法についての話題をよく聞きます。創造意欲やアイデアを得られるような良いデザインのアプリの話もあれば、時には全てにおいて出来の悪いアプリの話もあります。 最近、私の妻が新生児の育児サポートアプリについて「これは悪いアプリね。」と話していました。 私はデザイナーとしての直感から、何か問題がありそうだと思いました。 私が「解決の必要な問題があるの？」と聞くと、妻は「いいえ、ただ話を聞いて共感してもらいたかっただけ。最後まで話をさせてくれる？」と言いました。 「もちろん力になるとも！まず最初に、問題をより深いレベルで理解する必要があるね。」私は声を大にして言いました。 「・・・（ため息）」 多くの開発者やデザイナーは、ユーザーの声に耳を傾けて問題をよく考える時間を取らないため、ユーザーの抱えている問題の解決方法を知らないようです。これは彼らが怠惰だからではなく、問題の本質的な原因を深く考える術を知らないからです。 デザインプロセスも何らかの始点が必要ですが、このような問題が始点となることも多いのです。私の妻の例では、彼女の使っているアプリが「悪いアプリ」であることが問題でした。   問題を認識したら次にすべきこと： 問題を理解する問題を認識するだけでは解決できません。問題についてよく知る必要があります。 ユーザーの声に耳を傾けて考える問題の解決へと一気に急いではなりません。まずユーザーの声に耳を傾けて、現状を把握する必要があります（私と妻のやりとりの例を考えてみてください。）。一方的な質問も構いませんが、現状を把握する前に、解決策を提案すべきではありません。 また問題に疑問を投げかけて、さらに深く掘り下げてみましょう。 「私はストレス過多である」という最初の問題に戻りましょう。 「アプリの出来が悪い」という問題は、おそらく「ストレス過多」の問題と同じように考えることができます。 ストレスを管理する方法はいくつあるだろう？ ストレスの量が、本質的な原因なのだろうか？それとも、もっと深くにある問題の兆候に過ぎないのだろうか？ 出来の悪いアプリを改良する方法はいくつあるだろう？ アプリの全体的なデザインが、本質的な原因なのだろうか？それとも、もっと深くにある問題の兆候に過ぎないのだろうか？   兆候と問題を見分ける 兆候とは、製品においては機能性や使用感が「標準」的な品質を満たしていないと、ユーザーが主観的に感じることです。 より分かりやすい例では、疲労感は睡眠不足の兆候です。 疲労感は、元気に活動できるという「標準」の状態から外れていると感じる主観的な感覚であり、睡眠不足という問題の兆候となっているのです。 「ストレス過多」の問題でも、ストレスを感じないという「標準」の状態から外れていると、本人が主観的に感じているのです。 ストレスの対処方法には、夜にグラス1杯のワインを飲んだり、音楽を聴いたり、テレビを観たりなど色々あるでしょう。 ストレス発散のために、精神崩壊や癇癪を起こすに至る人もいるかもしれません。静かな場所に座って、深呼吸をして、ストレスの原因について考えることもできます。もっとも、多くの人はストレス状態にあることに気づいてすらいないため、原因を認識することは難しいのです。   では、「ストレス過多」は根本の問題でしょうか？もしかしたら、もっと深い問題の兆候に過ぎないかもしれません。 問題を解決するには、それ自体が根本の問題なのか、それとももっと深い問題の兆候に過ぎないのか考える必要があります。   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中根本原因を見つける 問題の根本原因を見つけることはなぜ重要なのでしょうか？それは兆候を解決するだけでは、問題を完全に解決したことにならないからです。 例えば、脚の痛みを感じたときにアスピリンを服用して痛みを緩和できても、痛みの根本の原因を解決したことにはなりません。問題の兆候として現れる痛みを何度も経験することになります。 病院に行って「骨折が脚の痛みの原因です。」と診断されて初めて、骨折という根本原因を見つけることができるのです。 では、「ストレス過多」の問題の根本原因を見つけるにはどうしたらいいでしょうか？トヨタ生産方式の「5つのなぜ」による分析を応用することができます。   5つの「なぜ」による分析 5つの「なぜ」による分析とは、「なぜ」から始まる疑問を繰り返すことにより、問題の根本に存在する因果関係を探り出すテクニックです。   私の妻の話を思い出してみましょう。 「これは悪いアプリね。それから、私が話をしているときには、もう少しよく聞いてくれても…。」 彼女の抱えていた問題は、新生児の育児のための生産性向上アプリの使い方がよく分からないことでした。消費されたおむつの数や、ミルクの量などを楽しく管理できるアプリです。   「5つのなぜ」による分析によって、このアプリの問題の深くにある根本的な問題を見つけてみましょう。 なぜ出来の悪いアプリなのか？ 答え：正しく作動しないから。（より深い問題） なぜ正しく作動しないのか？ 答え：どこを操作したらいいのか分からないから。（より深い問題） なぜどこを操作したらいいのか分からないのか？ 答え：アイコンが上手く機能していないから。（より深い問題） なぜアイコンが上手く機能していないのか？ 答え：アイコンの選択後に、思っていたページに進まないから。（より深い問題） なぜアイコンの選択後に、思っていたページに進まないのか？ 答え：一見アイコンに見えるものがアイコンではない一方、アイコンには見慣れない要素が使われているから。（「問題解決につながる行動」が見つかりました！）   私からこのアプリのデザイン担当者に意見を送ったため、この問題の根本原因には早く気づいてもらえたと思います。 問題の根本原因はいつも「5つのなぜ」の5番目で見つかるとは限りません。では、根本原因を特定するにはどうしたらいいでしょうか？その鍵となるのが、「プロセスの欠け」または「問題解決につながる行動」を見つけ出すことです。これらは複数見つけられることもあります。 「ストレス過多」の問題も同じように分析してみましょう。 なぜ私はストレス過多なのか？ 答え：ストレス過多を起こす思考を多く抱えているから（より深い問題） なぜストレス過多を起こす思考を多く抱えているのか？ 答え：思考を鎮めることができないから（より深い問題） なぜ思考を鎮めることができないのか？ 答え：思考を鎮める練習をしていないから。（より深い問題、「問題解決につながる行動」が見つかりました！） なぜ思考を鎮める練習ができないのか？ 答え：思考を鎮める方法を知らないから。（「プロセスの欠け」が見つかりました！） なぜ思考を鎮める方法を知らないのか？ 答え：思考を鎮める方法が必要だと自覚していないから。（より深い「プロセスの欠け」が見つかりました！） この問題の根本原因は、思考を鎮めて精神を集中するプロセスが欠けていることだと判明しました。この問題では思考を鎮めることが、ストレス緩和、さらに問題解決につながるでしょう。 次は、問題定義を発展させてみましょう。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由
アプリデザイン

ほとんどのデザイナーが気付いていない「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] UI/UXデザインで挫折しない学習方法を動画で公開中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デザイナーのサポートで学びたい場合はご参加ください。 プログラミングを独学で学習していて、このように感じた経験はないでしょうか？ ・調べてもほしい情報が見つからない ・独学のスキルが実際の業務で通用するのか不安 ・目標への学習プランがわからず、迷子になりそう テックアカデミーでは、このような
アプリデザイン

今年のトレンド！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] UI/UXデザインで挫折しない学習方法を動画で公開中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のフォントが対応しています。 人間的な比率と幾何学的なデザインを組み合わせた、スタイリッシュなフォントです。ほとんどのラテン語系言語の文字をサポートしています。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。
Webデザイン

事例から学ぶ！HubSpotがサイト改善に成功したUX戦略とは

本稿は、UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、UXPinのコンテンツ・ストラテジストであるJerry Cao氏によって投稿されました。 UXデザイナーのAustin Knight氏率いるチームが、Hubspotのサイトをリニューアルしたプロジェクトについて書かれています。   HubSpot（ハブスポット）のサイトは、世界の90カ国以上にわたり1万8000以上の企業にサービスを提供し、月間400万人以上のユーザーがアクセスしています。 HubSpotにとって、サイトこそ経営の要となるものでした。HubSpotが非公開会社から、多様な製品を提供する世界規模の公開会社へと発展するには、サイトのリニューアルが不可欠でした。 サイトリニューアルのプロジェクトは、プロジェクト開始から一ヵ月半後に開かれる、HubSpotの年次イベント「INBOUND」で新しい製品ラインがリリースされるまでに、急いで完成させる必要がありました。   UXデザイナーのAustin Knight氏がこのプロジェクトを率いて、3つのチーム（ビジュアルデザイナー、デベロッパー、マーケティングマネジャー）が加わりました。またKnight氏はこの他に、製品のポジショニング戦略（product positioning）、コピーライティング、技術開発を担当する外部の6つのチームとも協力しました。 この記事では、UXデザイナーが、過密なスケジュールのプロジェクトにおいて、リサーチ、共同作業、ユーザーに焦点を当てた「Lean UX」という手法を応用しながら、どのように良い結果を生み出せたのかを事例として紹介します。 画像：HubSpotのリニューアルされたサイト 次の3つのステップは、実際のプロジェクトをベースとしてUXPinが作成したベストプラクティスです。   ステップ1：入念なリサーチ、継続的なテスト HubSpotのプロジェクトは、まず最初に、Knight氏が「Lean UX」という手法をチームに紹介することから始まりました。 「Lean UX」とはJeff Gothelf氏によって提唱されている手法で、継続的な「学習ループ」（構築 – 評価 – 学習のループ）を用いてデザインプロセスを軽量化することによって、ビジネス戦略を整えるためのものです。 このプロジェクトでは、ステップ1は、分析とユーザー調査を行い、手早く予測の検証を行うことでした。   分析＆ヒートマップ 多くのケースにおいては、デザインチームはマーケティング部門にデータ分析を依頼するのが一般的ですが、今回のプロジェクトでは、Knight氏は自らデータ分析を始めました。HubSpot、Googleアナリティクス、Mixpanelから膨大なデータにアクセスできました。 主な課題は、これらの膨大なデータを分析して、意味のあるパターンを見つけ出すことでした。 Knight氏はまず、多くのユーザーの行動を分析した結果、次のような傾向が見られることに気づきました。 サイト上でPRICING（価格表）に最初にアクセスする（ユーザーは製品のメリットよりも価格を優先していることがわかります。） サイト上でFAQ（問い合わせ）に最初にアクセスする（ユーザーの疑問が解決されていないことがわかります。） サイト上でサイト内検索を最初に利用する（主に製品について不明な点を検索しているので、ユーザーが必要な情報をサイトで得られていないことがわかります。） この分析から、HubSpotのサイトは完成度は高いものの、重要な情報が欠けているために、コンバージョン率が低下していることが判明したのです。   Knight氏はまた、2万5000人のユーザーを対象に、ヒートマップとスクロールマップによる分析を行い、合計46万7308のデータを集めました。 数年分のデータを集めることができたため、問題（例として、ユーザーの25%しかサイトのページをスクロールしていないことなど）が生じた原因を理解するのに役立ちました。   セッションの記録 最後に、セッションの記録によって、定量分析と定性分析を行いました。 セッションの記録は、生きた、匿名性のある、未だ分析されていないデータです。実際のユーザーの行動がそのまま反映されたデータなので、分析結果も信頼できます。 セッションの記録は、デザインプロジェクト全体を通して行い、ユーザーへのインタビューやユーザビリティテストの結果を検証するのに役立てます。   定性分析 定量分析は何（What）を分析するのには役立ちますが、なぜ（Why）を知ることはできません。 ユーザーエクスペリエンスに期待されることや、行動に隠された動機を知るためには、デザイナーはユーザーと利害関係者にインタビューを行う必要があります。   1. ユーザーへのインタビュー HubSpotのサイトの利用者の10%は、ログインや情報検索をしているユーザ―であるため、サイトのリニューアルにあたっては、これらの特定のグループを無視することはできません。 データの分析結果を検証するためだけではなく、新しいサイトでどのようなコンテンツを提供するべきかのアイデアのヒントを得るために、Knight氏はユーザーへのインタビューを行いました。 ユーザーへのインタビューのプロセスを徹底して考えたことで、的を絞って意見を集めることができました。   2. 利害関係者へのインタビュー このプロジェクトによってHubSpotのサイトの外観が根本的に変わることになるため、Knight氏はまた、HubSpotの会社の取締役、製品、マーケティング、セールス、カスタマーサポートのチームにもインタビューを行いました。 次にKnight氏は、ユーザーへのインタビューから得られた意見、カスタマーサポートの記録、HubSpotのサイトのリニューアルの不要な原案、Twitterのツイート、電子メール、さらにはKnight氏自身の講演イベントでの参加者との会話などの結果を総合的に勘案にしました。 「プロジェクトで取り組んだのは、『データを参考とした、人間を中心に考えたデザイン』だ。」とKnight氏は述べています。 また、「デザイナーは可能なときにはいつでも、自分自身でデータを解釈して、デザインに関する決定を行う必要があります。近年、定量的なデータと定性的なデータを活用することで、デザイナーたちがますます力を発揮できるようになりました。一般的に、単なる意見や誰かの「好み」に基づいて決定することもなくなり、それ以上のことが可能になっているのです。 今日のデザイナーが真に力を発揮するには、明示的なデータと黙示的なデータの両方を活用して、デザインのソリューションを導くことが大切です。」とも述べています。   多変量テストによって、小さな変更を試す 最後に、Knight氏はリサーチの結果を基にして、多変量テスト（Multivariate Testing：レイアウトデザインの候補の中から、最適なデザインを選ぶための手法）を行うために、デザインにいくつか変更を追加しました。 多変量テストは、特定のデザイン要素を決定、却下することで、サイト全体のリニューアルに進む前に、チーム全体として戦略的な決定を行うのに役立ちます。   ステップ2：実際のデザインを設計する Knight氏は、「全体の設計→テスト→学習→イテレーション→最適なソリューションの選択」という構造化されたプロセスの手法を用いました。   簡単なプロトタイピング 多変量テストによって、レイアウトのデザイン候補をチームで3つに絞り、さらにプロトタイプを作成しました。 主な方向性が定まったところで、Knight氏は最初の段階でイテレーションを繰り返して行い、次に外観のデザインに取り組むという手法を取りました。 実際には、ユーザー望む方向性や意見を反映することに多くの時間を費やしたことを考えれば、プロトタイプでも最終的な完成製品に近いものでした。 Knight氏は次のように述べています。 「紙のプロトタイプ、ワイヤーフレーム、外観のデザインの段階に至るまで、テストはユーザーと共に行っています。」 「プロジェクトのすべての段階において、ユーザーの声が反映されています。デザイナーとしては、ユーザーの声は耳に痛いこともあるかもしれません。ユーザーの意見にすべて従うのではなくて、方向性を見出すために活用するのがいいと思います。」   モックアップ 外観のデザインの段階において、Knight氏は特にビジュアルデザイナーと一緒に仕事を行いました。 また、Knight氏はデベロッパーとは、プロジェクトの各段階ごとにデザインについてディスカッションを行っていたのも特筆すべきことです。開発側は、プロトタイプを作成する段階で集中的にコーディングを行う一方、全体を通してイテレーションを行うことで、チーム全体としてプロジェクトの進行段階が揃うようにしています。   外観のデザイン こうしてチームは、現代的で、美しく、鮮やかな色、HD画質の画像、型にはまらないグリッドデザインを活かしたサイトが完成しました。このグリッドデザインは、リニューアルしたサイトには「生き生きとしたデザイン」が必要だという観点から生まれたものです。 グリッドデザインをベースとして、多くのデバイスに対応したマルチプラットフォームで、コンテンツの変更や削除も容易です。また重要なコンテンツは、ユーザーや利害関係者の提案に応じて、アップデートしやすくなっています。   画像処理 画像の枠のデザインも、型にはまらないグリッドデザインです。 プロジェクトのチームは、まずサイトのレイアウトに完璧に収まる画像を選びました。 マウスをホバーしていない状態（off-hover）では焦点のぼやけた画像の一部が表示され、マウスをホバーさせた状態（on-hover）では画像が右のグリッドの領域まで広がり、画像全体と追加の情報が表示されるような設計になっています。 この画像処理によって、識別しやすいデザイン要素が生まれ、ユーザーのアクセスを大幅に増加させるインタラクションが実現しました。 またチームは、ユーザーへのインタビューから、個々のユーザー向けに動的なコンテンツを提供することが、サイトリニューアルの成功に大切な要因であるとわかっていたので、これも開発しました。   互換性とWebアクセシビリティ 最後に、HubSpotのサイトのユーザーの16%はモバイル端末からアクセスしていること、アメリカの人口の19%はWebアクセシビリティのニーズがあることを考えると、コーディング作業に加えて、互換性とWebアクセシビリティを考慮するのも重要なことでした。 プロジェクトの各作業の段階は同時並行で進めていたので、モバイル端末向け、デスクトップ端末向けの各サイト設計も同時並行で進めました。   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中ステップ3：コーディングとテスト 次のステップでは、HubSpot社のCMSを利用して、きれいなコードを設計するのが目標となりました。 すべてのデバイスにおいてコードの互換性が保たれるように、Knight氏は、ビジュアルデザイナー、エンジニアと共に、QAテスト（品質保証テスト）を定期的に実施しました。   各種デバイスや、Chrome、Safari、Firefox、Internet Explorer、Edge、Opera、Yandexなど各種ブラウザの多数のバージョンの解像度ごとに、Webサイトが正しく機能するかチェックするテストも行いました。 さらに、BrowserStack（多数のブラウザ環境下における作動を再現するためのエミュレータ）を使い、実際のデバイス環境下におけるWebサイトの作動の再現も行いました。 設計を改良するときには、ユーザーのプラットフォームごとの割合はすでに把握できていたため、利用者数やクリティカリティ（Criticality：システムエラーなどにおいて主要な要因を分析するための指標）を考えながら、優先順位を決めて効率的に進めることができました。   ステップ4：テストの継続とイテレーション リニューアルしたHubSpotのWebサイトは、予定通り、年次イベント「INBOUND」の舞台において、同社の共同設立者たちによって、Webサイトのサポート対象である新製品や新機能の紹介とともに初公開されました。 新製品のリリースは、大成功を収めました。 しかし、チームとしては引き続き「Lean UX」の手法をプロジェクトで実践するため、栄光に浸っている暇はありませんでした。早速、チームはGoogleアナリティクスとHubSpotのサイトからデータを集計して、次の指標に注意を向けました。 コンバージョン率（Conversion rate：目標の達成率） 送信率（Submission rate：ユーザーがフォームにデータ入力して送信する率） 離脱率（Drop-off rate） 目標達成数（Goal completion） ナビゲーションサマリーにおける、参照元ページと移動先ページ 検索クエリ（Search Queries）   チームは、直帰率（Bounce rate：ユーザーが1ページだけ見てサイトを去る率）、ページ滞在時間など重要業績評価指標（KPI：Key Performance Indicators）として役に立つ指標のみを分析しました。 さらにデザインの改良を重ねるために、チームはヒートマップを使って2万5000という膨大なセッションを分析し、追加のユーザビリティテストも行いました。     コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ
Webデザイン

現役のデザイナーが語る！優秀なUI/UXデザイナーに不可欠なスキルとは

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Webデザイナー・ライターのJake Rocheleau氏によって投稿されました。   UI/UXデザイナーの仕事の求人を見つけると、困惑を覚えるかもしれません。これら2つの仕事のスキルセットは密接な関係がある一方で、常に重なる領域があるとは限りません。たしかに優秀なUIデザイナーがみんな、ユーザー心理の理解に長けているとは限りません。同様に、優秀なUXデザイナーが皆、PhotoshopやSketchの使い方をマスターしているとは限らないのです。 しかし、求められるスキルセットには重なる領域が多いため、優秀なUI/UXデザイナーとなるには、試しに両方のスキルに挑戦してみることも必要です。 このガイドでは、優秀なUI/UXデザイナーになるために必要な基本的スキルについて紹介します。両方のデザイナーの役割をこなすことができれば、職業の安定化につながりやすいというメリットがあります。 またプロジェクトにおいて、全体像をはるかに把握しやすくなります。   目次 ユーザーの代弁者であること ビジュアルコミュニケーション デザインソフトウェア 共感力・クリティカルシンキング   ユーザーの代弁者であること UI/UXデザイナーはユーザーの代弁者であるべきです。しかしユーザー自身ではありません。この違いを理解しておくことは重要です。というのも、製品を使うほとんどのユーザーは、UI/UXデザイナーと同等の専門性を備えていないからです。 ユーザビリティテストが非常に重要であるのは、こうした理由からです。製品の好ましい点・好ましくない点について、直接ユーザーに尋ねてみましょう。ユーザーの意見（フィードバック）を集めるのです。ユーザーの抱える問題の根本原因を見つけて、それを解決するために必要十分な修正のみ加えます。 UXの本質は、美しいインターフェースというよりも、UIの使い心地・振る舞い・ユーザーインタラクションへの応答にあります。細部にまで十分な注意を向け、あなたが優れていると思えるアイデアでも、ゼロから考え直す労を惜しまない姿勢が大切です。 デザイナーのあなたの好むデザインでも、それがほとんどのユーザーに受け入れられない状況では、アイデアを一度捨てて修正を加えることが一般的には賢明です。 ユーザーの不満に耳を傾け、彼らの本当に言いたいことを理解しようと努めることが大切です。ユーザーテストの大部分はUXの分野になりますが、このことはUIデザイナーとUXデザイナーの両者が心掛けるべきです。 どんなに美しいインターフェースも、適切に機能しなければ、何の価値もありません。 言葉や行動を通して、「ユーザーの代弁者であること」を実践しましょう。これは、UXデザイナーに第一に求められるスキルです。具体的なスキルではないため、習得するのが難しく思えるかもしれません。しかし、心を開き、デザインを再考する労を惜しまなければ、ユーザーの視点をはるかに理解しやすくなると思います。   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中ビジュアルコミュニケーション デザイナーにとって最も貴重なスキルは、おそらくビジュアルコミュニケーション（視覚コミュニケーション）です。 ほとんどのデザイナーは、頭の中で思いついたアイデアを、プロジェクトマネージャー、エンジニア、他のデザイナーたちに説明するべき場面に直面します。 そのため、スケッチの描写によってアイデアを視覚的に伝えることができるとしたら、それは素晴らしいスキルになります。あるいは、ワイヤーフレーム、モックアップ、インタラクティブデザインのプロトタイプなどを作成して、デジタルな媒体でアイデアを伝えることもできます。 アイデアを伝えるためのツールや媒体として何を使うかは、それほど重要なことではありません。 もちろん多くのツールを使いこなせればそれに越したことはありませんが、もしPhotoshopについての知識がなくて、ワイヤーフレーム作成用のツールしか使えないとしても、アイデアを伝えるには十分事足ります。 デザインチームと開発チームにアイデアを視覚的に伝えられることは、非常に重要です。もちろん言葉で伝えることも可能ですが、デザインを直接見せる方がはるかに効率的です。 また、ビジネスやマーケティングなど他の分野の人にも、アイデアを伝えられるようになりましょう。デザインの専門家でない人に対して、複雑な機能について伝えるには、より平易な言葉で説明することが求められます。   このように、視覚的にまたは言葉によって、UXの計画を全ての人に上手く伝えられるようになることが重要です。そのために必要となるのは、1つには視覚的にアイデアを伝えるスキル（スケッチの描写スキル、ソフトウェアなど）、もう1つはコミュニケーションスキルです。 デザイナー自身がアイデアをよく理解しているからといって、他の人にも自然と理解してもらえるとは限りません。 チームやクライアントに対しては、追加説明が必要かどうかを確認して、質問の機会を与えましょう。彼らが質問をするのを恐れて、ただ受動的に座って話を聞いているような状況にしてはいけません。ソフトスキルも、UXの仕事には不可欠です。 コミュニケーションスキルを磨けば仕事の円滑化につながります！   デザインソフトウェア 全てのUXデザイナーがPhotoshop、Sketch、Illustratorなどのデザインソフトウェアを使いこなせるとは限りません。しかし全てのUIデザイナーは、この中のソフトウェアの少なくとも1つは、使えるようにしておくべきです。 両者の仕事の違いは、小さいですがとても顕著です。UIデザイナーは、アイコン、ロゴ、インターフェースのモックアップなど、外観のデザインを担当します。一方UXデザイナーは、これらのデザインされたインターフェースの振る舞い、ユーザーエクスペリエンスのデザインを担当します。 しかし、UXデザイナーの道を進むとしても、PhotoshopまたはSketch（もしくは両方）の使い方を学んでおくのが賢明です。どちらか1つだけでも使うことができれば、アイデアを視覚的に分かりやすく表現するのに役立ちます。雇用主からも、収益性の高いスキルとして高く評価されやすいでしょう。   そして、必要があれば、Web上に数多く存在しているオンラインソフトウェアも利用しましょう。 Adobe Creative Suite（アドビ クリエイティブスイート）などのデスクトップソフトウェアは、デザインプロセスに不可欠です。またInvisionやUXPinなどのプラットフォームを使いこなせることは、ポートフォリオの中で紹介するスキルとして重要です。 これらのツールは、プロトタイピングを素早く行い、インタラクティブなデモを作成するためのものです。 もしくは、Bootstrapなどのフロントエンド言語用のライブラリを使うこともできますが、コードを学ぶ必要もあるため、全てのUXデザイナーが使えるようになるべきツールではありません。 実際のところ、どのツールでプロトタイプを作成するかは、あまり重要ではありません。しかし、数多くのデザインソフトウェアを使えたら、スキルとして履歴書に書くことができるので有利でしょう。   最後におすすめしたいのは、アニメーション（動画）制作用のソフトウェアです。最も人気のあるソフトウェアから選ぶとしたら、PrincipleとAdobe After Effects CC（アドビアフターエフェクツCC）です。 これらのソフトウェアは、モックアップの作成や、レイヤーの操作によってアニメーション（動画）を編集するのに役立ちます。 優秀なUI/UXデザイナーとなるためには、デザインプロセスを各段階ごとに考えることが大切です。デザインプロセスは、まずワイヤーフレームとプロトタイプの作成、次にデジタルグラフィック（UI）のデザイン、最後にインタラクティビティの実装、という順で進めるのが一般的です。 アニメーション（動画）制作用のソフトウェアを使えば、実際にコードを書いてインターフェースのデモを作成しなくても、シミュレーションを行うことができます。 プロジェクトリーダーも、こうしたソフトウェアを使えるスキルのあるデザイナーを高く評価する傾向にあります。実際のデザインプロセスにおいても、役に立つことを実感できるスキルだと思います。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由
アプリデザイン

作業を円滑に！エンジニアとデザイナーが衝突しない秘訣とは

本稿は、UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。記事は、エンジニア、Webデザイナー、ペンシルバニア州立大学の助教授であるJames Stone氏によって投稿されました。   プロジェクトをタイトなスケジュールで進めるときには、共同作業は困難を極めます。 デザイナーとエンジニアの意見を一致させるのは、非常に大変です。 もし彼らが同じプロジェクトで、Webサイトを公開しようとすれば、オフィスの中は戦争状態と化すかもしれません。   では、デザインを素早く完璧にこなし、かつ世界に通用するレベルのWebサイトを構築するにはどうしたらいいでしょうか？ この記事では、プロジェクトの共同作業における問題を解決するためのアドバイスを紹介します。すべてのアドバイスは、私が過去10年間にWebデザイナーおよびエンジニアとして経験してきた成功と問題から引き出したものです。   目次 グリッドシステムをレスポンシブデザインで設計する ピクセルパーフェクトなデザインを実現できるツールを使う Photoshopの代替ツールを考える 値を統一する プロトタイプを使った共同作業をする デスクトップファーストの手法を排除しないこと アセットの引き継ぎには十分注意を払う   1. グリッドシステムをレスポンシブデザインで設計する グリッドシステムはすでにご存知かもしれません。私がエンジニアとしてデザイナーと共同作業をしたときに直面した問題は、グリッドシステムをレスポンシブに設計するスキルが、デザイナーたちに不足していたことです。   グリッドの幅を具体的に設定する まず技術的な話から始めましょう。最初に、グリッドの幅は具体的な数値で設定し、各グリッドごとにガターのサイズも正確に把握します。こうしておくことで、デザインに統一感が生まれ、またくり返し微調整する手間も省けます。 開発チームへグリッドシステムを引き継ぐときにも、数値は正確に揃えておきましょう。もしパディング（padding）を15ピクセルで設定したら、厳密に15ピクセルになっていなければなりません。グリッド全体の幅を1000ピクセルで設定したときも、厳密に1000ピクセルです。 レスポンシブデザインとは、あらゆるデバイスやシステムにおいてWebデザインが柔軟に機能することを意味しますが、最初の数値設定は厳密に行う必要があります。   デザイナーは、モバイル端末上の表示もチェックすること モバイルビュー デザインを美しく仕上げても、それで完成ではありません。モバイルビュー（モバイル端末上の表示）も忘れずにチェックしてください！ もしデザイナーがモバイルビューをチェックしなければ、エンジニアはデザインの意図を汲みながら、モバイル端末上でも上手く作動するように、すべて一人で設計しなければなりません。私はエンジニアとして、こういう状況によく遭遇します。 デザイナーも、グリッドシステムをレスポンシブに設計する方法について、よく理解しておくべきです。 プロジェクトの共同作業を円滑に進めるためには、デザイナーは、デスクトップ版からモバイル版へ移植するときの各要素の並べ方（mobile stacking order）も考えておくといいでしょう。 また時間に余裕があれば、モバイルビューのモックアップを作成しておくと大いに役に立ちます。完成製品のデザインをイメージしやすくなります。   互換性の問題 デスクトップ上で作成したグリッドシステムは、モバイル端末上では上手く機能しないこともあります。たとえば、サイズの大きい要素は、モバイル版のサイズに上手く縮小されないことがよくあります。 デスクトップとモバイルのインターフェース間では、このようにデザインの互換性の問題が起こることがあり、タイムラインを示すUIの要素（timeline UI element）にも見られます。 デスクトップ上では問題なく表示され、時間軸上の各ポイントも見やすいデザインです。しかしモバイル端末上では表示が崩れることがあります。 デザイナーは、こうした問題を自力で解決する必要があります。そうでなければ、エンジニアにデザインの意図を誤解され、予想もしなかったようなおかしなデザインが生まれるおそれがあります。   [PR] UI/UXデザインで挫折しない学習方法を動画で公開中2.ピクセルパーフェクトなデザインを実現できるツールを使う ショックを受けてほしくないのですが、Photoshopは現代的なWebサイトを構築するのに適したツールとはいえません。 私はエンジニアとして、Photoshopで作成されたモックアップを渡されることがよくあります。残念なことに、Photoshopで作られたモックアップは、エンジニアがWebサイトを構築するときには問題となることがあります。Photoshopでは、エンジニアが必要とするレベルの精度と正確さを実現できないからです。   フォントの整合性 第一に、PhotoshopとWebの間で、フォントの整合性が保たれる保証はありません。 Photoshopのファイル形式でデザインされた文字は、Web上で表示が崩れてしまうこともよくあります。文字がより太くなったり、全く異なるデザインになっていたりするのです。オープンソースのフォントでさえ、Photoshopで編集すると、Web上で表示が変わることがあります。 デザイナーは、ウェイト（太さ単位）を基本にして、フォントの調整を行うべきです。 スクリーン上での表示を基本にしてフォントの調整を行うのは、良くありません。Webを構築したときに、デザインが歪んだり劣化する原因になるおそれがああるからです。   パフォーマンスの問題 ピクセルパーフェクト（px単位の正確な設計）が重要なのは、他にもデザイナーがWeb用に作成するPhotoshopのファイルには問題があるからということも理由の1つです。 その1つの例がドロップシャドウです。 Photoshopは高機能なドロップシャドウなどを備えています。デザイナーは、シャドウ、マスクなどのデザイン効果を柔軟に使いこなすことができます。しかし、エンジニアがこれらのデザインをWeb用にコーディングするときには、使える選択肢がかなり限られているのです。 また、エンジニアがWebサイトのフロントエンドの開発をするときには、パフォーマンスを非常に重視します。 スタイリッシュなUI要素を表現するために、24bitの半透過または透過のPNG形式のサイズの大きい画像などを使うとしたら、Webサイトの読み込みに時間がかかります。もしこのような要素が100個あれば、100倍の時間がかかり、Webサイトの動きは非常に鈍くなります。   解決策の1つは、ドロップシャドウを使う代わりに、CSSでコーディングすることです。 CSSを使うと、ドロップシャドウの他にも多くのデザイン効果を表現できます。もしエンジニアがCSSを使えるなら、Web上にPNG形式の画像を埋め込む代わりに、CSSを使うべきです。 軽量なデザインが可能となり、要素のサイズを小さくすることができるというメリットがあります。しかしデメリットもあり、CSSで作ったタイポグラフィやドロップシャドウは、元の画像と全く同じデザインに仕上げることはできません。 2つの画像のうち、上が透過のPNG形式の画像で、下がSVG形式の画像です。 見た目はほとんど同じですが、画像のサイズはPNG形式は12.3kもあるのに対して、SVG形式はわずか1.7kです。SVG形式の場合、シャドウをデザインするときには、ディテールの調整、ブレンドモードによる色の変更なども、完璧に行うことができます。 一方、透過のPNG形式だと、画像の背景色を変更するときに、背景色がアルファチャンネルのデータ領域ににじんでしまって、他の要素の周りに光の輪がついたように見えることがあるのです。   Photoshopの代替ツールを考える あなたがどのようなツールを選ぶとしても、PhotoshopがWebデザインのツールとしては最適な選択でないことは明らかです。たとえば私は、Bohemian Coding社の開発したSketch 3というデザインツールを使っています。 今のところSketchにはバグや問題もあるのですが、デザインの整合性を保つためには非常に優れたツールです。 まず、px単位で厳密に行う設計なデザインを素早く簡単に行うことができます。フォントやドロップシャドウも、CSSでコーディングするのと変わらない出来栄えです。 Sketchには、作成したデザインからCSSのコードを取得して、コピー&ペーストで利用できる機能もあります。そのため、一度デザインしたものを、最終的にHTMLやCSSでコーディングし直す必要もありません。   ピクセルパーフェクトなデザインを可能とする現代的なツールを使えば、デザインの意図を完成製品に反映することが可能です。プロジェクトのメンバーの仕事の負担軽減にも大いに役立ちます。 より詳しい活用方法をご紹介すると、私は各レイヤーのプロトタイプを作るために、Sketchで作成したモックアップをインポートして共有しています。こうすることで、同じチームのエンジニアはデザインの見た目だけではなくて、デザインの動作性も知ることができます。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、
Webデザイン

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） UX/UIデザインコース スマートフォンアプリ開発 アプリデザイン 優れたデザインを作るための社内コミュニケーション術とは