WordBench奈良でお話した時の資料です。

1. WEBディレクターとして
WordPressを提案するときに考えること
+ 運用
合同会社 WIREFRAMES 松野尾 絢三

2. 自己紹介
名前 松野尾 絢三(マツノオ ジュンゾウ)
合同会社 ワイヤフレームズ 代表社員
NPO法人クリエイター育成協会 理事
Webディレクション,WordPress構築,フロントエンド構築
HTML5,Javascript,jQuery,PHP
Javascriptが大好きです。
facebook:: https://www.facebook.com/junzo.matunoo
twitter:: @oramuda
github:: wireframesjunzo

3. NPO法人クリエイター育成協会
から本を出版しました。
デザイナーのためのプロの制作術が身につく
Webディレクションの教科書
5年経っても、10年経っても、ずっと役立つ。サイト制作
の本質が自分のモノになる、至高のテキスト。もうクライ
アントとのやり取りに困らない、悩まない。ヒアリングか
らサイト構築、運営まで、ディレクションのテクニックが、
この1冊で身につく。

4. Web子の部屋
Schooにて水曜日夜20:00〜放送中！

5. 私たちの案件でWordPressを使ってサイトを作る割合
サイト制作案件の7割をWordPressで構築
今日は失敗談も交えてお伝えして行きます

6. 今日の話の前提
● ディレクションの上で制作時に確認しておきたいこと
をお話します
● WordPressのカスタマイズなどのテクニカルな話はあり
ません

7. 制作の流れ

8. 制作の流れ
案件によって案件によってプロセスはまちまちですが、大体こんな感じ。
1. ヒアリング(要望抽出)
2. ブレスト( 方向性検討 )
3. 見積もり・受注
4. 2回目ヒアリング(要件・仕様抽出)
5. 構造設計
6. 各階層ワイヤフレーム作成
7. コンテンツ制作
8. デザイン制作
9. 構築作業
10.先方確認
11.納品
12.運用

9. WordPress構築で(多分)重要な所

10. 制作の流れ
WordPressで構築する時にとても重要だと思う工程
1. ヒアリング(要望抽出)
2. ブレスト(方向性検討)
3. 見積もり・受注
4. 2回目ヒアリング(要件・仕様抽出)
5. 構造設計
6. 各階層ワイヤフレーム作成
7. コンテンツ制作
8. デザイン制作
9. 構築作業
10.先方確認
11.納品
12.運用

11. 制作の流れ
WordPressで構築する時にとても重要だと思う工程
1. ヒアリング(要望抽出)←ここから
2. ブレスト(方向性検討)
3. 見積もり・受注
4. 2回目ヒアリング(要件・仕様抽出)
5. 構造設計
6. 各階層ワイヤフレーム作成
7. コンテンツ制作
8. デザイン制作
9. 構築作業
10.先方確認
11.納品
12.運用

12. ヒアリング
ディレクションして行く上で最初にチェックするべき部分
1. 目的
2. コスト
3. コンテンツ
4. 更新頻度

13. ヒアリング
WordPressが(特に)関わってくるチェックするべき部分
1. 目的
2. コスト
3. コンテンツ
4. 更新頻度

14. コスト
金額・開発のスピード
独自CMS・自社開発 > WordPress(CMS) > システムなしの静的HP

15. コスト
金額・開発のスピード
独自CMS・自社開発 > WordPress(CMS) > システムなしの静的HP
ある程度のコストを想定する必要がある
規模によって変動する場合もある

16. コンテンツ
更新が必要になりそうなコンテンツ
● ブログ
● 製品紹介
● Q&A
● 会社概要
● プレスリリース

17. コンテンツ
コンテンツの代替え案や課題
● ブログ(アメブロなどの充実したブログサービス)
● 製品紹介(更新頻度によっては更新モデルが必要ない場合
も)
● Q&A(更新頻度によっては更新モデルが必要ない場合も)
● 会社概要(更新頻度によっては更新モデルが必要ない場合
も)
● プレスリリース(プレスリリースのサービスを利用)
必ずしも更新が必要だからといってWordPress(CMS)を入れる必要は無い

18. 更新頻度
● 更新が可能な人員がいるのか？
● 月にどれくらいの更新があるのか？
クライアントがどれだけ更新する頻度があるか。
更新するコストを負担できるか。

