アンケート
ピクセルグリッドの開発環境サーベイ 2017
第1回 エディタとおすすめツール編

ピクセルグリッドのエンジニア、デザイナーに開発環境や普段使いのツールを調査しました。今回、開発環境は案件に案件に左右されにくい基本的な環境と、日常的に使っている便利なツールを尋ねました。

2017年03月02日発行

目次

はじめに

このシリーズでは、ピクセルグリッドのエンジニアやデザイナーが、普段どんなツールを使って開発しているのかを調査し、そのツールを利用している理由や良さを紹介します。調査は2016年12月〜2017年1月にかけて行われました。

いったん自分の手に馴染むと、なかなか別のツールに移行しにくいものですが、もしかすると、ほかのツールには今までにない良さがあり、仕事の効率化が図れるかもしれません。ピクセルグリッドのエンジニアやデザイナーが使っている「道具」の中に、何か一つでも、読者のみなさんにお役に立てるものがあれば幸いです。

(構成:編集、丸山陽子)

エンジニアのおすすめエディタ

エンジニアにとって「商売道具」とも言えるエディタ。ピクセルグリッドの全エンジニア、デザイナーにどのエディタを使っているか聞いたところ、6つのエディタが挙がりました。「なんとなく使っている」という人から「もうこれから離れられない……」という人まで、その理由とおすすめ機能を紹介します。

MacVim / Vim

その独自の操作性からエンジニアの支持を得ていたのがMacVimでした。「操作体系が好き。いくらでも画面分割できるのがよい」(坂巻)。また、高津戸は「そんなにいろいろとカスタマイズしているわけではないので深く語れないが」と前置きしつつ、「Vimはその独自の操作体系に慣れるだけで高い生産性を得られると思っているし、実際そうなってると思う」とコメントしていました。「ほかのエディタに移りたくても、もう移れない」(大杉)といった、独自の操作体系にハマっている声も聞かれました。

Vimを使っているエンジニアからは「Git操作などもターミナルで行うので、ツールとブラウザを行き来する手間が減ってうれしい」(宇野)という理由が挙げられました。

また、iTerm2の上でVimを使っているのは杉浦と宇野です。「ブラウザとターミナル(iTerm)さえあれば、開発ができてしまう手軽さ」(杉浦)とコメントしています。

また、デザイナーからは「プロ(コードを書く専門の方々)によって使われ続けているツールだから。自分の専門がコードを書くことではないため、プロによって厳選され生き残っているものは良いものであろうという発想から利用している」(小原)という声も聞かれました。

【MacVim / Vimおすすめプラグイン】FuzzyFinder(選者:坂巻、大杉)

あいまいなキーワードでも、サジェストしてくれる検索プラグインの「FuzzyFinder」。たとえば、「スペースキー、fキー、mキー」を順に押して、最近開いたことがあるファイルを表示し、続けてcssと入力とすると、ファイルをサジェストしてくれる。

【MacVim / Vimプラグイン】vim-easymotion(選者:宇野)

画面内から指定した文字列を検索するのに便利なのが、vim-easymotion。vim標準の検索だと、/[任意の文字列]で検索したあと、nキーを何度か入力して、編集したい箇所まで移動するが、vim-easymotionを使えば、対応したキーを入力するだけで編集したい箇所に移動でき、nキーを何度も押す必要がない。

【MacVimおすすめコンビネーション】MacVim+Notational Velocity

MacVimとメモツールのNotational Velocityを組み合わせて、コード記述以外にも文章作成やメモに役立てているというのは高津戸でした。

Notational Velocityは手軽にテキストを作成して編集でき、grepでインクリメンタル検索もできるツール。テキスト編集中にショートカットキーを押すとMacVimを起ち上げて編集することができます。テキストを書くにしてもまず、Notational Velocityでテキストファイルを作り、MacVimでそれを開き、編集するというステップを経ているそうです。

この組み合わせで真価を発揮するのはNotational Velocityの検索機能。

たとえば、PostCSSについての原稿を書いて保存します。時間が経って、また書き足そうと思ったら、Notational Velocityでファイル名を入力すると、すぐにそのテキストを開いて編集できるわけです。もし名前を覚えていなくても、原稿中に必ずあるワード(たとえばpostcなど)を入力すれば、そのテキストを含むファイルが検索できます。

