UI・Webデザインツールの選択とコミュニケーションのお話

Webデザイン
ユキックス
ユキックス

こんにちは!ユキックス(@MILKIT_DESIGN)です!

ユキックス

デザイナーがデザインを制作するためのツールは現状いくつもの選択肢がありますが、アナログからデジタル化されてからの進化は顕著で、日々ものすごい速さでアップデートを繰り返し続け、より機能的になっているのをご存知でしょうか?

長い間デザインをしている上で通ってきたアナログに拘った制作やデザインはわたしも大好きで未だ健在ですが、特にWebデザインに於いてはデジタルツールでの基礎、基本をしっかり守った制作と共に最先端の機能を柔軟に駆使することが必要であり大切!と日々感じています。

ユキックス

今回はデザインツールの適材適所Webデザインの制作におけるコミュニケーションについて、アートディレクションをする上で感じたことや私の思考を綴っていきます。

Web制作の裏側にあるデザインチームやプロジェクト内でどんなことが調整されているのかを垣間見たり、覗いていただける記事になっております!

デジタルデザインツールの種類と特徴

今回はUI・Webサイト制作や開発、アプリケーションのデザインなどに特化したツールに絞って考えていきます。

2021年末現在、自身がUI・Webサイトのデザイン制作時に使用している主なツールはこちら!

  • Figma
  • Adobe XD
  • Adobe Photoshop
  • Adobe Illustrator

これ!と決まっているものはないので一概には言えませんが、ご自身の環境やお仕事でご一緒させていただく方、お仕事や開発の規模や会社のルールなどによって使用されるツールは様々かと思います。(ご参考までに!)

Figma

Figmaの特徴

  • デスクトップアプリ以外にブラウザ上でもデザインが可能
    • 軽くて軽快な操作性
    • オンラインで即時反映、オフラインでは動かない
    • プロトタイプ機能(インタラクションや画面遷移、アニメーション)が充実している
    • アセットの管理に長けている
    • psd・ai・epsなどの拡張子は開けない
  • 共同編集やチームの開発に強いツール!更新が即時反映され、ひとつのURLで共有がスピーディー
  • デザインだけでなくプロジェクト全体に使用できる!汎用性が高い
  • Zeplin(プラグイン)を使えばCSSが自動で出力され、コードの確認が素早くできる
  • 2015年にローンチ、2016年に正式リリースされた成長中のUIデザインツール

プロジェクト・チームでの開発で実際に使ってみて、本当にスムーズでリアルタイムで更新・共有ができる素晴らしいツールに出会えたと感じました!プラグインが豊富で、表現の幅が無限に広がるのも扱っていてとても楽しいです。

Adobe XD

Adobe XDの特徴

  • PhotoshopやIllustratorの使用感に近い
    • PhotoshopやIllustratorと比較して圧倒的な軽さ
    • クラウド保存以外に、ローカル保存も可能
    • プロトタイプ機能(インタラクションや画面遷移、アニメーション)が充実している
  • 更新の度に共有URLが変わるので、都度URL取得と通知の必要がある
  • デザインだけでなくプロジェクト全体に使用できる!汎用性が高い
  • Zeplin(プラグイン)を使用する場合、XDを変更>Zeplinに出力してからZeplinの手順で確認が必要
  • 2017年にリリースされた成長中のUIデザインツール

パートナーや企業さま、エンジニアさんからご指定いただくことが多いXD!ローカル保存ができるので完成次第、都度最新データを共有するプロジェクトや開発の際に便利です。

Adobe Photoshop

Adobe Photoshopの特徴

  • グラフィックや写真編集などのデザインに長けている
    • アップデートが著しく新機能が続々と追加され、現在も成長し続けている
    • フィルターやカラーなど機能が充実
    • 写真編集、レタッチ、グラフィックや合成などに使用
    • 字詰め、カーニングの精度が理想通り叶う
    • FigmaやXDでは表現できない領域の繊細な制作や柔軟で自由なデザインが可能
  • データが重くなりやすい
  • 1990年にリリースされ、デジタル化と共に成長してきたデザインツール

昨年まではWebデザインをPhotoshopで制作することが多かったですが、2021年度はXDとFigmaで制作する割合が増えWebデザインをPhotoshopで制作することはやや少なくなりました。

