WordPressを"仕事"にするということ

私が仕事としてWordPressサイト制作を行うにあたり、心がけていることをスライドにしました。
なお、このスライドは2022年10月現在のものですので、最新の私の考えとは異なる部分もあります。
「人は信じても人の行動は信じるな」「君子は豹変す」

Transcript

1. WordPressを"仕事"にする ということ 八王子 WordPress Meetup 2022/10/8 Cherry Pie Web 川井昌彦 1
2. 自己紹介 川井昌彦 （かわいまさひこ） 東京都府中市でフリーランスでDTP・Web制作をしています 並行して新宿区早稲田の制作会社で、正社員との"複業"を行っています （週2日出社 ＋ リモート） 今どきの「働き方改革」を実践中。 2
3. Cherry Pie Web https://www.cherrypieweb.com/ 1997年開設 今年で25年目！ アンナミラーズファンサイトとしてスタート かつては、アンナミラーズ公式サイトと 井村屋株式会社と共に Yahoo! JAPAN「ビジネスカテゴリー」 の アンナミラーズの項目に登録されていた 3
4. ・Ｉ ｎｓ ｔａｇｒａｍ （masakawai） 黒柴：かのこ ・ シロハラインコ：よもぎ 4
5. 10月8日は、 かのこの12歳のお誕生日なのだ！ 5
6. 本日の予定 1. WordPressサイト制作の流れ 2. 仕事としてウェブサイトをつくるときに重視していること 3. 信頼できる情報の探し方 4. さいごに 6
7. WordPressサイト制作の流れ 1. 問い合わせ 2. ヒアリング 3. 提案・見積もり（概要設計） 4. 要件定義・詳細設計 5. デザイン／プロトタイプ 6. サーバー・ドメイン契約 7. コーディング 8. テスト・レクチャー 9. 公開 10. サポート・メンテナンス 7
8. １．問い合わせ ・ ウェブサイトの問い合わせフォームまたはメール ・ 知り合いの会社から ・ ウェブ部門が弱い制作会社のスタッフとして請けることも多い 8
9. ２．ヒアリング ・ お客様が言われることは表面的なもの 本当は何が必要なのかを見つける ・ 古いウェブサイトのリニューアルがほとんど ・ 更新がやりづらい ・ スマートフォン対応したい etc. ・ 予算 （助成金なども） ・ 現行サイトのサーバー・ドメインの管理状況 ・ これがネックで公開に支障が出ることが多い 9
10. ３．提案・見積もり（概要設計） ・ ヒアリングをもとに提案書と見積もりを作成 ・ 実はこの時点でほぼ設計を行う ・ CMSの選定 ・ テーマ・プラグインの選定 ・ 場合によっては、サーバー・ドメイン管理会社の移転 設計しないと見積もれない 10
11. ４．要件定義・詳細設計 ・ 提案内容をもとに仕様を決めていく ・ 担当者のアサイン ・ サイト構成 ・ ページ構成 ・ ワイヤーフレーム ・ 詳細スケジュール ・ 詳細見積 11
12. ・ 必要なら再ヒアリング、打ち合わせを重ねる ・ チャットツール （Slack、Chatwork、Teams） 決まったことはドキュメントで残す ・ プロジェクト管理ツール （Backlog） 12
13. ５．デザイン・プロトタイプ ・ ワイヤーフレームに基づいてデザインを作成 ・ プロトタイプで画面遷移をシミュレーション 13
14. ５．デザイン・プロトタイプ （最近の作り方） ・ WordPressでいきなりワイヤーフレームを組む →そのままプロトタイプを作る ・ 国産の既存テーマを利用して制作する ・ ブロックだけでトップページもある程度組める ・ 実際に動くものなので、コーディングで困ることがない ・ 既存テーマを利用する場合は ほぼ出来ているものなので、機能やデザインに制約がある 14
15. ６．サーバー・ドメイン契約 ・ 現行サイトがある場合は、基本的に継続使用 ・ 現行サイトのサーバーがWordPressを快適に使える仕様・性能でない場合 → サーバー移転を提案 ・ エックスサーバービジネスパートナー 15
16. ７．コーディング ・ テーマカスタマイズ ・ プラグイン導入 ・ デザイン （CSS） ・ 固定ページ作成 16
17. ８．テスト、レクチャー ・ 管理画面カスタマイズ ・ 運用マニュアル作成 ・ ブログ投稿、商品登録・更新などのレクチャー ・ お問い合わせフォームテスト 17
18. ９．公開 ・ アナリティックス、サーチコンソール、タグマネージャーの設定 ・ Googleアカウントはお客様に取得していただく ・ バックアップの設定 18
19. １０．サポート ・ コアのマイナーバージョンは自動更新 ・ 管理系プラグインは自動更新 ・ テーマ・プラグインの自動更新は、開発者の信頼度で判断 ・ ドメイン・サーバー契約は原則としてお客様 19
20. ・ 運用サポート ・ ブログ記事のアイデア出しサポート ・ 運用改善 ・ アクセス解析 ・ 継続的なSEO対策は安易に請けない ・ 現状、検索順位の保証は無理 20
21. 仕事としてウェブサイトをつくるときに 重視すること ・ サイトの安定性・継続性 ・ メンテナンスを考慮したコーディング ・ お客様が運用するということを意識した設計 21
22. ▪サイトの安定性・継続性 ・ レンタルサーバーの選定 ・ 信頼できるテーマ・プラグイン 22
23. ◦レンタルサーバーの選定 ・ 安定性・高速性 ・ WordPressとの相性 ・ 簡単インストール機能があるサーバー ・ サーバーの機能 ・ 自動バックアップ・ステージング環境 ・ 常時SSLが無料でできるサーバーは多くない （自力でもできるが手間が大変） 23
24. ◦信頼できるテーマ、プラグイン ・ 継続してメンテナンスされている ・ コアの直近2メジャーバージョンで更新されている ・ フォーラムのサポートに返信がある ・ 作者が信頼できる ・ 同じ作者の他のテーマ・プラグインを使用していて問題が起きていない ・ 作者がコミュニティ活動に積極的で連絡が取りやすい ・ 作者と直接の知り合い 24
25. ・ 有効インストール数が多い ・ 設定やカスタマイズの際に情報が得やすい ・ 開発が止まったときに他の人が後継のものを作ってくれることがある ・ プラグインの有料版への切り替えを検討する ※オススメプラグインなどは時間があったら紹介します 25
26. ▪メンテナンスを考慮したコーディング ・ できるだけコードを書かない ・ オリジナルテーマを作らない ・ 子テーマでカスタムテンプレートを作らない フックを使ったカスタマイズで独自コードを最小限にする → フックに対応したテーマを採用する ・ 推奨された制作手法に基づくコーディング 26
27. ◦できるだけコードを書かない ・ コアの機能で対応できないか？ ・ テーマの機能で対応できないか？ ・ プラグインで対応できないか？ 27
28. ・ 自分でコードを書く ↓ ずっとメンテナンスする覚悟があるか？ ・ コアのアップデートで手法が非推奨になったら？ 脆弱性のあるコードを書いてしまったら？ WordPressの新機能に対応したくなったら？ 信頼できるプラグインは、 世界中の人がメンテナンスしてくれる 28
29. ・ オリジナルテーマを作らない ・ WordPressの制作手法が複雑化していて、テーマに要求されることが多すぎる ・ WordPressのロードマップを把握していないと、 将来のアップデートで非推奨になる機能を実装してしまう危険性がある ↓ ・ 信頼できるテーマを使うことで、 万が一脆弱性があったり、コアのアップデートで問題が起きても、 信頼できる方法で対応してもらえる 29
30. ・ 子テーマの制作手法の変化 ・ 子テーマとは、親となるテーマの一部だけを上書きするカスタマイズ方法 ・ 親テーマ自体を書き換えるとアップデートの際に カスタマイズ部分が消えてしまうので、それを防ぐ ・ 数年前まで推奨されていた制作方法だが・・・ 30
31. ［子テーマの問題点］ ・ 親テーマがアップデートされても、カスタマイズ部分が消えない ↓ ・ 親テーマに問題があって改修されたり、機能が追加されても、 子テーマのテンプレートには反映されない！ 31
32. ［どうするか？］ ・ テンプレートに用意されたフックを利用し、 functions.php で出力を書き換えたりコードを追加する カスタマイズしていない部分は親のテンプレートのコードが反映される カスタマイズが最小限なので、改修が必要になっても対応しやすい ［さらに・・・］ ・ 子テーマはCSSのみとし、 テンプレートのカスタマイズ部分は切り出してプラグイン化する トラブルが起きた際に、プラグインを無効にすればよいので切り分けしやすい 32
33. ◦WordPressの制作手法に基づくコーディング ・ 脆弱性を含まないコードを書くにはかなりの知識が必要 さらに、テストをするには手間も知識も必要 ・ プラグインを導入した時にトラブルが少なくなる ・ 便利な関数を使うことで制作時間を短縮できる 33
34. ・ 表示にはWordPressの関数を使う ・ エスケープ・サニタイズ esc_html()、esc_attr()、esc_url() the_title()、the_content()、the_permalink() など ・ コアに同梱されたライブラリを使う ・ jQueryはWordPress同梱のものを使う 古い記事を信じないこと 34
35. ・ CSS・JSは、wp_enqueue_script() を使う wp_enqueue_script( 'matchheight', get_template_directory_uri() . '/js/jquery.matchHeight-min.js', array('jquery'), // jQueryに依存する '20151114', // キャッシュ true ); wp_enqueue_style( 'my-styles', get_stylesheet_directory_uri() . '/css/my.css', array('lightning-theme-style'), // 他のCSSの後で読み込ませる date('YmdGis', filemtime(TEMPLATE_PATH.$file_path)), // キャッシュ false ); ・ 依存関係のコントロール ・ キャッシュのコントロール 35
37. ・ どうしてもコードを書かなければならない時は ・ WordPress コーディング規約ハンドブック – Japanese Team https://ja.wordpress.org/team/handbook/coding-standards/ 37
38. ▪お客様が運用するということ ・ お客様が運用するなら、管理画面のカスタマイズは必須 ・ マニュアルを作ったりレクチャーしても忘れられる ・ やる気がある人ほど、さわってはいけないところをさわる 38
39. ◦操作を間違ってもシステムが壊れない 壊れても復旧できる仕組み ・ リビジョン機能を生かしておく ・ "自動"バックアップの設定 ・ バックアップはウェブサイトのあるサーバーとは別のところに保存する （Googleドライブ、Dropboxなど） 必ず、 復元のテストをしておく 39
40. ◦そもそも間違わせない されたくない操作は出来ないようにする 操作の際に迷わせない ・ システム側で出来ることはお客様にさせない （バックアップ・アップデートなど） ・ UpdraftPlus ・ ユーザーロール （編集者・寄稿者など） の設定で されたくない操作は権限を与えない ・ User Role Editor 40
41. ・ 不要なメニューやさわられたくないメニュー・ボタンは 非表示にする ・ Adminimize ・ あると使いやすいメニュー項目を追加する ・ Admin Columns 41
42. 人は信じても人の行動は信じるな 42
43. 信頼できる情報の探し方 ・ ネット上のWordPressの情報は玉石混交 →石のほうが多い どうやって石の中から玉を見つけるか？ 43
44. こんな記事があるサイトは信用できない ・ WordPressの 「p」 が小文字 ・ 記事作成時点でメジャーバージョン2世代以上 更新されていないプラグインを紹介している ・ テーマファイルを直接修正している ・ header.php, footer.php に CSSやJSを直接記述している ・ 他のブログのコピペと思われる記事ばかり 44
45. "比較的" 信用できるサイト ・ 公式ディレクトリに登録されているテーマ・プラグインの 作者が書いた記事 ・ WordPressコミュニティで登壇経験のある人が書いた記事 ・ 上記の記事を1次情報と明記している記事 ・ WordPress公式ドキュメント・フォーラムを 1次情報と明記している記事 45
46. ただし、 人間には間違いがあるので、 盲目的に信じてはダメ Contact Form 7 作者の三好さんに 『三好が公に話したことだから正しいと思い込んではダメ』と 直接言われてから、肝に銘じています 46
47. 私なりの情報の探し方 ・ 過去1年以内の記事を探す ・ 最低5記事は読む ・ 複数の記事で同様の内容があれば、正しい可能性が高い ・ 必ず1次情報を探す ・ 複数サイトで全く同じ内容の記事があったら、 内容を吟味せずにコピペしているだけの信頼できないサイトの可能性が高い 47
48. ・ 英語の記事も探す ・ 日本語の記事にこれといったものが見つからない場合は、 検索ワードを英語に翻訳して検索をかけてみる ・ 英語の記事も間違ったものが多いので注意 48
49. さいごに ・ とにかくバックアップ ・ 失敗や修正を記録に残す 1年後の自分は他人 （過去のことは忘れてる） ・「君子は豹変す」 昨日の常識は明日の非常識 常に知識と意識のアップデートは怠らない 49
50. ご清聴ありがとうございました。 50