ホームページを作り始める前にやっておくべき2つのこと（ワークシートプレゼント！）

自分のウェブサイトがほしい！と思うと、すぐに作り始めたくなっちゃうのではないでしょうか？

どんな失敗かというと…

• どのように見せたいのかが明確じゃないままだったので、やりながら考えたら、まとまりのない見え方・内容になってしまった。
• あとから直したいところがどんどん出てきて、公開状態で手直ししまくってしまった。

という、ダメダメなものでした。

私はよくホームページ作りを家の建築に例えますが、家を建てるときでも「こんな家にしたいなぁ」というイメージだけで、いきなり作り始めないですよね。家族構成や家族の動きを想定し、必要な機能を洗い出して、それらを設計図にして完成状態をしっかり明確にしてから建て始めます。

ウェブサイトも同じです。作り始める前に、ぜひ下記の二つを明確にしておきましょう！

1. ホームページに盛り込む内容
2. ホームページのデザイン

どのように明確にするかについて説明していきます。

ホームページに盛り込む内容

まずは、ホームページ全体の構成を考えておきましょう。

家づくりに例えると、3LDKにするのか、4LDKにするのか、それとも3LDK+Wなのか。トイレは一つなのか二つなのか。
4人家族で子どもが二人いて、将来はそれぞれに個室を割り当てたいし、夫婦の寝室以外にそれぞれのリモートワークのスペースが欲しい…と、家族構成や生活に応じた間取りを考えますよね。

それと同じように、ホームページの構成も考えます。

1. 必要となるページを洗い出しましょう。
2. 必要となるカテゴリー（投稿の）を洗い出しましょう。
3. １と２をどのような構成でホームページに組み込むか考えましょう。
4. それぞれのページのスラッグ（URLになるそのページの名前。そのページを表す英単語の組み合わせが良い）とディスクリプション（そのページの概要を120字前後にまとめたもの）を考えましょう。

どのように洗い出したり、考えたりするか…ですが、ワークシートをご用意しましたので、それを参考にしていただけると嬉しいです。

• ワークシートは閲覧用になっていますので、コピーしてご利用ください。
• 入力用シートとサンプルシートがありますので、サンプルシートをご参照ください。

ホームページのデザイン

全体の構成が見えてきたら、どのようなデザインにするかを考えましょう！

レイアウトを考える

手書きでも、パソコンやタブレットのアプリ（パワーポイントやホワイトボード系でも）でも、ご自身が描きやすいものにまずはトップページのイメージを書いてみましょう。

全体のイメージが固まっていることで、実際の制作がスムーズに進みます。反対にイメージがぼんやりしていると、修正ばかりになって、手間と時間がかかってしまうことが多いです。

前の段落で作成したホームページ盛り込む内容の中の「最終的にこのページにたどり着いてほしい」ところを見ながら、そこにたどり着いてもらうにはどんな構成がいいのか、また、ご自身のサービスのペルソナ（顧客像）はどんなイメージが好みなのかを考えましょう。

よくあるトップページパターンをPDFファイルにしましたので、よかったら参考になさってください。

なかなかイメージが固まらない場合、下記のような参考になるウェブサイトもあります。

業種カテゴリー別や配色別にさまざまなウェブサイトを集めています。

カラーを考える

ホームページのレイアウトだけでなく、色合いを考えることも重要です。

例えば、カウンセリングサービスを提供しているウェブサイトのメインカラーが原色の赤で、それ以外に使われている色も原色ばかりだったとしたらどうでしょう。

カウンセリングが必要なほどの悩みを抱えている状態で、原色のカラーは刺激が強く、ちょっと敬遠しそうだと思いませんか？

直接対面しているわけではないので、第一印象は本人ではなくウェブサイトの印象になります。

ターゲットとするお客様が親しみやすく感じる色合いであり、ご自身のサービスにマッチした色合いがいいですよね。

ただ、今までデザインをお仕事にしてきた方じゃないと、いきなりゼロから色を考えよう！と言っても難しいと思います。（私も無理でした）

そんなときに参考になるサイトがこちらです。

色の組み合わせが40パターンあり、配色の初心者でも選びやすいと思います。

こちらはブログのアイキャッチ画像などが無料で作れるデザインツールの記事です。もう少しいろんなパターンから選びたい、イメージ画像と共に選びたい方はこちらをご覧ください。

そして最後は見切れないほどの種類から選べるカラーパレットです。私がウェブ制作をする際、カラーイメージがまだのお客様にはこのウェブサイトをご覧いただきます。

『ホームページに盛り込む内容』と『ホームページのデザイン』の二点。

ぜひ、作り始める前に考えてくださいね！