Webデザインを作成するツールと聞いて、はじめに何を思い浮かべますか。有名なところで言えば、IllustratorやPhotoshopなどのAdobe系のソフトですよね。2017年からはAdobe XDの正式版がリリースされ、作業の効率化を図る機能が多く盛り込まれた新しいソフトとして登場しています。
このほかにSketch（Macのみ）、Figma、Drama、InVision Studioなど、優れたUIデザインツールもありますから、OSや用途を考えて選ぶとよいでしょう。
今回は、はじめてのデザインといえばコレ。Illustratorに注目して起動から基本の環境設定、各メニューの名称を覚えていきます。デザイナーを目指している方も、 デザインができるようになりたいエンジニアの方も、ぜひご一読ください！
Illustratorとは
Adobe Systems社が提供しているドロー系のグラフィックソフトです。主にロゴやアイコン作成、Webサイトやアプリのイメージ制作などに使用されています。
特徴としては、基本的に点（アンカーポイント）と点を線（パス）でつなぎ囲むことによって形づくられています。このデータのことをベクターデータといいます。拡大、縮小、変形などした際に計算処理をして描き直しているため、画質の劣化がありません。
保存したデータの拡張子は.aiと表示され、データ書き出し時のファイル形式はJPEG、PNG 、PSD、 SWF、 TIFFとなります。
Illustratorを起動
Illustratorを使うためにはAdobeのアカウント登録が必要です。起動時にアカウント情報（メールアドレス、パスワード）の入力が求められることがあるため、そちらは済ませておきましょう。起動後は下記の画面が開きます。
基本設定
それではさっそく新規作成していきます。左側のメニューから新規作成をクリックします。すると一つ目のダイアログが出てくるため、幅は1920（フルHD）、高さは5000（任意）単位はピクセルに設定します。
つづいて詳細設定をクリックすると二つ目のダイアログが出てきます。ここで注意する点は2つ。Web用にデザインする場合は、カラーモードをRGB、ラスタライズ効果をスクリーン（72ppi）にします。
DTPデザインの場合は、カラーモードをCMYK、ラスタライズ効果を高解像度（300ppi）にします。最後にドキュメント作成をクリック。
白いアートボードが一つ作成されました。
作業前にデータを保存します。ファイル＞保存の順に進みます。
保存先とファイル名を聞かれるので、任意の場所、名称に設定します。ファイル名の拡張子は入れなくても問題ありません。ファイルの種類が.AIであることを確認して保存をクリック。
最後にダイアログが出てきますが、基本的には変更せずOKをクリックします。
ここまでで基本設定は完了です。
基本画面のメニュー
基本画面のメニューの名称、位置を確認していきます。①はツールボックス、②はメニューバー、③はパネル、④コントロールパネル（補助メニュー）と呼びます。
今回③はレイヤーの内容が開いているため、レイヤーパネルという名称になります。
お疲れさまでした！基本設定は、今後Illustratorを使うときに必要となる知識なので、メニューの名称と合わせて覚えていきましょう。また、印刷物かWebかにより制作環境が異なりますからご注意くださいね。
