コーディングは知見を共有!デザインは勉強中のブログです!

【2019年】プロのコーダーがweb制作の現場で使っている厳選ツール5選

※2019.6.19更新

世間のwebデザイナー・コーダー・フロントエンドエンジニアのあなた!どんなツールを使って制作に臨んでいますか?
ここでは僕の環境で使用しているツールを厳選してご紹介します。

最近人狼の記事ばっかりだったので忘れてる人いるかもしれませんが、僕の本業はweb制作であり、いわゆるマークアップエンジニア、コーダーと言われる役目の仕事です。

レベルアップしてフロントエンドエンジニアやWebディレクターとか目指したいけどね!

まだインライン要素のまま気づかずにmarginとかつけようとちゃってるのでまだまだですね。

とはいえ仮にもこれで飯くってますのでたまにはwebデザイナー、コーダーらしいこと書いていきますよ。

使用ツール厳選5選!

いろいろ細かくはつかってるんですけどここでは5選で紹介します!

無料有料問わず紹介していきますが有料でも購入の価値がある神ツール達ですよ!
またMAC前提なのでその点だけご了承ください。

IntelliJ IDEA

Ult版です。言わずとしれたJetBrain社製のIDE。
もともとJAVA用のIDEですが、その実態は全部のせラーメンでして。
HTML/CSS、JavaScriptはもちろんのことphpやRubyも使えます。

もやら語られ尽くされてるんじゃないかってくらいなんですが、とにかくデフォの状態でも最強で、他のエディタではプラグインで補強してるような機能はデフォでついていますし、Alt+Enterで空気を読んでくれる機能があるんですがとにかくこまったらこれをやっておけばいいレベルで便利。

え、こんなことまで!?ってくらいデフォでやってくれますし、設定もクラウド保存出来て引っ張ってこれるのでこれなしでは開発やっていけないですね。

ワンクリックでローカルサーバー立ち上がるのも使い勝手Goodです!
有料ですがエディタやIDEはコーダーのメインウェポンですから出し惜しみは損ですよ!
無料ならVScodeが頭一つ抜けてる印象ですが、有料でもよければこちらがおすすめです!

参考 購入はこちらから株式会社サムライズム デザイナーにこそ勧めたい生産性爆上がりの最強エディタ「PhpStorm」

Pixel Snap2

公式の動画を見てもらったらわかるんですが、めちゃ便利です!
コーダーのしごとをしていると各余白や大きさを図ったりスクショを撮ったりする場面が多いと思うんですが、そういう場合にあらゆるものを簡単にはかれます!

サイズをはかるツールとしては抜けている印象で、こちらも有料ですができることが多いし使い勝手もいいのでまじでおすすめです!
XDやSketchとはアプリ連携もできるみたいです。スクショを取る機能も地味に便利です。

四角形ツールでサイズはかり続けてる人は切り替えオススメ。

参考 PixelSnap2PixelSnap2 【2019】この世の画面内全てが測れるアプリ「PixelSnap2」が凄すぎた

ScreenFloat

こちらも有料なんですがとにかく便利なんです!(小学生並の感想)

便利ばっかりいってますが本当に便利なんですよ・・・!笑

スクリーンショットを撮るアプリなんですが、撮ったSSが優先的に前画面に出てきます。
さらにマウスホイールで透過率を操作することができ、コーディングとデザインデータのズレを重ねてチェックすることができます。
特にピクセルパーフェクトのような案件ですとぴったりになっているかのチェックは大事ですし、文字感や行間のチェックにも使えますのでエディタ以外では一番使用頻度高いかもしれません。

参考 ScreenFloatScreenFloat 【web制作コーディングにおける神ツール】「ScreenFloat」3つの魅力

Transmit

こちらも有料(ry

TransmitはFTPツールなのですが、まず普通に使い勝手がいいことに加え、Finderでデータを閲覧できたり、編集したファイルをローカルで扱うかのようにそのままアップできたり

あらゆる使い方が工夫次第でできるアプリとなっています。
他のFTPアプリでも用はなせますが、作ったものをFTPを使ってUPするという作業が日常的に発生する以上その作業に関していいものを使いたいと思いますよね。
Transmitを使うとストレスフリーなFTPライフが待ってます。

参考 TransmitTransmit

Xcode -simulator

Xcode自体はほぼ使いません!

これについてくるシミュレーター目当てです。
特にiOSは挙動が独自なことが多く、対応するデバイスも持っているとは限らないためこのシミュレーターがとても重宝します。

もちろんgoogle chromeの検証モード等でも確認はするのですが、実機での挙動が違うことも多々あるためこのアプリは手放せません。
また、実機と同じ様にシミュレーターもsafariの開発ツールと連携してデバッグできますのでchromeのデベロッパーツールには及びませんがこちらであらゆる検証が可能です。

便利なツールを使いこなして作業効率をあげよう!

いかがでしたでしょうか!今回は僕は現場でよく使うツール5選を紹介しました!