WEB ディレクターとしてWordPress を提案するときに考えること+ 運用

合同会社 WIREFRAMES 松野尾 絢三

自己紹介名前 松野尾　絢三 ( マツノオ ジュンゾウ )

合同会社 ワイヤフレームズ 代表社員NPO 法人クリエイター育成協会 理事Web ディレクション ,WordPress 構築 , フロントエンド構築HTML5,Javascript,jQuery,PHP

Javascript が大好きです。

facebook:: https://www.facebook.com/junzo.matunootwitter:: @oramudagithub:: wireframesjunzo

NPO 法人クリエイター育成協会から本を出版しました。

デザイナーのためのプロの制作術が身につく Web ディレクションの教科書

5 年経っても、 10 年経っても、ずっと役立つ。サイト制作の本質が自分のモノになる、至高のテキスト。もうクライアントとのやり取りに困らない、悩まない。ヒアリングからサイト構築、運営まで、ディレクションのテクニックが、この 1 冊で身につく。

Web 子の部屋

Schoo にて水曜日夜 20:00 〜放送中！

私たちの案件で WordPress を使ってサイトを作る割合

サイト制作案件の 7 割を WordPress で構築今日は失敗談も交えてお伝えして行きます

今日の話の前提

● ディレクションの上で制作時に確認しておきたいことをお話します

● WordPress のカスタマイズなどのテクニカルな話はありません

制作の流れ

制作の流れ

案件によって案件によってプロセスはまちまちですが、大体こんな感じ。

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

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

制作の流れ

WordPressで構築する時にとても重要だと思う工程

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

制作の流れ

WordPressで構築する時にとても重要だと思う工程

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

ヒアリング

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

ヒアリング

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

コスト

金額・開発のスピード

独自 CMS ・自社開発 > WordPress(CMS) > システムなしの静的 HP

コスト

金額・開発のスピード

独自 CMS ・自社開発 > WordPress(CMS) > システムなしの静的 HP

ある程度のコストを想定する必要がある規模によって変動する場合もある

コンテンツ

更新が必要になりそうなコンテンツ

● ブログ● 製品紹介● Q&A● 会社概要● プレスリリース

コンテンツ

コンテンツの代替え案や課題

● ブログ ( アメブロなどの充実したブログサービス )● 製品紹介 ( 更新頻度によっては更新モデルが必要ない場合

も )● Q&A( 更新頻度によっては更新モデルが必要ない場合も )● 会社概要 ( 更新頻度によっては更新モデルが必要ない場合

も )● プレスリリース ( プレスリリースのサービスを利用 )

必ずしも更新が必要だからといって WordPress(CMS) を入れる必要は無い

更新頻度

● 更新が可能な人員がいるのか？● 月にどれくらいの更新があるのか？

クライアントがどれだけ更新する頻度があるか。更新するコストを負担できるか。

WordPress 案件としてフィットする ( と思う ) 案件

● 自社で更新できる人員（Web担）は確保できる。● 担当者のリテラシーが低くブログを書くくらいなら大丈夫な程度

● ブログだけじゃなくて製品やイベントなどの紹介ページが必要

● SNS とも連携させたい● オウンドメディアなどの自社メディアサービス● ある程度の予算は考えている

予算がなくても、その必要性があると感じたら、企画書でしっかりと説明し、納得してもらえると予算を見直してくれるケースも ..

失敗談

● WordPress にとらわれすぎて、必要が無くてもごり押ししてしまう

● 予算がなくても頑張るっていっちゃう

制作の流れ

WordPressで構築する時にとても重要だと思う工程

1. ヒアリング ( 要望抽出 )OK!2. ブレスト ( 方向性検討 )3. 受注4. 2 回目ヒアリング ( 要件・仕様抽出 )←次5. 構造設計6. 各階層ワイヤフレーム作成7. コンテンツ制作8. デザイン制作9. 構築作業10.先方確認11. 納品12.運用

２回目のヒアリング

