Qranoko Workflow 2018
クラのこ
夫婦で営むデザインユニット（独立1年目 / 東京）
個人〜大手のWeb制作・UI設計 / ライブラリ開発 / コミュニティ運営
RELEASED LIBRARY
RELEASED LIBRARY
新しいツール見つけてきたよ！
前のよりもっとすごいやつ！！
え！？また？うちって、
どれだけのツール使ってるの？
わからん
はい。
仕事の流れに沿ってツールを教えてよ。
それを他のクリエイターに共有すれば、
役立ててもらえるから。
- 問い合わせ対応
- ドキュメント整理
- 見積もり作成
- 開発環境の構築
- デザイン・コーディング
- 料金の請求・入金確認
仕事の流れ by クラのこ
こんなことろかな？
そうね
1. 問い合わせ対応
問い合わせフォームをNetlifyで設置
- Netlifyは静的サイトをホスティングできる
- 静的サイトなのに問い合わせデータを収集できる
- フォームのためにWordPressを作らなくていい
- Google Formのように外部化しなくてよくなる
フォームは無料プランでも使えるよ
問い合わせをSlack・メールに転送
- 収集したデータはSlackやメールに転送
- チームのSlackで内容を確認しメイン担当を決定
- 正確なコーディングが重要な案件はクラクが中心
- ディレクションが重要な案件はまいのこが中心
普段見ているツールですぐ確認できるのが良い
Messenger・メールでやりとり
- 後のやりとりはMessengerかメールで行う
- メールはSparkで処理すると散らからない
- 初回以外の打ち合わせはお断りする
- 時間を尊重しあえるクライアントを選ぶ
処理・読了・返信したメールはすべてアーカイブする
2. ドキュメント整理
情報をesa・Simplenoteでまとめる
- チームのesaにヒアリング内容を蓄積
- 速記用にSimplenoteも併用する
- 最近は原稿を用意してくれるクライアントが多い
Markdownを書きながらプレビューできて見やすい
企画書をGoogle Docs・XDで作成
- ヒアリング内容から企画書をまとめる
- Google Docsは同URLで更新ができるので楽
- Adobe XDでワイヤーを作る場合もある
GoogleのスライドはDriveの容量を食わない
3. 見積もり作成
詳細見積もりをGoogle Docsで作成
- 料金はGoogle Docs上であらかじめ決めてある
- 企画書と同時に詳細な仮見積もりを算出
- 内容変更により随時料金が変更となる旨を伝える
- 折り合わない仕事はお断りする
明確な料金設定でお互いに納得できる仕事をする！
スケジュールを細分化
- 全体スケジュールはGoogleカレンダーで把握
- 詳細見積もりの作業をいつやるか設定
- 作業の消化は詳細見積もりに書き込む
- 現実味のない仕事はお断りするか寝かせる
予定変更は常にあると考えて行動しよー
見積書をfreeeで作成
- 見積書はGoogle Docsを元にfreeeで作成
- freeeは見積書を請求書に変更するのも簡単
- スタンダード以上は複数人でデータを扱える
- 作成枚数の制限もない
そのままfreeeからメールしたりPDF保存もできる
4. 開発環境の構築
GitHubプライベートリポジトリを作成
- バックアップ・バージョン管理のため必須
- クライアントによってはそのまま納品できる
- ローカルファイルはGUIのSourceTreeで管理
GitHubは保存できる容量に制限がない
WordPressにはLocal by Flywheel
- Local by Flywheelでローカル環境を構築
- GUIが優秀で複数のWordPressを管理しやすい
- レンサバ環境は管理が煩雑になるので作らない
- テーマのみGitHubに上げるようにする
編集したテーマをいちいちサーバーに上げなくていい！
開発環境の地ならし
- エディタは後発で性能の高いVisual Studio Code
- gulpでメタ言語・画像・アイコン等を処理
- Nuxt・VuePressの場合は全体の型を設計
- WordPressはテンプレ設計・プラグイン整備
スターターとなるコードを用意しておくと楽
5. デザイン・コーディング
ビジュアルとコードを並行作業
- メインビジュアルや画像をIllustratorで作成
- 素材はライセンスの明確なAdobe Stockで探す
- 同時にコーディングを進めてUIを構築
イラストはiPad Proで描くことが多いなー
Netlifyでプレビュー共有
- NetlifyはGitHubへのPushで自動ビルド可能
- チームプランでアクセスコントロール
- クライアントにデモURLとパスワードを共有
- GitHubのmastar zipをGoogle Driveで納品
デモの修正もGitHubへのPushで済む
6. 料金の請求・入金確認
freeeで請求書発行
- 月末またはプロジェクト完結で請求書を発行
- 詳細見積もりの更新内容を反映
- 予定変更や追加があった案件は金額も変わる
- 請求書〜会計処理〜口座の入金確認までfreee
初取引の入金には特に双方の確認も兼ねてお礼メールを出したりする
Finish!
何故こんなスライドを作ったかと言うと、
知見を共有することで
クリエイター仲間の仕事がスムーズになる
キャパオーバー時に助け合いやすくなる
と考えているから。
2人で受けられる仕事量には限界がある...
クリエイターコミュニティも作りましたので、合わせてどうぞ。
かも〜ん
困ったときは同業同士で助け合いましょう！
Thank You!