コード・実装

WordPressでお客様のHPを作成する流れ

普段、WordPressを使ってサイトを作成しています。

既存のテーマを使わず、一からデザインを作成し、自作のWordPressテーマを作っています。

今回は、私が仕事をする時の一連の流れを書いてみようと思います。

01 まず初めに、ヒアリング

お客様からどのようなサイトを作りたいか、お客様の会社がどのような事業や想いを持っているかをヒアリングして行きます。

ヒアリングをするに当たって、どのような質問をするかは事前に考えておきますが、どちらかというと、お客様にヒアリングシートを記入してくださいというよりも、打ち合わせで話していく中で聞いていただいて、話を膨らましたりしていただく材料のイメージです。

制作する上で、お客様のことは知りたいので個人的に重要だと思う優先順位は 【お客様の事業について】 ≥ 【サイト制作について】 > 【デザインについて】です。

そのため、最初からどんなデザインや色がいいですか?と聞くよりも、最初にどのような事業をしているのか、どのような想いで携わっているのかをお聞きし、質問事項を元に話を膨らませ、最後の方にもしご希望の色やデザインなどを提案も含めながらお聞きするイメージです。

 

02 デザイン

ヒアリングを元に「Adobe XD」でデザインをしています。

数年前はイラレでやっていたのですが、現在はもうXDでないとやりづらくなってしまいました。

 

まずはTOPページのデザインをお客様に確認していただいて、ご了承いただいてから下層ページのデザインを作成します。

どのようなデザインやページ数にもよりますが、だいたいTOPページのデザインを1週間、下層ページのデザインを1週間〜2週間で作成するイメージです。

 

 

03 コーディング / WordPressの実装

事前にWordPressの自作スターターテーマのようなものを作っていて、それを元に、了承いただいたデザインのコーディングとWordPressの実装を同時に進めて行きます。

使用しているツールは

エディター:VS Code

ローカル開発:Local by Flywheel

言語:HTML / SCSS / Javascript / jQuery / PHP

 

どのようなデザインやページ数にもよりますが、1週間〜2週間でコーディングと実装をするイメージです。

 

 

04 お客様の確認 / 公開

確認用のテストサイトに上記ローカル環境で作成したサイトをアップします。

(その際のプラグインは、All in one migrationを使用しています。)

ご了承いただいたら、公開用のサーバーにアップし、完了です。

 

 

最後に

いかがだったでしょうか?

かなりざっくりと流れを記載してしまったので、後ほど各過程の詳細の記事もアップしようと思います。

ABOUT ME
WEBクリ開発者
当ブログでは主にWeb制作・HTML・ CSS・SCSS・JavaScript・jQuery・Vue.js・Wordpress・個人開発情報の情報を発信。 WEBデザイナー・コーダー・プログラマー向けのサイトです。 また、個人開発のサービスやアプリのお知らせもさせていただいています。

未経験からでも技術を学べる

Udemy

Udemyとは、100,000以上の講座があるオンライン学習プラットフォームです。主に社会人が対象で、教えたい人が講座を開き、学びたい人が学ぶことができます。

何か新しいプログラミング言語を勉強したい。技術を習得したいという時に、Udemyはおすすめです。

動画学習のため、最初につまづきがちな環境構築も実際の画面で確認しながら、自分で動かすことができます。

 

世界最大級のオンライン学習サイトUdemy