デザイン超初心者が、デザインツールを開く前に最初に考えるべき3つのこと

対象読者

• デザイン超初心者
• デザインを考える時に、何から考えればよいかわからない人

はじめに

初めてデザイン業務を任された時に何から手をつけていいのかわからず、とりあえずFigmaを開いてはみたものの、 結局何も進まなかったのを覚えています。

その経験から、私と同じくデザインを作成する際に困っている人に向けて、まず何を考えればよいのかを書いてみました。

ポイント1：この画面で、どんなユーザーに何をしてほしいかを考える

デザインを考え始める時に、いきなり「色どうしよう」「配置どうしよう」と考えてしまいがちですが、
最初に考えるべきなのは見た目ではありません。

まずは、

• この画面を見るのはどんなユーザーか
• そのユーザーにこの画面で何をしてほしいのか

をはっきりさせることが重要です。

例えば、
あまりPC操作に慣れていない人なのか、操作に慣れている人なのか、
情報をサッと確認したい人なのか、じっくり内容を確認したい人なのか…
ユーザーによって最適な画面の作り方は異なります。

さらに、「この画面を見終わった時に、ユーザーがどうなっていれば成功なのか」を言語化してみると、デザインの方向性が定まります。

これらが曖昧なままデザインをしてしまうと、使いにくい画面になってしまいます。

これらのことから、デザインツールを開く前に、
「この画面で誰に何をしてほしいか」を書いてみることをおすすめします。

ポイント2：載せたい情報を整理して、優先順位をつける

次にやるべきことは、載せたい情報をすべて洗い出し、優先順位をつけることです。

載せたい情報を全部並べようとすると、 画面はどうしてもごちゃごちゃして見づらくなってしまいます。

デザインをする時、「せっかく情報があるから、全部見せたい」と思いがちですが、
それらの情報を同じ強さで並べると、伝えたい情報が伝わりづらくなってしまいます。

そこで大事になることが、

• 情報の優先順位
• 情報のグルーピング

の2つです。

① 載せたい情報をリストアップする

最初にやることはシンプルで、載せたい情報を一度、全部書き出すことです。

この時点では、 「多すぎるかも」「画面に入るかな？」 といったことは気にしなくて大丈夫です。

とにかく、

• 結果
• 条件
• 設定
• 補足情報

など、思いつくものをすべて出します。

② 優先順位をつける

情報を書き出したら、次にどの情報を先に見てほしいかを考えます。

おすすめは、以下の3段階に分けることです。

• 最優先：この画面で一番伝えたいこと
• 中優先：判断の根拠になる情報
• 低優先：必要な人だけが確認すればよい情報

例えば、

• 最優先：結果（OK / NG）
• 中優先：判定の詳細
• 低優先：解析条件や細かい数値

というように分けるだけでも、 画面構成の方向性がかなり固まってきます。

③ 同じ意味の情報はグループにまとめる

ここで初心者がつまずきやすいのが、優先順位だけつけて、情報をバラバラに配置してしまうことです。

そこで重要になるのがグルーピングです。
グルーピングは、「意味が同じ情報はひとまとめにする」「似ている情報は近くに配置する」の2点だけです。

（例）
通知のON/OFF、通知音、通知の頻度
　→「通知設定」という1グループ

こうしてグループを作ると、

• 情報の塊が見えてくる
• 画面を分けやすくなる
• カードやセクションにしやすくなる

といったメリットがあります。

上記の①〜③を行うことで、

• 重要なグループは目立つ位置に
• 補足的なグループは折りたたむ
• 詳細なグループは後半に配置する

というように、「どのグループを、どの強さで見せるか」を決められるようになります。

これは単に見た目を整えるためではなく、ユーザーが迷わず情報を理解するための設計です。

ポイント3：ざっくり配置して、周りの人に意見をもらう

ポイント1・2で考えた内容をもとに、次はいよいよ画面を作り始めます。
ここで大事なのは、最初から完成形を作ろうとしないことです。

どうしても、「ちゃんとしたものを作らないと見せられない」などと考えてしまいがちですが、
これは逆にデザインが進まなくなる原因になります。

色やフォント、細かい余白調整は後回しで問題ありません。
まずは、

• 情報の順番は合っているか
• グループ分けはわかりやすいか
• この画面で何をしてほしいか伝わるか

といった画面の構造をざっくり作ります。

ある程度形になったら、
できるだけ早く周りの人に見せてみてください。

他の人から意見をもらうと、「ここわかりにくい」「どこを見ればよいかわからなかった」
といった指摘を受けることがあります。

最初は少し落ち込むかもしれませんが、
「より良いデザインを作るためのユーザー視点のヒントが増えた」ということです。
この段階で指摘が出るほど、デザインは良い方向に進むと言えます。

デザインは一発で完成するものではなく、
作る → 見せる → フィードバックを受ける → 直す
を何度も繰り返して、少しずつ良くなっていきます。

「ざっくり配置して周りの人に見せる」は、 デザインを前に進めるための効果的な方法です。

まとめ

デザインをする時は、 いきなり画面を作り始めるのではなく、まず次の3つを意識します。

• この画面で、誰に何をしてほしいのかを考える
• 載せたい情報をすべて出し、優先順位とグルーピングをする
• ざっくり配置して、早めに周りの人に見せる

この順番を意識するだけで、 「何から手をつければよいかわからない」という状態から抜け出しやすくなります。

参考文献

• 『デザインの基本ノート
  　仕事で使えるセンスと技術が一冊で身につく本』
  　著者：尾沢 早飛
  　出版社：SBクリエイティブ