【できないとNG？】Webデザイナー、UI/UXデザイナーになるなら抑えておきたいツールリスト（SlackとかZoomとか）
ようやくUI/UXデザイナーとしてデビューした現場で、
「普段のやりとりはSlackで」
「Git使える？」
なんて、使用経験のないツールを列挙されて焦ったという話をスクール卒業生さんから聞きました。
いずれもチーム内での情報共有、データ管理などによく登場するツールの名称なんですが、こういう細々したのって学習の機会も少ないですし、競合もたくさんあるので、仕事を始めてからその都度慣れていけば大丈夫です。
私もそうしてきましたし、これからもそうします。
とはいえ、有名どころの名前と用途だけでも事前に抑えておけば、多少は安心ですよね。
昨今、Webサイトやアプリ制作の現場で出くわす事の多いツールのリスト、作ってみました。
当サイトには、広告が含まれているページがあります。
豊かに引きこもる。
Webデザインは器。ブログは中身。
「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
おウチで豊かに楽しく暮らす方法をご紹介しています。
Google系
まずはここから。
ざっくり括ってしまいましたが、Google Drive及び、Googleドキュメントやスプレッドシートなどです。
今や、各種情報共有の手段としてすっかりお馴染みになりましたね。
WebデザインやUI/UXデザインにおいては、各種仕様をGoogleスプレッドシートでシェア、なんて事をよくやります。
また、最近のスクールでは課題の提出場所がGoogle Driveだったりする事も。
ビジネス利用で気をつけたいのは共有周りの機能です。
プライベートなデータを公開してしまったり、逆に共有したいファイルがシェアできなかったりとならないよう、操作を確認しておくと安心です。
Zoom / Google Meet
リモートワーク増加に伴い、こちらも認知度が上がりました。
ZoomとGoogle Meetは、どちらもオンラインでミーティングを行えるサービスです。
両者の機能はほぼ同様なので、どちらか片方の利用経験があれば、もう一方もカンタンに使えます。
「Zoom飲み」なんて言葉もあるくらいなので、プライベートでの活用も多いかもしれませんが、お仕事で使いこなしたいのはこんな機能。
画面共有
Webサイトやアプリの制作において、作業中のデザインやコードを見せ合ったり、資料を一緒に確認したりと、お互いのパソコン画面を共有しあう事ができます。
ミュート
自分が聞く立場の場合は、マイクをミュートにしておくと安心です。
チャット
ミーティング中にチャットができます。
何かのURL等、テキストでシェアした方がいい情報はこっちを使うといいですね。
Slack
Slackは、公式サイトの定義によると「ビジネス用のメッセージングアプリ」です。
実物を見た事がないとイメージが湧きにくいかもしれませんが、Slackを通じて、参加メンバーはテキストや音声ベースのコミュニケーションを取る事ができます。
メールとの大きな違いは、やりとりの対象、例えばメンバー全員なのか、デザインチーム限定なのか、それとも特定の個人のみでよいのか、といった共有範囲をカンタンに選べる点です。
こちらも、押さえておきたい機能はこんな感じです。
チャンネル
例えばエンジニアチーム、デザインチームのようにチャンネル（グループのようなもの）を作っておいて、必要な情報を必要なチームだけに知らせる事ができます。
スレッド
メッセージのやりとりをこのような並列ではなく、
・メッセージA
・メッセージAへの返信
・メッセージB
・メッセージC
・メッセージBへの返信
・メッセージCへの返信
ぶら下げる形で行う方法です。
・メッセージA
└メッセージAへの返信
・メッセージB
└メッセージBへの返信
・メッセージC
└メッセージCへの返信
これも実物を見ないとピンとこないかもしれませんが、スレッドを使うとSlackの画面がスッキリします。
メンション
メッセージを確認して欲しい相手に通知を送る事ができます。
Figma / Adobe XD / Sketch + Zeplin
Figma / Adobe XD / Sketch
いずれも、プロトタイピングツールと呼ばれる事が多いですが、要はデザイン制作を行うためのツールです。
アプリデザイン、UI/UXデザインでよく使われます。
イメージとしては、必要なアプリ画面などの一覧をバーっと作って並べておくような感じです。
いわゆるIllustrator&Photoshop等の王道ツールとの違いは以下の通り。
・導入コストを押さえられる（利用条件によって無料/有料あり）
・Illustrator&Photoshop等に比べて機能がシンプルなので、扱いやすい。
上手に利用すれば、エンジニア等、デザインが専門でないメンバーとのコミュニケーションがスムーズになります。
Zeplin
おまけで紹介のZeplinは、こうしたプロトタイピングツールで作ったデザインデータの共有を円滑にしてくれます。
・制作した画面にコメントをつけられる
・アイコンなど、画面内で利用されている画像をpngやsvg形式などで簡単にダウンロードできる
・ボタン等、各種要素のサイズや配置位置、色などをカンタンに調べることができる
など
FigmaやAdobe XD等にも同じような機能があるのですが、Zeplinはデータの共有に特化したツール（デザイン制作は行えない）なので、その分シンプルです。エンジニアさんによってはこちらの方がとっつきやすい、といった事もあるようです。
Backlog / Jira / Asana / Redmine
いずれもプロジェクト管理に使われるツールです。
例えばこんな事を行えます。
・プロジェクトのスケジュールや進行状況の確認
・メンバーへのタスク割り当て
・タスクの優先度や締め切り、マイルストーンの設定
・タスクの進行状況
大枠はPM（プロジェクトマネージャー）等が運営していきますが、制作メンバー側では、自分に振られたタスクを確認＆着手して、終わったらタスク完了を報告する、みたいな事をそれぞれ行います。
Git + GitHub / Bitbucket
こちらはエンジニア職では必須であるのに対し、デザイナーに関してはそれほどでもないと思われますが、一応ご紹介。
Git：バージョン管理システム
GItHub / Bitbucket：Git利用のためのWeb上のサービス
これだけだと、サッパリわからないですね。
ざっくりですが、例えばこんな事ができます。
・作業の履歴（バージョン）を溜めておく
・以前の状態を確認する（戻す事も可）
・Aさんの作業とBさんの作業をマージ（統合）する
こうしたシステムをGit、Gitが使えるサービスにGItHubやBitbucketがあります。
大人数が参加したり、分担作業が多く発生する案件でよく使われています。
LPデザインのようなコンパクトな仕事ではGit周りを利用する事はまずありませんが、アプリ開発やUI/UXデザインだと、利用されている可能性大です。
結局どれを習得すればいい？
さあ、いろいろ出てきましたが、メインである制作作業の周辺に、いろんなツールが存在しているのがイマドキの現場事情です。
こうなると気になるのが、例えば「FigmaとAdobe XDとSketchどれがいいの？」「全部できなきゃダメ？」みたいな話ですよね。
何もかも触っておく必要はナシ
ZoomとGoogle Meetで書いたように、ジャンルが同じツールであれば機能、使い勝手もおおよそ同様なので、縁があったものをその都度触っていけば大丈夫です。
別のツールの利用を求められた時も、差分だけ追いかければすぐに使いこなせるようになります。
そもそも私たちに選択肢はない
プロジェクト内でどのツールを使うのかは大抵、先方で事前に決められています。
それじゃあ相手が指定したツールの使用経験がないとダメなんじゃ…と考えてしまいがちですが、昨今、似たツールがたくさんある事情は先方も十分ご承知のはず。
「ウチはSketchだから、Figmaしかできない人はダメ」なんて、私は言われた事ありません。
勝手知ったるツール環境であればラクできてラッキー、そうでなければ新しいチャレンジができてラッキーぐらいの気軽さで行きましょう。
アレもこれも事前にマスターしておかなきゃ、なんてツールに振り回される必要はありませんからね。
エントリー＆面談時にはこのあたりの話が出ない場合も
デザイナー職の募集の場合、言語（HTML/CSS/JavaScript）等、制作に本質的に関わるスキルの確認は必ず行われますが、今回紹介しているような周辺ツールに関しては、すり合わせがなされない事も少なくありません。
例えばSlackなどは、当然使えるだろうとお考えの会社もあるんですよね。
一方で、スクール受講生さんとお話ししてみると、利用経験がない方も全然いらっしゃいますので、この辺りのギャップが早く埋まると良いなあ、と思います。
スクールでのフォローはある？
スクールの話が出たところで、こうしたツールを教わる環境はあるのか？という事について。
Google系
先ほども触れた通り、課題の提出や各種決まり事の共有用に導入しているスクールも増えてきています。
スクールで利用する分には多少操作を間違えても大丈夫ですから、学習中にいろいろ触っておくといいですね。
Zoom / Google Meet
こちらも学習環境はないですが、各種ヒアリングやオンラインレッスン自体で体験できるはずです。
プロトタイピングツール系（Figma / Adobe XD / Sketch）
スクールによっては教えている事もありますが、Illustrator、Photoshop程には浸透していません。
その他
残りはまとめて考察してしまいますが、それぞれの用途を考えればわかる通り、いずれも現場で効果を発揮するモノであったり、そもそも制作用のツールでないものもあるので、スクールで教わる機会はまずないと思います。
できないと仕事が見つからない？
仕事では必須だけど、スクールでは教われない。
種類もたくさんある。
これだけ考えると不安になってしまいますが、心配要りませんよ。
操作が難しいモノはひとつもない
今回紹介したツール、いずれも操作自体はカンタンです。
IlllustratorやCSSの方がずーっと難解ですから、それを乗り越えてきたあなたならすぐに使いこなせるはずです。
私も必要に迫られてから覚えた
私はフリーランスなので、プロジェクトごとにこうしたツール環境が当然変わります。
いずれも、その日に備えて事前に勉強なんて事はせず、行き当たりばったり。仕事が始まってから同時進行で少しずつ慣れていきました。
FigmaとAdobe XDはそんな感じで使えるようになりましたし、Sketchは現状未経験です。
あと、Git関連もプロジェクトでご一緒したエンジニアさんに教わりましたね。
真のコミュニケーションが一番大事
今回紹介したツールは、いずれも相手とコミュニケーションを取るためのものです。
多少使いこなせないモノがあっても、対人間としての連携がしっかり取れていれば、チームのメンバーに教えてもらったり、助けてもらえる関係性が必ずできあがります。
何でも使いこなせるから仕事があるとか、できないと仕事がないという事ではありません。
まとめ
- Webデザイン、UI/UXデザインでは、情報＆データ共有を目的としたツールがたくさん使われている
- ファイル共有：Google Drive及び、Googleドキュメントやスプレッドシートなど
- オンラインミーティング：Zoom / Google Meet
- テキストベースのコミュニケーション：Slack
- プロトタイプデザイン：Figma / Adobe XD / Sketch + Zeplin
- プロジェクト管理：Backlog / Jira / Asana / Redmine
- 制作物のバージョン管理：Git + GitHub / Bitbucket
- もう種類が多いし、案件によって環境も違うので全てを完璧に勉強しておかなくても大丈夫
改めて書き出すとすごいですね…。
気がつけば、こうしたツールだらけの世の中になってしまいました。
私も本当は、デザインやコードだけと戯れていたいけれど、なかなかそうはいかないようです。
繰り返しますが、私たちのミッションはステキなデザイン、UI/UXを提案する事。
細かいツールに翻弄されて、本質を見失ったり、自信をなくしたりしないように。
