すべてのUXデザイナーに必須のスキル、スケッチをマスターする方法 | アドビUX道場 #UXDojo

連載

エクスペリエンスデザインの基礎知識

スケッチはデザインプロセスにおける最重要な基礎のひとつで、通常プロジェクトの初期に行われ、プロセス全体にわたるデザインのトーンを決定することになります。スケッチすること自体は単純な作業に思えますが、手際よく行うにはいくつかの秘訣があります。この記事では、UXデザインワークフローのレベルアップに役立つ、スケッチに関する情報をまとめてお伝えします。

なぜスケッチするべきなのか？

スケッチがなぜ必要かというと、課題に対する最適な解を見つけたいからです。スケッチをすれば、デザイナーは様々なアイデアを試し、これだという解に到達するまで反復的に改善していくことができます。

スケッチを行うことで得られる大きなメリットは以下の5つです。

1. アイデア出し

スケッチは優れたブレインストーミングの手段になります。「すばやく失敗」を可能にして、いくつものアイデアを低コストかつ短時間で生み出します。スケッチの持つ、完成を目的としないという特性が、新しいアイデアを生む土壌となります。頭の中にある考えをスケッチとして形に落とし込む際に、私たちは自然とさらに良いソリューションを模索しているのです。

2. アイデアの視覚化

もしかすると、もう作りたいもののイメージを明確に持っているから、スケッチは不要だと思うかもしれません。ですが、実際には、頭の中だけにあるアイデアから直接ものをつくるのはとても難しいことです。アイデアを視覚化することによってはじめて見た目や動作を詳細に詰めることができます。

レオナルド ダ ヴィンチのような偉大な発明者であっても、ものづくりに取り掛かる前のアイデアスケッチは欠かせないものだった

3. デザインを伝える

デザインに関する判断を、言語で伝えることは可能ですが、言語化されたアイデアはあまり確実なものではありません。コンセプトを言葉で説明するとき、話し手は自身の意図がそのまま相手に理解されるだろうと期待しますが、残念ながら大抵の場合それはうまく行きません。なぜなら言葉の解釈は人それぞれだからです。あるものがこのような形状でこのように動作すべきだと言葉で示せば、聞き手は各々の想像力に頼ってそれを解釈するでしょう。結果的に、解決案は異なる理解のされ方をするかもしれません。多くの場合、曖昧さが生まれます。

スケッチは視覚的なコミュニケーションの手段であるため、相手は想像力に頼る代わりに、意図をそのまま「見る」ことができます。スケッチはあいまいさを排除し、共通の理解を深めるのです。20世紀の最も影響力のある建築家のひとり、ル・コルビュジェは言っています。「私は喋るよりも描くことを好む。描いたほうが速いし、嘘が含まれる余地が少ないからだ」

ル・コルビュジェによるスケッチ。出典: archidialog

4. より良いコラボレーション

スケッチは議論の活性化にも使えます。アイデアを検討するとき、スケッチがあれば、デザインの特定の側面について話し合うことができます。チームメンバーは、スケッチ上の具体的な場所を指しながら、互いの考えを交換できます。チームはすばやく良いアイデアと悪いアイデアをふるい分けることができるのです。

アイデアを議論しながら解決案をスケッチするチーム。出典: General Assembly

プロジェクト関係者をデザインプロセスの初期段階に巻き込みたいときにも、スケッチはパワフルなツールです。スケッチは誰もができるため、デザイナー以外も参加できます。デザイナーではない関係者も、解決案を視覚的に表現して、プロジェクトのすべての要件を説明できるでしょう。

5. 迅速な改善の繰り返し

スケッチは、デザインをすばやく改善するのに向いています。高精度のプロトタイプがある場合でも、それに手を加える前にスケッチで新しいアイデアを検証した方が、短時間で作業を行えます。

スケッチはいつするべきか

デザインプロセスのほぼ全体にわたりスケッチを利用できますが、特に初期段階には、複数のデザインの方向性を同時に比較検討し、最良のデザイン選定を低コストで行える点が有効です。何か解決案をスケッチし、それが気に入らなかったとしても、ただゴミ箱に捨ててやり直すだけのことです。

スケッチについて覚えておくべき2つのポイント

スケッチは画を描くことではない

スケッチと描画は混同されがちです。それが、スケッチは綺麗に描かれるべきという危険な誤解に繋がります。プロのイラストレーションのような見た目のスケッチにしようという努力は、大いなるエネルギーのムダ使いです。

Matt Corrallによるこのスケッチは素晴らしいものですが、スケッチというよりは描画と呼ぶべきものです。

スケッチと描画の違いはとても重要です。スケッチはアイデアをいくつも創出し、比較検討するためのものであり、アートワークの制作ではありません。つまり、アイデアを伝えることさえできれば、それは良いスケッチなのです。

簡単に描けて捨てやすいのがスケッチの本来の姿です。見た目が悪くても素晴らしい働きをするでしょう 出典: Gareth Botha

スケッチはプロトタイプではない

