編集部員(プログラマー)今さら聞けない!Webデザイナー向けデザインツールの使いどころと便利機能ツイートシェアはてブLINEPocketここ数年のWeb業界の成長は凄まじいもので、やれ新しいツールだ、やれアップデートだと毎日のように新しい情報が飛び交っています。XD(以下XD)とWebデザインに関するデザインツールは変化を遂げてきました。新しいUIに慣れたり、社内で一斉に切り替えないと問題が起こったり、新しいツールを導入する・乗り換えるということはかなり大変な作業なんですよね。そんなしがらみもあって、なかなか古い慣習から抜け出せないでいるという方も多いのではないでしょうか。以前の記事ではWebデザイナーがフロントエンドエンジニアを目指すためのステップについてお伝えしましたが、今回はデザイン力をさらに磨くためにデザインツールの話をしたいと思います。XDは、webサイトや、モバイルアプリなどのデザインに適した、オールインワンのUX/UIソリューションです。デザイン、プロトタイプ、共有、すべてをXDでおこなえます。公式サイトより公式サイトにもあるように、UX/UIデザインのためのツールです。ただのデザインツールに留まらず、簡単にプロトタイプ(ページ遷移なども確認できるテストページのようなもの)を作成することができます。プロトタイプは自身のテストサーバなどにアップロードする必要はなく、ワンクリックで共有用のURLを発行してくれます。プロトタイプに対してパスワードを設定することや、閲覧権限を制限することも可能です。共有されたプロトタイプに対して、Adobeのアカウントがない人でもコメントで修正指示などを残すことができます。修正が完了したら該当のコメントに「解決」のステータスを付けることで、未対応のコメントのみ残るため進捗が分かりやすいです。XDの使いどころXDは主にワイヤーフレーム作成に使用しています。わたしはまだまだWebデザインPhotoshopガチ勢なので、デザイン時にXDを使用することは今のところ多くないです。写真を多用していないシンプルなウェブサイトの場合は、XDでそのままデザインまで完了することもあります。XDの優れた点はなんと言っても軽量なところ。カンバスを複製しても複製しても軽快に動作してくれます。この軽さはPhotoshopがXDに劣る点ですね。次の章でお伝えするような便利機能を使って、ささっと複数ページのワイヤーフレームを作成し、ささっとページの導線を設定したプロトタイプをつくるのに重宝します。わたしにとってのXDは軽さとスピードが命なのです。アプリなどのUI/UXデザインには最適なツールであると言えます。XDの代名詞とも言える機能、リピートグリッドです。規則的なレイアウトの複製が本当に簡単です。今までのコピペ地獄はなんだったのかと軽く絶望を感じるほどです。複製の簡単さに加え、複数の画像をレイアウト内の画像エリアにドラッグ&ドロップすることで一度に画像のマスキングを行うことができます。同様に、改行で区切ったテキストファイルを該当のテキストエリアにドラッグ&ドロップするだけで、リピートグリッド内のテキストをまとめて変更することができます。プラグインが豊富XD自体が新しいツールのため、こまめにアップデートがされるものの「この機能があったらもっと使いやすいのに!」ということも少なくありません。そんなときに活躍するのがXDのプラグインです。2018年10月のアップデートでプラグインの使用・開発が可能になり、2019年には開発可能なプラグインが幅広くなりました。それに伴い、プラグインの検索機能も向上したため、探している機能が見つけやすくなったのではないかと思われます。あなたが不便に思っている点はきっと他のユーザーも不便に思っていることでしょう。ネットで調べてみると、誰かがまとめた「おすすめプラグイン〇選」という記事がたくさんありますので、それらを参考にしてみてくださいね。1点注意事項をお伝えするとすれば、セキュリティリスクが高まるため公式プラグイン以外は避けることをお勧めします。プラグインをインストールし自分仕様のXDに育てていくことで、よいXDライフを送りましょう。リアルタイム共同編集こちらは2019年11月4日に追加された新機能です。ベータ版ではありますが、クラウド上のデザインファイルを複数人で作業ができるようになりました。大規模サイトを作成する機会の多い会社などではお待ちかねの機能なのではないでしょうか。わたしも後輩にデザインの複製を手伝ってもらったとき、途中で自分でもデザインを進めたいと思っても後輩の作業中には自分の作業を進められず、結局後輩が帰った後に残業してしまうということが何度かありました。クラウドによる共同作業が一般的になれば、同じ空間にいる必要もなくなりますね。会社勤めでも夢のノマドが実現する日もそう遠くはないのかもしれません。Illustratorとは名刺やブログにのせるオリジナルロゴを作成したい。イラストを描いてTシャツにプリントしたい。イベントを告知するためのポスターやチラシを制作したい。Illustratorには、細かい図形や線のはっきりとしたイラスト、こだわりの文字デザインなどを作成するためのさまざまなツールが備わっています。公式サイトより読んで字のごとく、イラストを作成する際にIllustratorは活躍します。記事冒頭のデザインツール経歴をご覧いただければ想像できるように、WebサイトのデザインにIllustratorを使用した経験がわたしにはございません。Webサイトの細かいパーツをつくるときにのみ日の目を浴びるツールとなっています。コンテンツの装飾に使うイラスト、ロゴ、アイコンまたはフォントにあしらいを加えるときなどにIllustratorを使用します。DTP※デザイナーは、名刺やポスターのデザイン制作のために毎日Illustratorを酷使していることでしょう。Publishing(デスクトップパブリッシング)の略。言うと、DTPデザイナーとは印刷物のデザインをする人です。Illustratorの使いどころWebサイトのイラストをいちから書き起こすことが少ないため、わたしはもっぱらアイコンの作成に使っていますが、中でもSVG※の形式で利用することが多いです。Graphics(スケーラブル・ベクター・グラフィックス)の略。JPEGやPNGはビットマップデータで、SVGはベクターデータです。ピクセルによる描画ではなく複雑な計算式によって表示されているため、Retinaディスプレイでも粗くなりません。SVGを使用すれば、解像度2倍の画像を別途書き出してJavaScriptやhtmlでデバイスによる画像の切り替えを行わなくてもよいのです。複雑な計算式でできているだけあって、要素が複雑になるほどSVGの中身の数字も膨大になりますので、扱う際は心構えをしておきましょう。共通カラーの置き換えデザインが複雑になるほど、共通の色を見つけ出て選択し変更するのは手間ですよね。自分が制作していないイラストならなおさらです。この機能を使えば、線でも塗りでも両方でも同じ色を一括で変更することができます。メニューバーの「選択」から「共通」メニューを見つけます。その中から線か塗りかを選択すると、同じ色のオブジェクトが自動で全選択となります。あとはお好きな色に変更するだけです。アセットの収集と一括書き出しこの機能でWebサイト用画像の書き出しが格段に楽になりました。ひとつひとつスライスを設定せずに済むのです。簡単な操作で、一度に複数の形式やサイズを書き出すことができます。PNG、JPEG、SVG、PDFで書き出すことが可能です。アートボード全体またはアートワーク部分のみというように範囲を選択することができます。同じ縦横サイズのアイコンを用意するときは、アートボードで書き出すとサイズを揃えることができます。フリーフォームグラデーションフリーフォームグラデーションとは、今までの2点間でのグラデーションとは違い、オブジェクト内のどこにでもカラー分岐点を作成することができます。自由に設定した分岐点間の塗りを滑らかに仕上げてくれます。自由度が上がりより精密なグラデーションが作成できるようになったうえに、作業も簡単になるのだからIllustrator様様です。フリーフォームグラデーションタイプには点と線の2種類があるようです。自分の理想のグラデーションを表現できるよう、いろいろといじってみるとよいでしょう。Photoshopとはこの世界最高峰の画像グラフィックデザインソフトウェアは、写真の編集や合成から、デジタルペインティング、アニメーション、グラフィックデザインまで、ほぼすべてのクリエイティブプロジェクトの中核を担います。iPad版が登場し、ひらめいたらその場ですぐに制作できるようになりました。Photoshopの使いどころ大本命Photoshopです。写真加工とWebデザインの際に使用します。その時点で調整を済ませておくと、後日同じ写真ファイルを開いたときにも以前の調整履歴が残っているので助かります。わたしが地味に好きなポイントは、スクリーンショット後などクリップボードに画像がある状態で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を押してもマスク部分からの距離しか測れなくてイライラすることもなくなります。世界が少しだけ平和になるでしょう。好きな形のシェイプや文字でマスクをかけたいときもありますよね。そんなときはレイヤーを右クリックして「フレームに変換」を行うことができます。あとは同様に写真をドラッグ&ドロップで持ってくるだけです。PlayerとAir、WebGL、さらにSnap.svgのようなカスタムプラットフォームなど、多様なプラットフォームにパブリッシュする方法について説明します。Animateの使いどころ最新のWebサイトにはインタラクティブ※な仕掛けがたくさんあります。※インタラクティブ「対話」や「双方向」といった意味を持ちます。Webサイトに当てはめて考えると、ユーザの動作によってなんらかの反応がWebサイト側から返ってくるような仕組みのことです。カーソルの動きに連動して角度や位置の変わるコンテンツや、写真のマスキングがプルプルと震えているのを見たことがありませんか?そういった仕掛けはcanvasでつくられていることが多いです。粒子のような点の塊が動いているメインビジュアルをよく見かけますが、あれはパーティクルと言い、最近ではカーソルの軌道に合わせて逃げたり集まったりする動きが人気のようです。いったもののすべてがAnimateで作成できるわけではありませんが、「canvas?なにそれ?」というような方でもflashを使い慣れていればとっつきやすいツールです。Animateの便利機能ハンズオンチュートリアル実はわたしはflashもほとんど使ったことがなく、Animateに対しても長らく心を閉ざしていました。Animateは最初に分かりやすいチュートリアルでアニメーションの作成手順を教えてくれるので、頑なだったわたしの心をやさしく溶かしてくれました。ポップアップで出てくる説明どおりにひとつずつ進めていけば、簡単なアニメーション作成の成功体験ができるわけです。Animateを使って、よりリッチでインタラクティブなWebサイト作成を目指しましょう。大きな違いは軽さですベクターデータに強いのも特徴です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圧縮PNG圧縮/JPG圧縮を行えるオンラインサービスです。自動で圧縮率を調整してくれますし、自分で任意の圧縮率に変更することも可能です。画像をいっぱい載せるWebサイトでは、できるだけ画像を軽くしたいところです。そんなときはオンラインツールをうまく活用してみましょう。ロゴ作成SquarespaceSquarespaceは会員登録不要でロゴを作成できますが、ダウンロードにはアカウントの作成が必要です。テキストを入力し、あらかじめ用意されているアイコンからロゴを選択するだけでロゴらしいロゴがつくれます。画面下に名刺・Webサイト・Tシャツにロゴを載せたときのサンプルが出るので、雰囲気を確認することができます。MAKERは会員登録不要でロゴ作成からダウンロードまでを行えます。インターフェイスも分かりやすく、アイコンも豊富です。こちらも画面右にWebサイトやショップバック、タグにロゴが掲載されたイメージが表示されます。存在するロゴなのかと勘違いしてしまいそうです。ダミーロゴを手間をかけず作成し、プロトタイプなどに使用することができます。つくって見劣りしないロゴが作れるのはうれしいですね。写真加工FotorFotorは初心者でも扱いやすい写真加工ツールです。操作するのに会員登録は必要ありませんが、加工した写真を保存する際には登録が必要となります。したインターフェイスで操作もしやすいです。FotoJetFotoJetは初心者はもちろん上級者でも役に立つ写真加工ツールです。加工した写真も登録なしで保存することができます。写真加工だけでなくポスターデザインなども可能で、テンプレートも複数用意されています。Photoshopを開くまでもない場合や、デザインツールが入っていない自宅パソコンで簡単な作業をする際に重宝されるオンラインサービスです。無料の素晴らしいサービスがたくさんあるんですね!自分でデザインする部分と無料サービスに頼って時短する部分とをうまく切り分けていきたいですまとめ便利な機能やサービスは、あなたのデザインをレベルアップさせるためにきっと役立つことでしょう。最新のトレンドデザインを追うのも、表現したいデザインを実現させる技術を身につけるのもあなた次第です。ツールの使いどころを判断して、無駄なく最高のデザインに辿り着けるよう、自分に合ったツールとの付き合い方を極めてくださいね。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。現役エンジニアが実務で使えるか辛口レビューRECOMMENDこちらの記事も人気です。編集部員(プログラマー)現役プログラマーの編集部員です。このブログは複数の編集部員によって運営されています。おすすめの勉強法は?未経験からプログラマーに就職2020.2.18『今』プログラミング学習をおすすめする3つの理由JavaScript2020.2.11【初心者向け】TypeScriptって何?JavaScriptと何が違うの?職業訓練校2020.2.9未経験者が職業訓練でJAVAを学ぶプロフィールごま塩シンジ(編集長)30代後半、未経験からweb系企業に就職しました。底辺高校→Fランク大学→営業→PHPエンジニア→フリーランス※当サイトはリンクフリーです※当サイトは複数のプログラマーによって運営されています※広告募集中です。ご希望の方はお問い合わせからご連絡ください。最近のコメント初心者におすすめのプログラミング言語は何か。初心者におすすめのプログラミング言語は何か。初心者におすすめのプログラミング言語は何か。