【Web制作】Webサイト制作の裏側を公開します

Webサイト制作の裏側を公開します

今回は、Webサイトのデザインから制作、運用管理まで一括で引き受けた脱毛サロンRêve（レーヴ）のホームページ（https://datsumousalon-reve.com/）の制作過程を公開します。
※クライアントから許可を取っています。

実際の流れを知ることで、Webサイト制作の依頼者の方やWeb制作を学習している方の参考になればと思います。

制作の流れ

まず、全体のおおまかな流れについて箇条書きで記しておきます。

• 依頼内容のヒアリング
• デザイン提案、修正
• Webサイトのコーディング
• ドメイン取得及びサーバー設定
• Webサイトの公開、最終確認及び修正
• サイトの使い方のレクチャー、納品

それぞれの項目について、詳細を以下で解説していきます。

依頼内容のヒアリング

依頼の目的を明確にする

最初のステップであり、最重要ステップです！！

Webデザインにしろ、Webサイト制作にしろ、まず目的を明確にしなければなりません。でないと、制作途中でやり直しする羽目になったり、依頼者の方とトラブルになる原因となります。

ヒアリングする具体的な内容

依頼を受ける際は、依頼者の方に最低でも以下の項目についてヒアリングしています。

項目によっては、決まっていない場合や分からない場合もあります。その際は依頼者の方と相談し、方向性を決めていきます。

基本事項

• 依頼の目的（例：新しくオープンした脱毛サロンのHP制作）
• 依頼の内容（例：サイトのデザインから制作、管理まで全て）
• 予算及び納期（例：できれば安く/12月のオープンまでに）

最終的な契約の内容にも直結する重要事項です。依頼の背景を知り、最適な制作プランを考えます。

Webデザインについて

• Webサイトに欲しい項目（例：メニュー、お知らせ、店舗情報、連絡先等）
• デザインイメージ、参考サイトの有無（例：参考サイト有り）
• サイトのページ数、階層構造（例：トップページ1枚でOK）
• 使用したい色、写真、その他希望事項（例：店内写真の利用）

デザイン案を作るにあたり必要な情報を集めていきます。一切情報がない状態から始めると、なかなか依頼者の方の希望にマッチしたデザインを作れず、無駄な時間を要してしまいます。

コーディング（Web制作）について

• Webサイトに欲しい機能（例：お知らせ投稿機能）
• スマホ表示対応の要否（例：必要）
• アニメーションの希望（例：派手過ぎない程度に）

完成したWebサイトをどういう形で運用していくかによって、最適な制作方法も変わってきます。自分で定期的に記事を更新したい、数ヶ月に一回サイトの一部編集を依頼したい、といった具合に依頼者それぞれの希望があります。

また、スマホの小さい画面表示に対応させるか、アニメーションを付与してページに動きを付けたいか等も、コーディング作業を行うにあたり必要な情報です。

デザイン提案、修正

デザイン案の制作

依頼内容のヒアリングの結果を踏まえ、デザイン案を作っていきます。

Webデザインを制作するツールとしては、Adobe XDとFigmaが有名ですが、私はXDを使っています。

今回の依頼内容・要望をまとめると、以下の通りです。

• 新規オープンする脱毛サロンのホームページ制作
• トップページのみでOK
• 店内写真、店の説明、メニュー、Q&A、営業時間と場所、お問い合わせを掲載
• SNSのリンクも掲載
• 詳細なデザインイメージ、イメージカラーは特になし。お任せ

まとめると、「希望する内容が掲載されていれば、残りのデザインはお任せします」といった具合の依頼内容です。

こうして出来上がったデザイン案Ver.1はこんな感じです。
（あまりにも画像が縦に長いので、別ウィンドウで開くようにしています。）

デザイン案の修正

出来上がったデザイン案を依頼者の方と共有し、希望するデザインとなるよう修正を加えていきます。

デザイン案Ver.1に対するフィードバックは以下の通りです。

• 店内写真のレイアウトが単調
• メニュー毎の画像は不要、メニューの説明欄も小さくて良い
• 一番のオススメメニューを黒背景で目立たせたい
• お知らせ投稿機能も設けたい

これらの要望を踏まえてデザイン案を修正し、デザイン案Ver.2が出来上がりました。
（あまりにも画像が縦に長いので、別ウィンドウで開くようにしています。）

最終的には、このデザインでホームページを制作していくことに決まりました。

Webサイトのコーディング

Webサイト制作方法の決定

まず初めに、Webサイトの制作方法を決めます。

大きく分けて制作方法は「HTMLのみを使った制作」と「WordPressを使った制作」の2つがあります。それぞれの特徴と選ぶ基準は以下の通りです。