主にPhotoshopで生成した要素をFigmaやXD上に取り込んで使っています。

しかし繊細な制作、柔軟自由な表現にはPhotoshopが必要不可欠でなくてはならないツールです。
主に写真を使うクリエイティブの制作はPhotoshop(Lightroomと併用)で、編集しています。

Adobe Illustrator

Adobe Illustratorの特徴

  • グラフィック・ロゴ、図面、イラスト、広告、パッケージ、印刷物等、ベクターデータの描画ツール
    • ベクターなので鮮明で美しい
    • 印刷を伴うグラフィックの字詰め、カーニングの精度が理想通り叶う
    • プラグインを入れるとCADや3DCG機能など拡張可能なツール
    • SVGやアニメーションを伴うパーツデザインの生成には欠かせない
  • 実装の際、Webデザインに於いては必要な数値が拾いにくい場合が多い
  • データが重くなりやすい
  • 1988年にリリースされ、デジタル化と共に成長してきたデザインツール

Webデザインに於いてわたしは、ベクターデータのパーツデザインやロゴでIllustratorを使っています。
主にIllustratorで生成した要素をsvg(必要に応じてpng)で書き出し、FigmaやXD上に取り込んで使います。

Web以外のデザインの場合、特に印刷物はページの多い冊子を除いて(複数ページの冊子はInDesign)すべてIllustratorで制作しています。

ユキックス

特に今年の自身の活動に関して、それまでWebデザインのツールはずっとAdobe一択でしたが、新しいお仕事でFigmaをゴリゴリ使用する環境にいざ身を置いてアートディレクターリードデザイナーとして複数のプロジェクトに参画したことで、積極的なFigma遣いになったことは視野やクリエイティブの幅がさらに広がって、自身の制作に於いても特に大きな変化に繋がりました!

わたしの場合、実務で必要に駆られFigmaを使い始めました操作性がAdobe XDと近かったこともあり比較的すぐに慣れました!英語表記のツールを理解する問題もブラウザ版の日本語表記を駆使することで機能や便利なプラグインの機能を理解して自在に扱うことができ、クライアントさん、チームメンバーと二人三脚で共創しながらスピーディーにデザインを制作したり納品に至るまで、前述のどのツールでも難なく可能になりました。

ユキックス

使用ツールが増えたことで、Figmaでの制作を求められるデザインも対応可能になり実際にお仕事も増え、お受けできるデザインの幅や範囲がさらに広がり、お仕事相手に合わせて柔軟にツールを変えてデザインをご提供できるようになったことは大きな収穫であり、変化と自信と自分のアップデートに繋がったのを感じました!

新しいツールに対してすっごく初歩的なことですが、生き残りたければなんでもやってみることが大切やらなければ始まらない!と日々感じながら生きています。

この他にも興味はあるけれど、まだ実務では遭遇していないツール

  • Framer
    • 細かなアニメーション表現、インタラクションデザインに強い
    • 動画やYouTubeを埋め込んだ再現が可能
    • 英語表記
    • ユーザーが少ない
  • In Vision Studio
    • 細かなアニメーション表現、インタラクションデザインに強い
    • 画面遷移やインタラクションの盛り込みが多いデザインの再現性が高い
    • 英語表記
    • ユーザーが少ない
  • Sketch
    • macOSでしか使用できないのでwindowsユーザーとの連携に困る
    • 英語表記
    • すべての機能が有料

特にIn Vision StudioFramer柔軟なインタラクションデザインにはすごく興味があるので、パーソナルワークで使ってみよう!と目論んでいます。

デジタルデザインツール、どんな理由で選んでいますか?

個人事業主(フリーランス)のデザイナーであるわたしは、お仕事でご一緒させていただく方、共創する方の基準に合わせて都度、デザインツールを使い分けています。ご依頼主や会社さま、実装を担ってくださる相手に合わせるもの、”人”によって最適ツールは変わるもの、柔軟でありたい!と、思っています。

大前提として、制作したWebデザインデータを扱って実装してくださるコーダーさんやエンジニアさんがいちばん扱いやすかったり得意なツールであること(工数をかけさせない、手間取らせない、という意味でも)最適解なのでは!という考えです。