19. WordPress案件としてフィットする(と思う)案件
● 自社で更新できる人員（Web担）は確保できる。
● 担当者のリテラシーが低くブログを書くくらいなら大
丈夫な程度
● ブログだけじゃなくて製品やイベントなどの紹介ペー
ジが必要
● SNSとも連携させたい
● オウンドメディアなどの自社メディアサービス
● ある程度の予算は考えている
予算がなくても、その必要性があると感じたら、企画書でしっかり
と説明し、納得してもらえると予算を見直してくれるケースも..

20. 失敗談
● WordPressにとらわれすぎて、必要が無くてもごり押
ししてしまう
● 予算がなくても頑張るっていっちゃう

21. 制作の流れ
WordPressで構築する時にとても重要だと思う工程
1. ヒアリング(要望抽出)OK!
2. ブレスト(方向性検討)
3. 受注
4. 2回目ヒアリング(要件・仕様抽出)←次
5. 構造設計
6. 各階層ワイヤフレーム作成
7. コンテンツ制作
8. デザイン制作
9. 構築作業
10.先方確認
11.納品
12.運用

22. ２回目のヒアリング
WordPressで案件が決まり、２回目のヒアリング！
2回目のヒアリングでチェックするべき部分
1. サーバー情報
2. 機能面の仕様
3. コンテンツ内容
4. デザインの仕様

23. ２回目のヒアリング
WordPressが(特に)関わってくるチェックするべき部分
1. サーバー情報
2. 機能面の仕様
3. コンテンツ内容
4. デザインの仕様

24. サーバー情報
WordPressが使える環境を確認する
WordPressは何で動いている？
PHP・・サーバーで動いているプログラム(サーバーサイドプログラム)
MySQL・・データを入れておく入れ物(データベース)
当然ながらこの２つが使えるサーバーでないと使えません！

25. サーバー情報
以外とめんどくさい、PHPのバージョンとセーフモード
--知ってた？--
PHPのバージョン::
PHPのバージョンによっては最新のWordPressを導入できないので注意が必要
です！
ごく稀にPHP5.1等古いバージョンにしか対応していない場合もあります。
PHPのバージョンが低いと。。。
WordPressの最新バージョンがインストール出来ないケースもあります！
参照:WordPressサーバー要件
http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88:%E3%82%
B5%E3%83%BC%E3%83%90%E8%A6%81%E4%BB%B6#.E3.83.90.E3.83.BC.E3.82.B8.E3.83.A7.E3.83.B3_2.5.E3.80.
9C2.8_.E7.B3.BB

26. サーバー情報
以外とめんどくさい、PHPのバージョンとセーフモード
--知ってた？--
セーフモード::
また、PHPにはセーフモードというモードがあり、この状態だとWordPressが
正常に動作しません。
セーフモードだと。。
自動でファイルをアップロード出来ない
プラグインが動かない可能性がある etc...
参照::セーフモードによる制限と対処方法
http://wpdocs.sourceforge.jp/%E3%82%BB%E3%83%BC%E3%83%95%E3%83%A2%E3%83%BC%E3%83%89%E3%81%A
B%E3%82%88%E3%82%8B%E5%88%B6%E9%99%90%E3%81%A8%E5%AF%BE%E5%87%A6%E6%96%B9%E6%B3%95

27. サーバー情報
ホスティング会社の選定
新規サイト制作の場合は、サーバーのホスティング先の選定が必要
● ホスティングサーバーの種類
○ 共用レンタルサーバー
○ 専用レンタルサーバー
○ VPSサーバー
○ クラウドサーバー

28. サーバー情報
ホスティング会社の選定
新規サイト制作の場合は、サーバーのホスティング先の選定が必要
● WordPressの要件を満たしていること
➔ サーバーのプランによっては、データベースが使えない等の可能性があるので十分
確認する
● 自動インストール機能が備わっている
➔ WordPressインストールの工数を抑えることができる他に、重要なファイルのパー
ミッション設定なども自動で行ってくれるケースが多いので安全
● 想定しているアクセスに耐えられるか
➔ メディアサイトなど、いわゆる〇〇砲が想定されるケースに、そのアクセスに耐え
られるか

