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

63
WEB デデデデデデデデデ WordPress デデデデデデデデデデデデデ + デデ 合合合合 WIREFRAMES 合合合 合合

Transcript of Webディレクターとして word pressを提案するときに考えること + 運用

Page 1: Webディレクターとして word pressを提案するときに考えること + 運用

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

合同会社 WIREFRAMES 松野尾 絢三

Page 2: Webディレクターとして word pressを提案するときに考えること + 運用

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

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

Javascript が大好きです。

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

Page 3: Webディレクターとして word pressを提案するときに考えること + 運用

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

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

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

Page 4: Webディレクターとして word pressを提案するときに考えること + 運用

Web 子の部屋

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

Page 5: Webディレクターとして word pressを提案するときに考えること + 運用

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

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

Page 6: Webディレクターとして word pressを提案するときに考えること + 運用

今日の話の前提

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

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

Page 7: Webディレクターとして word pressを提案するときに考えること + 運用

制作の流れ

Page 8: Webディレクターとして word pressを提案するときに考えること + 運用

制作の流れ

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

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

Page 9: Webディレクターとして word pressを提案するときに考えること + 運用

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

Page 10: Webディレクターとして word pressを提案するときに考えること + 運用

制作の流れ

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

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

Page 11: Webディレクターとして word pressを提案するときに考えること + 運用

制作の流れ

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

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

Page 12: Webディレクターとして word pressを提案するときに考えること + 運用

ヒアリング

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

Page 13: Webディレクターとして word pressを提案するときに考えること + 運用

ヒアリング

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

Page 14: Webディレクターとして word pressを提案するときに考えること + 運用

コスト

金額・開発のスピード

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

Page 15: Webディレクターとして word pressを提案するときに考えること + 運用

コスト

金額・開発のスピード

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

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

Page 16: Webディレクターとして word pressを提案するときに考えること + 運用

コンテンツ

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

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

Page 17: Webディレクターとして word pressを提案するときに考えること + 運用

コンテンツ

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

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

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

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

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

Page 18: Webディレクターとして word pressを提案するときに考えること + 運用

更新頻度

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

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

Page 19: Webディレクターとして word pressを提案するときに考えること + 運用

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

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

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

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

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

Page 20: Webディレクターとして word pressを提案するときに考えること + 運用

失敗談

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

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

Page 21: Webディレクターとして word pressを提案するときに考えること + 運用

制作の流れ

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

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

Page 22: Webディレクターとして word pressを提案するときに考えること + 運用

2回目のヒアリング

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

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

Page 23: Webディレクターとして word pressを提案するときに考えること + 運用

2回目のヒアリング

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

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

Page 24: Webディレクターとして word pressを提案するときに考えること + 運用

サーバー情報

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

WordPress は何で動いている?

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

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

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

Page 25: Webディレクターとして word pressを提案するときに考えること + 運用

サーバー情報

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

Page 26: Webディレクターとして word pressを提案するときに考えること + 運用

サーバー情報

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

Page 27: Webディレクターとして word pressを提案するときに考えること + 運用

サーバー情報

ホスティング会社の選定

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

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

Page 28: Webディレクターとして word pressを提案するときに考えること + 運用

サーバー情報

ホスティング会社の選定

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

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

分確認する

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

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

えられるか

Page 29: Webディレクターとして word pressを提案するときに考えること + 運用

失敗談

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

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

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

メールサーバーは?

Page 30: Webディレクターとして word pressを提案するときに考えること + 運用

機能面の仕様

WordPress の良いところ

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

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

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

Page 31: Webディレクターとして word pressを提案するときに考えること + 運用

機能面の仕様

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

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

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

Page 32: Webディレクターとして word pressを提案するときに考えること + 運用

機能面の仕様

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

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

Page 33: Webディレクターとして word pressを提案するときに考えること + 運用

機能面の仕様

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

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

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

Page 34: Webディレクターとして word pressを提案するときに考えること + 運用

2 回目のヒアリング

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

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

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

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

Page 35: Webディレクターとして word pressを提案するときに考えること + 運用

失敗談

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

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

Page 36: Webディレクターとして word pressを提案するときに考えること + 運用

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

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

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

Page 37: Webディレクターとして word pressを提案するときに考えること + 運用

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

Page 38: Webディレクターとして word pressを提案するときに考えること + 運用

サイトマップの作成

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

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

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

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

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

Page 39: Webディレクターとして word pressを提案するときに考えること + 運用

サイトマップの作成

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

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

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

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

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

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

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

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

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

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

Page 40: Webディレクターとして word pressを提案するときに考えること + 運用

サイトマップの作成

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

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

Page 41: Webディレクターとして word pressを提案するときに考えること + 運用

サイトマップの作成

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

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

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

Page 42: Webディレクターとして word pressを提案するときに考えること + 運用

失敗談

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

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

Page 43: Webディレクターとして word pressを提案するときに考えること + 運用

制作の流れ

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

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

Page 44: Webディレクターとして word pressを提案するときに考えること + 運用

構築作業

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

Page 45: Webディレクターとして word pressを提案するときに考えること + 運用

構築作業

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

も大事ですが、

Page 46: Webディレクターとして word pressを提案するときに考えること + 運用

構築作業

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

も大事ですが、

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

Page 47: Webディレクターとして word pressを提案するときに考えること + 運用

構築作業

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

目は入力しやすいのか

Page 48: Webディレクターとして word pressを提案するときに考えること + 運用

構築作業

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

目は入力しやすいのか

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

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

Page 49: Webディレクターとして word pressを提案するときに考えること + 運用

構築作業

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

なぜ?

Page 50: Webディレクターとして word pressを提案するときに考えること + 運用

構築作業

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

なぜ?

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

Page 51: Webディレクターとして word pressを提案するときに考えること + 運用

構築作業

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

なぜ?

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

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

Page 52: Webディレクターとして word pressを提案するときに考えること + 運用

構築作業

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

なぜ?その2

Page 53: Webディレクターとして word pressを提案するときに考えること + 運用

構築作業

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

なぜ?その2

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

Page 54: Webディレクターとして word pressを提案するときに考えること + 運用

構築作業

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

なぜ?その2

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

Page 55: Webディレクターとして word pressを提案するときに考えること + 運用

構築作業

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

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

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

Page 56: Webディレクターとして word pressを提案するときに考えること + 運用

失敗談

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

Page 57: Webディレクターとして word pressを提案するときに考えること + 運用

その他のポイント

納品時

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

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

Page 58: Webディレクターとして word pressを提案するときに考えること + 運用

運用について

WordPress を保守する

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

Page 59: Webディレクターとして word pressを提案するときに考えること + 運用

運用について

Page 60: Webディレクターとして word pressを提案するときに考えること + 運用

運用について

WordPress を保守する

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

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

Page 61: Webディレクターとして word pressを提案するときに考えること + 運用

以上。

Page 62: Webディレクターとして word pressを提案するときに考えること + 運用

最後に

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

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

Page 63: Webディレクターとして word pressを提案するときに考えること + 運用

最後に

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