スケッチとラフなプロトタイプが混同されているケースもよくあります。どちらもデザイン制作物としての見た目が似ており、どちらもデザインコンセプトを表現できるということを除けば、両者はまったく違うものです。スケッチは通常プロトタイプ制作の手前の段階で行われ、デザインアイデアを目に見えるかたちで伝えるのが目的です。その後、スケッチからラフなプロトタイプを制作することができるでしょう。ラフなものであってもプロトタイプ制作にはスケッチより遥かに労力がかかります。スケッチのようにプロトタイプを大量に制作すべきではありません。

ペーパープロトタイプ。出典： Google

スケッチの目的を定義する

スケッチを始める前に、その目的を決めておくことはとても重要です。その際には以下の2つの点を考慮しましょう。

スケッチするときに行うべきこと

ウォーミングアップ

まず両手を前に出して軽く振りましょう。手首をリラックスさせる効果があります。さらに線、円、三角形など基本的な図形をいくつか描いてウォーミングアップをします。

ひとつのアイデアだけに集中しない

スケッチは、要するにアイデアを生み出すための作業です。「浅く、広く」の精神で、まずは可能な限り多くのアイデアを描きだしましょう。そこから最も有望なものを選びましょう。

スケッチは可能な限りシンプルに

スケッチのポイントはスピードとシンプルさです。ディテールや装飾は不要です。コンセプトの正しさを示すための、最もシンプルなスケッチを目指しましょう。

作業に時間制限を設ける

タイマーによる時間制限を設けることは、ゴールに向かう集中力を高める効果があります。スケッチに使う時間は1時間だけだと決めれば、その時間をより効率的に使うことができるでしょう。

ワークショップやブレインストーミングでスケッチをする場合、グーグル ベンチャーズがデザインスプリントの書籍で提唱した「クレイジー エイト（Crazy Eights）」を使ってみてはどうでしょうか。5分以内に8つのスケッチを描くという手法です。

クレイジー エイトはアイデアのバリエーションをどんどん作り出すための優れた手法です。出典： Jake Knapp

スケッチにタイトルと番号をつける

スケッチにタイトルを記すように習慣づけましょう。異なるスケッチが互いに判別しやすくなり、あとから参照しやすくなります。アプリの異なる箇所のスケッチを同時に進めるような場合には、タイトル付けは特に重要になります。

スケッチが表現しているものを理解するにはタイトルが役立つ 出典： Dane Petersen

スケッチに番号を振ると、並べるのに便利なだけでなく、後でまとめてインタラクションのフローを構築する際にも有用です。また、スケッチをもとに議論する際（特にオンラインの場合）、スケッチ番号を使えば明確に対話ができます。

スケッチした要素を矢印で繋ぐ

矢印は、スケッチ上の特定の要素を指し示すためだけでなく、画面展開の順番、インタラクションフロー（例：ユーザーがボタンをクリックするとどうなるか）、イベントの発生順、画面上の動き（例：ジェスチャーやシンプルなアニメーション効果などを表現）などを説明するのに使えます。

インタラクションを表現するのに矢印を使う。出展: Keith Tatum

注釈やメモを追加する

注釈をスケッチ上の要素の隣に添えると、見ただけでは伝わらない個々の要素の意味を明確にできます。追加情報があればメモとして記述しましょう。

注釈の使い方に関する関するヒントを2つご紹介します。

注釈やメモに赤が使われている例。出典： Jason Robb

スケッチが終わったら

紙のスケッチのデジタルコピーを作成する

スケッチのデジタルコピーを作成することで、ミーティングごとに紙の束を持ち運ぶ手間を省けます。チームメンバーとの共有も簡単になります。EvernoteやDropboxのようなツールを使えば、チームメンバーや関係者にはそのパーマリンクを伝えるだけです。

Evernoteアプリを使ってスケッチをスキャン

スケッチのレビューと評価を行う

スケッチ作業の終わりにはいくつかのデザインバリエーションができていることでしょう。追求する価値のあるアイデアを選択する局面です。それぞれの案の強みと弱みを考えましょう。1つか2つ、課題の解決に最も適した案を選びましょう。ときには、アイデアやその一部を組み合わせたコンセプトの作成が必要になることもあるでしょう。

フィードバックを集める

チームメンバーからの率直なフィードバックを受けることは、作業の質を向上するために欠かせません。同僚とスケッチを共有して、スケッチに対する意見や感想を聞きましょう。その際、以下のポイントに注意しましょう。

収集したフィードバックは、コンセプトを改良するときの役に立ちます。スケッチを同僚が気軽に見られる環境に置きましょう。ペンと紙を使ったスケッチがデジタルに大きく勝る点のひとつは、壁に貼っておけば誰もが見られることです。

スケッチは共有するためのもの。壁に貼ってアイデアを他の人と共有する。出典： Michael Lashford

スケッチの技術を向上させる10の助言

1. 「アーティスト」になる必要はありません

