こんにちは！

福岡県北九州市の夫婦２人のホームページ屋さん「ごりらデザイン」の村上勝平です。

この記事はホームページ制作やリニューアルを依頼したい方に向けた記事です。

私は現在の仕事になる前、建築会社で企画や設計をしていました。

（内容は戸建て住宅からマンション、工場・倉庫や事務所、薬局まで多岐に渡ります）

そんな私がWeb業界に入って仕事をするうちに感じたことがあります。

「あれ？ホームページ制作の過程や注意点って家・建物づくりに似ている？？」

一見すると、二次元と三次元で正反対のことのように見え、意外に感じられる方もいるかもしれません。

ですが、お客さまへの説明の際にホームページ制作を家づくりに例えてお話すると、皆さん合点がいったような顔をします。

流れや注意点の理解が円滑な制作と骨太なホームページ制作にもつながります。

ぜひ読んでいただけたら嬉しいです。

※以下、ホームページを「HP」と表記します。

企画から完成までの流れと工程の区切り

企画

企画の段階はHP制作も家づくりでも最も重要と言えます。

調査やヒアリングを通して、企画を練ります。

この時に重要なのは「情報の整理。目的の明確化」です。

家においては、家族構成や働き方などのライフスタイルによって必要な広さや動線、設備などが決まってきます。

「どんな人たちが、どんな風に住むか」がわからなければ、どんな家が最適かはわかりませんよね？

これと同じで、

「どんな事業・サービスが、どんな人向けに、どのような効果をもたらしたいか」がわからなければ、最適なHPやサイトは作れないのです。

家の場合はよく調べ、ある程度イメージを膨らませてから相談する方もいらっしゃいますが、HPとなると自分だけではうまくいかないことが多いです。

「今って、ノーコードツールとかいってプログラミングができなくてもHPはすぐに作れるんでしょ？」

という声が聞こえてきそうですが、そうではないのです。

DIYで棚が作れることと、家が建てられることくらい違います。

※私たち制作者も様々な条件を鑑みて、ノーコードツールを使うことはあります。

作るだけなら簡単にできる時代になっていますが、骨太で効果的なHP制作にはやはりプロの力を借りることをおすすめします。

設計

企画の次は設計です。

建築においての設計は、「洗い出した条件や法規に基づいて間取りを決めて図面を引く」ことだと考えてください。

HP制作における設計とは、「情報を構成すること」です。

「どのページにどんな内容を掲載するか？」

「HPの閲覧者にとってストレスがないか？」

「伝えたい情報/得たい情報が正しく届くか？」

などを検討し、サイト内のコンテンツについて考えます。

この時、白黒でできたサイトの設計図＝ワイヤーフレームというものを作成し、お客様と打ち合わせます。

色や動き、画像は入っていません。

あくまでも掲載する情報の内容や、流れ、ページ間の関連性を確認するためのものです。

家の場合は家主の好きに作ることもできますが、HPの場合はそれに加えてお客様や閲覧者のことも考えながら設計します。

その観点では店舗や施設の設計に近いかもしれません。

HPである以上、閲覧するお客様・ユーザーがいるのですから置いてきぼりにならないような情報設計が重要です。

この段階をおろそかにして進めると、見た目だけ・形だけのHPになりがちです。

デザイン＝内外装の仕上げ選定

情報設計が済んだら、次はデザインです。

ひょっとしたらお客様が一番ワクワクするところかもしれません。

家では壁紙や床材などの内装仕上げ、外壁や屋根の外装仕上げを選定する段階です。

HPでは完成したサイトをどのような見た目にするかを検討する段階です。

HPのデザインをお見せする資料のことをデザインカンプと呼びます。

建物でいう外観・内観パースのような位置付けです。出来上がりを想像するもののことですね。

そのデザインカンプを使って、イメージのすり合わせを行います。

「デザイン」と聞くと見た目・ビジュアル的な良さをイメージすることが多いかもしれません。

しかし、デザインは見た目だけでなく、情報の伝達やユーザーエクスペリエンスにも深く関わります。

見た目の美しさだけでなく、機能性や使いやすさも考慮されるべきです。

パッと見た時の雰囲気はよくても、情報が正しく伝わらなかったり、与えたい印象とズレていたら意味がないですから。

この点は「設計」にも共通する点ですね。

冒頭に「情報設計が済んだら、デザイン」と書きました。

例えば、間取りや計画が変われば、建物の形が変わるように。