WordPress で案件が決まり、２回目のヒアリング！2 回目のヒアリングでチェックするべき部分

1. サーバー情報2.機能面の仕様3. コンテンツ内容4. デザインの仕様

２回目のヒアリング

WordPress が ( 特に ) 関わってくるチェックするべき部分

1. サーバー情報2.機能面の仕様3. コンテンツ内容4. デザインの仕様

サーバー情報

WordPress が使える環境を確認する

WordPress は何で動いている？

PHP ・・サーバーで動いているプログラム ( サーバーサイドプログラム )

MySQL ・・データを入れておく入れ物 ( データベース )

当然ながらこの２つが使えるサーバーでないと使えません！

サーバー情報

以外とめんどくさい、 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

サーバー情報

以外とめんどくさい、 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%AB%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

サーバー情報

ホスティング会社の選定

新規サイト制作の場合は、サーバーのホスティング先の選定が必要

● ホスティングサーバーの種類○ 共用レンタルサーバー○ 専用レンタルサーバー○ VPS サーバー○ クラウドサーバー

サーバー情報

ホスティング会社の選定

新規サイト制作の場合は、サーバーのホスティング先の選定が必要

● WordPress の要件を満たしていること➔ サーバーのプランによっては、データベースが使えない等の可能性があるので十

分確認する

● 自動インストール機能が備わっている➔ WordPress インストールの工数を抑えることができる他に、重要なファイルのパーミッション設定なども自動で行ってくれるケースが多いので安全

● 想定しているアクセスに耐えられるか➔ メディアサイトなど、いわゆる〇〇砲が想定されるケースに、そのアクセスに耐

えられるか

失敗談

● PHP は使えたけど MySQL 使えんかった。。● ローカルでは最新バージョンで開発していていざ本番

にインストールしようとしたらバージョンの要件に満たなかった。。

● ファイルアップロードできないんだけど？● よし！ AMIMOTO で AWS で簡単設置OK ！あれ？

メールサーバーは？

機能面の仕様

WordPress の良いところ

カスタム機能を使ってカスタマイズが出来る事 !

カスタム機能の事を知りたい方は ..↓↓上村さんのこのスライドが勉強になります↓↓WordPress 初心者からの脱出 ! カスタムなんとかをちゃんと理解する

http://www.slideshare.net/uemera/wordpress-15862377

機能面の仕様

抑えておきたいカスタマイズのこと

WordPress で構築するメリットは、機能面のカスタマイズにありクライアントにフィットした更新モデルを提案出来る点だと思ってます。

例えば不動産のサイトなら ...物件の管理をカスタム投稿タイプで管理するのか、カテゴリーで管理するのか。等

機能面の仕様

抑えておきたいカスタマイズのこと

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

機能面の仕様

抑えておきたいカスタマイズのこと

さらにカスタムフィールドを使って入力を項目化さらにカスタムフィールドを使う事で、入力項目を用意しそこに情報を入れてもらう事で簡単に更新することが出来るようになります。

カスタムフィールドをもっと入力しやすくするプラグインも活用しましょう例 )Custome Field TemplateTypes

2 回目のヒアリング

ディレクターとして把握しておきたいこと

● 納品するサーバーがちゃんと WordPress が動くサーバーかを確認する

● カスタム投稿やカスタムフィールドを理解する

● コンテンツの内容やボリュームをしっかりと把握し、更新に最適なプランを提案できるようにする

失敗談

● 全部「投稿」で管理してしまってて、クライアントにとっては使いづらい

● コンテンツのボリュームやグルーピングによって作成するカスタム投稿などの項目を決められず、項目をみなおす必要があり、ほぼ再構築に。。

大体のディレクションの流れ

WordPressで構築する時にとても重要だと思う工程

1. ヒアリング ( 要望抽出 )OK!2. ブレスト ( 方向性検討 )3. 見積もり・受注4. 2 回目ヒアリング ( 要件・仕様抽出 )OK!5. ←構造設計 次6. 各階層ワイヤフレーム作成7. コンテンツ制作8. デザイン制作9. 構築作業10.先方確認11. 納品

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

