3大デザインツールの違いを学ぼう！67WS Online #02 - デザインツールの使い分け方
UIデザイン3大ツールと言われるAdobe XD、 Figma、 Sketch。3大ツールの最新情報や作業の向き不向きをさくっとささっと学びます！
Sketchなう
特徴
・Mac版のみ。Windows版なし
・Style
・Symbol
・SymbolのOverrides
・Resizing
→ 幅や高さを変えた時に各要素のサイズや位置を固定する
・Smart Layout
→ コンテンツの量に応じて高さや幅が変化する
→ 複数のSymbolで構成されたSymbolの中の一つの要素を非表示にすると間を詰めて整列する
・Prototyping + Sketch Mirror
→ Sketchでプロトタイプし、iPhoneアプリ「Sketch Mirror」でプレビュー
・Sketch Cloud
・iOSアプリに特化している
→ iOSのUIコンポーネントが用意されている
→ iPhone、iPadのホームアイコンのカーブが標準設定に存在する
・Androidアプリ用のテンプレはあるがいまいち
→ Googleのマテリアルデザインのキットがあるのでそちらを使うのがおすすめ
・presets
→ iOS/Android用の画像書き出しが可能
初心者が抑えておくべきポイント
まずはSketchのWebサイトから始めるのがおすすめ
→ 最新＆正確＆すべての情報が網羅されている
→ For Designers 01〜06までを順番に見ていけば基本機能が理解できる
→ ヘルプが充実
初心者の難関、Symbolの概念
細かく設計できる分、概念の理解が必須
・一つのSymbolでボタンのバリエーションを実現する
→ 各状態の背景色をスタイルで作っておく
・一つのSymbolでテキストフィールドのバリエーションを作る
→ 入力欄のスタイルとテキストのTextStyleを差し替えることができる
・テキストの入力欄はアートボードを直接編集しない
・Symbolを入れ子にして使うこともできる
・Symbolを/で分類して表示されるようになった
・Library
→ 複数ドキュメント／チームでSymbolを共有する
Sletch Cloud
・ブラウザで閲覧できる
・チームに共有してフィードバックをもらう
→ 閲覧権限の設定、コメントの書き込みが可能
・開発者向けの共有
・共同編集（準備中）
Sketchはどこへ向かっているのか？
・プラグインで補われていた機能が標準機能として実装されていくように
→ プラグインが不要になってきた
・初心者と熟練者の反応が真逆
→ 多機能化が進み、初心者が始めにくくなってきた
→ 情報が英語版しかないため、キャッチアップが大変
Figma 使いこなしのための初めの一歩
Figmaの特徴
・Webブラウザがあればデザインができる
・みんなが最新の状態で利用できる
・一つのファイルをみんなで作業できる
・無料でもしっかり使える
デスクトップ版もある
→ ローカルフォントが使える
→ 表示が早いのですぐに使える
→ 作業に集中しやすい
他のツールに似ているのでSketchやXDを使っている人も始めやすい
・作業領域が似ている
・ショートカットも似ている
Figmaマスターへの第一歩：GroupとFrame
→ Frameはアートボードと近いけど違う
→ GroupとFrameの概念を理解しないと思ったような表現ができなかったり、レイヤー構造が複雑になりすぎたりする
■リサイズの仕方が違う
Group
→ 図形：グループ内にある要素も一緒にリサイズされる
→ 写真/画像：画像の形状がリサイズ
Frame
→ フレームだけリサイズされる
→ 内部要素の挙動を設定できる
■複数並べたり入れ子にできる
さらにFrameは
→ クリッピング（マスクのようなもの）ができる
→ Frame同士を重ねてレイアウトを組むことができる
■GroupからFrameに
・Constraint を加えると Groupが自動的にFrameに変わる
→ レイヤー構造が変化するので要注意
・GroupからFrameを作った場合も同じく
■Frameごとにリンク（URL）を発行できる
■Frameではグリッドを配置できる
→ Frameを重ねていてもそれぞれのFrameにグリッドを配置できる
→ グリッドを共有することができる
■GroupとFrameを入れ子にして活用すると
・複雑なリサイズに対応できる
・Auto Layoutで特定要素の順番を固定することができる
■GroupとFrame
Group
・他のツールと挙動が近い
・類似要素をまとめる時に利用
・リサイズしても要素の関係を保つ
・ベクター画像の扱いが異なる
Frame
・レイアウトを組む
・要素の挙動をコントロールする
・レイアウトグリッドの活用
・クリッピング、スクロールの利用
Figmaを生かせる環境
・複数人で一つのWebサイトやアプリを制作
・共有／対話を重視したプロセスにしたい
・Adobeエコシステムの依存度が低い
Figmaが生かせない環境
・デザイン担当が1人で役割分担が明確
・ローカル環境で作業する必要がある
・Adobeエコシステムの依存度が高い
・英語アレルギーの人がいる
Fimgaのこれから
・Variant：複数コンポーネントの状態をすっきりひとつに
・Component Swap：同類のコンポーネントの検索と切り替えの効率化
Adobe XD よいところ＆こうなったらいいな
XDの優れたポイント
・日本語化されている
・クラウド／オンラインツールが使えなくても作業が可能
・Adobe製品との連携
→ .psdや.aiファイルをそのまま開ける
→ 配置した写真をPhotoShop編集できる
※XDから開いたPSファイルは保存されないので要注意
→ CCライブラリで相互にデータをやりとりできる
・リピートグリッド
→ 繰り返しレイアウトを簡単に
・ステート
→ 一つのコンポーネントに複数の状態を持たせることができる
→ プロトタイプでも使える
XDにもある便利機能
・コンポーネント
→ レスポンシブリサイズで変形がしやすい
→ 直感的に作業しやすい
→ 自由度が高い
・スタック：コンテンツに応じたレイアウト
→ 要素の順番入れ替えができる
→ 要素間のマージンを個別に調整することも可能
→ 一つの要素のサイズ変化に合わせて後続の要素の距離を自動調整
・パッディング
→ グループ化した要素間の距離を保つ
・プロトタイプの実機確認
→ アプリとの連携で実機でリアルタイム確認ができる
XDこうだったらいいな！
・コンポーネントを階層構造で管理したい
・インスタンスの置換が洗練されて欲しい
・ページ機能が欲しい
・ブラウザで使えるようになって欲しい
・ドキュメントにコメント表示が欲しい
XDの使いどころ
・グラフィックを作り込みたいサイト
→ キャンペーンサイトやLPなど
もう一息
・デザインシステムの管理には進化の余地あり
対談タイムめも
・案件と仕事内容に応じて、ツールを選びたい！
→ 作成すべきものやどんな環境で作成するか
→ デザイナー以外との連携
・一つのツールで完結できないことで決裁権者の理解を得るのが大変
・プロジェクト管理の立ち位置におけるデザインツールという視点から考えるとツールの使いやすさとはまた違う問題がある
Figmaはどこが得意？
・各画面の流れをチームで作成するときに使いやすい
・環境に依存しやすい
・ドキュメントにコメントが紐づいている
コンセプトの違い
・Sketch
構造的なツールをデザインすることに向いている
MacOSで動くネイティブアプリ（MacOSでの使いやすさ、良さがある）
・Figma
他のWebサービスと連携が期待できる
学生は無料で、すぐ始められるので教育現場に受け入れられやすい
・XD
Adobeソフト間の連携ができ、グラフィカルなサイトに強い
直感的な操作性
軽い
まとめ
デザインツールとしてどうか？という意味だとどのツールでも申し分なく、機能は揃っている。仕事の中でどんな風にどんな環境で使うのかが選ぶ時のポイントになりそう。
デザイン業務が主じゃないのでSketchやFigmaになかなか手を出せていないけど、やっぱり知っているということは強い。
今のお仕事だとXDで事足りてしまうけど、SketchやFigmaが最適な時もあるかもしれない。適材適所で最適なものを選べるようになるためにはどれも食わず嫌いせずに使ってみたい・・・使ってみないとなぁｗ
この記事が気に入ったらサポートをしてみませんか？