デザインスクール・コーディングブートキャンプで学んだウェブデザインの始め方

読者の中には、将来自分のサービスを作りたいと思っている人も多いだろう。やりたいビジネスが決まったら、デザイナーやエンジニアにイメージを伝えるために簡単なサービスのモックアップを自分で作る必要が出てくる。そこで、今回は初めてウェブデザインをする読者のために、筆者がデザインスクール およびコーディングブートキャンプで実際に学んだウェブデザインの始め方を簡単に紹介したいと思う。

本記事でカバーするのは、この3つだ。

  1. 参考にできる良いデザインの見つけ方
  2. ワイヤフレーム(レイアウト)の アイデア出しの仕方
  3. ウェブデザインを作る際に使えるツール

1. 参考にできる良いデザインを見つけ方

まずはじめに、現在ベンチャーキャピタリストとしても大成功しているヒップホッパーのNasの名言から始めさせてもらいたい。

No idea is original, there’s nothing new under the sun, it’s never what you do, but how it’s done

-Nas

Source: Billboard

なぜこの名言をはじめに紹介したかというと、デザイン初心者にありがちな、まだ誰も作ったことがないようなデザインを作ろう!といった勘違いを無くし、デザインのハードルを下げたかったからである。Nasが言うように、この世の中に完全にオリジナルなものなど存在しない。どんなデザイナーも、デザインに取り掛かる前にはインスピレーションやアイデアをもらうために何かしら参考となるものを見る。それはアートかも、自然界のものかも、他の人が作ったデザインかもしれないが、何かしら見ているのである。(“パクリ”と“参考”の違いは奥が深いので、今後別の記事で紹介しよう。)

特に初心者の場合は、他の人のデザインを見ることから学べることは多い。筆者のデザインスクール で教えられたファーストステップは、自分の好き・嫌いなデザインを見つけることだった。もう少し詳しく説明すると、

  • 10個の好きなデザイン(使いやすそう、面白い、かっこいい、特別感を感じる等)を見つけ、どんな要素によって自分がそう感じたのかその理由を分析すること
  • 同じく、10個の嫌いなデザイン(使いにくそう、つまらない、ダサい、何も感じない等)を見つけ、どんな要素によって自分がそう感じたのかその理由を分析すること

また、これをすることによって、後々デザイナーから上がってきたデザインの批評と指示出しもしやすくなるという効果もある。

最後に、このアクティビティをする際に参考となるウェブサイトもいくつか紹介しよう。


2. ワイヤフレーム(レイアウト)の アイデア出しの仕方

さて、1のアクティビティを終える頃には、自分のデザインの好みがだいぶわかってくる。そこで、次のステップとして、実際にワイヤフレームを書き出してみよう。筆者がデザインスクール で学んだのは、“Crazy 8s”と言う手法である。

  • Crazy 8sに必要なものは一枚のA3用紙ペンタイマー(スマホで可)だけ。
  • 道具が揃ったら、紙を横に1回、縦に2回折って8つのセクションを作ろう。
  • 用意が終わったら、タイマーを8分にセットして、それぞれのセクションにワイヤフレームを書いていこう。注意点としては、1つのデザインについて1分だけしか使ってはいけないことである。考えすぎは禁物だ。

Crazy 8’sのアウトプットイメージ

やってみるとわかるが、最初の2つ3つのセクションを余裕余裕と思っていると、後からだんだんキツくなってくる。後半になるにつれて変なデザインも出てくるが、気にしなくて良い。筆者も初めてやったときは、謎のデザインを量産した。

デザイン初心者ほど、ユニークなデザインをつくりがちだが、そんな時には偉大なデザイナーたちが残したこの言葉たちを思い出してほしい。

Don’t try to be original, just try to be good. 

– Paul Rand (IBM等の著名企業のコーポレートデザインを担当)

Less is more 

-Mies van der Rohe (モダニズム建築の三大巨匠のうちの1人)

ご参考までに、こんなデザインは作らないよう。。。


3. ウェブデザインを作る際に使えるツール

最後に、実際にデザイナーやフロントエンドエンジニアが使っているデザインツールを紹介して締めくくろう。最近は色々と便利なツールが出てきているが、著者のデザインスクール で使ったのは、SketchPrincipleだ。

Sketchはワイヤフレーム作成用で、Principleはそのワイヤフレームに動きをつけるためのものだ(ボタンをクリックすると画面が遷移する等)。

他にも、コーディングブートキャンプではBalsamiqが使われていたり、AdobeのXDを使ったりするデザイナーがいたりするが、そこは好みの問題なので、どれを選んでも構わない。どのツールでも簡単にプロトタイプが作れることがわかるだろう。


今回はデザインの始め方だけの軽い紹介だったが、次回以降、基本のデザインのルール等についても紹介していこう。