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

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

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

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

Illustratorのすすめ

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

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

自由度の高さ

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

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

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

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

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

まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

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

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

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