サイトマップの作成

サイトを構成するページの種類を理解する

・サイトトップページ--- サイトの一番トップにくるページ

・カテゴリー・コンテンツトップページ--- 分類分けしたカテゴリーやコンテンツのトップページ (省略される場合もあり )

・カテゴリーアーカイブページ--- 分類分けされた一つのカテゴリーの一覧ページ

・シングルページ--- 分類分けされたコンテンツの個別ページ

サイトマップの作成

サイトを構成するページの種類を理解する

・サイトトップページ(home.php)

--- サイトの一番トップにくるページ

・カテゴリー・コンテンツトップページ(page-〇〇 .php)

--- 分類分けしたカテゴリーやコンテンツのトップページ (省略される場合もあり )

・カテゴリーアーカイブページ(category-〇〇 .php or taxonomy-〇〇 .php)

--- 分類分けされた一つのカテゴリーの一覧ページ

・シングルページ(single-〇〇 .php)

--- 分類分けされたコンテンツの個別ページ

しっかりとサイトマップが構築できていると、 WordPress で必要なテンプレートファイルが見えてくる！

サイトマップの作成

サイトマップからしっかりと情報を構造化

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

サイトマップの作成

サイトマップからしっかりと情報を構造化

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

静的な HTML の作業で言う、ディレクトリマップをスラッグ名で作成して行く

失敗談

● スラッグ名を適当に決めてしまい、後で変更しなきゃいけなくなってリンク先の再設定が必要になった

● 全く階層表現が無く関連性をもった url にならない

制作の流れ

WordPressで構築する時にとても重要だと思う工程

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

構築作業

あとはプログラマーさんをひたすら応援！！！

構築作業

あとはプログラマーさんをひたすら応援！！！

も大事ですが、

構築作業

あとはプログラマーさんをひたすら応援！！！

も大事ですが、

クライアント向け管理画面のユーザビリティチェックをしましょう。

構築作業

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

目は入力しやすいのか

構築作業

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

目は入力しやすいのか

● とくにカスタムフィールドに関してはテーマのフロントエンドの作成前に確認しておきたい！

● ステージング環境でクライアントさんに入力項目を確認してもらいましょう

構築作業

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

なぜ？

構築作業

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

なぜ？

あとから入力項目の変更などが入ると、テーマ制作作業にの修正が入ることで作業が煩雑になる事があります。

構築作業

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

なぜ？

あとから入力項目の変更などが入ると、テーマ制作作業にの修正が入ることで作業が煩雑になる事があります。

プログラマーさんを応援するだけじゃなく、なるべく余計な修正を入れないようにすることも大事

構築作業

ステージング環境でクライアントさんに入力項目を確認してもらいましょう

なぜ？その２

構築作業

ステージング環境でクライアントさんに入力項目を確認してもらいましょう

なぜ？その２

クレームで一番つらいのが、

構築作業

ステージング環境でクライアントさんに入力項目を確認してもらいましょう

なぜ？その２

クレームで一番つらいのが、WordPress にしたけど、使いづらいて言われる事

構築作業

ステージング環境でクライアントさんに入力項目を確認してもらいましょう

なぜ？その２クレームで一番つらいのが、 WordPress にしたけど、使いづらいて言われる事

しっかりクライアントさんに確認してもらって早い段階で問題を吸収しておくことでクレームのリスクや工数を減らせます。

失敗談

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

その他のポイント

納品時

ステージング・テスト環境から運用環境への移行は、必ず移行手順をまとめておきましょう。

リスクが高い作業リスクを負う分の見積もりもしっかりと

運用について

WordPress を保守する

システムには少なからず脆弱性が伴う

運用について

運用について

WordPress を保守する

万が一に備えた保守が必要

● データバックアップ●バージョンアップ

以上。

最後に

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

今日のこの話が皆様のディレクションのお役に立てると幸いです。

最後に

ご清聴ありがとうございました