Web制作会社内のワークフローを改善しよう

2,908 views

Published on

2013年5月14日にWeb制作会社さんで行ったワークフロー改善提案&勉強会の資料です。

Published in: Design

Web制作会社内のワークフローを改善しよう

  1. 1. 社内のワークフロー改善しよう2013/05/14 よつばデザイン 後藤賢司1
  2. 2. 2013/05/14目標社内で情報共有を徹底して分業可能にする無駄な作業を減らして効率化作った人に依存しない素材をみんなで共有最新の制作方法を取り入れる2
  3. 3. 2013/05/14他の人が今何やってるかわかります?3
  4. 4. 2013/05/14見通しの良い社内環境作りましょう4
  5. 5. 2013/05/14社内で情報共有する。ヒアリングシートからデザイン、提案、修正、公開、更新などの情報をみんなで共有。不在の場合でも誰が何をやっているか、何をやるつもりなのかを確認できる環境作り。プロジェクト毎に確認できるツールを使う。5
  6. 6. 2013/05/14社内ルールの策定オレオレルールの廃止責任者を作る。営業、制作(制作環境)、進行( 修正・更新)6
  7. 7. 2013/05/14営業ルール営業方法、訪問頻度やフォローの方法など、ルールを決める。7
  8. 8. 2013/05/14制作ルール制作進行ルール、どのような手順でどのような方法で進めていくのかのルール統一。8
  9. 9. 2013/05/14進行ルール修正・更新対応は、対応リストなどを作り社内に可視化する。対応はチーム毎に割り振る。対応状況は全てのメンバーが常に確認できるようにする(重要)9
  10. 10. 2013/05/14チーム制導入3人ひと組でチームを作る。細かい進行状況や対応状況などはチームで全て把握する。チーム長同士の報告会は毎日行う。※場合に応じて応援できるような体制。10
  11. 11. 2013/05/14ファイルの共有素材などは一括で参照できる共有フォルダに入れる。写真素材、アイコン素材等をまとめておくと素材集のDVD-ROMをその都度開いて選んで…という流れを省略できる。11
  12. 12. 2013/05/14画像もジャンルに分けるその都度多数のファイルを参照するのは時間がかかるので、用途別に素材をまとめる。メインイメージに使えそうなもの。部分的なカットとして使えそうなもの。背景に使えそうなもの等。12
  13. 13. 2013/05/14装飾された見出しや罫線・表などをまとめる既に作成済みの装飾された見出しや罫線・表組みなどをまとめておく。アレンジして使える。一から作るよりも早いし、アイデア出しにも役立つ。13
  14. 14. 2013/05/14文章の共有業界特化によって、説明文などは似てくる事が多いのを逆に利用する。「この項目にはこういう文章を使った」の一覧を作る。ゼロから考えるより、より早く出来る。自分だけのものにとどめておかない。14
  15. 15. 2013/05/14表組みも同じデータとして使えるようなものは色や処理を変更するだけで他で使えるようにする。元があるとアレンジもやりやすい。15
  16. 16. 2013/05/14制作環境の統一使用ソフトの統一制作ルールを決めるHTMLやCSSの記述の統一ディレクトリやファイル名などの表記統一16
  17. 17. 2013/05/14Web制作環境は激変の時代ですDreamweaverとFireworksでhtmlやcssや画像を用意する環境が変わりつつあります。17
  18. 18. 2013/05/14もっと効率的にやる事が必要SassやLessなどのCSS拡張メタ言語の導入。18
  19. 19. 2013/05/14効率的なcss記述・管理19
  20. 20. 2013/05/14Sass環境構築おすすめアプリ20
  21. 21. 2013/05/14Sublimetext21
  22. 22. 2013/05/14Sublimetextをカスタマイズ自分で拡張していくアプリ。パッケージインストール準備http://mnemoniqs.com/web/sublimetext2/おすすめパッケージcss hayaku はとっても良い!https://gist.github.com/gaspanik/404893422
  23. 23. 2013/05/14Codekit23
  24. 24. 2013/05/14Codekit設定cssのコンパイルをしてくれる。画像の軽量化も出来る。config.rbで設定する。http://yotsuba-d.com/blog/post-3964/http://blog.webcreativepark.net/2012/12/12-113724.html24
  25. 25. 2013/05/14制作ルールhtmlや画像の名付け方、ディレクトリ構成など統一する。誰が作っても同じというのが重要。25
  26. 26. 2013/05/14cssフレームワークを導入共通のcssを使う事で、見通しの良いコードに。独自ルールを無くす事でリニューアルや修正などが容易になる。26
  27. 27. 2013/05/14Twitter Bootstrap27
  28. 28. 2013/05/14Foundation28
  29. 29. 2013/05/14グリッドシステム毎回新規でパーツ毎にスタイルを指定せず、グリッドシステムを使う。29
  30. 30. 2013/05/14パーツも共通化させる30
  31. 31. 2013/05/14見通しの良いcssの記述へ複数のclassで表現する31<a href="#" class="large button radius">Large Button</a>大きいサイズ ボタン 角丸.large {padding:1em 2em;}.button {background-color:#f00;color:#fff;}.radius {border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;}
  32. 32. 2013/05/14スタイルガイドの策定サイト毎にスタイルガイドを用意するサイトの設計情報(フォーマット)を参照できる書類で第三者でも理解しやすいように見出しやアクセントなど一覧で確認できるシートを用意32
  33. 33. 2013/05/14スタイルガイド第三者がみてもすぐわかるように。33
  34. 34. 2013/05/1434
  35. 35. 2013/05/14常に技術を習得しましょう自動化やテンプレート化などの技術がどんどん出てきています。Web制作者も自分の力で全てを作る時代ではなくなりつつあります。便利なものを便利に利用するには情報収集が不可欠です。35
  36. 36. 2013/05/14https://www.facebook.com/groups/241838242545737/36
  37. 37. 2013/05/14社内勉強会今日学んだ事が来年通じるとは限りません。新しく習得した技術等を共有しあって制作環境を改善していきましょう。37

×