2015.07.05これだけは知っておきたいWeb開発で使用するツールまとめ(フロントエンドエンジニア向け)

フロントエンドエンジニアなら必携!


0705

最近のフロンドエンドエンジニアのツール(僕がいつも使用している仕事ツール)を紹介します。
ピンときたものはつかってみてください!

画像作成,編集系


photoshop
http://www.adobe.com/jp/products/photoshop.html

ちなみにkeynoteもかんたんな画像編集として使えます。
ImageOptim
https://imageoptim.com/

画像をドラッグすると、ファイルサイズを最適化してくれるソフト。
とてもかんたんで重宝しています。

テキストエディタ系


Sublimetext
http://www.sublimetext.com/

プラグインがとても多く、使いやすいです。
エディタ上で、gitへのcommitなどもできとても重宝しています。
Vim
http://www.kaoriya.net/software/vim/

とにかく軽いです。サーバー上でのテキストエディットの時に使用しています。
こちらもプラグインをたくさん入れることができるので、自分用に使いやすくカスタムして使用できます。
僕はいつも、NeoBundleというツールを使い一括でプラグインを管理しています。

コミュニケーションツール


Slack
https://slack.com/

流行りのSlack。Trunkでも開発チームはもちろん、セールス、マーケも活用しています。
GoogleDrive、gitなど様々なアプリと互換性があるので、とても重宝しています。

プロトタイピング


Prott
https://prottapp.com/ja/

Goodpatch社が開発したプロトタイピングツール。
アプリを作る時に使用します。
pop
https://popapp.in/jp

その他便利ツール


Alfred
http://www.alfredapp.com/

Mac向けランチャーアプリ。カスタムするとブラウザを開かずに辞書検索までできます。最高です。

Chromeツール

ターミナル


iTerm2
https://www.iterm2.com/

Mac向けターミナルアプリ。
通常のターミナルではできないカスタムだったり、画面分割ができます。

バージョン管理


git
https://github.com/

今となっては知らない人もいないであろうgit。
ソースコードの管理はもちろん、タスク管理もできます。
リポジトリの容量をたくさん使えるのであまりおすすめできませんが、
画像の差分管理までできます。

情報収集


codegrid
http://www.codegrid.net/

Pixel Grid社が運営する技術ブログ。
僕の知り合いも何人か在籍していて、フロンドエンドに関する最新の情報を常に発信してくれる僕のバイブル的ブログです。
jsdo.it
http://jsdo.it/

一言でいうと、javascriptのSNS。
いろんな人がjsでもデモコードをあげています。とても参考になります。
Panda
https://usepanda.com/

デザインの最新トレンドを毎日配信しているサイト。
英語のしか記事しかないですが、頑張って読んでいます。
はてぶ
http://b.hatena.ne.jp/

Behance
https://www.behance.net/

Adobeが運営している、オンラインポートフォリオのサイト。
ロゴなりデザインカンプなりいろいろあります。
Dribbble
https://dribbble.com/

Pinterest
https://jp.pinterest.com/

使いかたは人それぞれだと思いますが、様々なクリエイターがクリエイティブを公開しています。

以上です。

この記事を書いた人

岡崎 友宏

某企業のデザイナーをしながら、TrunkのCCOしています。TRUNKではデザインや開発を担当しています。 design,UX,wearable,frontend,HR,人材育成,採用,副業,焼き鳥,ウーロンハイ