はじめに

ルカデザインが最も多くご依頼いただくWordPressサイトの制作フローのうち、コーディングフェーズの内容を本記事にてまとめます。

制作全体のフローにつきましてはこちらよりPDFにてご案内しておりますので、そちらもご一読いただきますとより全体の流れが掴みやすいかと思います。

WordPressコーディングフロー6ステップ

大まかに以下の6つのステップに分けて作業していきます。ステップごとさらに細かなステップに分かれており、実際の現場ではさらにその先までタスクを割り振って作業していきます。

ステップ1：設計と計画

このステップの目標地点は現状の把握と具体的な構築計画の策定です。

全体を把握しないまま作業することはせず、必ず全体要件を把握／情報整理し、情報の不足や疑問点をなるべく早い段階で解消するよう努めています。プロジェクトの後半にいけばいくほど情報不足による軌道修正が難しくなるからです。

開発ブリーフィング

前工程であるデザイナー、統括するPMもしくはディレクターから得た要件をもとに一度情報を整理し、不足や疑問点の解消をします。情報整理の過程で開発用のサイトマップをひくことで、スムーズに漏れなく要件を整理していきます。

コーディングプラン作成

「開発サイトマップ」をもとに後述の「ステップ4：サイトコーディング」のタスクを具体的かつ詳細につめていきます。CMS開発における内部設計をかねているので、十分な時間をかけて行います。

ステップ2：開発環境の準備

このステップより実際に制作にとりかかります。ウェブサーバー上で直に構築していくのではなく、ローカル環境（自社のコンピューター上）に仮想サーバーを設けてそこで構築していきます。

ローカル開発環境構築

仮想サーバーにWordPressをインストールし、編集状態をいつでも確認（サイト表示画面としてプレビュー）できる状態にします。

WordPressはPHP（サーバーサイドのプログラム言語）とデータベースで動作するので、ファイルをブラウザで開くだけでプレビュー可能な静的HTMLと違い、動作確認には仮想サーバーの用意は必須です。

バージョン管理登録

Gitを使用したバージョン管理を開始します。これは、こまめに作業の状態を保存し、問題があれば即座に任意のタイミングの作業状態へと復旧させるためです。更にクラウド上に保存されるため作業データのバックアップもかねています。

ステップ3：CMS開発

WordPressには最低限設定しておかなければならない項目と、義務ではないが使用すると便利な機能がいくつもあります。これらの設定、入力をしていくのが本ステップです。

投稿タイプ/タクソノミー追加

WordPressの投稿機能を拡張、分類する機能を設定します。「開発サイトマップ」をもとに設定していきます。

固定ページ作成

投稿機能ではないページ（トップページや会社概要ページなど）をページとしてあらかじめ生成しておきます。この段階では中身は作り込みません。

メニュー作成

これまでに生成した「投稿タイプ」や「固定ページ」をもとにして、メニュー欄に出力するリンクをまとめていきます。

ターム追加

タームとは、「カテゴリー」や「タグ」などに代表される分類名です。投稿を分類する際に設定した「タクソノミー」ごとに追加していきます。

カスタムフィールド追加

カスタムフィールドとは、WordPress管理画面に入力欄をもうけ、管理者が入力した値をウェブサイト上に表示したり処理に利用したりする仕組みです。

例えば、ウェブサイトに表示する電話番号などの会社情報を一括で登録しておき、必要な箇所で呼び出す等の使い方ができます。

管理者情報入力/サイト設定

上記カスタムフィールドで作成した管理者の情報を入力し、サイトタイトルやキャッチフレーズなどWordPressの各種設定を整えていきます。

ステップ4：サイトコーディング

実際にコードを書いていくステップです。

WordPressコーディングとは一般的に「テーマ」というウェブサイトの外観をコントロールするWordPressのフォルダ領域を編集することを指します。

パーツ

ボタンやラベル、タイトルや見出しなどのウェブサイト内共通で使用するパーツを洗い出し、最優先でコーディングしていきます。

ベース

ヘッダーやフッター、CTAなどページをまたいで何度も表示されるエリアをコーディングしていきます。

ページ

トップページを筆頭に、ページごとにコーディングしていきます。

テンプレート

投稿機能のテンプレート、投稿を一覧するページのテンプレート等、中身を入れ替えて外枠だけ使用する想定のテンプレートをコーディングしていきます。

ステップ5：ステージング環境実装

「サイトコーディング」がひと段落ついたら、実際にウェブサーバー上にアップロードしてテストするためのステージング環境を実装していきます。

これ以降は社内とクライアントに逐一表示状態を共有し、本番公開に向けて詳細をつめていきます。

ウェブサイト環境構築

ローカル環境で実装した内容をステージング用に準備したサーバーに移設します。

ウェブサイト設定追加

当然本番公開ではないので、一般から見えないように鍵（Basic認証）をかけます。

また、管理画面の確認や投稿記事を事前に入れ込めるように、クライアント用のWordPressユーザーを作成し共有しておきます。

評価/検証

専用のチェックシートをもとに、リンク切れや表示崩れ、プログラムバグ等が発生してないかを確認します。また、クライアントに実際にウェブサイトを触ってもらい、気になる点を吸い上げ修正していきます。

本素材反映

プレビュー画像を使用している部分を本画像に差し替えていきます。
また、ブランクテキストを使用している箇所はテキスト内容を本番用のテキストに差し替えます。

ステップ6：本番公開

本番公開のスケジュールをもとに、一般公開処理をします。

サイトリニューアルの場合、以前のサイトは万一のためにバックアップで残しておきます。

事前準備

新規ドメインを取得、もしくは既存ドメインを移管します。新規ドメインの取得は即座に可能ですが、ドメインの移管は1〜2週間ほどかかるので実際にはプロジェクト開始と同時になるべく早い段階で終わらせておきます。

ウェブサイト環境構築

ステージングから本番サーバーへとデータを移行します。移行するデータはWEBサーバー内のドメインディレクトリのデータとデータベースのデータです。また、移行時にサイトURLが変わるのでデータベースのサイト内URLを全て置き換えます。

ウェブサイト設定追加

常時SSL化、index設定、OGP設定、スニペット入力、各種Googleタグ設置、reCAPCHA設定、アナリティクスコンバージョン設定といったウェブサイト公開時にしておくべき設定やタグ設置をします。

評価/検証

プロジェクト担当外のコーダーによって、専用のチェックシートでテストします。

サイトの設定は間違いや漏れがあると取り返しがつかないことになりかねないため、必ず別の担当者が確認するようにルールづけています。

納品

公開したウェブサイトの管理マニュアルを作成し、クライアントに共有します。

また、問い合わせフォームなどのフォーム機能を備えている場合は、クライアントを交えて実際にフォーム送信するテストを最後に行います。

おわりに

ルカデザインにおけるコーディングフローは、約一年前に大幅な改定をし、経験と失敗を重ねて一年かけて調整したものになります。

現在もコーディングフローの調整は続いており、半年一年後には大きく変わっている可能性もございますので、本記事は定期的に改訂していく予定です。