「そんなふうに雑多なテキストをすべて放り込み、必要なときに記憶から単語を辿ってテキストを探し出すツールとしています」とのことです。

Visual Studio Code

マイクロソフトが提供する、クロスプラットフォームのエディタのVisual Studio Code。

「あまりカスタマイズしなくても、いい感じに動いてくれるところがよいです。以前はAtomを使っていてそれも使いやすかったけれど、それよりさらに面倒がないですね」(中村)

「使っているマシンが古い(2011年のMacBook Air)ので、それでもサクサク動くエディタを使いたかった」(矢倉)などといった手軽さ、動作の軽さを評価する意見がありました。

また「Gitと連携していてエディタ上で変更箇所がわかったり、エディタ側でブレークポイントを設定してデバッグできるところがよい」(森)と、機能的に便利な点を挙げるエンジニアもいました。

【Visual Studio Codeおすすめ機能】Integrated Terminal機能(選者:矢倉)

Integrated Terminalという、ターミナルをエディタのペーンとして開く機能が便利です。

Sublime Text

「3Dデータなど、数十MB単位の巨大なJSONファイルも比較的速く開ける」(小山田)、「動作が軽いので、大きいデータファイルを見るときのサブエディタとして使っている」(森)と、「動作が軽快」なことを利点とする意見が多かったエディタがSublime Textです。

特に小山田は、MacBook Proなどに比べると非力なMacBook(Retina 12-inch, Early 2016)を使っており、「たとえば、6.3MBのjsonファイルをAtomで開くと表示するまでに32秒かかっていましたが、Sublime Textでは11秒で開くことができました」とのこと。作業効率が上がることもメリットです。

【Sublime Textおすすめプラグイン】Hayaku(選者:小山田)

CSSのコードを補完してくれるプラグインHayaku。選者の小山田によると、これに依存していることもあってSublime Textから離れられないと言っていました。

Atom

今回のアンケートでは「特別な設定が必要ないという使いやすさ」で支持されていたのが、Atomでした。

「プラグインを入れたり設定を変えなくても、まあまあ使える環境なのがよいかなと思っています。以前使っていたVimは設定を頑張ると、それだけいい環境が手に入っていたのですが、設定が楽なのもいいかなと思って……」(山田 順久)。それだけでなく、「使い始めるまでに特別な設定が必要ないこともありますが、JavaScriptで、自分で手軽にプラグインがつくれるところも気に入っています」(山田 敬美)など、自由度の高さを挙げる人もいました。

【 Atomおすすめプラグイン】multiline-tab(選者:山田 敬美)

タブを大量に開いたときに横スクロールされるのが嫌で、折り返して多段表示されるようにした自作プラグイン「multiline-tab」。

WebStorm

IDEであるWebStormは、ターミナルを内蔵し、Gitの操作も同じアプリ内から行えるなどのエディタ機能だけではない、さまざまな機能が利点として挙げられていました。機能が豊富な有料アプリケーションだけあって、「コード補完が強い。DefinitelyTypedの型定義を利用すると、ライブラリの補完やヒントが強くなる」(中島)、「プロジェクト内検索、置換、リファクタリングが簡単。コードフォーマットなどが賢い、構文の色付けのカスタマイズ箇所が多い」(奥野)などの機能を挙げる人もいました。

Node.jsのバージョン管理方法

Node.jsはプロジェクトによってバージョンが異なる場合は、管理が面倒になります。そこで、その管理方法と、どうしてその方法を使っているのかを尋ねました。

nodebrew

バージョンの切り替えはコマンド入力で手動で変える必要がありますが、インストールは簡単で手軽なのがnodebrewです。

  • Binary版をすっきり入れたり消したりできるから。ただ今は頻繁にバージョンは切り替える開発はしてないです(杉浦)
  • 僕はあんまりバージョン切り替えることがないですね。プロジェクトでは固定になってますし、それで切り替われば(徳田)
  • ぶっちゃけ、わりとなんでもよい。何で管理しようかなーって思ったときにほかちゃん(nodebrewの開発者の外村氏のこと)が使っていた。使い方がわかりやすかったから、そのまま、ずっと使っている(大杉)
  • 最初に使ったのがnodebrewで、そのまま不便なく使っていました(奥野)
  • nodebrewだけど、機会があればanyenvに乗り換えたい(小山田)

