【初心者必見】現役Webデザイナーが使用している機器・ツール・サービス一覧

Webデザイナーが使用しているツール・サービス一覧 お役立ち

Webデザイナーが効率的に作業をするには、様々な機器・ツール・サービスを使いこなす必要があります。
これから現役Webデザイナーである私が、日常的に使用している機器・ツール・サービスを紹介していきます。とても便利なので、初心者の方などは、ぜひ参考にしてください。

パソコン・周辺機器など

会社オフィス

iMac(27インチ)

imac

デスクトップパソコンは、画面が大きいので、UIデザインがスムーズにできます。
参照:Apple 公式サイト

Magic Trackpad

UIデザインやグラフィック作成の際の、拡大縮小操作に便利です。
参照:Apple 公式サイト

ワコムの板タブ

imac

イラスト作画に使用しています。
参照:ワコム 公式サイト

エレコムのワイヤレスマウス

手にフィットして、疲れにくいマウスです。
参照:エレコム 公式サイト

自宅

MacBook Pro(13インチ)

imac

ノートパソコンで、コンパクトサイズなため、持ち運びに便利です。グラフィック作成は問題なくできますが、画面が小さいため、UIデザインには不便です。
参照:Apple 公式サイト

iPad Pro(11インチ)

イラスト作画に使用しています。AirDrop機能で、MacBookに瞬時にデータがくれるのが、便利です。
参照:Apple 公式サイト

Magic Mouse

Apple公式のマウス。なでたりタップするだけで操作ができるのが、便利です。
参照:Apple 公式サイト

ノートPC・タブレット用スタンド

imac

姿勢改善やiPadで絵を描く際に使用するために購入。スタンドがあると、長時間でも快適に作業ができます。

その他

スマホ実機検証ではiPhoneやAndroidを使用しています。
また、Webデザイナーの仕事には、インターネット環境が必須です。現在、家では物件の関係で、インターネット回線はJ:COMと契約しています。

使用しているツール

デザインツール

Figma

imac

リアルタイムで共同編集ができる、新しいデザインツールです。
参照:Figma 公式サイト

Adobe Photoshop

グラフィックの作成に使用しています。
(アイキャッチ、バナー、インフォグラフィックなど)
参照:Adobe 公式サイト

Adobe Illustrator

グラフィックやロゴの作成に使用しています。
参照:Adobe 公式サイト

Adobe Premiere Pro

動画の編集に使用しています。Webページ内に動画を入れることで、滞在時間が長くなる効果が期待されます。
参照:Adobe 公式サイト

タスク管理ツール

asana

imac

タスク管理ツール。プロジェクトの始めから終わりまでの計画や、管理に役立つ機能があります。
参照:asana 公式サイト

Googleカレンダー

参照:公式 Google カレンダー スタートガイド

Googleスプレッドシート

参照:公式 パワフルなスプレッドシートを作ろう

連絡ツール

Skype

参照:Skype 公式ページ

Slack

参照:Slack 公式ページ

Gmail

参照:公式 Gmailで効率アップ

CMS(コンテンツ管理システム)

WordPress

参照:WordPress 公式ページ

コーディングツール

Brakets

imac

Adobe Systemsが開発するオープンソースのソースコードエディタ。動作が軽くて、人気です。
参照:Brakets 公式サイト

ユーザー分析ツール

Google アナリティクス

参照:Googleアナリティクス 公式ページ

Hotjar

imac

ヒートマップ、セッションの記録、調査などのツールを通じてフィードバックを提供してくれます。
参照:Hotjar 公式サイト

VWO

ABテストツール「Visual Website Optimizer」。JavaScriptタグをWEBサイト に埋め込むだけで、同一URLで簡単にA/Bテストが開始できるツールです。
参照:公式代理店 assionサイト

資料作成ツール

Googleスプレッドシート

参照:公式 パワフルなスプレッドシートを作ろう

Googleドキュメント

参照:公式 インパクトのあるドキュメントを作ろう

使用しているサービス

ブラウザ

Google Chrome

参照:Google Chrome ダウンロードページ

デザイン素材関連サービス

Shutterstock

imac

世界最大規模のストックフォト・イラストサイトです。
参照: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マーケティング

Twitter

参照:Twitter 公式サイト

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デザイナーになったのですが、こんなにもたくさんのツールやサービスを使うことになるとは思っていませんでした。日々、便利なサービスが生まれているので、アンテナを伸ばして、活用していきたいと思います。

コメント