会社公式ホームページはコンセプトが命!ノウハウを徹底解説!

PCやスマートフォンからいつでもどこでもインターネットに繋がっている時代の現代では、会社用のホームページはなくてはならない存在となりました。今回は、会社を立ち上げたばかりの方やHPを持っていない個人事業主の方向けに、サイトを作る目的や、それにあったレイアウトパターン、実際の制作フローについてまとめてみました。

ホームページを最も簡単に作る方法とは?メリットとデメリットも解説 | ホームページ大学

ホームページを最も簡単に作る方法とは?メリットとデメリットも解説

ホームページを作りたい!そうは思っても、作り方を知らない、何から始めればいいのか分からない、簡単に作れる方法はないの?という方もいるのではないでしょうか。そこで今回は様々なホームページ作成方法を比較し、おすすめの作り方に … 続きを読む ホームページを最も簡単に作る方法とは?メリットとデメリットも解説

会社のホームページを作る意義とは

ホームページ制作過程

Designed by Freepik

ある程度の規模の会社であればホームページを持っていない会社はほとんどないと思います。では、なぜ多くの会社はホームページを作るのでしょうか。その答えは、利益を得るためであると言えるでしょう。一口に利益と言っても、金銭的なものからそうではないものまで様々あります。例えば自社のブランドイメージを向上させるようなHPを作るのも利益に繋がるでしょうし、ECサイトを作れば直接的に売上の拡大に繋げることができます。そのように直接的・間接的問わず、より大きな利益を得るためにほとんどの会社はホームページを作っています。

まずはサイトを作る目的を明確にする

ホームページを作る上で一番重要なことは、サイトを作る目的を明確にすることです。目的が曖昧なままだと、そのWebページをみる読者に訴求ができませんし、作る意味がなくなってしまいます。そのため、まずは作り始める前にホームページを作ってどんな利益が得たいのかを再確認しましょう。

よく使われるレイアウトパターン

以前にも紹介しましたが、webサイトには定番のレイアウトパターンがあります。

HP未作成の方必見!初めて作る法人向けのホームページについて

マルチカラム

マルチカラムレイアウトの画像

シングルページ

シングルページレイアウトの画像

タイル

タイルレイアウトの画像

デザインは読者の目線を意識しよう

サイトのデザインをするときには読者の目線の動きを意識して作ると、大事な要素をどこに配置したら良いかわかりやすくなります。
読者 目の動き

Designed by Freepik

人は上の画像のような目線の動きをすることが多いです。つまり大事な要素、クリックしてもらいたい要素を左上や右上に配置することは手軽に効果UPを狙える効果的なテクニックです。

目的ごとのおすすめレイアウト

ホームページの目的別に、適したレイアウトデザインは異なります。例えば、ECサイトでたくさんの商品をユーザーに見てもらいたいはずなのに、ナビゲーションの難しいシングルページレイアウトを採用してしまったりすれば、そのホームページからは高い効果は期待できないでしょう。

商品・サービスの認知度を広げたい

きのこあかりHPのスクリーンショット
商品やサービスの認知を広げたいという場合は、コンテンツに集中してもらいやすいシングルページレイアウトがおすすめです。複数の商品・サービスを見てもらいたい場合は、サイトの階層構造を注意して作らなければいけません。わかりやすいヘッダーナビゲーションを作り、ユーザーが迷わないようにしたいですね。

直接的に特定の商品の購入を促したい

クリエイターズハイブLPのスクリーンショット
ある1つの商品・サービスを直接的に購入や資料請求を促したい場合は、ヘッダーを省いたシングルページレイアウトがおすすめです。いわゆるLP(ランディングページ)と呼ばれるものですね。LPの良いところはユーザーにその商品の必要性や有用性を、物語を読ませるように訴求できることです。また、重要な4つのポイントを押さえることができれば、大きく失敗する可能性はかなり少なくなります。

  1. ファーストビューで商品の有用性が訴求できている
  2. 次に見出しで簡潔にメリットを提示できている
  3. 安心・安全なイメージを訴求できている
  4. 購入者の声やQ%Aなどで細かい疑問を解消できている