ndenv / anyenv

バージョン情報のファイルを置いておくことで、ディレクトリを切り替えると自動的にNode.jsのバージョンを切り替えてくれるという便利さがあるndenv。Node.js固定のndenvのほか、RubyやPython、PHPなどでも利用できるanyenvを利用している人もいました。

  • 最近プロジェクトでバージョンを固定したのでndenvにしました(高津戸)
  • ndenvはプロジェクト内の.node-versionを見て勝手に切り替えてくれるので便利です(宇野)
  • .node-versionを使っているので(山田 順久)
  • ピクセルグリッドに入るまではnodebrewを、入ってからはndenvを使っている。ndenvにしたのはバージョンを固定しているプロジェクトがあるため(矢倉)
  • 以前はnodebrewでしたけど、Node.js以外でも使えるということでanyenvにしました。でも、今のところNode.js以外使ってません(笑)(森)
  • 何かしらバージョン管理をする必要はありました。anyenvにしたのは周りにおすすめされたので(山田 敬美)
  • 特にこだわりはないのですが、まれにプロジェクトでNode.jsやRubyのバージョンに依存があったりしたので、プロジェクトごとに切り替えられるようにanyenvを選びました(小原)
  • OSSの開発や案件によってNode.jsのバージョンを切り替える必要があったのでanyenvを使ってます(中島)

パッケージインストール

そのほか、LTS(Long-term Support)をパッケージインストールし、バージョン管理はしていないという人もいました。現在の案件では、バージョン切り替えの必要がないとのことです。

  • ビルドして確認する場合など、標準的なバージョンで確認したいところが多いので。今はバージョンを切り替えて作業する必要がある案件をしていないので、問題ありません(中村)

エンジニア的おすすめツール

ピクセルグリッドのエンジニアとデザイナーが日頃使っていて、おすすめできるツールを紹介します。

なお、使用環境がOSに依存するツールに関しては【Mac/Win】などの表示を入れています。ピクセルグリッド社内ではMacユーザーがほとんどのため、紹介するツールもMac中心であることをご了承ください。

開発を便利に進めるツール

GitやGitHubに関連した便利なツールを複数挙げてくれたのは、山田 順久です。(以下、すべて選者:山田 順久)

GitHubからクローンしたリポジトリを整理する。$HOME/.ghq/github.com/<AUTHOR>/<REPOSITORY>のようなパスを自動的に作ってクローンしてくれるので、クローン先を考えなくてよくなるのが便利。

tmuxのwindowとpane設定を外部ファイル化してそれを復元する。tmuxのwindowを分けて、git操作したりするwindowとgulpのwatchやローカルサーバー立ち上げるwindowを分けたりする場合、それを毎回手作業で作るのではなく、設定ファイルを呼ぶだけで好みのwindow/paneのレイアウトを作ってくれる。

OS環境や言語に合わせて.gitignoreファイルのテンプレートを出力してくれる。テンプレートは https://github.com/github/gitignore を参照していて、こういう知見の集まった.gitignoreを手軽に使える。

現在のブランチに対応するプルリクエストを開く。手元でgit pushしたあとにGitHubのWebサイト開いて……という手順が、git pushしたら、次に、このコマンドを呼ぶだけでGitHubのプルリクエストのページへ跳べるようになって便利。

また、開発を便利に進めるツールが、各種挙げられました。

  • Dash(選者:中島)【Mac】

さまざまな言語やライブラリのドキュメントの検索/チェックをできるツール。

テキストや画像、フォルダ内のファイルの差分などのDiff管理ができるツール。クライアントがGitを使っていない場合、いろいろ手元で比較したい場合などはすごく便利。

CodeGridではMongoDBを使用しており、開発時にローカルのテストデータを簡単に操作できて便利。

  • peco(選者:山田 順久)

標準入力で受けたデータの行をインクリメンタルサーチして標準出力に返すもの。pecoを利用したシェル関数を書くことで、コマンド履歴からもう一度使いたいコマンドを検索して使ったりできる。

デスクトップを快適にするツール

多くのエンジニアが挙げたのは、デスクトップを快適に利用できるようにするツールです。特に、ウインドウを分割表示する、WindowsのAero Snapのような機能をmacOS上で利用できるツールは数多く挙げられました。

  • Divvy(選者:中村、小山田、山田 敬美)【Mac/Win】

