Qranoko Workflow 2018

Writing and slide creation: Qrac / Counselor: Mainoko

クラのこ

夫婦で営むデザインユニット（独立1年目 / 東京）
個人〜大手のWeb制作・UI設計 / ライブラリ開発 / コミュニティ運営

クラク（夫）

デザイナー / フロントエンド寄り / 直感的＋楽観的

Twitter / GitHub

まいのこ（妻）

デザイナー / アートディレクター寄り / 論理的＋情熱的

Twitter / Twitter - lifestyle

Yaku Han JP

約物半角専用Webフォント

https://qrac.github.io/yakuhanjp/

MUSUBii

日本語サイト向けCSSフレームワーク

https://qrac.github.io/musubii/

Shitaji.CSS

Web制作用の下地リセットCSS

https://qrac.github.io/shitajicss/

MOFTONE

SCSS & Stylus 色変数パック

https://qrac.github.io/moftone/

RELEASED LIBRARY

新しいツール見つけてきたよ！

前のよりもっとすごいやつ！！

え！？また？うちって、

どれだけのツール使ってるの？

わからん

はい。

仕事の流れに沿ってツールを教えてよ。

それを他のクリエイターに共有すれば、

役立ててもらえるから。

問い合わせ対応
ドキュメント整理
見積もり作成
開発環境の構築
デザイン・コーディング
料金の請求・入金確認

仕事の流れ by クラのこ

こんなことろかな？

そうね

1. 問い合わせ対応

問い合わせフォームをNetlifyで設置

Netlifyは静的サイトをホスティングできる
静的サイトなのに問い合わせデータを収集できる
フォームのためにWordPressを作らなくていい
Google Formのように外部化しなくてよくなる

https://www.netlify.com/docs/form-handling/

フォームは無料プランでも使えるよ

問い合わせをSlack・メールに転送

収集したデータはSlackやメールに転送
チームのSlackで内容を確認しメイン担当を決定
正確なコーディングが重要な案件はクラクが中心
ディレクションが重要な案件はまいのこが中心

https://www.netlify.com/docs/webhooks/

普段見ているツールですぐ確認できるのが良い

Messenger・メールでやりとり

後のやりとりはMessengerかメールで行う
メールはSparkで処理すると散らからない
初回以外の打ち合わせはお断りする
時間を尊重しあえるクライアントを選ぶ

https://sparkmailapp.com/ja

処理・読了・返信したメールはすべてアーカイブする

2. ドキュメント整理

情報をesa・Simplenoteでまとめる

チームのesaにヒアリング内容を蓄積
速記用にSimplenoteも併用する
最近は原稿を用意してくれるクライアントが多い

https://esa.io/

https://simplenote.com/

Markdownを書きながらプレビューできて見やすい

企画書をGoogle Docs・XDで作成

ヒアリング内容から企画書をまとめる
Google Docsは同URLで更新ができるので楽
Adobe XDでワイヤーを作る場合もある

https://www.google.com/intl/ja_jp/slides/about/

https://www.adobe.com/jp/products/xd.html

GoogleのスライドはDriveの容量を食わない

3. 見積もり作成

詳細見積もりをGoogle Docsで作成

料金はGoogle Docs上であらかじめ決めてある
企画書と同時に詳細な仮見積もりを算出
内容変更により随時料金が変更となる旨を伝える
折り合わない仕事はお断りする

https://www.google.com/intl/ja_jp/sheets/about/

明確な料金設定でお互いに納得できる仕事をする！

スケジュールを細分化

全体スケジュールはGoogleカレンダーで把握
詳細見積もりの作業をいつやるか設定
作業の消化は詳細見積もりに書き込む
現実味のない仕事はお断りするか寝かせる

https://www.google.com/calendar

予定変更は常にあると考えて行動しよー

見積書をfreeeで作成

見積書はGoogle Docsを元にfreeeで作成
freeeは見積書を請求書に変更するのも簡単
スタンダード以上は複数人でデータを扱える
作成枚数の制限もない

https://www.freee.co.jp/

そのままfreeeからメールしたりPDF保存もできる

4. 開発環境の構築

GitHubプライベートリポジトリを作成

バックアップ・バージョン管理のため必須
クライアントによってはそのまま納品できる
ローカルファイルはGUIのSourceTreeで管理

https://github.co.jp/

https://ja.atlassian.com/software/sourcetree

GitHubは保存できる容量に制限がない

WordPressにはLocal by Flywheel

Local by Flywheelでローカル環境を構築
GUIが優秀で複数のWordPressを管理しやすい
レンサバ環境は管理が煩雑になるので作らない
テーマのみGitHubに上げるようにする

https://local.getflywheel.com/

編集したテーマをいちいちサーバーに上げなくていい！

開発環境の地ならし

エディタは後発で性能の高いVisual Studio Code
gulpでメタ言語・画像・アイコン等を処理
Nuxt・VuePressの場合は全体の型を設計
WordPressはテンプレ設計・プラグイン整備

https://code.visualstudio.com/

スターターとなるコードを用意しておくと楽

5. デザイン・コーディング

ビジュアルとコードを並行作業

メインビジュアルや画像をIllustratorで作成
素材はライセンスの明確なAdobe Stockで探す
同時にコーディングを進めてUIを構築

https://www.adobe.com/jp/products/illustrator.html

https://stock.adobe.com/jp/

イラストはiPad Proで描くことが多いなー

Netlifyでプレビュー共有

NetlifyはGitHubへのPushで自動ビルド可能
チームプランでアクセスコントロール
クライアントにデモURLとパスワードを共有
GitHubのmastar zipをGoogle Driveで納品

https://www.netlify.com/docs/visitor-access-control/

デモの修正もGitHubへのPushで済む

6. 料金の請求・入金確認

freeeで請求書発行

月末またはプロジェクト完結で請求書を発行
詳細見積もりの更新内容を反映
予定変更や追加があった案件は金額も変わる
請求書〜会計処理〜口座の入金確認までfreee

https://www.freee.co.jp/houjin/invoice/

初取引の入金には特に双方の確認も兼ねてお礼メールを出したりする

Finish!

　何故こんなスライドを作ったかと言うと、

知見を共有することで

クリエイター仲間の仕事がスムーズになる

キャパオーバー時に助け合いやすくなる

と考えているから。

2人で受けられる仕事量には限界がある...

クリエイターコミュニティも作りましたので、合わせてどうぞ。

https://community.qranoko.jp/

かも〜ん

困ったときは同業同士で助け合いましょう！

Thank You!

Writing and slide creation: Qrac / Counselor: Mainoko