ホームページ制作って何してる？制作の裏側をちょこっとご紹介
「ホームページってどうやって作ってるの？」
「パソコンでカチャカチャしてるだけじゃないの？」
「テンプレートに当てはめるだけでしょ？」
「今の時代簡単に作れるでしょ？」
…そんな声を聞くことがあります。
たしかに、今の時代はテンプレートを使って簡単に作れるツールも増えましたが、
お客様に合わせて一つずつ丁寧に仕上げるホームページ制作には、
実はたくさんの工程と時間、そして技術が詰まっています。
今回、僕が普段お客様からご依頼をいただいてから、
実際に公開するまでにどんなことをしているのかを、ざっくりとご紹介します！
STEP1：初回ヒアリング＋素材の受け取り
まずは初回の打ち合わせです。
事前に業種や業界の情報を調べたうえで、下記のようなポイントをお聞きします。
●会社やサービスの強み、特徴
●ライバルとなる他社の情報
●ホームページを作る目的（集客？採用？信頼性向上？）
●全体のイメージや雰囲気、好み
●採用に関する情報
●奇麗だなあ格好良いなと思うHPなど。
上記以外にもお客様によって色んな事を聞きます。
このヒアリング内容をもとに、サイト全体の構成や導線を考えていきます。
STEP2：ラフデザインとサイトマップ案の作成
ヒアリングが終わったら、紙と鉛筆で下書きをつくります。
そして、大体な下書きができたら、デザインソフト「Figma」を使って、
まずはトップページのレイアウト案を画像として制作します。
この段階で、事前にいただいた写真はPhotoshopで明るさや構図を整えるなど、
見栄えを意識した画像調整も行います。
ちなみにフォトショップで明るさを調整するだけでこんなに変わります！
この写真はノーコメントでお願いします！笑
他にも被写体の切り抜きや写真に紛れている不要なものを除去したり、
背景をぼかしたり、写真はめちゃ大事なので色んな作業もおこないます。
STEP3：デザイン確認と二度目の打ち合わせ
トップページのラフデザインが完成したら、
お客様と再度打ち合わせを行い、イメージにズレがないか確認します。
修正や変更のご希望があれば対応し、問題なければその他のページ（下層ページ）へと進みます。
この段階で、ドメイン取得の希望なども伺います。
※ドメインとはhttp://〇〇〇.comのようなインターネット上の住所になり独自に決める名前です。
STEP4：その他ページ（下層ページ）のデザイン作成
トップページと同様に、
-会社案内
-採用ページ
-サービス紹介
-実績ページ など、必要な下層ページもFigmaで作成し、お客様に提出します。
全ページにOKをいただいたら、いよいよ実装（コーディング）に入ります！
ちなみに文章などもお任せであれば、全部こちらで叩き台を作ります！
STEP5：コーディング作業
コーディングとは、HTML・CSS・JavaScriptなどのコードを使って、
デザインをブラウザで動くように仕組み化していく作業です。
簡単に言うと、
「文字を大きくしたい」
「行間をあけたい」
「この画像をこの位置に表示させたい」
「ここの画像を5秒ごとに切り替わるようにしたい」
「スクロールしたら項目がふわっとでるようにしたい」などを全部コードを書いて調整していく作業です！
この工程だけで2〜3日かかります。 実際のWebページとしての”形”をここでつくっていきます。
大体2000～3000行は書きます！
余談ですが、この作業を見た嫁さんに「この時代にこんな原始的な事するの？」と言われました！笑
皆さんが見てる色んなHPの裏側にこういうコードが存在します！
STEP6：コーディング後、さらにphpというプログラミング言語へ書き換え
コーディングしたページを、 お客様自身が更新できるように「WordPress」というシステムに組み込みます。
お知らせやブログ、実績紹介などをお客様側で追加・編集できるようにするための大事な工程です。
ワードプレスに組み込むために一度書いたコードをさらにphpというプログラミング言語へ書き換えします！
専門用語では「CMS連動」と呼ばれます。
ちなみに僕が勉強し始めた時に一番心が折れそうになった工程です＞＜
今でも原因不明のエラーと日々格闘しています！
STEP7：ドメイン取得＋サーバーアップ
ここでようやくホームページの形が整います！ サーバーにデータをアップロードし、ドメイン設定も行います。
その後、お客様に最終確認をしていただき、問題がなければ公開作業に進みます。
STEP8：大安日に公開！
完成したホームページを急ぎでない場合に限り大安など縁起の良い日に合わせて公開します！
とはいえ、ここで終わりではありません！
STEP9：公開後の各種設定
公開直後には、以下のような作業を行います。
・セキュリティ設定（不正アクセス対策）
・Googleへサイト登録申請（検索結果に早く出るように）
・お問い合わせフォームのテスト送信
・メールアドレスの発行・設定（希望がある場合）
・パワーポイントで操作マニュアルの作成
公開してからも何気にやることが多く、普通に１日掛かります！
STEP10：アフターフォロー
公開後、操作説明や更新方法のご案内を行い、
最後に請求書をお渡しして、無事に完了です！
ありがとうございます！！
さいごに｜ホームページ制作は「共同作業」
ここまで読んでもらったらわかると思いますが、結構大変なんです！
全行程完了まで早ければ1か月、時間が掛かれば3か月くらいかかることもあります！
しっかり作ろうと思えば色んなスキルが必要で、
・デザインソフト（Figma, Photoshop）
・プログラミング（HTML, CSS, JS, PHP）
・サーバーやドメインの知識
…などのスキルが必要になってきます。
今の時代お洒落なテンプレートを使って可愛く格好良く手軽に作ることも可能ですが、
テンプレートは建売住宅のようなもので痒いところに手が届かないんですよね！
長々と失礼しました。
色々書きましたが、一番大事なのは、「お客様と一緒につくる」という意識です。
ちなみにお客様とのやり取りは、
・デザイン確認はメール
・素材の受け渡しや軽微なやり取りはLINE など、柔軟に対応させていただいています。
これからホームページを考えている方も、 「どんな流れなのか不安だった」という方も、
ぜひお気軽にご相談ください！