ブラウザとエディタを分割して表示したり、エディタだけを全画面で表示したりといったことがショートカットで自由自在。

Divvy

ショートカットでウインドウをフル画面、分割表示、などを行う。

デスクトップ上のウインドウをショートカットキーやポインタ操作で分割、整理できる。画面分割を頻繁にする場合はとても便利。

  • Spectacle(選者:坂巻、矢倉)【Mac】

キーボードショートカットでウインドウサイズを画面の半分や2/3にできる。

  • Magnet(選者:中島、小原)【Mac】

ウインドウをリサイズできるツール。ショートカットキーでウィンドウを四隅に配置したりもできる。

また、MacのRetinaディスプレイの解像度を変更し、デスクトップ画面を広く使うというエンジニアもいました。ウインドウ分割表示ツールと併せ、画面が広くないノートブックタイプのMacでも、快適に開発できるようにということのようです。

  • QuickRes(選者:坂巻、宇野)【Mac】

Retinaディスプレイ搭載のMacで解像度変更するツール。解像度を上げることで表示領域を広くすることができる。ただし、表示領域を広げた分、細かく表示されて目が疲れるという欠点もあり。

坂巻は、15インチMacBook Proで2880x1800に、宇野は特定の解像度で固定せず、オフィスや外で作業するときなど、作業領域を広く取りたい場合は2048x1280。自宅にいるときで外部モニタに繋げられる場合や、ドキュメントなどを読むときは1440x900にして使い分けているとのこと。

QuickRes

インストール後は、メニューバーから解像度を変更することができる。

メニューバーにいろいろな機能を表示させたり、アクセスしたりするのも、定番の便利ツールといえますね。

CPU、メモリーの使用状況、CPUの温度などを常にメニューバーに表示してくれる。選者はパワーのないMacBook 12インチを使っているので、処理負荷がすぐにわかって便利。

iStat Menus

メニューバーのアイコンから、さまざまなシステム状況にアクセスできる。

  • BitBar(選者:森)【Mac】

任意のスクリプトを定期実行して、標準出力結果を Mac OS Xのメニューバーに表示してくれる。さまざまなプラグインが公開されているほか、自分でプラグインを作成することも可能。選者はCPU利用率を表示しており、バッテリが気になるときに便利だという。

IMEが日本語か英語かで、画面上に色の付いたバーを表示する。現在の入力ソースを確認しやすくなる。

画像関連ツール

画像を扱うツールでも、特におすすめが多かったのは、画像圧縮ツールでした。

  • ImageOptim(選者:大杉、小山田、高津戸、小原)【Mac】

PNGファイルやJPEGファイル、またはそれらのフォルダごとドロップすれば、圧縮してくれる。

ImageOptimをコマンドラインから操作

ImageOptimをGUIからではなくコマンドラインから操作していると回答したのは大杉です。作業中のGitのリポジトリ内で、新しく追加した画像と編集した画像を一括でImageOptimの処理にかけているそうです。

alias imgopt='(git diff HEAD --name-only --diff-filter=ACM && git ls-files --other --exclude-standard) | grep "\.*\(jpg\|png\|gif\)$" | imageoptim --verbose'
  1. git diff HEAD --name-only --diff-filter=ACM で、Gitで追跡してるファイル(リネーム以外)を抽出(=編集した画像)
  2. git ls-files --other --exclude-standard で、Gitで追跡してないファイルで.gitignoreで無視してないファイルのみも抽出(=新しく追加した画像)
  3. 1、2を grep "\.*\(jpg\|png\|gif\)$" で、画像のみをフィルタ
  4. それらのファイル全部を imageoptim --verbose で、ImageOptime-CLI を使ってImageOptimをかける( --verbose オプションでImageOptimした結果も詳細表示)

ImageOptimのほかにも、さまざまな形式の画像ファイルに対して圧縮するツールが挙げられました。

  • svgo-gui(選者:小山田)【Mac/Win】

ドラッグ&ドロップでSVGファイルを圧縮する。

  • JPEGmini(選者:小原)【Mac/Win】

JPEGの最適化ツール。画質を落とさずに軽くしてくれる。選者は、JPEG形式の画像についてはImageOptimよりも信頼している。

  • pngquant(選者:杉浦)【Mac/Win】

