今回、三重県桑名市のガラス施工業者である株式会社 川瀬硝子店様のWebサイト制作をさせていただきました。

制作を担当した増田です。

川瀬硝子店様は、割れた窓ガラスの交換やサッシの取り替えを始め、玄関の取り替えやキッチンの取り替えまで、おうちのお困りごとに幅広く対応できるそうです。

今回はWebの窓口としてWebサイトを制作されたいとのことでご依頼をいただきました。

この記事では、制作にあたり意識したことや技術的な解説をさせていただきます。

企画

企画段階で、ヒアリングをもとにWebサイトの目的は大きく以下の2点だと考えました。

・ユーザーがWebサイトからお問い合わせができること（お問合せ数を増やすこと）
・Webサイトを見て、お店の所在地がわかること

上記を踏まえると、Webサイトに持たせる機能として必要な機能は以下のようなものだと考えられます。

・お問い合わせフォームがある
・ユーザー視点で見やすい
・お問合せフォームへの導線が明確
・SEOに強い
・広告用のLPとして成立する

以上のことを意識して、コピー、デザイン、コーディングを行なっております。

デザインについて

コーポレートサイトとしても広告用のLPとしても使用できるような内容とデザインを意識しています。

ユーザー起点の悩み事や困りごとと川瀬硝子店様ができることが一致している（解決できる）かがわかり、かつWebサイト内でお問合せができる設計です。

また、お問合せボタンをPCの場合は画面右側に、スマホの場合は画面下部に固定で配置し、お問合せのタイミングをユーザーに委ねられる設計です。それ以外にも、クリックを促せるように随所にボタンは設置してあります。

エンゲージメントについて

集客に向けのコーポレートサイトやLPにとって重要な要素の一つに、「エンゲージメント」があります。

エンゲージメントとは、サイトにアクセスした後にスクロールしたりボタンをクリックしたりといった、ユーザーのアクションのことを指します。

エンゲージが高いサイトは、サイトへの滞在時間が長くなったり、ボタンクリック数が多かったりします。

エンゲージを高める施策として今回意識していることは以下のようなものです。

・ストレスなく縦にスクロールできるようなデザイン
・スクロールを促す適度なアニメーション
・写真とテキストのバランス
・クリックを促すボタンデザイン

「広告用のLPとして使用できること」を意識した理由

今後、広告を運用したいとなった場合に、新規でLPを作成するとなると費用がかかってしまいます。
トップページがLPとして機能することで、広告立ち上げ時の費用を大きく抑えることができるため、LPとしても機能するように設計をしました。

サイトの汎用性という意味で機能する設計は無駄なコストを抑えつつ、使い勝手の良さも実現できると考えています。

技術的な解説

WebサイトはWordPressというCMSを用いて制作しております。

今後、「お知らせ」や「施工実績」といった投稿をされていきたいと希望もございましたので、投稿機能が優れているWordPressを用いました。また、WordPressテーマ『SWELL』をカスタマイズしています。

SWELLを使用することで、HTMLコーディングなしで下層ページの作成などができ、運用コストの削減につながります。

以下、主な技術的な要件です。

・WordPress
・SEO内部対策を意識したHMTL ,CSSコーディング
・レスポンシブ対応
・jQuery
・PHP
・GA4によるサイト分析

まとめ

以上が川瀬硝子店様 Webサイト制作の企画・技術的な解説となります。

Webサイトは制作する目的によって、テキストの内容もデザインも必要な機能もかなり変わってきます。
そのため、お客さまへのヒアリングを徹底し、Webサイト制作の本当の目的をすり合わることが最も重要です。

ヒアリングで必要なものと不要なものを明確にすることで、無駄な費用や制作時間などのコストも大幅に削減できます。

私は常に、目的と費用感のそれぞれの理想とバランスを意識して制作に取り組んでいます。

「Webサイトを作りたい」「Webサイトを作り直した」などございましたら、お気軽にご相談ください。

また、Webサイトの他にも、

・広告を始めたい
・Instagramの運用を強化したい
・SEO対策をしたい

などWeb集客のご相談も受けたわっております。

ご相談は無料で行なっておりますので、まずはお気軽にご相談ください。

 

お問合せフォームからご相談

 

増田にInstagramから直接DMでご相談

 

制作クレジット

 

Webサイト内の写真撮影

カメラマン：秦 竜平さん

Instagram：https://www.instagram.com/pasha_ta522/?hl=ja
Webサイト：https://hahaha0522ta.myportfolio.com/work

 

川瀬硝子店様 ロゴデザイン

デザイナー：さいちゃん さん

Instagram：https://www.instagram.com/saichan_solely_orchestra/?hl=ja

企画・サイトデザイン・コーディング

増田陸人

Instagram：https://www.instagram.com/rikuto_m0628/?hl=ja
Webサイト：https://newcrop.jp/

モックアップ

著作者：denamorado／出典：Freepik