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

1. 早く 良い ものを作るための
WordPressサイト構築
ワークフロー
2011年11月27日 WordCamp Tokyo 2011
PLACES 堀内敬子（@horiuni）
k
er Trac
Design
PLACES
Inc.
/30
Takako
Horiuchi

2. 堀内 敬子 ほりうち たかこ
• 有限会社PLACES
代表取締役／デザイナー
• 3人だけの小さな会社
• サイト構築、iPhoneアプリ開発
PLACES
Inc.
Takako
Horiuchi 2 /30

3. 13刷
PLACES
Inc.
Takako
Horiuchi 3 /30

4. 早く作るというのは、
単純に早く売れば早く利益が出
るだろうということではなく、
クライアントと制作者
共通の願い UX 早く利用者にフィードバックを
もらってUXを改善していけると
いうこと
早く・良いものを作る
期待してたプラグインがうまく動 このセッションでは、そんな中
から、「早く・良いものを作
かないとか、サーバが思ったより
非力だったとか、チーム内のコ わな る」ことを阻害している大きな
ミュニケーションがうまくいかな 「はまりどころ」と「その対
いとか、マルチサイトは素敵だけ 策」として行っていることなど
ど罠がいろいろあるとか、カスタ をご紹介
ム投稿タイプのURLを組み立てる
のが難しいとか。大小さまざま
に、きりがないほど、たくさんの
PLACES
Inc.
はまりどころがあります
Takako
Horiuchi 4 /30

5. 構築ワークフロー
企画 設計 開発 検証 公開
企画・マーケ CMS選定 デザイン 検証 サーバ移行
体制作り サーバ選定 HTML マニュアル DNS変更
設計 CMS実装 トレーニング
PLACES
Inc.
Takako
Horiuchi 5 /30

6. はまりどころ
企画 設計 開発 検証 公開
チーム コミュニケーション ギリギリの
仕様変更
チームメンバーの選定。 プロジェクト失敗の大き
誰と仕事をするのか な要因は、コミュニケー いきなり来るやつです
ション、人間関係
PLACES
Inc.
Takako
Horiuchi 6 /30

7. ギリギリの仕様変更
PLACES
Inc.
Takako
Horiuchi 7 /30

8. 「思ってたのと違う」
• パターン1：
制作者は気付いていた！
おかしいと思うことは
後で必ず問題となる
おかしいと思ったときに素直に言って
仕様変更をしたほうが結果的には早く
完成する。いそがばまわれ
PLACES
Inc.
Takako
Horiuchi 8 /30

9. 当日のセッションでは、その失敗事例
と、行った対策をご紹介しましたが、
公開用スライドでは削除させていただ
きました。ご了承くださいませ
PLACES
Inc. 9 /30
Takako
Horiuchi

10. 「思ってたのと違う」
• パターン2：
根本的な認識が違っていた！
本当の問題をみつける
PLACES
Inc.
Takako
Horiuchi 10/30

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. Lean UX
本当の問題を解決することに集中しよう
6. Focus on solving the right problem
それが無いと 明日リリース
サイトが成立しない するなら
ものは？ どこを作る？
PLACES
Inc.
Takako
Horiuchi 12/30

13. Lonely Guy - シリアスプレイとは？
http://www.seriousplay.jp/seriousplay2.html
本当の問題を見つけるのは、
PLACES
Inc.
難しいだけでなく、勇気が必要
Takako
Horiuchi 13/30

14. 制作チームの体制
PLACES
Inc.
Takako
Horiuchi 14/30

15. 今までの経験から、
最強のチーム
私が考える
HTML
プログラマ コーダー
デザイナ
一番重要なのは、3人全員が、
・人数は3人 WordPressでサイト構築経験があること。
・専門スキルがある 3人いて、それぞれがWordPressを
・それぞれが職域を超える ある程度知っていると、変な仕様にはどこ
からともなくツッコミが来るし、コーダー
・ディレクタは誰かが兼任する もWordPressが吐き出すコードをもとに
コーディングしてくれるし、プログラマも集
中できるので、パフォーマンスやちょっと
した使い勝手など、後回しにされがちな部
PLACES
Inc. 分にも気を配って作ってくれる
Takako
Horiuchi 15/30

16. コミュニケーション
PLACES
Inc.
Takako
Horiuchi 16/30