紙ものや冊子であれば、InDesignが良いのか(ノンブルの有無やページもののボリューム感次第で)、繊細な表現を必要とする場合はIllustratorが良いのか、といった適材適所な感覚やツールを扱う人の得意・不得意によるツールの選択に近い、と思います!

分業の場合、デザイナーと実装者のコミュニケーションが大切!

わたしがアートディレクションやデザインを担当する際、実装してくださるコーダーさんやエンジニアさんには、以下の内容を必ず確認しています。

  • 実装者(コーダーさんやエンジニアさん)の作業環境を訊いてからデザイン着手
    • 実装者さんが欲しい、扱いが得意なデザインツールの種類を確認
      • 多い順にXD>figma>Photoshop(わたしの2021年、執筆時点の体感として)
      • Illustratorはパーツやロゴデザインで使用する認識
      • IllustratorのWebデザインデータ制作依頼は存在しているが受けたことはない
      • 実装者さんからIllustratorのWebデザインデータの希望を指定されたことがない
      • IllustratorのWebデザインデータを求められることもごく稀にあるらしい
  • デザイン着手前に、作成するデザインデータ幅の擦り合わせをPC/SP共にしておくとスムーズ
  • 書き出す画像に関しての擦り合わせ
    • カラープロファイル非対応ツール(XDなど)であれば別途用意する必要あり
    • デザインデータと別途で画像を渡す場合、画像書き出し提供する倍率も要確認

デザイン着手前に必ず実装者さんと連携を取ってお互いの温度感や落としどころを事前確認しておくことで円滑で気持ちよいコミュニケーションや制作中の気軽な相談がお互いにしやすくなったり、困った時でもスムーズな提案や選択ができます。

ユキックス

事前のコミュニケーション!全力でおすすめします。

デザインを提供する人として、できることをする

実装者が選択する頻度や優先度が高いツールを常に提供できるデザイナーでありたい、と自身では考えています。

もちろん、レイヤーの整理やグループ・コンポーネント化して見やすく分かりやすい状態にすることも大前提ですね!

ユキックス

丁寧なお仕事をすることで、お客様やお仕事でご一緒させていただくパートナーさんやチームメンバーに安心して取り組める状態を提供することも、デザインに携わる者として大切なことだなと感じているのです。

ユキックス

何より、また一緒にお仕事したい!と少しでも思ってもらえていたら嬉しいな、と思って日々お仕事に取り組んでいます。

デザインはやさしさや人への配慮によってできているものであって欲しい、とわたしは考えています!

ひとつのツールに縛られず、使う人や表現したいことを基準に考えて柔軟にツールを選択することが求められていると感じる場面が多いことを体感していて、とても大切なことだと思っています。

個人で制作して完結されている方から稀に、どのツールが一番使いやすいですか?と聞かれることがあるのですが、特徴を理解した上でご自身が一番使いやすいツールを選ぶのが最適解!なのではないでしょうか。

まとめ

今回はツールの特徴を知った上扱う人表現したいことによって適材適所なツールを選ぶ考え方、UI・Webデザインツールコミュニケーションについてのお話しでした!

ユキックス

最後まで読んでくださって、ありがとうございます!

執筆者は、ユキックスでした!

ご依頼・ご相談はこちら

お客様の課題解決に最適なメンバーアサインでスムーズなプロジェクト進行をいたします。制作して終わりではなく、お客様が求める成果に結びつくご提案をさせていただきます。

この記事がシェアできます

この記事を書いた人
ユキックス

ユキックス
デザイナー / アートディレクター / Web制作クリエイター

ユキックス
デザイナー / アートディレクター / Web制作クリエイター

Web制作を主軸にデザイナー・アートディレクターとして柔軟に国内の企業、商業デザインのクリエイティブ制作、ディレクションに携わり、受託制作や業務委託を中心に個人、制作パートナー、クリエイティブチームで協業し、幅広くクリエイティブデザインを制作しています。

  • Wepotについて

    アイコン

    Wepotはデジタルクリエイティブで課題を抱えるすべての人への解決策を提示できます。

  • 実績一覧

    アイコン

    Wepotには多種多様な実績があります。メンバーの強みが生きた実績をご覧ください。

  • 制作のご相談

    アイコン

    現在の課題やお悩みをお聞かせください。あなただけのクリエイティブチームを編成し解決へと導きます。