2018.11.15 2018.11.13

心地よい協働のために。残業０・出社自由な私たちの開発スタイルをご紹介します

川島 さやか / エンジニア

こんにちは。エンジニアの川島です。

先日、代表の高崎からツイートでお知らせがあったとおり、私たちは、現在、プロジェクト単位でサポートに入っていただけるフリーランスの方を募集しています。

お仕事をご一緒するにあたって、後から「ちょっと想像と違ったな……」というミスマッチを防ぐためにも、本記事では「私たちがどんなスタイルで仕事を進めているのか」をご紹介したいと思います:)
特にエンジニアの方にとっては、開発で用いる技術やツールについても気になるところかと思いますので、記事後半にて詳細に記載しています。
私たちと一緒に仕事をするときのイメージの助けになればさいわいです。

業務に対する価値観と制度

私たちノンスタは、仕事と生活のどちらも大切にするワークライフハーモニーの実現を目指し、日々の業務に様々な仕組みを取り入れています。
出社自由なリモートワーク制度のもと、スクラム手法を用いて適切なリソースの配分に取り組み、基本的に残業は行いません。
業務効率化を具体的に叶えるため、ITツールを積極的に活用している他、マニュアルを充実させることで業務の属人化を防ぎ、各メンバーが自主的に判断しやすい環境を整えています。
詳しくは当サイトの会社案内ページを見ていただけるととても嬉しいです。

業務コミュニケーション全般

GitHub

コード管理・課題管理・マニュアルはGitHubに集約しています。
過去の採用記事でもGitHub活用については紹介しているので、ぜひ併せてご覧ください。
ブランチ運用ルールはGitHub flowを採用し、シンプルかつトラブルが起きにくい仕組みを整えています。
各課題はスクラム手法に則って見積もりを行い、開発期間に過剰なタスクが集中しないように配慮しています。

補足：スクラムについて

スクラムとは、アジャイル開発というプロジェクト進行方法を叶えるための手法のひとつです。
「プロジェクトの変化に対応できるよう、チーム全体で柔軟に開発を進める」ことが特徴で、ウォーターフロー開発（※上流から下流へ流れるように、仕様に沿って開発を進めてゆく進行方向。大規模開発には有効だが、柔軟性は低く、仕様変更時のロスが大きい）とよく比較されます。
スクラム手法のざっくりとした概要は下記のとおりです。

  • 1〜2週間の期間（スプリント）ごとに、タスク単位で制作とレビューを繰り返す
  • 制作タスクの工数は、時間ではなく、ストーリーポイントで見積もる
  • 制作タスクの進捗を、チームメンバーが日々確認する場を設ける

より詳しく知りたい方は、以下の過去記事をご参照ください。
https://www.non-standardworld.co.jp/tech/15657/

Slack

業務中のコミュニケーションにはSlackを利用しています。
ノンスタではリモートワークが許容されており、近年は東京・福岡・その他の地域に住まうメンバーで協働してきたため、遠隔コミュニケーションが活発です。
Slackには各メンバーが分報チャンネルを持ち、取り組んでいるタスク・ちょっとした疑問・呟きなどを緩く投稿しています。仕事の進み具合や躓きが可視化されるので、アドバイスや相談を交わしやすくなっています。

※分報については下記note記事でわかりやすく解説されています:)
Slackで「分報」を導入したらめっちゃ作業効率があがった｜https://note.mu/reoleo/n/n102308f5b4e3

zoom

遠隔での対面コミュニケーションにはzoomというビデオツールを利用しています。
通信環境が安定しているため、日々の朝会はもちろん、一時間に及ぶようなミーティングでも切断などのストレスを感じることはほぼありません。
zoomの使用感と特徴については、以下の過去記事でも紹介しています。
https://www.non-standardworld.co.jp/tech/20989/

webデザイン

Adobe XD

webデザインツールにはAdobe XDを利用しています。
XDデザインスペックがデザイン指示書の役割を兼ねるため、デザイナー・エンジニアともに、スムーズに作業を進めることができます。
ノンスタでは画像素材の命名・書き出し・圧縮もエンジニアが担当します。画像の書き出しは、現状、デザインスペックではなくXDのデザインファイル上から行っています。
XDとコーディングの相性の良さについては以下の過去記事で紹介していますので、併せてご参照ください。
https://www.non-standardworld.co.jp/tech/20020/

開発

コーディング規約や手順をまとめたマニュアルを作成し、日々アップデートしています。
webサイト実装（WordPress案件含む）で利用している技術は、2018年11月現在、下記のとおりです。

  • HTML5
  • CSS3
  • Sass（compass）
  • JavaScript
  • jQuery
  • PHP
  • Ruby on Rails

基本対応ブラウザは、Chrome / firefox / safari / Edge 最新、及び IE11。スマホでは、iOS8以降のSafari最新、Android5.1以降のChrome最新に対応します。

※サポートに入っていただくのは、主にWordPress系の案件となります。Ruby on Rails系の案件をお願いする可能性は少ないです。

Codekit

フロント実装時のタスクランナーにはGUIツールのCodekitを利用し、コンパイル・圧縮・リアルタイムプレビューを行なっています。
設定ファイルはgitで共有しているため、作業に合流しやすい環境です。

Local by Flywheel

WordPress案件においては、HTMLカンプ作成後、PHPの知識を持つエンジニアがテーマファイルの作成・組み込みを担当します。
WordPressローカル環境構築にはLocal by Flywheelを利用し、メンバー間のローカル環境統一・共有を容易にしています。Local by flwheelについては、以下の過去記事で解説しています。
https://www.non-standardworld.co.jp/tech/20659/

DeployBot

制作したwebサイトのデプロイには、DeployBotを利用しています。
gitリポジトリと連携し、pushしたファイルを自動でデプロイしてくれる他、トラブル発生時のロールバックも簡単に行うことができます。
また、DeployBotと組み合わせやすいgitブランチ運用ルールとして、GitHub Flowを採用しています。その名のとおりGitHubが提唱したシンプルなワークフローで、本番環境としてのmasterブランチと機能ごとの開発ブランチで制作を行うことが特徴です。
詳細は以下の過去記事もご参照ください。
https://www.non-standardworld.co.jp/tech/20267/

Selenium IDE

制作したサイトのUIテストにはSelenium IDEを活用しています。
テストコードを書くことなく、ブラウザ上でテストの作成・編集・実行を行えるため、フォーム入力やリンク遷移のチェックなど、ルーチンで行うシンプルなテストはできるだけ自動化を試みています。
実際に使ってみたときの様子は、以下の過去記事から確認いただけます。
https://www.non-standardworld.co.jp/tech/20823/

おわりに

ノンスタの開発スタイルについて、イメージの参考となりましたでしょうか:)
ディレクションまで含めた一連の流れにつきましては、サービス案内ページやコーポレートサイト制作ページもご参照していただければと思います。

相性が良さそうだな、一緒に仕事をしたら心地好さそうだな、ともし感じられましたら、ぜひお気軽に、こちらの応募フォームからご連絡くださいませ。お待ちしています！

記事カテゴリー