29. 失敗談
● PHPは使えたけどMySQL使えんかった。。
● ローカルでは最新バージョンで開発していていざ本番
にインストールしようとしたらバージョンの要件に満
たなかった。。
● ファイルアップロードできないんだけど？
● よし！AMIMOTOでAWSで簡単設置OK！あれ？メールサ
ーバーは？

30. 機能面の仕様
WordPressの良いところ
カスタム機能を使ってカスタマイズが出来る事!
カスタム機能の事を知りたい方は..
↓↓上村さんのこのスライドが勉強になります↓↓
WordPress初心者からの脱出! カスタムなんとかをちゃん
と理解する
http://www.slideshare.net/uemera/wordpress-
15862377

31. 機能面の仕様
抑えておきたいカスタマイズのこと
WordPressで構築するメリットは、機能面のカス
タマイズにありクライアントにフィットした更新
モデルを提案出来る点だと思ってます。
例えば不動産のサイトなら...
物件の管理をカスタム投稿タイプで管理するのか、カテゴ
リーで管理するのか。等

32. 機能面の仕様
抑えておきたいカスタマイズのこと
例えばカスタム投稿タイプを使えば...
項目のラベルを自由に変更出来るので、「投稿」という名
前では無く「賃貸マンション」「宅地分譲」などの名前で
管理する事が出来るようになります。

33. 機能面の仕様
抑えておきたいカスタマイズのこと
さらにカスタムフィールドを使って入力を項目化
さらにカスタムフィールドを使う事で、入力項目を用意し
そこに情報を入れてもらう事で簡単に更新することが出来
るようになります。
カスタムフィールドをもっと入力しやすくするプラグイン
も活用しましょう
例)
Custome Field Template
Types

34. 2回目のヒアリング
ディレクターとして把握しておきたいこと
● 納品するサーバーがちゃんとWordPressが動くサーバ
ーかを確認する
● カスタム投稿やカスタムフィールドを理解する
● コンテンツの内容やボリュームをしっかりと把握し、
更新に最適なプランを提案できるようにする

35. 失敗談
● 全部「投稿」で管理してしまってて、クライアントに
とっては使いづらい
● コンテンツのボリュームやグルーピングによって作成
するカスタム投稿などの項目を決められず、項目をみ
なおす必要があり、ほぼ再構築に。。

36. 大体のディレクションの流れ
WordPressで構築する時にとても重要だと思う工程
1. ヒアリング(要望抽出)OK!
2. ブレスト(方向性検討)
3. 見積もり・受注
4. 2回目ヒアリング(要件・仕様抽出)OK!
5. 構造設計←次
6. 各階層ワイヤフレーム作成
7. コンテンツ制作
8. デザイン制作
9. 構築作業
10.先方確認
11.納品

37. 構造設計(サイトマップ)

38. サイトマップの作成
サイトを構成するページの種類を理解する
・サイトトップページ
---サイトの一番トップにくるページ
・カテゴリー・コンテンツトップページ
---分類分けしたカテゴリーやコンテンツのトップページ(省略される場合もあり)
・カテゴリーアーカイブページ
---分類分けされた一つのカテゴリーの一覧ページ
・シングルページ
---分類分けされたコンテンツの個別ページ

39. サイトマップの作成
サイトを構成するページの種類を理解する
・サイトトップページ
(home.php)
---サイトの一番トップにくるページ
・カテゴリー・コンテンツトップページ
(page-〇〇.php)
---分類分けしたカテゴリーやコンテンツのトップページ(省略される場合もあり)
・カテゴリーアーカイブページ
(category-〇〇.php or taxonomy-〇〇.php)
---分類分けされた一つのカテゴリーの一覧ページ
・シングルページ
(single-〇〇.php)
---分類分けされたコンテンツの個別ページ
しっかりとサイトマップが構築できていると、WordPressで必要なテンプレー
トファイルが見えてくる！

40. サイトマップの作成
サイトマップからしっかりと情報を構造化
・サイトマップから、ページの階層関係(hierarchy)の構造
をしっかりと決めておく。
・サイトマップからふさわしいスラッグ名を決めておく

41. サイトマップの作成
サイトマップからしっかりと情報を構造化
・サイトマップから、ページの階層関係(hierarchy)の構造
をしっかりと決めておく。
・サイトマップからふさわしいスラッグ名を決めておく
静的なHTMLの作業で言う、ディレクトリマップをスラッ
グ名で作成して行く

