【デザイン】ホームページの作り方:手順と必要な知識その１

はじめに

ようこそ、Webの世界へ。
本記事では「ホームページをちょっと自分で作ってみたい！だけど、そもそも何から勉強すればいいかわからない、どうやって作ればいいのかわからない。」という方に向けてホームページの作り方の手順と知っておきたい情報を楽しくご紹介します。

ホームページ作りの手順

まずは、ホームページを作るときのざっくりとした流れをご紹介します。

企画

まずは、ホームページの企画をしっかりと立てます。
特に重要なのは以下３つです：

• 目的
• コンセプト
• ターゲット

企画その１：ホームページの目的

何のためにホームページを作るのかを考えます。
このステップでのポイントとしては、数字で測れるものを目標に設定することです。

一見理にかなっているように見えますし、自分の好きなものをサイトにするという発想もとても良いです。
しかし、これでは目標が曖昧です。
どれくらい見て欲しいのか、どんなシーンで活用して欲しいのか、何人に来て欲しいのかわかりません。
こういう目標が曖昧なサイトは、残念なことに作った後はそのまま放置され、忘れ去られることが多いです。

このようにはっきりとした目標設定であれば、実際に自分の作ったホームページが成功したのかしていないのか、測定することができます。

目標を達成していれば、達成した嬉しさと共に、もっとホームページを大きくしよう！という気持ちにもなるかもしれません。
逆に達成していなければ、自分のホームページのどこを改善するべきなのか施策を練ったりすることもできます。

企画その２：ホームページのコンセプト

ホームページの魅力を最大限に生かすためには、コンセプトが大切です。
他のホームページにはない、自分のページの独自のコンセプトを決めておくことで、
今後の制作に置ける様々な決め事の指針になります。
例えば同じ車のサイトでもコンセプトが違うと全く別のサイトになります。

このようにコンセプトを決めることによって、ホームページの何を強調すべきか、何に気をつければ良いかなどが明確になってきます。

企画その３：ホームページのターゲット

ホームページのターゲットとは、誰にこのホームページを見て欲しいのか、ということです。
ターゲットをどう決めるかというと、「属性」というもので区切ります。
「ターゲットの属性」というと難しく聞こえますが、例えば、性別、年齢、場所、職業などが属性にあたります。

では、先ほどの車のサイトのターゲットはどんなものがふさわしいでしょう。

年齢も絞れていますし、車といえば男性なのでなかなか良いターゲット設定に見えます。
しかし、実際には落とし穴があります。

２０代前半の男性は、まだ大学生。逆に２０代後半の男性であれば、社会人で会社の中堅的役割を担っているかもしれません。

そう考えると「20代の男性」では、ターゲットを絞っているように見えて、実は全く行動や思考が違う２つのターゲットを追っているのです。
こういった数字の落とし穴に気をつけながら、ターゲットを決めましょう。

企画その４：スケジュール感

企画の段階で決めておいた方が良いことは他にもあります。
特に、ホームページを作るスケジュール感やサイトにいれたい内容などは決めておくと後々便利です。
１人でホームページを作っているとスケジュールを決めずに「隙間時間でやればいいや」と思いがちですが、
そうすると途中でめんどくさくなって諦めてしまうことも多いです。

初心者の方であれば、「２ヶ月以内に終わらせる！」という目標で作ってみてください。

設計

企画が終わると、次はホームページの設計に入ります。

設計の際には決める内容は以下です：

• サイトの構成
• ワイヤーフレーム

サイトの設計その１：サイトの構成

サイトの構成は、「サイトマップ」と呼ばれ、必要なページ数やページの重要度、どのようにそのページにたどり着けるか、などを決めます。

作成の仕方は自由です。
パワーポイントなどで視覚的に作るもよし、エクセルなどでページの名前などを洗い出しもよしです。

サイトマップの作り方に決まりはありませんが、何もないところから作るとき、何から始めれば良いのか迷うこともありますので、おすすめの方法をご紹介します。

サイトの設計その２：ワイヤーフレーム

サイト全体の構成が決まったら、次は各ページごとの設計図（ワイヤーフレーム）を作成します。

もう少し細かくいうと、ページのどこに何を置くのかを決める作業です。

ワイヤーフレームは手書きで作成しても大丈夫ですし、慣れている方はSketch、Illustrator、Photoshop、Cacooなどのソフトやツールを使用して作っても大丈夫です。

参考にするものが欲しい方は wireframe showcaseをみたり、 dribbbleなどで「wireframe」と検索してみてください。

まとめ

ホームページを作る、というとHTML, CSSなどの技術的なコーディングを思い浮かべる方が多いかと思いますが、こういった企画や設計をきちんと決めないといくら技術が足りていても、良いサイトが作れません。 まずは、どういうサイトが作りたいのか、をしっかりと決めていきましょう。