この投稿は僕が以前経営していたTHE CLIPという会社の記事のアーカイブです。

THE CLIPのケント（@kentymmt）です。弊社では自社/受託共に、Webサービス、iOSアプリ、Androidアプリなどの開発を行っています。弊社のコアメンバーはデザイナーの僕とエンジニアのイシバシですので、今回はこの体制でWebサービス（PC/スマートフォン）を開発する際にどのような役割分担やフローで動いているのかを紹介したいと思います。
使う技術はRails, GitHub, AWSなどです。開発スピード重視！

キックオフミーティング〜ベース作成

基本的な仕様とスケジュールが決まったらほなやりましょかという事でプロジェクトはスタートします。エンジニアはRailsプロジェクトを作ったりインフラ構築やデータベースの設計を始め、デザイナーは必要に応じて紙のワイヤーフレームなどを書いたり、カラースキームを決めたりしていきます。（ワイヤーフレームは基本仕様を確認するためのもので、ごくごく単純なものが多いです。）

Railsプロジェクト出来た

Railsプロジェクトが立ち上がったら、git cloneしてきてデザイナーもローカルで動かせるようにします。サービスの性質にもよりますが、全画面をPhotoshopなどのソフトで詳細に作り込んだりせずに、作るとしても主要な画面2,3つで、あとはHTML/CSSを書きながら進めて行きます。mixinやform、alert系などを含めた主要なUIコンポーネントを作りながら、表側のデザインを作っていきます。

Railsで自由にHTML/CSS/JSを書きたいんだけど？

$ rails g controller designs

designs_controller.rbに

class DesignsController < ApplicationController
　def index
　　render "#{params[:path]}.html"
　end
end

config/routes.rbに

Rails.application.routes.draw do
　unless Rails.env == :production
　　get '/designs/:path' => 'designs#index'
　end
end

これでapp/views/designs/ 以下に hoge.htmlを作ると localhost:3000/design/hoge でアクセス出来る上に layout/application.html 読み込んでくれるのでとても便利です。後々エンジニアが本番のviewに組み込む時にも大幅に工数を削減する事が出来ます。

本番viewへの組み込み

デザイナーがトップや検索結果等、表の主要画面を完成させたらエンジニアが本番viewへの組み込み、その間にデザイナーが管理画面など作成、出来たらエンジニアが本番viewへの組み込み、その間にデザイナーは表の主要画面のスマホ用デザインを作成、出来たらエンジニアが本番viewへの組み込み、その間デザイナーは上がってきた修正を、、というサイクルでスクラム的に開発していきます。タスクはgithub issueを使い、pull requestベースで開発して行きます。

デザイナーだけど黒い画面とかしらないんだが？

Railsの起動や操作でどうしても黒い画面を使わなくてはいけない場合がありますが、分からない事はどんどんエンジニアに聞きましょう！そしてエンジニアは優しく教えてあげましょう！お互いに歩み寄るのが楽しい開発のコツですね。とはいえデザイナー的にはGUI使って楽したい欲があるのでGitに関しては僕はTowerというソフトを使って操作しています。ちょっと高いけどとっても使いやすいです！

ある程度出来てきた

/designs/から本番viewへの移行が終わった後も変更や修正点は必ず出てきます。ここからはデザイナーもviewをガンガン触っていきます。eRubyをなんとなーくでも覚えると捗ります。

デザイナーだけどHamlとがCoffeeScriptとか言われても書けないんだが？

弊社ではHamlではなくHTMLを使う事が多いですが、これはある程度覚えましょうという事になります。僕もCoffeeScriptはあまり書けず、jQueryなら、という感じなので、雑でもjQueryで書いて「こういうことしたいんす！」とエンジニアに言って書き直してもらったりしています。臨機応変に行こう！あれ、Sass/SCSSは、、、もうマストな技術ですね！

出来た

デザイナーはブラウザチェックをしたり、エンジニアは負荷テストをしたり、開発も大詰めです。問題がなければ完成です。出来たと言ってもサービスはリリースしてからが始まりですね！リリース後の開発サイクルも同じような形でやっています。ともあれ、お疲れさまでした！打ち上げだ！

まとめ

Webサービスはプロトタイピングしながら動きを検証していく事も重要であり、そもそもエンジニアは絶対的な作業量がデザイナーよりも多くなる場合が多いです。そういった点でデザイナーがマークアップをしGitなどを操る事は初期開発だけでなくリリース後の追加開発、仮説検証やバグ修正等の開発力に大きく貢献します。このような感じで今回はデザイナー1人、エンジニア1人という最小メンバーでの開発フローの一例を紹介しました！