PNG画像の圧縮ができるツール。GUIバージョンとコマンドラインから利用するバージョンが用意されている。選者はmacOSの右クリックメニューから使えるようにして、複数画像を選択して右クリックでまとめて8bitPNGにできるようにしている。

そのほか、画像関連のツールはいくつも挙げられていました。

画像ファイルをドロップすると、Data URIがクリップボードに保存される。

簡単に長さや幅を計測できる定規ツール。画面上でざっとピクセル数を測りたい場合には便利。

CodeGridやセミナー資料などの図版を制作するのに利用。手書き風でいい感じになるところがお気に入り。

Balsamiq Mockupsで作成した図の例

手書き風に表現できるが、日本語フォントはほとんど選択の余地がないのは惜しいところ。

スクリーンキャプチャツール

同じチーム内のエンジニアやクライアントに状況説明するときに使う、スクリーンキャプチャツールやGIFアニメ作成ツールも、さまざまなおすすめがありました。OSの機能や標準付属アプリでキャプチャすることもできますが、専用ツールにはやはり使いやすさがあります。

「UIに関わる仕事が多いので、バグ報告とか実装した内容を説明するためのキャプチャツールにこだわるのはよいことだと思います」(山田 順久)。

  • LICEcap(選者:高津戸、小山田、小原、坂巻、森)【Mac/Win】

  • Kap(選者:矢倉)【Mac】

  • GIFBrewery(選者:中島)【Mac】

  • GIPHY Capture(選者:山田 順久)【Mac】

また、キャプチャ後の画像に加工を加えるツールを挙げる人もいました。

  • Monosnap(選者:山田 順久)【Mac/Win】

キャプチャした画像に対して線や矢印、テキストやモザイク加工を加えたりできる。キャプチャ後のプレビューをGitHubのテキストエリアにドラッグするとアップロードもできて便利。

文字入力/トラックパッドやマウスなどの操作関連

よく使うツールのショートカットに合わせたい、WindowsからMacに移行したなど、キーボード配列を変更したいと思うことはないでしょうか。キーリマップツールもいくつか挙げられました。トラックパッドやマウスの調整にも、専用ツールを使うことがあるようです。

  • Karabiner(選者:大杉)【Mac】(執筆現在、macOS Sierraには未対応)

高性能なキーリマップツール。選者のキーボードはUS配列だが、次のように変えている。

  • 左cmd => 英数
  • 右cmd => ひらがな
  • 左cmd長押し => controll
  • 右cmd長押し => cmd
  • 左option => cmd
  • 左controll => option
  • capslock => esc

気軽に利用できるキーリマップツール。こちらの選者の坂巻はキーボードもUS配列だが、次のように変えている。

坂巻のキーリマップ設定

vimのコマンド入力に使う:(コロン)は、US配列のキーボードでは、Shiftキーと;(セミコロン)の2つのキー入力が必要。それをひとつのキーで済ませるためのキーリマップはよく行われる。

トラックパッドやマウスの機能を拡張するツール。選者は、ピンチインでChromeのタブを閉じたり、4本タップで新規タブを開いたりするのに使っている。

元々はMacに対応していない入力デバイスのキーを変更するツールだが、選者はマウスの加速度曲線を編集することに利用している。Illustratorなどをマウスで操作するときに、標準のマウス加速度にどうしても馴染めないため、加速度曲線を変更できるツールが必須になってしまった。

【Tips】OS標準機能ですばやく絵文字候補表示(選者:小山田)

macOSでは、アプリに関係なく、日本語入力にしていても英字入力にしていても、「cmd」+「ctrl」+「space」キーで絵文字や記号の候補表示パネルを表示できる。特別な設定は必要なく、地味に便利な機能。

おわりに

いかがでしたでしょうか。ちょっと便利なツールを出してもらったら、意外と数が多くなってしまいましたが、一挙にご紹介しました。気になるツールはありましたでしょうか。後編となる次回は、Webブラウザ編となる予定です。

森 大典
森 大典
フロントエンド・エンジニア

大手電機メーカーを中心とした基幹系システム開発プロジェクトにSE兼プログラマとして多数参画。WEBシステム、C/S、POSレジ、無線ハンディ、汎用機(COBOL)、工場設備(シーケンス制御)、など、多数のシステム構築の実務経験を積む。2015年株式会社ピクセルグリッドへ入社。ブログにて発信しているチュートリアル、リファレンス関連の記事は幅広い層に利用されている。