先に結論を述べると、今回は「WordPress」を使って制作しています。理由は後述します。

HTMLのみを使った制作

HTMLで作ったWebサイトは「静的サイト」と呼ばれ、動作が軽くページの読み込み速度も速めです。ただし、サイトの編集や更新がしたい場合には、コードを触らなければなりません。

つまり、プログラムコードを編集できる知識を持った人しかサイト内の記事の更新等は出来ません。

Webサイトの編集や更新を行う頻度が少なく、その際は毎回エンジニアに依頼するという場合は、この制作方法を用いることが多いです。

WordPressを使った制作

WordPressとは、オープンソースのCMS (Contents Management System)で、世の中の数多くのWebサイトはこのWordPressを用いて作られています。

「静的サイト」に対し、WordPressを使って作られたWebサイトは「動的サイト」と呼ばれます。

CMSとか動的サイトとか難しいことは置いておきましょう。簡単に言えば、プログラミングが分からない一般の人でも、簡単に編集や記事の更新ができるようになります。

今回は「お知らせ投稿機能」を設け、自分でお知らせ記事を投稿したいという要望があったため、WordPressを使ってホームページを制作することにしました。

コーディング作業

ここでようやくコーディング作業です。

コーディング(Coding)とは、Webサイトを構成するために必要なプログラムのコードを書いていく作業です。作業自体はパソコンを見ながらキーボードをカタカタするという非常に地味な作業なので、特に解説することはないです…

今回の内容であれば、1週間程度で作業完了となります。

出来上がれば依頼者の方と共有し、デザイン通り、要望通りに仕上がっているか確認します。

補足

実はWebサイトが完成した後に、ロゴ制作も依頼され制作したのですが、ロゴの色とヘッダー・フッターの背景色が同系でロゴが見にくいという問題に当たりました。

その結果、現在のサイトのヘッダー・フッターにはデザイン案とは違う濃いめの背景色を使用しています。

ドメイン取得及びサーバー設定

サイト公開の準備

出来上がったWebサイトをインターネット上に公開するための準備をしていきます。

Webサイトをインターネットにアップするためには、「ドメイン」と「サーバー」が必要です。

ドメインはインターネット上の住所、サーバーはインターネット上の土地と例えられ、両者とも利用料が掛かります。

大抵の場合、一般の方は用意していないものなので、私の方で手配し利用料も格安にして提供しています。

ドメインは好きな文字列を選べる

補足ですが、「ドメイン=サイトのURL」となるので、依頼者の方に好きな文字列を選んでもらいます。

今回は「datsumousalon-reve.com」としたので、ホームページのURLは「https://datsumousalon-reve.com」になりました。

Webサイトの公開、最終確認及び修正

サイトをインターネット上で公開

Webサイト、ドメイン、サーバーの準備が整ったら、いよいよインターネット上でそれを公開します。

公開する際にはFTPツール(FTP: File Transfer Protocol)というものを使って、サーバー上の目的のドメイン下に必要なファイルをアップロードしています。

おすすめはFFFTPもしくはFileZillaです。操作性はほぼ同じです。

サイトの最終確認及び修正

サイトについては完成した段階で一度チェックしていますが、インターネット上にアップしてみると意外とバグが見つかったりするものです。

また、使用しているブラウザやデバイスによっても微妙に見え方が変わり、想定していたものと異なる場合があります。

最後にそういった細かい部分の確認と修正を行います。

サイトの使い方のレクチャー、納品

サイトの使い方のレクチャー

今回の依頼では、WordPressを使ってホームページを制作し、お知らせ投稿ができるようにしてあるので、そのやり方を依頼者の方に教えます。

簡単に記事投稿ができるとはいえ、初めて触るものは使いづらいし抵抗感がありますからね。

私に依頼して下さった方には、やり方が分からなくなった場合にいつでも聞けるようなサポート態勢を提供しています。

納品

サイトのログインID、パスワード等を渡し、これにて納品完了です。

おわりに

Webサイトを制作するとなると、どうしても制作作業に目が行きがちですが、実際最も重要なのは依頼者の方の依頼内容をヒアリングし、最適な制作方法を吟味する過程です。

やはり他人がイメージしているものを正確に汲み取るということは難しいからです。

今回紹介した内容が誰かの参考になれば嬉しく思います。

最後に少し宣伝させてください。

Color Pieceでは、パズルのピースが互いに繋がり合うように、新たな顧客や仲間と繋ぐWebサイトを制作しています。事業や活動において重要なピースであるWebサイトにそれぞれの色を与え、多くの人を惹きつけ楽しめるような制作を目指しています。

依頼希望の方は、お問い合わせフォームもしくはTwitter、InstagramのDMから連絡をお願い致します。