42. 失敗談
● スラッグ名を適当に決めてしまい、後で変更しなきゃ
いけなくなってリンク先の再設定が必要になった
● 全く階層表現が無く関連性をもったurlにならない

43. 制作の流れ
WordPressで構築する時にとても重要だと思う工程
1. ヒアリング(要望抽出)OK!
2. ブレスト(方向性検討)
3. 見積もり・受注
4. 2回目ヒアリング(要件・仕様抽出)OK!
5. 構造設計OK!
6. 各階層ワイヤフレーム作成
7. コンテンツ制作
8. デザイン制作
9. 構築作業←次
10.先方確認
11.納品
12.運用

44. 構築作業
あとはプログラマーさんをひたすら応援！！！

45. 構築作業
あとはプログラマーさんをひたすら応援！！！
も大事ですが、

46. 構築作業
あとはプログラマーさんをひたすら応援！！！
も大事ですが、
クライアント向け管理画面のユーザビリティチェックをし
ましょう。

47. 構築作業
● 用意されている画面に不要な情報が無いか
例)WordPressの更新アラートとか、プラグインの設定とか。。。
● カスタムフィールドのプラグイン等で作成した入力項
目は入力しやすいのか

48. 構築作業
● 用意されている画面に不要な情報が無いか
例)WordPressの更新アラートとか、プラグインの設定とか。。。
● カスタムフィールドのプラグイン等で作成した入力項
目は入力しやすいのか
● とくにカスタムフィールドに関してはテーマのフロン
トエンドの作成前に確認しておきたい！
● ステージング環境でクライアントさんに入力項目を確
認してもらいましょう

49. 構築作業
とくにカスタムフィールドに関してはテーマのフロントエンドの作成
前に確認しておきたい！
なぜ？

50. 構築作業
とくにカスタムフィールドに関してはテーマのフロントエンドの作成
前に確認しておきたい！
なぜ？
あとから入力項目の変更などが入ると、テーマ制作作業に
の修正が入ることで作業が煩雑になる事があります。

51. 構築作業
とくにカスタムフィールドに関してはテーマのフロントエンドの作成
前に確認しておきたい！
なぜ？
あとから入力項目の変更などが入ると、テーマ制作作業に
の修正が入ることで作業が煩雑になる事があります。
プログラマーさんを応援するだけじゃなく、なるべく余計な修正を入れない
ようにすることも大事

52. 構築作業
ステージング環境でクライアントさんに入力項目を確認してもらいま
しょう
なぜ？その２

53. 構築作業
ステージング環境でクライアントさんに入力項目を確認してもらいま
しょう
なぜ？その２
クレームで一番つらいのが、

54. 構築作業
ステージング環境でクライアントさんに入力項目を確認してもらいま
しょう
なぜ？その２
クレームで一番つらいのが、
WordPressにしたけど、使いづらい
て言われる事

55. 構築作業
ステージング環境でクライアントさんに入力項目を確認してもらいま
しょう
なぜ？その２
クレームで一番つらいのが、WordPressにしたけど、使いづらいて言われる事
しっかりクライアントさんに確認してもらって早い段階で
問題を吸収しておくことでクレームのリスクや工数を減ら
せます。

56. 失敗談
● 構築が終ってしまった後に変更の要件がたんまり。ク
ライアントさんも見なきゃやっぱりわからない

57. その他のポイント
納品時
ステージング・テスト環境から運用環境への移行は、必ず移行手順を
まとめておきましょう。
リスクが高い作業
リスクを負う分の見積もりもしっかりと

58. 運用について
WordPressを保守する
システムには少なからず脆弱性が伴う

59. 運用について

60. 運用について
WordPressを保守する
万が一に備えた保守が必要
● データバックアップ
● バージョンアップ

61. 以上。

62. 最後に
WordPressに関わらず、Webサイトのディレク
ションにはいろんな工程が関わってきますので、
自分が出来なくても概要を理解する事でクライ
アントさんに最適なプランを提案できると思い
ます。
今日のこの話が皆様のディレクションのお役に
立てると幸いです。

63. 最後に
ご清聴ありがとうございました