杉浦 有右嗣
杉浦 有右嗣
フロントエンド・エンジニア

業務系SIerにて主にWebサービス開発の上流工程を経験した後、大手インターネット企業に転職。ソーシャルゲームをはじめとする、モバイル向けWebサービスのフロントエンド開発を数多く経験する。フロントエンドはもちろん、サーバーサイドやネットワークの知識も豊富である。2015年株式会社ピクセルグリッドへ入社。

中村 享介
中村 享介
フロントエンド・エンジニア

デザイン事務所のWebデザイナー、Web制作会社のWebディレクターを経て、フリーランスのFlash・JavaScriptエンジニアとして独立後、株式会社ピクセルグリッドを設立。 多数のリニューアル、新規立ち上げを取り仕切った経験をもち、情報設計、デザイン、フロントエンド、サーバーサイド、ネットワークといったひと通りのWebサイト制作技術に精通する。Web制作の他にも経営、講演、執筆など幅広く活動している。

著書に『WebクリエイティブのためのDOM Scripting』(単著:毎日コミュニケーションズ、2007年4月20日)、『jQuery逆引きマニュアル』(共著:インプレス、2010年12月17日)などがある。

高津戸 壮
高津戸 壮
フロントエンド・エンジニア

Web制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。数多くのWebサイト、WebアプリケーションのHTML、CSS、JavaScript実装に携わってきた。受託案件を中心にフロント周りの実装、設計、テクニカルディレクションを行う。スケーラビリティを考慮したHTMLテンプレート設計・実装、JavaScriptを使った込み入ったUIの設計・実装を得意分野とする。 著書に『改訂版 Webデザイナーのための jQuery入門』(技術評論社、2014年11月14日)がある。 CSS Nite 2011ベストセッションにおいて、全170セッションの中から、ベスト10セッションに、CSS Nite 2013ベストセッションでは、全278セッション中、ベスト20セッションに選出。

小山田 晃浩
小山田 晃浩
フロントエンド・エンジニア

2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年よりフロントエンド・エンジニアとして株式会社ピクセルグリッドに入社。これまでの経験の大半は大規模Webサイトの壊れにくいHTML/CSS設計、及び実装。また、SVG, Canvas, WebGLの扱いも得意としている。 外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。Tokyo WebGL Meetupの主催者。2011年から2015年まで5連続でMicrosoft MVP for IEを受賞。 著書に『Webデザイナー/コーダーのための HTML5コーディング入門』(共著:エクスナレッジ、2011年3月12日)や『CSS3デザイン プロフェッショナルガイド』(共著:毎日コミュニケーションズ、2011年5月28日)』などがある。

德田 和規
德田 和規
フロントエンド・エンジニア

HTML/CSSコーダーとしてWebに触れ、その後WebディレクターとしてJavaScriptの特性を活かしたサイトのテクニカルディレクションからUI開発までを経験。2011年にフロントエンド・エンジニアとして株式会社ピクセルグリッドへ入社。 著書に『jQuery逆引きマニュアル』(共著:インプレスジャパン、2010年12月17日)などがある。

山田 順久
山田 順久
フロントエンド・エンジニア

HTML・CSSのコーディング、後にJavaScriptの設計や実装を主業務として経験を積む。キャンペーンサイトやコーポレートサイトの、動きと操作性に工夫を凝らしたUI実装を多く手がけている。複雑なWebアプリケーション実装における、コンポーネント的な考え方を念頭においたJSの設計を得意とする。 著書に『JavaScriptエンジニア養成読本』(共著:技術評論社、2014年12月11日)がある。

小原 司
小原 司
UIデザイナー

紙媒体をメインに制作しているデザイン事務所で広告デザインの基礎を学ぶ。2000年に独立。化粧品関連媒体の販促物を中心に、店頭グラフィック、パッケージ、POP、グッズ立案などを担当。2007年頃からWeb媒体へのデザインにも積極的に取り組み、クロスプラットフォームアプリのデザイン、画面設計、実装に携わる。現在では紙やWebの媒体にとらわれることなく、その媒体の特長を活かしたグラフィックデザインに励んでいる。 マンセル色相環とムーン&スペンサー配色理論を採用した配色アプリ『HUE360』の開発を自身で行っている。 著書に『改訂版 Webデザイナーのための jQuery入門』(技術評論社、2014年11月14日)がある。

