フロントエンド便利（必須）ツール
エディタさえあればいいと思っていた時期が私にもあり・・・ませんでした！現れてはすたれていきまくる様々なツール達ですが、今やるならとりあえず入れて（使って）損は無い！というものを紹介していきます。特にお金とかもらってないです。お金下さい。
tinypng（画像圧縮サイト）
超有名画像圧縮サイト。フリー素材を使ったり、デザイナーから素材を受け取ったりすると思いますが圧縮されていないことも多いので、webサービスで使用する画像は可能な限り圧縮しましょう。
普通のファイルであれば半分程度のファイルサイズに圧縮されるので速度面でも影響は大きいですよ。
placeholder.com（ダミー画像サイト）
こちらはURLを記載するだけで指定サイズのダミー画像を設置できるサービスです。「https://via.placeholder.com/150x200」のように記述することで指定サイズの画像を表示してくれます。サーバー側で動的に画像を出力する場合などデザインと違うサイズの画像が入った場合に正しく表示できるかを簡単にテストできます。便利！
JSFiddle（8桁カラーコードrgba変換サービス）
XDで透明度指定ありの色をしていすると8桁のカラーコードが生成されます。実はIE11では8桁カラーコードは対応しておらず、色が無くなってしまうのでrgbaに変換しなければいけません。地味にめんどくさいのですがこのサービスであれば一発変換してくれるので大変助かっています。
PageSpeed Insights（ページ速度計測ツール）
こちらはGoogleの用意しているページ速度計測ツールです。サイトの表示速度が遅い時、このツールを利用してボトルネックを見つけ出すことができます。ページ表示速度が２秒遅くなると、離脱率が50%増える（数字はいろいろ変わると思いますが、伸びて喜ぶ人はいません）ので定期的に確認しましょう。
https://developers.google.com/speed/pagespeed/insights/?hl=JA
Visual Studio Code（エディター）
言わずと知れた大人気エディターです。以前はAtomを使っていました。軽量でカスタムしやすく使いやすいです。無料なのでパソコンさえあればすぐに始められますね。ローカルサーバーを立ち上げられる「Live Server」や、事前準備無しでsassが使える「Live Sass Compiler」辺りは特に便利です。多機能すぎて全然使いこなせていませんが間違いなくオススメのエディターです。
Adobe Photoshop
納品されるデータがすべて適切なパーツになっているとは限りません。自分で必要な形に切り出しなどする必要も出てくるので、Photoshopも使えた方が良いのは間違いありません。Photoshopデータ（psd）で納品される際はスライスツールなどを使用するのでできるだけ使い方を覚えたい所です。
Adobe XD
Web業界のデザイン作成は長らくPhotoshopで行われてきましたが、最近はプロトタイプツールであるXDを利用している現場も増えてきたようです。XDはデザインに動きを付けることができます。PhotoshopでもLPデザインなどは問題ありませんが、動きは表現できません。XDであればモーダルを表示させたり、固定ヘッダーを表示させたりできます。デザイン作業をするフロントエンドエンジニアはもちろん、素材の書き出し程度はできた方が良いのでこちらも覚えたいですね。
現状無料で利用できますが制限が多いので、仕事で使うには有料版使用必須だと思います。
Figma
XDと比較されがちなプロトタイプツールですが、こちらは無料です。どんなものか触ってみたいという方はFigmaを試してみるのがいいでしょう。無料ですがFigmaを業務で使用している会社も多いので、覚えたらそのまま現場で使える場合もあると思います。
ワイヤーフレームを引く作業なんかもできるので、デザインに興味がある人やfigma利用デザイナーとのコミュニケーションをより円滑にしたいディレクターさんにもオススメです。
終わりに
今回自分が作業する上でなくては困るものを集めてみました。JavaScriptでつまったらQiitaを見るとか、gulpやwebpackなどのツール類もあるんですが説明が必要なので、すぐ使えるツールをまとめました。使っている人も多いと思いますが、知らなかった！便利！とか気になってたけど利用に踏み出してみるきっかけになれたら嬉しいです。
この記事が気に入ったらサポートをしてみませんか？