17. コミュニケーション
• 関係者間のさまざまなやりとり
• もっとも時間がかかるもの
ツールを活用して
オープンに
PLACES
Inc.
Takako
Horiuchi 17/30

18. あいさつが必要ない
アイコン・絵文字で雰囲気が柔らかく
気軽に書ける
制作チームだけでなく、クライアントさんにも登録 プロジェクト管理ツール「Backlog」
してもらって、メールはナシで、ほぼすべて http://www.backlog.jp/
プロジェクト管理ツール上でコミュニケーションし
PLACES
Inc.
ています。
Takako
Horiuchi 18/30

19. 説明がかんたん
使ってて楽しい
Cacooもクライアントさんにアカウントを
作ってもらって共有することが多いです。 Web上で図の作成ができる「Cacoo」
https://cacoo.com/
サイトマップやワイヤフレーム、WordPressでの
開発に必要な画面仕様もこまかーーく書き込んだり
PLACES
Inc.
します Horiuchi
Takako
19/30

20. 管理表、コンテンツ仕様書、
マニュアル、議事録などに
GoogleDocs
https://docs.google.com/
PLACES
Inc.
Takako
Horiuchi 20/30

21. プロトタイプ
WordPressで作ったサイトを、プロトタイピング
ツールとして利用。
ごく小規模でベーシックなサイトの場合は、
クライアントさんと打ち合わせしながら、ざっと内
容を打ち込んで一緒に動きや内容を確認します。
WordPress
PLACES
Inc.
Takako
Horiuchi 21/30

22. One more thing...
ワークフローにおいて、忘れがち、
後回しになりがち、しかしとても
重要なことがあるのです
PLACES
Inc.
Takako
Horiuchi 22/30

23. 管理画面！
良いWebサイトを考えたとき、「更新され続けて
いるもの」というのは、必須に近い事項。
そして更新の際には、管理画面の使い勝手はとても
とても大切です
PLACES
Inc.
Takako
Horiuchi 23/30

24. 管理画面は設計されない
企画 設計 開発 検証 公開
企画・マーケ CMS選定 デザイン 検証 サーバ移行
体制作り サーバ選定 HTML マニュアル DNS変更
設計 CMS実装 トレーニング
プログラマ クライアント
PLACES
Inc.
Takako
Horiuchi 24/30

25. カスタム投稿タイプで、
「投稿」とかではない、 入力画面も専用に作っているので、
わかりやすいメニュー わかりやすい
名前は大きく、 画像サイズは、自動で縮小されま
ふりがなは小さく すが、小さい画像や比率が違うも
（閲覧画面に合わ のだと困るので、サイズを記載して
せてあるので更新 間違いがないよう。
者にわかりやす マニュアルもみないで済む
い）
一定の固まり
ごとに、わか
りやすい見出
しつけて
区切ってある
英数字で入力する部分なので、 25
PLACES
Inc.
入力欄を大きくわかりやすく /30
Takako
Horiuchi

26. 通常は「タイトルを入力してください」と
なっている部分
1個しか選んでほしく
ない分類は、ちゃんと
ラジオボタン
整然として押しやすい
チェックボックス
PLACES
Inc.
Takako
Horiuchi 26/30

27. ログインユーザーによって、
自動でプルダウンの中身が変わるよ
うになっているので、設定らくらく
わかりにくい部分は、
管理画面内に説明を記
述すると、いちいちマ
ニュアルを参照しない
ですむ
PLACES
Inc.
Takako
Horiuchi 27/30

28. 画像がキーになるサイト
なので、一覧画面に画像
を出し、わかりやすく
このような管理画面の工夫は、
誰かが指示したものではなく、
プログラマが自ら考えて工夫した
PLACES
Inc. もの
/30
Takako
Horiuchi

29. まとめ
● ギリギリの仕様変更：
・おかしいと思うことは、後で必ず問題となるので、先に言う
・本当の問題をみつけるのが大切
● チーム：
・WordPressでサイト構築したことある、専門スキルを持つメンバー3人体制
● コミュニケーション：
・ツールを活用し、クライアントを交えオープンに
● 管理画面：
・気を配ると格段に使いやすい管理画面ができる
・管理画面は変更できることをまず知る
PLACES
Inc.
Takako
Horiuchi 29/30

30. ありがとうございました！
takako.horiuchi@gmail.com
@horiuni
PLACES
Inc.
Takako
Horiuchi 30/30