Illustratorで行うWebサイト・サービスのUIデザイン作成方法

最近は私の仕事としてはコードを書くというよりもUIをデザインすることが多くなってきています。出来上がりを想像しながら創っていくことはとても楽しいことでもあります。例えば私はIllustratorで以下のように一気にデザインしてしまうんですね。

この画面はその中の一部です。実際にはもっとたくさん描きます。

ここまでできれば、コードに落とし込むことはすごく簡単になります。エンジニアにわたすと大体は理解して仕事を進めることができるようになります。

Illustratorのすすめ

最近はいろんXDやSketchなど良いツールもたくさん出てきていますが、私のおすすめとしてはやはりIllustratorです。その理由としては以下のようなものかなと思っています。

  1. 自由度の高さ
  2. 出来ることの豊富さ
  3. ショートカットなどで素早く作業できる

自由度の高さ

大きな画用紙の上にすべてを描いていくという感じがとても良いですね。私の仕事はサービスを作ることが多いです。最初の企画から、それを形にするまでですね。その場合に考えながら進めます。この工程は試行錯誤を繰り返しますので、アイデアをすぐに形にできる必要があります。

そいうった場合Illustratorであれば、先程言ったように大きな紙に描くみたいな感じで、進めていくことができるのですね。インスピレーションをそのままスピーディーに落とし込むことができますね。

本当はコード書きたいんですが、ちょっと時間的なことがあって、その時間が取れないのです(涙)。まぁ優秀なコーダーがたくさんいますので、その仕事は任せています。

今回はこのUI作成方法をご紹介します。

  1. スマホ画面をデザインする
  2. PC画面をデザインする

なぜここまで細かく書くのか

なぜここまで細かく描くかと言うと1つは作曲のような意味合いです。

Webアプリやサイトを制作するときにまず画面をデザインすると思うのですが、みなさんはどんな方法でやっていますか?もちろん

まずは無料で14講座から始めましょう!

ハイクオリティな14講座/98レッスンが受け放題。
募集人数には制限があります。サインアップはお早めに。
無料申し込み期限
3月31日まで

募集 人数
100名 (残りわずか)
×