この記事について
この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。
emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。
Webデザインのためのツール（アプリ）はいくつもあるため、Webデザインを勉強し始めたばかりの方は何を使っていいのか迷うと思います。
この記事ではデザインツールの特徴だけでなく、「カード型UIデザイン」を例にWebサイトのデザイン制作に使用する機能の比較をしたり、アプリ間の連携についても触れていきます。
デザインツールの種類
まずはデザインツールの種類です。Webサイトのデザインができるツールは次のものがあります。
- Adobe Illustrator
- Adobe Photoshop
- Adobe XD
- Sketch
- Figma
この他にも様々なツールがありますが、この記事では5つのツールについて、それぞれどんな特徴があるか挙げていきます。
ほかのツールも使ってみたいけど・・・という方の参考にもなればと思います。
デザインツールそれぞれの特徴
Adobe Illustrator
ベクターデータを扱うことができるツールです。
おもにチラシ、パンフレットなど印刷物のデザイン制作時に使われています。
また、ロゴなどのベクターデータが必要な時にも使われています。
Webサイトのデザインにも使われています。
Adobe Photoshop
写真の補正や画像加工ができるツールです。
補正や加工をしながら作業を進めることができるので、Webデザイン制作も1つのアプリで完結できます。
アセット書き出しの機能を使うと、レイヤーやフォルダにファイル名を指定していくだけで、拡張子・サイズ・画質を指定し、1つのレイヤーから複数のファイルを書き出すことができて便利です。
Adobe XD
プロトタイプを作成できるツールです。
ボタンのホバーアクションやなど簡単なアニメーションの作成もできるので、デモを作成できます。ページ遷移もプロトタイプを作成することで確認でき、作成したデザインはブラウザで共有、確認できます。
Sketch
Macで使用できるUIデザインのプロトタイプを作成できるツールです。Windows版がないため、Windowsユーザーは、ファイルを編集できる無料のアプリ「Lunacy」を使う必要があります。
ツールバーやパネルなどメニュー名が英語表記ですが、アイコンと合わせて表示されているので、他のデザインツールを使ったことがあれば比較的悩まずに使うことができます。
Figma
UIデザインのプロトタイプを作成できるツールです。
XDと似た機能で、Webブラウザー上で使用できるとても便利なデザインツールです。ツールバーやパネルなど、メニュー名が英語表記になっていますが、アイコンもあるため比較的悩まずに使うことができます。
有料プランではチームでの共同編集も可能です。
要素を選択すると選択している要素のプロパティの必要な部分だけコピーできるなど、コーディング時は他のツールよりも進めやすく感じます。
Webサイトのデザイン制作に使用する機能の比較
それぞれのアプリのどのような機能がWebサイトのデザイン時に使いやすいのでしょうか。
よくみるカード型のデザインを例に説明していきます。
カード型のデザイン
カード型のデザインはブログ記事一覧などでよく見られるレイアウトです。
画像や記事タイトル、本文などがひとつのカードの中にまとまって、縦や横に並んでいます。
このカード型デザインはXDのリピートグリッド機能を使うと簡単に作ることができます。
XDとその他のアプリでカード型デザインを作り、それぞれ機能の比較をしてみます。
Adobe XD
リピートグリッド機能を使用します。カード型のデザインを1つ作るだけで、簡単に繰り返し表示できます。リピートグリッドで複製されたカード内の画像やテキストを変更することも可能です。
Adobe Illustrator
リピートグリッドのような機能はありません。が、変形の繰り返しを使うことで簡単に同じ間隔で複製できます。
複製されたカードとカードの余白の幅はXDのように簡単に調整はできません。
Adobe Photoshop
リピートグリッドのような機能はありません。
レイヤーを複製したあと整列を利用してレイアウトを整えます。
カードとカードの余白もXDのように調整できません。
Sketch
ここでは、カード型のパーツを複製する方法として3通りの方法を紹介します。
- Make Grid
- 複製ハンドル
- Duplicator（プラグイン）
Make Gridは初期設定ではツールバーに表示されていないので、ツールバー上で右クリックし、［ツールバーをカスタマイズ］を選択し、［Make Grid］をツールバーにドラッグして追加しておきます。
複製したいコンポーネントまたはグループを選択した状態でツールバーの［Make Grid］をクリックし、複製したい数、余白を指定することができます。
Sketch 70以上であれば、複数のオブジェクトを選択すると右下にカギ括弧のようなアイコンが表示され、簡単に複製することができます。
複製後は余白の調整も可能です。
または、Duplicatorというプラグインを追加することでパーツを複製できるようになります。
Make GridとSketch 70からの新機能については @littlebusters さんに教えて頂きました。ありがとうございます。
Figma
リピートグリッドのような機能はありません。が、カードを1つ作成して複製し、まとめて選択すると、以下のようにカードとカードの余白を調整できます。
1列だけではなくタイル状に並べても調整できます。
アプリの連携
デザインアプリは単独で使用してデザインを完成させることはできますが、Adobeのアプリ同士は連携することによって、それぞれの特徴を活かして作業を進めることができます。
そのため、XDではできない複雑なレイヤースタイルをPhotoshopで作業し、XDで表示ということができるのでよりクオリティの高いデザインを作成できます。
IllustratorとPhotoshopで連携
Illustratorでは写真や画像ファイルをリンクで配置できます。
Photoshopで編集した画像をリンクで配置していると、Photoshopで変更した内容がIllustrator側にも反映されるので、連携しながら制作を進めることができます。
また、Illustratorで作成したベクターデータをPhotoshopに配置することができ、Photoshop側でスマートオブジェクトとして配置した場合は、編集時にIllustratorが起動します。
XDとPhotoshopで連携
XDとPhotoshopも連携して作業を進めることができます。
XDに配置した画像を右クリックすると［Photoshopで編集］というメニューが表示されるので選択します。
するとPhotoshopが起動し、画像の色補正などが可能です。
編集後に保存すると、XD側で編集した内容が反映されます。
CCライブラリで連携
Adobe Creative Cloudライブラリに画像やパーツなどを保存しておくと、Creative Cloudのアカウントに同期されるので、Adobeのツール間であれば、どのツールからでも保存した画像やパーツを使うことができるため便利です。
例えば、Illustratorで作成したアイコンなどのパーツをCCライブラリに保存しておくと、Illustratorファイルを開かなくてもCCライブラリパネルから選択してXDで使用できます。
CCライブラリの詳しい使い方はAdobeの公式サイトをご覧ください。
XDだけで大丈夫？
Webデザインの制作現場では、作成したデザインをブラウザで確認できる「プロトタイピングツール」がよく使われています。
なかでもXDはチュートリアルも豊富なため、初学者にも使いやすいツールとなっています。
次のような理由もあり、Webデザインの制作現場でXDがよく使われています。
- ブラウザで確認できるのでクライアントも完成がイメージしやすい
- リピートグリッドが有能
- 共同編集が可能
- Adobeのデザインツールとの連携ができる
実際の制作現場では納品形式を指定されたり、普段使っていないようなツールで制作されたデータをもらうこともあります。
デザインツールはどれか1つで制作しなければいけない、ということはありません。
XDだけでWebサイトのデザインを制作することは可能ですが、IllustratorやPhotoshopとうまく連携しながら進めていけるといいですね。
