【WordPress】Webサイトを制作〜納品するまでの具体的な作業内容を紹介 - サボリン

HTMLやCSSを勉強してWebサイトを作れるようにはなったけど、実際に公開するときってどんな手順が必要なの？

実際にWebサイトを公開するときってどういう流れになるのか？と疑問に思っていました。

今回の記事では過去のぼくと同じように悩んでいる方に向けて、Webサイトを公開するまでの具体的なフローについて紹介していきます。

この記事の手順に沿っていけば、ちゃんとWebサイト公開まですることができますよ。

Webサイトを公開するまでの全工程

Webサイトを公開するまでの工程は、具体的には以下のとおりです。

ワイヤーフレーム制作
デザイン制作
ローカル環境構築
コーディング
コンテンツ入稿
テスト環境共有
ドメイン・サーバー環境構築
本番環境反映

STEP①：ワイヤーフレーム制作

まずはWebサイトの骨組みとなるワイヤーフレームを制作します。

ワイヤーフレームとは簡単にいうと、『デザインの簡素版』のことで、ページのどこに何を配置するか定義するものです。

簡素版なので実際の画像やテキストなどはまだ必要なく、あくまで「このページのここにはこれが配置されるんだな…」というイメージを共有するための工程です。

この段階を飛ばしてデザインを制作することも可能なのですが、最初に方向性を確認してから細部を調整した方が修正も少なく、効率的に作業を進められます。

一気にデザインを制作したもののクライアントの意向と違ったので全て作り直しなんて、考えたくもないですよね…

ワイヤーフレームを制作するには、以下のような方法があります。

①ペーパー

シンプルに紙などに手書きで作成する方法です。

制作するスピードが一番早いため、大幅に制作工数を削減できます。

ミーティングの場でも、柔軟に編集できるメリットも。

ただデータで作成した時に比べてどうしてもラフな印象になるため、完成度を求めるのであれば他の方法を検討しましょう。

②PowerPoint

プレゼンなどの場で使う印象が強いツールですが、ワイヤーフレームとしても使えます。

後述するAdobeのXDなどと違ってどんなクライアントでもPCに入っている可能性が高いため、フォイル共有による修正や変更がしやすいメリットがあります。

逆にMac環境にインストールするにはコストがかかるため、デザインだけに使うのであれば他ツールとの比較も大切です。

③AdobeXD

最後に紹介するのが『Adobe XD』です。

Adobeが提供している有償のサービスですが、もし使えるのであれば一番オススメなツールです。

実際のPC画面、スマホ画面を想定したアートボードを作成でき、テキストや画像を直感的に配置できます。

余白なども簡単に設定できるため、実際のWebデザインのイメージを正確にクライアントと共有することが可能です。

STEP ②：デザイン制作

次は作成したワイヤーフレームに沿って、デザインを作成していきます。

普段、私たちが実際に目にするWebサイトは、このデザインがコーディングされたものです。

画像やテキストの配置、余白、使用するフォントなどを定義していきます。

予算感にもよりますが、ここで

デザイン制作に使用するのは、以下のツールが主流です。

有料：XD

無料：Figma

ぼくはPhotoshopなどの連携が便利なこともあり、XDを使用しています。

ローカル環境構築

実際にWebサイトを作成していくため、作業PC内にコーディングを反映するための『ローカル環境』を構築します。

『ローカル環境』とは、外部には公開されない個人のPC内に作られた環境のことです。

エディタで編集を行いローカル環境に反映しながら、Webサイトを作成していきます。

・初めてローカル環境を構築する人

WordPressはPHPという言語で作られているため、対応したソフトをインストールする必要があります。

・PC内でローカル環境を構築する人

一度でもローカル環境を構築したことがある人はアプリのインストールは済んでいるので、以下の手順で環境構築を行います。

具体的には

データベースを新たに作成

WordPressを導入

の手順です。

コーディング

実際にコーディングを行なっていきます。

効率的にコーディングを行なっていきたいのであれば、sassやBEM記述がオススメ。

詳しい方法については後日別記事で紹介します。

コンテンツ入稿

画像素材やテキスト素材を入稿していきます。

テスト環境共有

クライアントに見せる時はいきなり本番環境に反映するのではなく、一旦テスト環境にアップして確認してもらうのが一般的です。

テスト環境はどちらが用意しても良いのですが、基本的にはこちらで用意した方がスムーズにいくことが多いでしょう。

もしこれからサイト制作案件をとっていくなら、個人用のドメインとサーバー環境をひとつ持っておくことはオススメです。

テスト環境で共有するときに注意するべきことがいくつかあります。

・プラウザチェックや表記の認識を擦り合わせておく

・プラグインなどで第三者が閲覧できないようにしておく

・サイトがクロールされないように設定しておく

詳しくは別記事にて紹介させていただきます。

ドメイン・サーバー環境構築

クライアントの確認が終わったら、いよいよ本番環境に反映する工程です。

なお時間がかかると予想される場合は、この工程がもう少し前の段階に移行することもあります。

既に存在するHPのリニューアルやページ追加などの場合は、この工程は必要ありません。

本番環境反映

実際に本番環境に反映していきます。

移行方法はいくつかありますが、新規ドメインなどであれば以下のプラグインを使って行うのが一番簡単かつ確実にテスト環境を反映できます。

『All-in-One WP Migration』

公開後はリンク切れやテスト環境のリンクが残っていないか確認することを忘れないようにしましょう。