Webデザイナーが効率的に作業をするには、様々な機器・ツール・サービスを使いこなす必要があります。
これから現役Webデザイナーである私が、日常的に使用している機器・ツール・サービスを紹介していきます。とても便利なので、初心者の方などは、ぜひ参考にしてください。
パソコン・周辺機器など
会社オフィス
iMac（27インチ）
デスクトップパソコンは、画面が大きいので、UIデザインがスムーズにできます。
参照：Apple 公式サイト
Magic Trackpad
UIデザインやグラフィック作成の際の、拡大縮小操作に便利です。
参照：Apple 公式サイト
ワコムの板タブ
イラスト作画に使用しています。
参照：ワコム 公式サイト
エレコムのワイヤレスマウス
手にフィットして、疲れにくいマウスです。
参照：エレコム 公式サイト
自宅
MacBook Pro（13インチ）
ノートパソコンで、コンパクトサイズなため、持ち運びに便利です。グラフィック作成は問題なくできますが、画面が小さいため、UIデザインには不便です。
参照：Apple 公式サイト
iPad Pro（11インチ）
イラスト作画に使用しています。AirDrop機能で、MacBookに瞬時にデータがくれるのが、便利です。
参照：Apple 公式サイト
Magic Mouse
Apple公式のマウス。なでたりタップするだけで操作ができるのが、便利です。
参照：Apple 公式サイト
ノートPC・タブレット用スタンド
姿勢改善やiPadで絵を描く際に使用するために購入。スタンドがあると、長時間でも快適に作業ができます。
その他
スマホ実機検証ではiPhoneやAndroidを使用しています。
また、Webデザイナーの仕事には、インターネット環境が必須です。現在、家では物件の関係で、インターネット回線はJ:COMと契約しています。
使用しているツール
デザインツール
Figma
リアルタイムで共同編集ができる、新しいデザインツールです。
参照：Figma 公式サイト
Adobe Photoshop
グラフィックの作成に使用しています。
（アイキャッチ、バナー、インフォグラフィックなど）
参照：Adobe 公式サイト
Adobe Illustrator
グラフィックやロゴの作成に使用しています。
参照：Adobe 公式サイト
Adobe Premiere Pro
動画の編集に使用しています。Webページ内に動画を入れることで、滞在時間が長くなる効果が期待されます。
参照：Adobe 公式サイト
タスク管理ツール
asana
タスク管理ツール。プロジェクトの始めから終わりまでの計画や、管理に役立つ機能があります。
参照：asana 公式サイト
Googleカレンダー
Googleスプレッドシート
連絡ツール
Skype
参照：Skype 公式ページ
Slack
参照：Slack 公式ページ
Gmail
CMS（コンテンツ管理システム）
WordPress
コーディングツール
Brakets
Adobe Systemsが開発するオープンソースのソースコードエディタ。動作が軽くて、人気です。
参照：Brakets 公式サイト
ユーザー分析ツール
Google アナリティクス
Hotjar
ヒートマップ、セッションの記録、調査などのツールを通じてフィードバックを提供してくれます。
参照：Hotjar 公式サイト
VWO
ABテストツール「Visual Website Optimizer」。JavaScriptタグをWEBサイト に埋め込むだけで、同一URLで簡単にA/Bテストが開始できるツールです。
参照：公式代理店 assionサイト
資料作成ツール
Googleスプレッドシート
Googleドキュメント
使用しているサービス
ブラウザ
Google Chrome
デザイン素材関連サービス
Shutterstock
世界最大規模のストックフォト・イラストサイトです。
参照：Shutterstock 公式サイト
ICOOON MONO
アイコン配布サイト。商用利用可能です。
参照：ICOOON MONO 公式サイト
Google Fonts
無料でWebフォントを使用できるサービスです。
参照：Google Fonts 公式サイト
Google Fonts + 日本語
参照：Google Fonts + 日本語
remove.bg
写真をアップするだけで、自動で被写体を選択してトリミングしてくれるオンラインサービスです。
参照：remove.bg 公式サイト
TinyPNG
画像の見た目をあまり変えずに、サイズ容量を小さく圧縮してくれるオンラインサービスです。
参照：TinyPNG 公式サイト
イラストAC
高品質なイラストを、無料でダウンロードできるストックイラストサービスです。
参照：イラストAC 公式サイト
写真AC
高品質な写真を、無料でダウンロードできるストックフォトサービスです。
参照：写真AC 公式サイト
SNSマーケティング
HootSuite
Twitter予約投稿サービス。
参照：HootSuite 公式サイト
拡張機能
Google Analytics オプトアウト アドオン
Google Analytics の JavaScript （ga.js） と連携して Google Analytics に情報が送信されないようにしてくれます。
chrome ウェブストア
GoFullPage – Full Page Screen Capture
Webページの全体をキャプチャしてくれるツールです。
Chrome ウェブストア
Image Downloader
Webページから画像を、簡単にダウンロードできるツール。
Chrome ウェブストア
svg-grabber – get all the svg’s from a site
Webページから、SVG画像を簡単にダウンロードできるツール。
Chrome ウェブストア
Page Analytics (by Google)
Googleアナリティクスのページを開かずに、サイトパフォーマンスを知ることができるツール。
Chrome ウェブストア
Tags for YouTube™
他人のYouTubeの動画に入れられたタグを確認できるツール。
Chrome ウェブストア
まとめ
以上、現役Webデザイナーである、私が使用している機器・ツール・サービスをご紹介致しました。
私は未経験からWebデザイナーになったのですが、こんなにもたくさんのツールやサービスを使うことになるとは思っていませんでした。日々、便利なサービスが生まれているので、アンテナを伸ばして、活用していきたいと思います。