LPを作る際にはこの4つのポイントを意識するようにしましょう。ランディングページのデザインの参考が欲しい方は下記のwebサイトを見るのがおすすめです。

複数の商品をネット上で売りたい

アマゾンHPのスクリーンショット
いわゆるECサイトの場合は2カラムかタイルレイアウトが良いでしょう。メイン部分はタイルでサイドバーをカラムにするなど組み合わせをすると良いです。カテゴリや検索などのナビゲーションも重要なので特にUI/UXを意識した設計をしていく必要があります。

ブランドイメージを確立したい

コカコーラHPのスクリーンショット
ブランドイメージの向上を目的としたホームページなら、NGのレイアウトは特にありません。商品や会社のイメージが伝わりやすいので、大きめの画像や動画を複数配置しているサイトが多いです。

情報発信をしたい

株式会社LIGのHPスクリーンショット
いわゆるブログ形式のホームページを作る場合、2カラムが一般的です。また最近ではコンテンツマーケティングやオウンドメディアといった言葉は、web界隈では一般的に誰もが知っている言葉となりました。情報発信をするサイトを作成するときに注意することは、軸となるコンセプトを決めることです。何でも屋のようなメディアではファンを作るのが難しいので、自社の商品に関連するようなものを軸とすると、効果が得られやすいかと思います。

サイト作成の手順

続いてサイト作成の流れを確認していきましょう。

①サイトの目的、コンセプト、ターゲット、ゴールなどを決める

繰り返しになりますが、サイトの目的やターゲット設定は非常に大事です。制作を始めてから後で大きな変更をしようと思ってもなかなか簡単にはいかなくなります。

②サイトに載せる情報を書き出す

何もないゼロの状態からデザインをしていくのは至難の業です。そのため、まずはサイトに載せるべき情報をとにかく書き出します。ここで書き出した情報は次の工程で使うのでグループ分けと優先順位付けも行うと良いでしょう。

③グルーピングをもとにワイヤーフレームを作る

ワイヤーフレームの画像

Designed by Freepik

②で書き出した情報を元に、ワイヤーフレームを作成していきます。ワイヤーフレームとはサイトの設計図のようなもので、要素の配置や文章など、そこまで精密なものでなくても、ざっくりレイアウトがわかれば大丈夫です。Illustratorなどのアプリを使うか手書きで作成するのが一般的です。Cacooなどのブラウザ上で利用できるサービスを使うのも一つの手です。

④ワイヤーフレームをもとにモックアップを作る

モックアップとは、ワイヤーフレームよりも詳細な表現物です。ワイヤーフレームでは記載していないような細かい要素や色合い、余白など、コーディングするとこうなる、というのが一目でわかる完成図のことをさします。

⑤コーディングをする

④で作ったモックアップを元にHTML、CSS、JavaScriptなどでコードを記述していきます。

⑥サーバーにアップロードして完了

⑤で作成したhtmlファイル等を契約しているサーバーにアップロードすれば完了です。

HP作成サービスを利用しよう

ここまでHP作成における具体的な手順を説明してきましたが、最近は無料でHPを作成できるサービスがたくさんあります。以下の記事では18のHP作成サービスをそれぞれの特徴を踏まえて紹介しているので是非目を通してみてください。

ホームページ作成サービス18選!初心者も簡単・無料で更新もできる

最後に

いかがでしたか?ホームページ作成サービスを使えばかなり簡単に作れるということはご存知の方が多いとは思いますが、何もない状態から全て自分たちで作ろうとすると、多大な労力を割く必要があることがお判りいただけたかと思います。しかし、ホームページの目的やターゲット設定、コンセプト設定などのサイトの設計に関する部分は自分たちで決めなければいけません。ぜひこの記事を参考にして、目的にあったホームページを作ってみてください!

無料でホームページを作れる「ペライチ」

誰でも簡単にホームページ作成を!「ペライチ」

HTMLやCSSでお悩みなら簡単ホームページ作成サービス「ペライチ」におまかせください。
特別な知識は必要ありません。好みのテンプレートを選ぶだけで誰でも簡単にホームページを作ることが出来ます。
誰でも簡単にホームページ作成を!「ペライチ」

ホームページ大学ライター / 趣味はギターと麻雀です。好きな役満は四暗刻。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする