ホームページの作り方を解説。家を建てるイメージで考えることが重要

Webサイトの制作をする際には家を建てるイメージWeb制作

Webサイト制作について、Webにあまり詳しくない人に説明する際にはよく家を建てる工程を例えにして説明する事が多いです。

これが結構わかりやすくて「なるほど~」というようなリアクションが返ってくることもしばしば。

制作会社の人であればWebリテラシーの高くないクライアントとの打ち合わせでも「家を建てる」イメージをもってもらえれば話はより伝わりやすくなります。

今回はWebサイト制作を建築に例えて紹介しますね。

1.ドメインを取得する

ドメイン

出典:Freepik

ドメイン取得は家で例えると「住所」を明確にする事と同じです。

〇〇県〇〇市〇〇丁目・・といったようなサイトの住所となるのがドメインになります。

yahoo.co.jpというドメインもYahoo!というサイトの住所となる訳です。

2.サーバーを用意する

土地

出典:Freepik

サーバーは「土地」をイメージすると良いです。

大きく立派な家(Webサイト)を建てたいのであれば大きな土地(サーバー)を用意しなければならないし、データーベースを構築したいなどの要望があればそれは基礎工事の部類になってくる。

いずれにしてもこの基盤となる工程をおろそかにすると後々手戻りが発生したり、余計な出費が発生してしまったり家造りが進まなくなってしまうので、予め企画の段階でしっかり要件を固めておく必要があります。

3.ワイヤーフレーム(情報設計)を作成

設計

出典:Freepik

ワイヤーフレームを作成するという事は、家造りで言うところの設計図をつくる事と同じです。

Webサイトの設計図=ワイヤーフレームになります。何階建ての家でキッチンはどこに設置してリビングはどこに配置するのかなどを設計する工程です。

この工程もとても大切で、一度深く設計を作ったあとで急な変更や仕様変更を行うと大変です。

手戻りややり直しを避けるためにもワイヤーフレーム制作段階でしっかりレビューをしておくようにしましょう。

4.デザイン制作

デザイン

出典:Freepik

デザイン制作に入ると内装や外装工事と同じ工程になります。

壁や屋根の色はどうするのか。どのような素材を使うのか。家の外観・内観を作り込んていく工程です。

5.コーディングでページを組み立てる

コーディング

出典:Freepik

コーディングは大工さんの仕事です。

骨組みを組み立てて、家の構造を構築していく工程になってきます。

コーディングがスキルが高い人ほど無駄な材料は使わずシンプルで早くキレイに骨組みを組むことができます。

また、CSSでデザイン(装飾)を付け加えることが出来ます。

6.プログラムミング・システム構築

プログラミング

出典:Freepik

プログラミングは水道をひいたり、蛇口を捻ったら水が出てくる仕組みを作ったり電装工事を行う工程です。

スイッチを押したら電気が点く。すなわちWebでいうとボタンを押したらアコーディオンUIが機能する、ボタンを押したらメニューが開くなどの動的な動きを実装したり、仕組みを作る工程になってきます。

7.検証・納品

チェック

出典:Freepik

最後に完成した家に問題・不備がないか細かいところまでしっかりチェックして、お客さんに確認してもらい納品となります。

Webの場合はその後に運用というフェーズに入っていくわけですが、まずはイチからWeb制作をする場合にで言うと1~7までの工程を踏むことになります。

※Webの場合、実際の建築工程の順番とは異なります。

まとめ

いかがでしたでしょうか。

家造りに例えるとなんとなくわかりやすくなったと思います。

ちなみにWebディレクターは現場監督という立場に置き換えられるでしょう。

各工程でそれぞれのスペシャリストが活躍して一つのWebサイトが出来上がっていくのです。家も同じです。

もし制作工程やフローに迷いが生じた時や誰かにWeb制作を説明する際は家造りの工程を思い出してください。

自然と噛み砕いた説明が出来るようになりますよ~^^

コメント

タイトルとURLをコピーしました