WordPressやWixなどを用いたWebサイト制作: 業務とシステムの両面から構築する必要性
WebサイトをWordPressベースで構築するときにも、Webサイトの内容によって、WordPress用のテーマを選んでページを制作していけばできてしまう場合から、プラグインまで入れてシステム的な仕組みを理解してくみ上げる必要があるようなサイト、一部はシステム開発が必要なものまであります。
レンタルサーバのサービスでも利用してWordPress環境を用意した上でWordPressテーマShopなどでテーマを選んでWordPressに設定して、あとはWordPressでカテゴリやページを作成していくような静的なWebサイトを作りたい場合には、より簡単にWebサイトを作ることができるWixのようなWebサイト作成用のSaaSなどもいろいろ出てきていますので、この記事では、現在でもWordPressを使ってサイト構築をするのがマッチすると思われる、下記のふたつの内容のWebサイト構築の手順を解説していきます。
1. デザイン性を求めるWebサイト
文字フォントとして外部のカスタムフォントを使用したいあるいは関連ページへのリンクとしてブログカードにしたい等の細かいページデザイン指定を行うことが求められるWebサイトの場合は、WixよりはWordPressの方が自由度が高い面があります
2. 外部とのシステム間連携を実現する必要がある会員サイト
単なる会員サイトであればWixでも作成できます。またCorvid by Wixというサービスを利用すればデータベースを利用した動的なWebページを作成することがWixでも可能です。しかしながら、WordPressであればWordPressで実現される会員機能などの機能に関するデータベースを追加機能開発のためのアプリケーションなどからもアクセスすることが自由にできます。従って外部とのシステム間連携を実現するシステム開発が必要となるWebサイトであり、そのための機能が会員サイトの会員属性などを参照する必要がある場合などではWordPressの方が制約が少なく開発しやすいという面があります。
Webサイトの内容・機能・要件、それも場合によっては細かいところの要件によって、WixのようなSaaSを利用して手軽にWebサイトを構築できる場合、WordPressを用いてテーマやプラグインを入れてシステム上の仕組みを考えながら、しかしながらプログラム開発はなしでWebサイトを構築できる場合、一部にしろプログラム開発が必要となる場合が変わってくるので注意が必要です。
デザイン性を求めるWebサイト
WordPressではテーマ設定によりサイト全体のデザインや構成を規定できる仕組みになっており、公式のテーマだけでも8000種類以上あり、さまざまなテーマShopのようなものも存在します。
テーマ : Webサイトのデザイン設定の単位。複数テンプレートを含むことが
可能なほか、表示関連の機能をもたせることもできる
プラグイン : WordPressの標準機能や設定テーマだけでは実現できない機能
の追加・カスタマイズ変更を可能とする仕組み
有料のテーマであれば、あらかじめテーマ提供元から購入してテーマファイルを取得しておいたうえでWordPress画面の「外観」-> 「テーマ」を選択して導入すれば簡単に導入することができます。プラグインであれば、WordPress画面の「プラグイン」から選択して導入すればやはり簡単に導入できます。
一方で、近年急速に増えてきたWebサイト制作のSaaSのひとつであるWixなどでも800種類以上のテンプレートが用意されているので、近年登場しているWebサイト制作の各種SaaSでも細かいところにこだわらなければいろいろなデザインのサイトを作成することができます。
しかしながら、WordPressとWixなどのSaaSには違いが存在する面もあります。それは単純に一方が他方より優れているというものというよりは、用途によりマッチするものが変わるというメリット・デメリットがある違いといったほうがよいかと思います。
Wixを例にあげて、デザイン性を求める面のあるWebサイトでは制約となる面をピックアップすると下記のようなものがあります。
a. サイトに適用したテンプレートを変更できない
Wixでは内容を残したままテンプレートを変更することができません。2年ごとなどでサイトリニューアルを行うことが想定されている場合には、注意が必要です
b. テンプレートを大幅に修正できない
Wixには800種類以上のテンプレートが用意されていて、それぞれのテンプレートに修正を加える仕組みもありますが、大幅なテンプレート修正はできないので、やはりデザイン上の制約がある面があります
c. 関連記事などへのリンク装飾の仕組みが限定的
ブログカードが用意されていないなど、関連記事などへのリンクをページ下部などに付与する仕組みが限定的でありWordPressよりは使い勝手が悪い面があります
製品ブランドサイトなどの製品の世界観を伝える役割をもっており、サイトデザインにも求められるレベルが高いWebサイトの場合には、やはりWixのようなSaaSはデザイン面での制約があるといえると思います。また、多数の記事を掲載するコンテンツ系のサイトを作る場合にも、ブログカードが用意されていないなどWixには制約があるので、WordPressベースの方が向いているといえるかもしれません。
それでもWixのようなWebサイト制作のSaaSはこれまでにない進化したツール・サービスジャンルであることは間違いなく、細かいところまでこだわる必要はなくWebサイトを迅速に立ち上げたい場合にはWixなどは便利なすぐれたサービスですし、WordPressなどはいろいろな細かい面がわかっていないとうまく動作させられない面が多かったのが、かなり初心者でも使いやすいツールとして進化しているとはいえると思います。
2. 外部とのシステム間連携が必要となる会員サイト
次にWixなどのSaaSで構築するよりはまだWordPressベースで構築するのが向いている例として、システム面での細かい要件によりWixよりはWordPressが向いているケースをみていきたいと思います。
Wixも会員サイトは構築できる機能をもっていますし、WordPressも会員サイト機能を追加できる各種プラグインが存在します。外部とのシステム間連携として外部のAPIを呼んだり、ある処理ロジックに従って動きを変化させるようなシステム機能を実装しようとすると、基本的にはPHPなどのプログラミング言語で開発して実装する必要があります。
Wixにも外部とのシステム間連携を行うためのAPIも用意されていますし、Corvid by Wix というサービスも用意されていて、オリジナルのJavaScriptを追加したりデータベースを利用して動的なWebページを作成することもできます。基本的には、動的なWebサイトを作ることができる仕組みが用意されているといえます。
たとえぱ、外部とのシステム間連携で受け取ったデータを会員サイトの登録会員の情報に登録更新するような場合には、外部とのシステム間連携の処理のシステム開発とともに、その開発システムがWordPressあるいはWix自身の会員サイト管理のためのデータベースに登録更新する必要があります。
Wixでも上記のようなことは実現できますが、WordPressとは実現方法が異なり、WordPressの方が実装が手軽でシステムパフォーマンスとしても有利な実装が可能です。以下、まずはWixでの実現方法をまずは解説した上で、WordPressではどのように実現するか比較して説明していきます。
[Wixでの実現方法]
会員サイトで会員のスマホの位置情報をリアルタイムに参照できるようなWebサイトを実現しようとすると、システム構成としては大きく下記のふたつの機能を実現する必要があります。
a. 会員制のログイン認証して利用できるWebサイト
b. スマホ端末の位置情報をリアルタイムに受け取り、会員サイトのユーザ情報と対応づけてDBに登録するシステム
aの機能はWixで実現でも、bの機能は別途AWS上などにシステム構築することになると思います。WixのCorvidサービスを利用すればデータベースアプリケーションは構築できますが、端末からの位置情報をリアルタイムに処理するストリーミング処理が必要とされることなどから、bの機能まで含めてすべてをWix上に構築するよりは、bの機能は必要なパフォーマンス量に従ってシステム増強もできるAWSのようなIaaS環境上にシステム構築する構成が必要となります。
このようなシステム構成とした場合に、aのシステムとbのシステムとの間にデータのやりとりが必要となります。基本的にaのシステムはWebサイト機能を実現していて、bのシステムは端末からの位置情報をストリーミング処理しているので、aのシステムがサイト上に位置情報を表示する際に、bのシステムに対して、その会員ユーザの位置情報をリクエストして位置情報を取得することになります。Bのシステム上には、aのシステム (Wix) からデータを参照することができるようにAPIを作成する必要があります。
また、aのシステムとbのシステムがインターネットを介して位置情報をやりとりする必要があるので、取り扱う会員数・端末数や位置情報の頻度などによってはパフォーマンス的な問題が発生する可能性もあります。
[WordPressでの実現方法]
一方で、WordPressで実現する場合には、ひとつのデータセンター環境あるいはクラウドサービス上にまとめてシステムを構築する形態となると思います。WordPressをインストールするサーバも、端末からの位置情報をストリーミング処理する機能および位置情報を格納するDBなどをすべてAWSの東京リージョンのようなひとつの環境上に構築する形態となります。
WordPressベースで構築する場合にも、大きく下記のふたつの機能を実現する必要があるという面では変わりません。
a. 会員制のログイン認証して利用できるWebサイト
b. スマホ端末の位置情報をリアルタイムに受け取り、会員サイトのユーザ情報と対応づけてDBに登録するシステム
aの機能は、WordPressに”Groups”のような会員サイト機能を実現するプラグインを追加することにより実現することができます。Wixでの実現方法とのシステム構成が異なってくる理由は、WordPressの場合には、オープンなシステム構成なので、会員サイトを実現するWordPress機能のためのデータベースに対して、bの機能のアプリケーションがAPIなどを介さないでもアクセスすることができるところにあります。
従って、aの機能もbの機能もひとつのサーバ上に実装することも可能で、会員サイトで位置情報をWebページ上に表示する際には、アプリケーションがデータベースから直接位置情報を参照することが可能で、インターネットを介したアクセスなどは必要となりません。従ってデータ参照のためのAPIをつくる必要もなく、全体システム構築のための工数は少なく実現できる形態であるとともに、インターネットを介したデータのやりとりもないので、パフォーマンス的な問題ともなりにくいシステム構成ともいえると思います。
このようにWixにもCorvidという動的なサイトを実現するサービスも用意されていますが、外部とのシステム連携が必要となるようなプログラム開発が必要となるようなWebサイト構築には、Wordpressベースのシステム構成が向いている面はあると思います。
WordPressを利用したWeb構築では、WordPressにテーマやプラグインを導入して、必要であればPHPでカスタマイズを行うという実装方法が主となります。設計から構築までのプロセスとしては、業務要件を規定した上でシステム要件定義の内容として、WordPressにどのようなプラグイン/テーマを導入した上で、どのようなカスタマイズをPHPの実装にて行うかという、システム構成の記述をした上で、情報設計/画面設計の結果としてのサイトストラクチャやワイヤフレームを作成するという手順となると思います。
サイトストラクチャやワイヤフレームを作成することにより、どのような画面をWordPressの管理画面を操作して作ればよいかわかるようにするとともに、PHPによるカスタマイズ実装部分についての記述を用意すればよいかと思います。ごく簡単な画面の動的変化であれば、ワイヤフレーム内に補足として記述してもよいですし、もうすこしカスタマイズ範囲が広い場合には、WordPressのDBテーブル/カラムと対象の画面の画面要素との対応表を用意することが多いかと思います。
これからのWeb構築・Webディレクションとして、業務にまで踏み込んでディレクション/プロデュースすること、それが近年のバズワードであるDXにもつながること、そしてWebの進化とともにWeb構築の各種ツール/サービスやSaaSが広がってきていることにしたがって、業務とシステムの両面からWeb構築・運用していく人間が求められていくこと、そのためにどのような知識や能力を身に着けていくとよいかについて解説している「マガジン」です。