ここ数年のWeb業界の成長は凄まじいもので、やれ新しいツールだ、やれアップデートだと毎日のように新しい情報が飛び交っています。
わたしがWebデザイナーを名乗り始めてから7年ほどの間にも、Fireworks・Photoshop・Adobe XD（以下XD）とWebデザインに関するデザインツールは変化を遂げてきました。
新しいUIに慣れたり、社内で一斉に切り替えないと問題が起こったり、新しいツールを導入する・乗り換えるということはかなり大変な作業なんですよね。
そんなしがらみもあって、なかなか古い慣習から抜け出せないでいるという方も多いのではないでしょうか。
以前の記事ではWebデザイナーがフロントエンドエンジニアを目指すためのステップについてお伝えしましたが、今回はデザイン力をさらに磨くためにデザインツールの話をしたいと思います。
Fireworksを経て、PhotoshopやAdobe XDでデザインをしています
コーディングではHTML・CSS・Javascript（jQuery）を使用し、PHPを編集してWordpressをカスタマイズしたりもします
ワイヤーフレームをつくるのに最適なAdobe XD
意欲的なアップデートでどんどん使いやすくなっていますよ
公式サイトより
公式サイトにもあるように、UX/UIデザインのためのツールです。
ただのデザインツールに留まらず、簡単にプロトタイプ（ページ遷移なども確認できるテストページのようなもの）を作成することができます。
プロトタイプは自身のテストサーバなどにアップロードする必要はなく、ワンクリックで共有用のURLを発行してくれます。
プロトタイプに対してパスワードを設定することや、閲覧権限を制限することも可能です。
共有されたプロトタイプに対して、Adobeのアカウントがない人でもコメントで修正指示などを残すことができます。
修正が完了したら該当のコメントに「解決」のステータスを付けることで、未対応のコメントのみ残るため進捗が分かりやすいです。
Adobe XDの使いどころ
XDは主にワイヤーフレーム作成に使用しています。
わたしはまだまだWebデザインPhotoshopガチ勢なので、デザイン時にXDを使用することは今のところ多くないです。
写真を多用していないシンプルなウェブサイトの場合は、XDでそのままデザインまで完了することもあります。
XDの優れた点はなんと言っても軽量なところ。
カンバスを複製しても複製しても軽快に動作してくれます。
この軽さはPhotoshopがXDに劣る点ですね。
次の章でお伝えするような便利機能を使って、ささっと複数ページのワイヤーフレームを作成し、ささっとページの導線を設定したプロトタイプをつくるのに重宝します。
わたしにとってのXDは軽さとスピードが命なのです。
アプリなどのUI/UXデザインには最適なツールであると言えます。
Adobe XDの便利機能3選
リピートグリッド
Adobe XDの代名詞とも言える機能、リピートグリッドです。
規則的なレイアウトの複製が本当に簡単です。簡単オブ簡単。
今までのコピペ地獄はなんだったのかと軽く絶望を感じるほどです。
複製の簡単さに加え、複数の画像をレイアウト内の画像エリアにドラッグ&ドロップすることで一度に画像のマスキングを行うことができます。
同様に、改行で区切ったテキストファイルを該当のテキストエリアにドラッグ&ドロップするだけで、リピートグリッド内のテキストをまとめて変更することができます。
プラグインが豊富
XD自体が新しいツールのため、こまめにアップデートがされるものの「この機能があったらもっと使いやすいのに！」ということも少なくありません。
そんなときに活躍するのがXDのプラグインです。
2018年10月のアップデートでプラグインの使用・開発が可能になり、2019年には開発可能なプラグインが幅広くなりました。
それに伴い、プラグインの検索機能も向上したため、探している機能が見つけやすくなったのではないかと思われます。
あなたが不便に思っている点はきっと他のユーザーも不便に思っていることでしょう。
少しネットで調べてみると、誰かがまとめた「おすすめプラグイン〇選」という記事がたくさんありますので、それらを参考にしてみてくださいね。
1点注意事項をお伝えするとすれば、セキュリティリスクが高まるため公式プラグイン以外は避けることをお勧めします。
プラグインをインストールし自分仕様のXDに育てていくことで、よいXDライフを送りましょう。
リアルタイム共同編集
こちらは2019年11月4日に追加された新機能です。
まだベータ版ではありますが、クラウド上のデザインファイルを複数人で作業ができるようになりました。
大規模サイトを作成する機会の多い会社などではお待ちかねの機能なのではないでしょうか。
わたしも後輩にデザインの複製を手伝ってもらったとき、途中で自分でもデザインを進めたいと思っても後輩の作業中には自分の作業を進められず、結局後輩が帰った後に残業してしまうということが何度かありました。
クラウドによる共同作業が一般的になれば、同じ空間にいる必要もなくなりますね。
会社勤めでも夢のノマドが実現する日もそう遠くはないのかもしれません。
今後のアップデートにも目を光らせて、自分に合った使い方を見つけていってくださいね！
イラストのメインビジュアルや自作アイコンにはAdobe Illustrator
公式サイトより
読んで字のごとく、イラストを作成する際にIllustratorは活躍します。
記事冒頭のデザインツール経歴をご覧いただければ想像できるように、WebサイトのデザインにIllustratorを使用した経験がわたしにはございません。
Webサイトの細かいパーツをつくるときにのみ日の目を浴びるツールとなっています。
コンテンツの装飾に使うイラスト、ロゴ、アイコンまたはフォントにあしらいを加えるときなどにIllustratorを使用します。
DTP※デザイナーは、名刺やポスターのデザイン制作のために毎日Illustratorを酷使していることでしょう。
DeskTop Publishing（デスクトップパブリッシング）の略。
ざっくり言うと、DTPデザイナーとは印刷物のデザインをする人です。
Adobe Illustratorの使いどころ
Webサイトのイラストをいちから書き起こすことが少ないため、わたしはもっぱらアイコンの作成に使っていますが、中でもSVG※の形式で利用することが多いです。
Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略。
JPEGやPNGはビットマップデータで、SVGはベクターデータです。
ピクセルによる描画ではなく複雑な計算式によって表示されているため、Retinaディスプレイでも粗くなりません。
SVGを使用すれば、解像度2倍の画像を別途書き出してJavaScriptやhtmlでデバイスによる画像の切り替えを行わなくてもよいのです。
ただ、複雑な計算式でできているだけあって、要素が複雑になるほどSVGの中身の数字も膨大になりますので、扱う際は心構えをしておきましょう。
Adobe Illustratorの便利機能3選
共通カラーの置き換え
デザインが複雑になるほど、共通の色を見つけ出て選択し変更するのは手間ですよね。
特に自分が制作していないイラストならなおさらです。
この機能を使えば、線でも塗りでも両方でも同じ色を一括で変更することができます。
メニューバーの「選択」から「共通」メニューを見つけます。
さらにその中から線か塗りかを選択すると、同じ色のオブジェクトが自動で全選択となります。
あとはお好きな色に変更するだけです。
アセットの収集と一括書き出し
この機能でWebサイト用画像の書き出しが格段に楽になりました。
もうひとつひとつスライスを設定せずに済むのです。
簡単な操作で、一度に複数の形式やサイズを書き出すことができます。
PNG、JPEG、SVG、PDFで書き出すことが可能です。
アートボード全体またはアートワーク部分のみというように範囲を選択することができます。
例えば同じ縦横サイズのアイコンを用意するときは、アートボードで書き出すとサイズを揃えることができます。
フリーフォームグラデーション
フリーフォームグラデーションとは、今までの2点間でのグラデーションとは違い、オブジェクト内のどこにでもカラー分岐点を作成することができます。
自由に設定した分岐点間の塗りを滑らかに仕上げてくれます。
自由度が上がりより精密なグラデーションが作成できるようになったうえに、作業も簡単になるのだからIllustrator様様です。
フリーフォームグラデーションタイプには点と線の2種類があるようです。
自分の理想のグラデーションを表現できるよう、いろいろといじってみるとよいでしょう。
写真が豊富なWebデザインならやっぱりAdobe Photoshop
Webデザインをする際にはどんなメリットがあるのでしょう？
公式サイトより
Adobe Photoshopの使いどころ
大本命Photoshopです。
写真加工とWebデザインの際に使用します。
写真はPhotoshopで開いたときに立ち上がるCamera Rawで調整します。
その時点で調整を済ませておくと、後日同じ写真ファイルを開いたときにも以前の調整履歴が残っているので助かります。
わたしが地味に好きなポイントは、スクリーンショット後などクリップボードに画像がある状態でPhotoshopを起動すると、コピーされた画像のサイズでカンバスサイズを推奨してくれる点です。
アクティブウィンドウのみをコピーしたときは、新規カンバスにペーストするだけでトリミングの必要がないためうれしい仕様です。
便利機能3選
アセット書き出し
Photoshopでは、書き出す画像を収集する必要も、書き出しのステータスを付けてメニューから設定をする必要もありません。
準備はメニューバーの「ファイル」から「生成」を探し「画像アセット」を選択するだけ。
その後は書き出したいときに書き出したいレイヤーまたはグループの名前を、○○○.pngのように任意のファイル名に変更するだけで自動で画像を書き出してくれます。
△△△.jpg8や200%□□□.pngのように決められた命名規則を活用することによって、解像度やサイズも指定できちゃいます。
上の例では、△△△は解像度80%のjpgとして、□□□は2倍の大きさのpngとして書き出されます。
解像度は10%区切りであれば一の位の0とパーセントを省略できますが、95%のように細かい指定をする際は△△△.jpg95%と入力しましょう。
驚くのはまだ早いですよ。アセット書き出しでは書き出し画像の複数指定も可能です。
□□□.png8,200%□□□@2x.png8のように,（カンマ）で区切ることで複数の設定も速攻で書き出しが完了します。
リンクを配置
圧倒的時短！使っていないなんてもったいない！
リンクを配置という機能をご紹介します。
ヘッダーやフッターなど、Webサイトには共通化できる部分がありますよね。
デザインしたページが増えれば増えるほど、共通部分に修正が入ると舌打ちをしたい気持ちに駆られます。
そんな気持ちを解消してくれるのがこのリンクを配置なんです。
例えばヘッダー部分のみをデザインしたheader.psdを作成します。
続いて通常通りトップページのデザインをtop.psdとして作成するのですが、ヘッダー部分には「リンクを配置」を用いてheader.psdを配置します。
そして中ページも同様に作成していきます。
お気づきですか？
そうです。このタイミングでヘッダーに修正が入ったら、リンク先であるheader.psdのみを修正すれば、リンクを配置でつながっているPSDすべてのヘッダー部分が更新されるのです。
なんということでしょう。これでもうあの煩わしい繰り返し作業をしなくて済みますね。
ちなみに、トップページや中ページのPSDが開いている状態でheader.psdを保存するとリアルタイムでリンクされたヘッダーも更新されますが、リンク元のPSDが閉じている場合は開いてからリンクされたファイルの更新を行う必要があるのでお忘れなきように。
フレームツール
何者か知らずにずっと使っていなかったのですが、フレームツールとは超絶簡単なマスキングです。
ツールバーにある四角にバツが入っているようなアイコンをクリックすると、カーソルが十字になってシェイプをつくることができます。
そのシェイプにマスクしたい画像をドラッグ&ドロップするだけで、はい出来上がり。
今までのマスクと違い、フレームツールによるマスキングではなんと均等配置が可能です。
画像間のスペースの数値を知りたいときに、altを押してもマスク部分からの距離しか測れなくてイライラすることもなくなります。
きっと世界が少しだけ平和になるでしょう。
好きな形のシェイプや文字でマスクをかけたいときもありますよね。
そんなときはレイヤーを右クリックして「フレームに変換」を行うことができます。
あとは同様に写真をドラッグ&ドロップで持ってくるだけです。
細部のデザインにこだわれるように、単調な作業は便利機能でどんどんスピードアップを図っていきましょう
Flashの後継者！ もっと使いやすくなったAdobe Animate
どのようなものですか？
公式サイトより
Adobe Animateの使いどころ
最新のWebサイトにはインタラクティブ※な仕掛けがたくさんあります。
「対話」や「双方向」といった意味を持ちます。
Webサイトに当てはめて考えると、ユーザの動作によってなんらかの反応がWebサイト側から返ってくるような仕組みのことです。
カーソルの動きに連動して角度や位置の変わるコンテンツや、写真のマスキングがプルプルと震えているのを見たことがありませんか？
そういった仕掛けはcanvasでつくられていることが多いです。
特に粒子のような点の塊が動いているメインビジュアルをよく見かけますが、あれはパーティクルと言い、最近ではカーソルの軌道に合わせて逃げたり集まったりする動きが人気のようです。
そういったもののすべてがAnimateで作成できるわけではありませんが、「canvas？なにそれ？」というような方でもflashを使い慣れていればとっつきやすいツールです。
Adobe Animateの便利機能
ハンズオンチュートリアル
実はわたしはflashもほとんど使ったことがなく、Animateに対しても長らく心を閉ざしていました。
Animateは最初に分かりやすいチュートリアルでアニメーションの作成手順を教えてくれるので、頑なだったわたしの心をやさしく溶かしてくれました。
ポップアップで出てくる説明どおりにひとつずつ進めていけば、簡単なアニメーション作成の成功体験ができるわけです。
Animateを使って、よりリッチでインタラクティブなWebサイト作成を目指しましょう。
今どきのインタラクティブなアニメーションを楽しみます！
世界中で大人気のデザインツールSketch
Photoshopとどう違うのでしょうか？
ベクターデータに強いのも特徴です
SketchはUIデザインをするのに特化したMacOS用のツールです。
メニューなどのインターフェイスはすべて英語です。
なるほど、海外で爆発的な人気が出ている中で、国内ではまだまだPhotoshopが支持を得ているのも納得かもしれません。
豊富なテンプレートが用意されているので、モックアップを簡単に作成することができます。
ベクターデータに強いので、様々なデバイス向けのデザインも軽量に行えます。
と、概要をさらっと説明してみましたが、WindowsユーザーのわたしはSketchの使用経験がありません。 デザイナーというとMacのイメージがあるので意外でしたか？
フロントエンドエンジニアを兼任しているわたしはプログラマーとも深く関ります。
むしろ担当のプログラマーが不在の場合は、Smartyという言語で書かれたソースコードやシステムの根幹とも言えるデータベースを覗いたり、必要があれば修正しなければならないことも。
そういった経緯もあり、プログラマーが使用しているWindowsと環境を合わせていたほうがいいためWindowsを使用しているわけです。
学生時代Macユーザーだったので最初は戸惑いましたが、慣れてみればWebデザインの作業自体に問題はありませんよ。
一般的な家庭や企業ではMacよりWindowsのほうが購入されていると思います。
わたしたちWebデザイナーは一般の人の目に触れるWebサイトをつくることが大半です。
作成段階から一般ユーザーと同じ環境で確認しながら構築していることは、むしろ利点であるとも言えますね。
もちろん検証機としてMacも用意しています。
詳しい説明は省きますが、グラフィックデザイナーやDTPデザイナーなどは今でもMacユーザーのほうが多いですし、業界的にもMacを推奨している空気があります。
目指すデザイナーによって、MacとWindowのメリット・デメリットを考える必要があります。
さて話を戻しますが、Sketchには30日間の無料お試しがあるので、Macユーザーで興味のある方は是非お試しください。
オンラインの便利ツール
PNG／JPG圧縮
自動で圧縮率を調整してくれますし、自分で任意の圧縮率に変更することも可能です。
画像をいっぱい載せるWebサイトでは、できるだけ画像を軽くしたいところです。
そんなときはオンラインツールをうまく活用してみましょう。
ロゴ作成
Squarespace
Squarespaceは会員登録不要でロゴを作成できますが、ダウンロードにはアカウントの作成が必要です。
テキストを入力し、あらかじめ用意されているアイコンからロゴを選択するだけでロゴらしいロゴがつくれます。
画面下に名刺・Webサイト・Tシャツにロゴを載せたときのサンプルが出るので、雰囲気を確認することができます。
STORES.JP LOGO MAKER
STORES.JP LOGO MAKERは会員登録不要でロゴ作成からダウンロードまでを行えます。
インターフェイスも分かりやすく、アイコンも豊富です。
こちらも画面右にWebサイトやショップバック、タグにロゴが掲載されたイメージが表示されます。
存在するロゴなのかと勘違いしてしまいそうです。
ダミーロゴを手間をかけず作成し、プロトタイプなどに使用することができます。
さくっとつくって見劣りしないロゴが作れるのはうれしいですね。
写真加工
Fotor
Fotorは初心者でも扱いやすい写真加工ツールです。
操作するのに会員登録は必要ありませんが、加工した写真を保存する際には登録が必要となります。
すっきりしたインターフェイスで操作もしやすいです。
FotoJet
FotoJetは初心者はもちろん上級者でも役に立つ写真加工ツールです。
加工した写真も登録なしで保存することができます。
写真加工だけでなくポスターデザインなども可能で、テンプレートも複数用意されています。
Photoshopを開くまでもない場合や、デザインツールが入っていない自宅パソコンで簡単な作業をする際に重宝されるオンラインサービスです。
自分でデザインする部分と無料サービスに頼って時短する部分とをうまく切り分けていきたいです
まとめ
便利な機能やサービスは、あなたのデザインをレベルアップさせるためにきっと役立つことでしょう。
ですが、最新のトレンドデザインを追うのも、表現したいデザインを実現させる技術を身につけるのもあなた次第です。
ツールの使いどころを判断して、無駄なく最高のデザインに辿り着けるよう、自分に合ったツールとの付き合い方を極めてくださいね。
概要から便利機能までいっぺんに知りたいなんてわがまま…