「絵が下手な自分にスケッチなんて」と思いながら記事を読んでいる方もいるでしょう。もし、絵の技術が不安だからとスケッチを避けているなら、それはあなただけではありません。絵のクオリティの優劣が判断されることへの恐れの克服が必要なのです。スケッチの目的が、様々なアイデアを探索し、それをコミュニケーションすることだと覚えておくのは助けになるでしょう。美術や描画技術のテストではないのです。線、四角、矢印、円さえ描ければ、誰でもスケッチはできます。

2. 練習が完成度を高める

スケッチの技術です。どんな技術でも同じように、実際に行えば行うほど上達します。日常的にスケッチを行う習慣をつければ、技術の向上に役立つでしょう。

スケッチを始めたばかりなら、まずは基本図形、すなわち、線、四角形、円を練習しましょう。どんなスケッチも、これらの基本的な要素から成り立っています。頻繁に使う要素を確実に描けるようにすることで、スケッチの基本スキルを確立できます。

3. スケッチの見た目のクオリティにこだわらない

見た目のクオリティを気にし過ぎると、スケッチの邪魔になることがあります。スケッチを「綺麗」に仕上げることに過度に気を取られると、そもそも解決したかった課題を簡単に忘れてしまいます。描いたスケッチのほとんどが最終的にはゴミ箱行きになることを思い出しましょう。丁寧に洗練されたスケッチは不要なのです。明瞭さこそが優先されるべきです。ですから、「綺麗なスケッチが描けたか」ではなく、「明瞭に伝わるスケッチが描けたか」と考えましょう。

4. 色やシャドウを効果的に使う

スケッチの基本ルールのひとつは、色が邪魔しないようにグレースケールで描くというものです。ですが、限られた数の色（例えば、コントラストの高い1色ないし2色）を使い、特定の要素に注意を向けたり、視覚的な意味として使う（リンク要素に青を使う）こともできます。もし、色をスケッチで使用する場合は、使い方の一貫性に留意しましょう。

色以外にも、シャドウをインタラクティブな要素（ボタンなど）に加えると、その役割りが理解しやすくなります。

スケッチ上で「ENTER」と書かれた要素が押し込めるボタンであることをシャドウによって示している 出典： Yael Levey

5. 長い直線を描くには

長い直線を描くときは、肘と手首は固定したまま、ペンを持った腕を肩を起点に動かすと、より長くまっすぐな線が描けます。このテクニックはホワイトボードに描くときにも応用できます。

6. スケッチをレイヤー化する

Peiter Buickが「The Messy Art of UX Sketching」という記事に書いた素晴らしい助言です。彼のアドバイスは、薄いグレー（20〜30%）のマーカーでスケッチを始め、その上により濃いグレーのスケッチを次々に重ねていきます。スケッチを仕上げる段階では60%のグレーのペンを使います。このテクニックを使うとスケッチを一歩ずつ作成できます。まずスケッチ全体の構造をアウトライン化し、順を追って必要な詳細をその上に重ねていきます。

https://www.youtube.com/embed/TuQbzTwYHTA?feature=oembed

7. 紙を回転させて描く

プロのスケッチ描きは、最適な描画姿勢を保持できるよう常に紙を回転させて作業します。最低限の努力で直線を描けるようにしているのです。もし垂直に直線を引くのが難しいと感じたなら、紙を90度回転させ、水平な直線を描いてみると楽かもしれません。

8. テンプレートを使う

テンプレートを使うとスケッチの時間を節約できます。新しいレイアウトをスケッチするたびに、共通の要素を繰り返し描く必要がなくなります。

出展: UXMag

既存のスケッチをコピー機で複製すると、簡単にテンプレートが出来上がります。

9. デジタルツールでスケッチする

スケッチといえばペンと紙でするものというイメージですが、デジタルデバイスを使うことも可能です。iPad Proなどを使ったデジタルスケッチなら、消しゴムの屑や紙の束を排除できます。また、オフィスとクライアントとの行き来が多いデザイナーなら、スケッチを整理しやすいデジタルは向いているかもしれません。

iPad Proを使って描かれたスケッチの見た目は手書きのスケッチと似ている 出展: Amanda Somers

10. さまざまな手法にトライする

ことスケッチに関しては、どんな場合でも通用するスタイルは存在しません。誰もが自分なりのスタイルを身に着けています。ですが、スケッチを始めたばかりの初心者なら、どのスタイルで行けばよいか迷うかもしれません。心配ご無用。続けるうちに自分に最も適した手法が見つかるでしょう。ただし、そこに到達するには、常に新たなテクニックを試し続けることが必要です。まだ使ったことのないフォーマット、スタイル、手法があれば、積極的に挑戦しましょう。

おわりに

スケッチは、デザインのアイデアを模索し、洗練させ、伝える手法として、長年にわたって用いられた実績あるアプローチです。素晴らしいユーザー体験の創造に欠かせない要素です。スケッチのスキルを磨いたならば、時間を節約し、より明快に思考し、より優れた課題の解決案を発見できるようになるでしょう。

この記事はWhy Sketching Is an Essential Skill for Every UX Designer and How to Master It（著者:Nick Babich）の抄訳です