早く・良いものを作るための、WordPressサイト構築ワークフロー

9,635 views

Published on

WordCamp Tokyo 2011
2011年11月27日開催
http://2011.tokyo.wordcamp.org/

早く・良いものを作るための、WordPressサイト構築ワークフロー

  1. 1. 早く 良い ものを作るための WordPressサイト構築 ワークフロー 2011年11月27日 WordCamp Tokyo 2011 PLACES 堀内敬子(@horiuni) k er Trac DesignPLACES  Inc. /30Takako  Horiuchi
  2. 2. 堀内 敬子 ほりうち たかこ • 有限会社PLACES 代表取締役/デザイナー • 3人だけの小さな会社 • サイト構築、iPhoneアプリ開発PLACES  Inc.Takako  Horiuchi 2 /30
  3. 3. 13刷PLACES  Inc.Takako  Horiuchi 3 /30
  4. 4. 早く作るというのは、 単純に早く売れば早く利益が出 るだろうということではなく、 クライアントと制作者 共通の願い UX 早く利用者にフィードバックを もらってUXを改善していけると いうこと 早く・良いものを作る期待してたプラグインがうまく動 このセッションでは、そんな中 から、「早く・良いものを作かないとか、サーバが思ったより非力だったとか、チーム内のコ わな る」ことを阻害している大きなミュニケーションがうまくいかな 「はまりどころ」と「その対いとか、マルチサイトは素敵だけ 策」として行っていることなどど罠がいろいろあるとか、カスタ をご紹介ム投稿タイプのURLを組み立てるのが難しいとか。大小さまざまに、きりがないほど、たくさんのPLACES  Inc.はまりどころがありますTakako  Horiuchi 4 /30
  5. 5. 構築ワークフロー 企画 設計 開発 検証 公開企画・マーケ CMS選定 デザイン 検証 サーバ移行 体制作り サーバ選定 HTML マニュアル DNS変更 設計 CMS実装 トレーニングPLACES  Inc.Takako  Horiuchi 5 /30
  6. 6. はまりどころ 企画 設計 開発 検証 公開 チーム コミュニケーション ギリギリの 仕様変更チームメンバーの選定。 プロジェクト失敗の大き誰と仕事をするのか な要因は、コミュニケー いきなり来るやつです ション、人間関係 PLACES  Inc. Takako  Horiuchi 6 /30
  7. 7. ギリギリの仕様変更PLACES  Inc.Takako  Horiuchi 7 /30
  8. 8. 「思ってたのと違う」 • パターン1: 制作者は気付いていた! おかしいと思うことは 後で必ず問題となる おかしいと思ったときに素直に言って 仕様変更をしたほうが結果的には早く 完成する。いそがばまわれPLACES  Inc.Takako  Horiuchi 8 /30
  9. 9. 当日のセッションでは、その失敗事例 と、行った対策をご紹介しましたが、 公開用スライドでは削除させていただ きました。ご了承くださいませPLACES  Inc. 9 /30Takako  Horiuchi
  10. 10. 「思ってたのと違う」 • パターン2: 根本的な認識が違っていた! 本当の問題をみつけるPLACES  Inc.Takako  Horiuchi 10/30
  11. 11. 本当の問題を見つけるのは、 大変難しいことですが、最近注目 されているLean UXの考え方が 助けになるかもしれません Lean UX The 9 Principles of Lean User Experience http://luxr.co/lean-ux/9-principles-for-lean-ux/PLACES  Inc.Takako  Horiuchi 11/30
  12. 12. Lean UX 本当の問題を解決することに集中しよう 6. Focus on solving the right problem それが無いと 明日リリース サイトが成立しない するなら ものは? どこを作る?PLACES  Inc.Takako  Horiuchi 12/30
  13. 13. Lonely Guy - シリアスプレイとは? http://www.seriousplay.jp/seriousplay2.html本当の問題を見つけるのは、PLACES  Inc.難しいだけでなく、勇気が必要Takako  Horiuchi 13/30
  14. 14. 制作チームの体制PLACES  Inc.Takako  Horiuchi 14/30
  15. 15. 今までの経験から、 最強のチーム私が考える HTML プログラマ コーダー デザイナ 一番重要なのは、3人全員が、・人数は3人 WordPressでサイト構築経験があること。・専門スキルがある 3人いて、それぞれがWordPressを・それぞれが職域を超える ある程度知っていると、変な仕様にはどこ からともなくツッコミが来るし、コーダー・ディレクタは誰かが兼任する もWordPressが吐き出すコードをもとに コーディングしてくれるし、プログラマも集 中できるので、パフォーマンスやちょっと した使い勝手など、後回しにされがちな部PLACES  Inc. 分にも気を配って作ってくれるTakako  Horiuchi 15/30
  16. 16. コミュニケーションPLACES  Inc.Takako  Horiuchi 16/30
  17. 17. コミュニケーション • 関係者間のさまざまなやりとり • もっとも時間がかかるもの ツールを活用して オープンにPLACES  Inc.Takako  Horiuchi 17/30
  18. 18. あいさつが必要ない アイコン・絵文字で雰囲気が柔らかく 気軽に書ける制作チームだけでなく、クライアントさんにも登録 プロジェクト管理ツール「Backlog」してもらって、メールはナシで、ほぼすべて http://www.backlog.jp/プロジェクト管理ツール上でコミュニケーションし PLACES  Inc.ています。Takako  Horiuchi 18/30
  19. 19. 説明がかんたん 使ってて楽しいCacooもクライアントさんにアカウントを作ってもらって共有することが多いです。 Web上で図の作成ができる「Cacoo」 https://cacoo.com/サイトマップやワイヤフレーム、WordPressでの開発に必要な画面仕様もこまかーーく書き込んだり PLACES  Inc.します Horiuchi Takako   19/30
  20. 20. 管理表、コンテンツ仕様書、 マニュアル、議事録などに GoogleDocs https://docs.google.com/PLACES  Inc.Takako  Horiuchi 20/30
  21. 21. プロトタイプ WordPressで作ったサイトを、プロトタイピング ツールとして利用。 ごく小規模でベーシックなサイトの場合は、 クライアントさんと打ち合わせしながら、ざっと内 容を打ち込んで一緒に動きや内容を確認します。 WordPressPLACES  Inc.Takako  Horiuchi 21/30
  22. 22. One more thing... ワークフローにおいて、忘れがち、 後回しになりがち、しかしとても 重要なことがあるのですPLACES  Inc.Takako  Horiuchi 22/30
  23. 23. 管理画面! 良いWebサイトを考えたとき、「更新され続けて いるもの」というのは、必須に近い事項。 そして更新の際には、管理画面の使い勝手はとても とても大切ですPLACES  Inc.Takako  Horiuchi 23/30
  24. 24. 管理画面は設計されない 企画 設計 開発 検証 公開企画・マーケ CMS選定 デザイン 検証 サーバ移行 体制作り サーバ選定 HTML マニュアル DNS変更 設計 CMS実装 トレーニング プログラマ クライアントPLACES  Inc.Takako  Horiuchi 24/30
  25. 25. カスタム投稿タイプで、 「投稿」とかではない、 入力画面も専用に作っているので、 わかりやすいメニュー わかりやすい名前は大きく、 画像サイズは、自動で縮小されまふりがなは小さく すが、小さい画像や比率が違うも(閲覧画面に合わ のだと困るので、サイズを記載してせてあるので更新 間違いがないよう。者にわかりやす マニュアルもみないで済むい)一定の固まりごとに、わかりやすい見出しつけて区切ってある 英数字で入力する部分なので、 25 PLACES  Inc. 入力欄を大きくわかりやすく /30 Takako  Horiuchi
  26. 26. 通常は「タイトルを入力してください」と なっている部分 1個しか選んでほしく ない分類は、ちゃんと ラジオボタン 整然として押しやすい チェックボックスPLACES  Inc.Takako  Horiuchi 26/30
  27. 27. ログインユーザーによって、 自動でプルダウンの中身が変わるよ うになっているので、設定らくらく わかりにくい部分は、 管理画面内に説明を記 述すると、いちいちマ ニュアルを参照しない ですむPLACES  Inc.Takako  Horiuchi 27/30
  28. 28. 画像がキーになるサイト なので、一覧画面に画像 を出し、わかりやすく このような管理画面の工夫は、 誰かが指示したものではなく、 プログラマが自ら考えて工夫したPLACES  Inc. もの /30Takako  Horiuchi
  29. 29. まとめ ● ギリギリの仕様変更: ・おかしいと思うことは、後で必ず問題となるので、先に言う ・本当の問題をみつけるのが大切 ● チーム: ・WordPressでサイト構築したことある、専門スキルを持つメンバー3人体制 ● コミュニケーション: ・ツールを活用し、クライアントを交えオープンに ● 管理画面: ・気を配ると格段に使いやすい管理画面ができる ・管理画面は変更できることをまず知るPLACES  Inc.Takako  Horiuchi 29/30
  30. 30. ありがとうございました! takako.horiuchi@gmail.com @horiuniPLACES  Inc.Takako  Horiuchi 30/30

×