情報量や構成が変われば、デザインで表現できることや伝わりやすさや与える印象も変わるためです。

そのため、余分な工数や費用をかけないためにも、設計終了時にはしっかりと確認し、一区切りつけることが必要です。

一区切りつけたあとであれば、大幅な情報の変更は起こりにくいでしょうから。

とはいえ、初めてつくるお客様には設計図から完成図を想像するのは非常に困難です。

HP制作を依頼するときは、対話をしっかりと行う制作者を選ぶと良いでしょう！

コーディング＝施工

よし！間取り＝情報を決めた！デザイン＝仕上げを決めた！

となれば、次はいよいよ実際に作る工程です！

家など建築物では施工といわれますが、HPなどのWebサイト制作ではコーディングと呼ばれる作業です。

多くの方にはプログラミングといった方が馴染み深い響きかもしれません。

デザインの通りにパソコンやスマホにサイトが表示させるための、コンピュータへの指示書のようなものを書く作業です。

ここまで区切りや段階を強調してきましたので、予想がついた方もいらっしゃるかもしれません。

そうです。このコーディング段階での情報設計やデザインの変更は大事故のもととなります。

ここでも家で例えますが、この段階での変更は

「施工をストップし、更地にしてほぼ設計からやり直しにしないと実現不可能な内容になりかねない」

と言ったらわかりやすいでしょうか。

書いていて恐ろしい言葉です。

無理になんとか形にしたとしても、チグハグな動線や見た目では家もHPも本当に使う人のためにはなりませんから、時には更地にする覚悟も必要かもしれませんが…

時間もお金もさらにかかるので発注者も制作者も避けたい事態です…

公開＝竣工・引き渡し

さて、いよいよ完成です。

完成した家＝HPを作り手が自主検査。そして発注者が検査してOKであれば、お引き渡し。

HPやWebサイトでは公開し、誰でもアクセスできる状態にします。

アフターメンテナンス

引き渡し＝HPの公開を終えても、まだ大事なことが残っています。

アフターメンテナンスです。

よく「建てて終わりではなく、建てた後からが本当のお付き合い」という建築会社さんを見かけませんか？

HPでも同じです。

家もHPも定期的に手を入れ、保守や改修が必要です。

「家を建てること」が目的ではなく、「建てた家で快適に暮らす」ことが目的であるように、「HPで集客や採用促進、イメージアップすること」などの目的があります。

新たな技術やデザインのトレンドなどの変化が早く、大きいWeb業界では定期的に手を入れることは必須と言えます。

良い材料が必要

ここまで流れや過程とその時の注意点について書いてきました。

他にもHP制作と家づくりで似ている点があります。

それが「材料」についてです。

何かを作る以上当たり前ですが、家を建てる際には、適切な材料の選定が不可欠です。

「適材適所」という言葉の通り、適切な材料を的確な場所に使用する必要があります。

HPではコンテンツやデザインの質が制作の質に大きな影響を与えます。

情報や素材がしっかりと揃っていなければ、質の良いコンテンツは生み出せません。

そして、HP制作における情報・素材はお客様の中にあります。

「原稿は既存HPから拾って〜」

「そちらでそれっぽく考えておいて〜」

といった姿勢では良い情報・素材を見つけることができず、良い材料＝コンテンツに加工できません。

家の骨組みが枝でできているようなものです。

見つけた材料をどこにどう活かすかは制作者の手腕にかかっています。

しっかりとした骨組みで支えるためにも丸投げではなく、制作者との対話をおすすめします。

お忙しいとは思いますが、せっかくのHP。良いものを作って成果をあげたいじゃないですか！

まとめ

いかがでしたか？

ホームページ制作と家づくり。やはり私はつくる過程に多くの共通点があると感じます。

お客様の中にある材料を見つけ、どこにどのように活かすかを考える「企画〜設計」の工程。

その結果、どのようなビジュアルにし、正しく機能させる「デザイン」

それらの緻密に計画されたものを組み上げ、形にする「コーディング」

このように各工程は密接に関係しています。

そのため、ごりらデザインでは次の工程へ進んで良いかの意思確認をしっかりと行っています。

また、私たちはお客様との対話を重んじています。

対話を通じて、よりお客様の魅力が伝わり、良き出会いを生み出すホームページを作り出す。

お客様に良き出会いがあることで、事業を上向きにするお手伝いをしたいと思っています。

ホームページ制作をご検討の際はぜひご相談ください。