--- title: "僕が考えるWordPressを活用したウェブサイト制作の流れ" canonical_url: "https://olein-design.com/blog/my-process-for-creating-a-website-using-wordpress" language: "ja" date_published: "2020-09-28T14:03:55+09:00" date_modified: "2020-09-28T14:03:55+09:00" content_type: "post" author: "久野晃司" taxonomies: category: - "WordPress" --- # 僕が考えるWordPressを活用したウェブサイト制作の流れ 最近、将来的なこれからのウェブ制作、特にWordPressを活用したウェブサイト構築の制作フローについて考えることが多くなってきていました。 その理由の一つとしては、自身の今後のウェブサイト制作の流れに迷いが生じているからなのかもしれません。 > これまでのように、デザインを制作して（もしくは提供されて）ゼロからWordPressテーマ開発を行う案件が、今まで通りの価格帯で提供していけるのか このようなことを、特にWordPressのブロックエディタの成長を目にするたびに考えるようになっていました。 そこで自分の考えをまとめるためにも、今後どのような制作フローに自分はシフトしていくのだろうか、どんな形で提供することがクライアントにも事業にも良いのだろうか、という点を重点的に考えてみようと思います。 ## これまでのWordPressを活用したウェブサイト制作・構築 これはあくまでも、僕自身のお仕事として関わってきた比率での話であって、全てがそうであるという話ではありません。 今まで受託または直接クライアントさんとのお仕事としてWordPressを活用したウェブサイトを構築する際には、基本的にデザインを作り、それをもとにWordPressテーマを作るという流れで行ってきました。 簡単に流れを書くと、 1. ヒアリング 2. ワイヤーフレーム制作・構造決定 3. デザイン制作・承認 4. WordPressテーマ制作 - マークアップ（HTML）・スタイリング（CSS）・動的処理（JavaScript） - ビジュアルエディタ対応（専用CSSを用意して編集体験を向上させる） 5. 確認・検修・納品完了 というような流れです。デザイン制作会社さんなどからの受託案件であれば、４の部分にフォーカスしたお仕事になるという違いはありますが、基本的に**旧式**のWordPressを活用したウェブサイト構築は（規模の大小はさておき）このような流れになるのかなと思います。 **旧式**というと誤解されてしまうかもしれませんが、WordPressがブロックエディタにシフトする前まで（WordPress 4.*まで）はこのような流れがメインでしょう。 ## これからのWordPressを活用したウェブサイト制作・構築 では、これから（WordPress 5.*〜）はどう変化したのでしょうか。そうです。**ブロックエディタ**が登場しました。これにより、制作の流れは然程変わりませんが、各工程で行う内容が変わってきています。 特に変わってくる（変わった）と感じるのが、**「ヒアリング」「デザイン制作」「WordPressテーマ制作」**の部分です。そして、それに対応するために必要なのが**「ブロックエディタへの理解」**です。 ### 「ブロックエディタへの理解」とは 「理解」というと大げさで困難なことに聞こえてしまいますが、**基本的な理解というのは「利用・活用すること」で得ることができます。** 珈琲豆を焙煎したことがない人に「焙煎」を語られるように、自身でマイホームを購入したことがない住宅メーカー営業マンに「家とは」を語られるように、**WordPressブロックエディタを活用していない人から提案・指南をもらったとしても、全く何も響かないし信憑性がありません。** ですので、まずは**WordPressをしっかりと使ってみましょう。**そして、ブロックエディタで「何ができるのか。何ができないのか。」を想像できるようになりましょう。その**日常的な取り組みが「ブロックエディタへの理解」となる**ような気がしています。 ## ゼロからテーマを作るために必要なこと では、旧来のWordPressテーマ制作の延長で、ブロックエディタを活用したWordPressテーマ制作にシフトしていく上で必要な対応や考え方は何があるのでしょうか。 ### 標準ブロックへのスタイリング対応 WordPressに標準で用意されているブロックには、基本的なスタイリングは意図的にスタイルを読み込まない処理を行わなければ、WordPressコアから用意されています。 しかし、それをそのまま利用するだけでは味気なくなってしまいます。なので、立ち上げるウェブサイトにマッチしたスタイリング（CSS）を用意する必要があります。 そして、そのためには標準ブロックが、どんな構造になっているのか、どんな表示をされるのかといった点を、事前に知っておく必要があります。 逆に全ての標準ブロックを活用するウェブサイトも珍しいでしょう。ですので、一般的に利用頻度が高い標準ブロックへの理解だけにまずは取り組むだけでも良いでしょう。 ### 拡張スタイルを用意したカスタマイズ 上記の標準ブロックでコンテンツを構成していく上で、どうしても同一ブロックにおけるスタイルの使い分けが必要になってくるケースがあります。 標準ブロックのマークアップ部分は共通にしておきながらも、見た目部分だけを変えたい（スタイリングで変えたい）という場合には、**拡張スタイル**を用意する必要があります。 そのためには、テーマ側から行うかプラグイン側から行うかは考える必要がありますが、**PHPとCSSの知識**が必要になります。 方法はこちらでも紹介していますし、WordPress公式ハンドブックにも書かれているので参考にしてみましょう。 [埋め込みコンテンツ](https://olein-design.com/blog/released-takeout-gifu#co-index-36) ### 専用カスタムブロックを用意するか否か 標準ブロックへのスタイリングでも実現できず、マークアップはそのままの拡張スタイルでも実現できない場合、**専用カスタムブロックを用意するべきかどうかという判断が必要になります。** 僕自身がこの判断が必要になった場合に検討が必要と思う点としては、 - **メンテナンス**が可能な納品先かどうか - **作成する専用カスタムブロックの利用方法を想像できるか**どうか（利用状況をどれくらい想定できるか） を主に考えます。 WordPress全体に言えることですが、アップデートがコンスタントに行われる点は大きなメリットになりうる反面、その情報をフォローアップできない場合にはデメリットにもなりかねません。 要するに、カスタムブロックを制作して納品したはいいけど、**作り方がベターではなかったが故に早いタイミングで非推奨の制作方法となってしまった**、といったことが起こらなくありません。 ですので、WordPressの開発状況・状況などの情報を可能な限りキャッチアップしている必要があります。でないと最適な制作方法を選択することができないからです。 そして、**そのブロックをどのように使われるのかを、どれくらい想像・想定することができるかどうか**も大きな要因となります。 カスタムブロックを制作する上で、度重なる仕様変更や追加などが行われると、全体の進捗にも影響を及ぼしますし、運用を開始した後にもそれが続く可能性がゼロではありません。 その場合、そもそもの使用方法などの検討が甘かったという場合も多くありますので、事前の想定や協議がとても大切になってきます。 また、カスタムブロックを制作するためには、 - **（Block Labのような）プラグインを利用する** - **ゼロから作る（PHP、JavaScript、Reactの知識必要）** 上記どちらかの方法を利用することが一般的でしょう。 前者は後者よりも手軽に試すことは可能ですが、**様々な制約があるので、それらを理解した上での提案が必要**となります。 後者においては、WordPressで可能である範囲であれば自由にカスタムブロックを作ることができます。しかし、そのために**必要な技術力は高いものがあり、そのためのコストを予算に持てるかどうか**も考えるべき点の１つになるでしょう。 ## 中まとめ ここまで、旧来のWordPressを活用したウェブサイト制作の流れを元に、ブロックエディタ時代（WordPress 5.0以降）のテーマ制作はどのように変化しているのか、どのような点を事前に理解しておくべきなのかという持論をご紹介しました。 ここからは、「では、これからのWordPressを活用したウェブサイト制作・提供について、自分ならどうする？」という考えをご紹介していこうと思います。 こちらでは、私自身持っている知識に基づく考えを書いています。これが完璧な答えでもなく、似たような考えをお持ちの方もみえれば、全く違う考えをお持ちの方もみえるでしょう。どれが正解という議論ではなく、最終的にユーザー（利用者・閲覧者）に使用感・予算感など総合的に最適なものになっていれば良いと考えています。 ## ブロックエディタ時代に必要な制作コストへの理解と感覚について 上記した、WordPressを活用したウェブサイト制作フローから、現在のブロックエディタ時代（WordPress5.0以降）の制作フローへと見直し、且つコスト面（制作費）も考慮して考えてみます。 ### ブロックエディタに対応するWordPressテーマ受託制作案件の制作ワークフロー例 1. ヒアリング 2. ワイヤーフレーム制作・構造決定**（前提：ブロックエディタへの理解必須）** 3. デザイン制作・承認**（前提：ブロックエディタへの理解必須）** 4. WordPressテーマ制作 - マークアップ（HTML）・スタイリング（CSS）・動的処理（JavaScript） - ~~ビジュアルエディタ対応（専用CSSを用意して編集体験を向上させる）~~ - **標準ブロックへのスタイリング対応** - **拡張スタイルの用意の是非** - **カスタムブロックの必要性の検討** 5. 確認・検修・納品完了 ### ブロックエディタに関するコスト 旧来の制作フローとの大きな違いというのは、上のリストからも明確なのですが、**ブロックエディタに関するコスト**がメインとなってきます。 まず第一に、**前提条件となるブロックエディタへの理解を常時得るためのコスト**が発生します。「そんなの制作に直接関係ないじゃん！」と怒られるかもしれませんが、珈琲焙煎とマイホームの下りをご確認ください。 **日々の学習や知識蓄積を行わないのであれば、それは専門家ではなく作業者になるということ**です。 ですので、作業者（誰でもできる作業を行う人）に制作依頼をしたいのか、専門家（その人もしくは一部の人しか行えない作業を行う人）に制作依頼をしたいのか、をしっかりと考える必要があります。 良い悪いの話ではなく、求める成果物に必要なものは何かから逆算して考えるべきでしょう。 ### 開発に必要なスキルセットの変化 旧来、WordPressテーマやプラグイン開発は、フロントエンド側のスキル（HTML/CSS/JavaScript）に加えて、PHPがメインで必要となってくるものでした。 しかし、ブロックエディタ時代では、ブロックエディタを形成しているJavaScript（主にReact）への理解がとても大きな割合を占めるようになってきました。 （私も必死にフォローしてはいますが）今まで必要であったフロントエンド側のJavaScriptスキルレベルとはまた別次元の理解が必要だという認識を個人的には持っています。 ですので、その習得コストならびにスキルコストが間違いなく発生するでしょう。 ### ブロックエディタ時代におけるスクラッチでのテーマ制作ではコスト増傾向？ 上記の理由から、制作コスト増となってしまうのは否めないと考えています。 まず、必要な前提知識レベルが以前とは違ってきている点。そして、それに伴う開発環境の変化に追従する日々の情報収集。 それらはなかなか外からは見えにくい部分であるため、発注者によっては理解しにくい部分でもあるとは思います。 しかし、実際にコストが発生する部分でもありますので、こちらの制作フローにおいては、コスト増は止むを得ないかなという考えを個人的には持っています。 ## 有能WordPressテーマを活用したウェブサイト制作フロー 上記の通り、コスト増部分は直接的にクライアントに打撃を与えるでしょう。また、ディレクション部分での説明が（上記のような説明をうまく）できない場合には、理解を得られにくく予算を見直してもらったりすることが難しくなる場合もあるでしょう。 そういった様々なコスト面の一部分を解決してくれる方法の１つとして、**有能な（有料・無料問わず）WordPressテーマを活用するという方法**があります。 幸いにも日本国内においても、多くの有能な100%GPLライセンスの元でWordPressテーマを提供してくれるテーマ制作者（制作会社）さんが見えます。 個人的に交流がある方で紹介させていただきますと、このようなテーマを作って見える方がみえます。どれも素晴らしい。 [埋め込みコンテンツ](https://lightning.nagoya/ja/expansion/lightning-pro) *Vektorさん作（石川さんの会社）* [埋め込みコンテンツ](https://snow-monkey.2inc.org/) *キタジマタカシさん作* [埋め込みコンテンツ](https://support.animagate.com/product/wp-nishiki-pro/) *今村さん作* [埋め込みコンテンツ](https://swell-theme.com/) *了さん作* 上記以外にも、国内には100%GPLでのWordPressテーマを提供されている方がおみえになりますので、ぜひ興味のある方は調べてみてはいかがでしょうか。 では、なぜ「既成のWordPressテーマを活用したウェブサイト制作フロー」を導入するのか。そのメリットは何か、という点についてお話していこうと思います。 ### ブロックエディタ対応部分へのコスト減 これが最大の要因となる場合が多いです。 上記各々のテーマに個性はありますが、**共通して言えることはブロックエディタへの対応がすでにされている**という点です。 そんな対応がされているのかと言えば、大きく分けると、 - **標準ブロックへのスタイリング対応** - **標準ブロックへの拡張スタイルの用意** - **カスタムブロックを提供（別プラグインの場合有り）** といった点が言えると思います。 ここまで続けて読んでいただいた方には、気づいていただける方が多いかと思いますが、**上記３点は全てブロックエディタ時代のWordPressテーマ制作におけるコスト増ポイント**なのです。 ### カスタマイズに関する知見が共有されている これも大きなポイントと言えるでしょう。 それぞれのテーマにはオンラインをメインとしたコミュニティが存在しており、コミュニティに参加している方々からのカスタマイズに関する情報（ブログなど）が豊富でインターネット上で閲覧することができます。 ですので、**必要なカスタマイズに対して情報を得やすいというメリット**があります。 また、そもそもそのテーマ自体がテーマの趣旨によって、**カスタマイズしやすいように作られているものもあり、カスタマイズを含む拡張性という恩恵**を受けることができます。 ## 既存テーマを活用したウェブサイト制作フローを採用する１番のメリットは何か では、上記のように、既存テーマを活用してWordPressを利用したウェブサイトを制作する１番のメリットは何かと考えてみましょう。（個人的な考えです） ### コンテンツに注力することができる １番のメリットは、個人的にはダントツでこちらのポイントになります。 最近ではあまりないがしろにされることはなくなってきましたが、昔で言うならば、ウェブサイトに掲載する情報は会社パンフレットからの転載というケースが少なくありませんでした。正直、今でもあります。 しかし、誌面（パンフレット）での情報伝達と画面（ウェブページなど）での情報伝達は全く別物です。仮に誌面でうまくいっているものを持ってきたとしても、同じようにうまく伝わるかどうは保証はありません。 また、誌面では掲載面積の制限もありますが、ウェブサイトでは写真素材などをより効果的に利用できるのも特徴となります。 ここで言うコンテンツというのは、主にユーザー側が編集可能な部分を多く含んでいて、それは、 - 写真画像 - テキスト を指しています。作図やイラストといった部分に予算を回せる場合も増え、**以前と同じ予算感でありながらも、よりコンテンツ重視のウェブサイトを構築することができる仕組み**となります。 ## 結果として、クライアントに良い形になっているかどうか ここまで、制作者目線からのコスト感や必要スキルなどについて書いてきました。しかし、**最終的な判断をする上で欠かしてはならないのはユーザー（クライアント）にとって最適な選択かどうか**です。 **制作者は納品後の利用者ではありません。**便利な仕組みを提案することは可能ですが、本当に最適な形かどうかはユーザー（クライアント）が決めることです。 その想定にどれだけリアリティを持たせた説明や解説ができるかという点も制作者の腕の見せ所だと考えています。（僕はよくデモを用意したり動画で解説したりします） 仕様が大きく多岐に渡り、費用が大きくなればなるほど制作が大変にはなりますが、得るもの（お金）も大きくなります。それはとても嬉しいことです。 しかし、それはあくまでも制作者側の話というだけで、費用が大きくなれば、仕様が多岐にわたる大きなプロジェクトになればなるほど、ユーザー（クライアント）の満足度が高くなるのかと言われれば、それは全く関係ない話です。 ですので、いち制作者としてまず大切にするべき視点は、ユーザー（クライアント）に取って最適な選択になるかどうか、という点を大切にして、提案・設計などをしていく必要があります。 ## まとめ WordPressがビジュアル・テキストエディタが主流だった時代から、ブロックエディタの時代に移り変わり時間も経ちましたが、まだまだ考えるべきこと、学ぶべきことは制作者サイドから考えても多くあります。 しかし、**WordPressがブロックエディタを採用したのもユーザー体験を向上させるため**です。ですので、そのWordPressを扱う人間としてユーザー体験をないがしろにする提案は避けるべきでしょう。 ですので、上記したようにWordPressへの理解は去ることながら、ブロックエディタへの理解を日々深め、適切な方法でユーザー（クライアント）に良いウェブサイトを提供していく姿勢を忘れてはいけません。 そのためにできることを今後も学んでいこうと思います。