山田 敬美
山田 敬美
フロントエンド・エンジニア

Web制作会社、自社サービス運営会社などでサービス企画、マークアップ・エンジニアの経験を積むも、退職して1年間専門学校に通う。プログラミングの基礎を学んだのち、2013年4月、ピクセルグリッドのフロントエンド・エンジニアとして入社。CSSの設計を得意とするが、JavaScriptも好き。 著書に『Sass入門 ~より効率的なCSSコーディング』(共著:技術評論社、2012年10月19日)や『CSS3デザインブック 仕事で絶対に使うプロのテクニック』(共著:MDN、2012年3月21日)などがある。

坂巻 翔大郎
坂巻 翔大郎
フロントエンド・エンジニア

大手ソフトウェアダウンロード販売会社、Web制作会社などで、マークアップエンジニア、プログラマ、サービス企画、ディレクターを経験。2013年、株式会社ピクセルグリッドに入社。HTML、CSS、JavaScriptなどをオールラウンドに担当。とりわけ、プログラマブルなCSSの設計、実装を得意とする。 趣味で作成したゲーム「CSS PANIC」は、JavaScriptを一切使わず、HTMLとCSSのみで実装。海外サイトで紹介されるなど話題となった。

丸山 陽子
丸山 陽子
エディター

Mac雑誌の編集者を経験後、フリーランスのエディター/ライターとして独立。パソコン系雑誌やデジタルカメラ雑誌、iPhone/iPadの初心者向け書籍などの編集や執筆に携わる。2015年にピクセルグリッドへ入社し、「CodeGrid」の編集を担当する。

宇野 陽太
宇野 陽太
フロントエンド・エンジニア

大手ソフトウェアダウンロード販売会社、ソーシャルアプリケーションプロバイダーなどで、デザイナー、マークアップ・エンジニア、フロントエンド・エンジニアとして、主にスマートフォン向けゲームの開発に携わる。2015年1月に株式会社ピクセルグリッドに入社。 MVCフレームワークを用いたJavaScriptの実装や、メンテナブルなCSSの設計を得意とする。

大杉 充
大杉 充
テクニカルディレクター

主にディレクターとして、制作工程全体の効率化を行いながら、数百サイトのコーディングに携わる。またそれらの経験を活かしセミナー講師も勤めている。漠然としたイメージや状況をうまく把握し、最適なアドバイスや提案につなげることが得意。 著書に『Web制作者のためのGit入門』(共著:マイナビ、2014年6月28日)がある。

中島 直博
中島 直博
フロントエンド・エンジニア

JavaScriptとCSSへの興味から大学院を中退してWebの世界に飛び込む。大手デジタルコンテンツベンダーにてHTML、CSS、JavaScriptなどフロントエンド全般の担当として、主にスマートフォン向けゲームの開発に従事。2014年1月にフロントエンド・エンジニアとして株式会社ピクセルグリッドへ入社。スマートフォンサイトの実装を得意とする。 また、在学中からhtml5jのスタッフとして、さまざまな技術系勉強会の運営に関わり、HTML5 Experts.jpのコントリビューターもつとめる。

矢倉 眞隆
矢倉 眞隆
フロントエンド・エンジニア

Web制作会社にフロントエンド・エンジニアとして携わった後、とてもやる気のないフリーランサーを経て、2016年10月に株式会社ピクセルグリッドへ入社。Web標準技術やブラウザの実装動向に明るく、イベントでの講演や雑誌・オンラインメディアへの原稿執筆、書籍の監修・監訳などを多数手がける。最近はWebサイト・Webアプリの描画パフォーマンス向上にお熱。Google Developer Expertとしても活動中。

奥野 賢太郎
奥野 賢太郎
フロントエンド・エンジニア

音楽業界に飛び込み、音楽制作・ディレクター・DTM科講師などをつとめる。同時期にWebデザインのバイトをきっかけにAngularJSと出会う。その後、フロントエンド・エンジニアへの転身を決心し、自社サービスを運営する企業に入社。設計や実装に携わる。2017年1月に株式会社ピクセルグリッドへ入社。得意分野はAngularを用いたWebアプリケーションの構築。音楽知識を基にしたWeb Audio、Web MIDIの技術にも明るい。