DAINASHI YESTERDAY

業者に頼らず自分で作る!初心者のためのウェブサイト制作ガイド【まとめ】

全10回にわたってポストしてきましたウェブサイト制作ガイド。ここでは基本的なウェブサイト制作の流れに沿って各記事を簡単にまとめてみました。

自分でウェブサイトを作ってみたいな、と考えている人へ少しでも参考になればうれしいです。なおこのガイドはあくまでも基本的な流れなので、制作するウェブサイトによっては工程を省略したり、逆にもっと段階を踏む必要があったりもするでしょう。大まかな流れを把握できたら、自分なりにアレンジしてみてくれればと思います。

第1回:まずは目標設定!あなたはなぜ、ウェブサイトを持ちたいですか?

ウェブサイトを立ち上げて一体何をしたいのか?

それがはっきりしていないと、せっかく一生懸命作ったサイトもなんの役にも立ちません。ウェブサイトを通して受注件数をアップさせたいのか、それとも広告などでウェブサイト自体から収益を上げていきたいのか。

目的によってウェブサイトの構成やらデザインやらすべて変わってきます。まずはどんな目的を達成するためにウェブサイトを作るのかを明確にしましょう。

≫ 第1回:まずは目標設定!あなたはなぜ、ウェブサイトを持ちたいですか?

第2回:ユーザーの心をガッチリつかむために!ウェブサイトの構成を考えよう

ウェブサイトで達成したい目的がはっきりしたら、次はその目的を達成するためにはどんな構成のウェブサイトにすればいいか考えましょう。

ここで想像力をフル稼働させて、できるだけ必要になるコンテンツを洗い出しておくと後の工程がグッとラクになります。制作を進めているうちに「あ、このページ作らなきゃ…」というのが出てくると、構成を全体的に見直さなくてはいけないなんてことにもなりかねません。

よくありがちなのが、新着情報の一覧をトップページに表示したのに、そのアーカイブページをどうするか何にも考えてなかったとか、後々になって「やっぱブログいるわ」となり無理やりWordPressを組み込むとかですね。

構成をしっかり練れていれば、はじめからWordPressで構築するという判断ができます。その方が制作自体スムーズですし、公開後のメンテナンスもラクです。

≫ 第2回:ユーザーの心をガッチリつかむために!ウェブサイトの構成を考えよう

第3回:ユーザーの心にグサリと刺さる!コンテンツの作り方

いくらきれいな見た目のウェブサイトができても、コンテンツの引きがなければユーザーの心には引っかかりません。

あなたのメッセージをユーザーに届けるために、コンテンツはしっかり作り込みましょう。情報を探しているユーザーは、きれいなウェブサイトを見たいのではなく、自分のほしい情報の載っているウェブサイトが見たいのです。

見た目の部分のデザインを軽視するわけではありませんは、それはあくまで力のあるコンテンツがあってはじめて効果を発揮するもの。まずは魅力のあるコンテンツを用意することからはじめましょう。

≫ 第3回:ユーザーの心にグサリと刺さる!コンテンツの作り方

第4回:ウェブサイトを作るための言語について知ろう

ウェブサイトを制作するには、HTML、CSS、JavaScriptといった言語を使います。ここではそれぞれの言語の基本的なことについてご紹介しています。

それぞれの言語の役割、記述する上でのルールなど、まずは最低限のことを頭に入れましょう。そうしたら、あとはとにかく書くことです。手を動かさない限り、理解が深まることはありません。

実際に自分で書いてみて、つまづいたところを一つずつクリアしていくことで自力がつきます。HTML、CSS、JavaScriptをある程度書けるようになったら、次はPHPを勉強してみましょう。

PHPが分かるとWordPressのカスタマイズなどするときにもスムーズですし、ウェブサイトでできることの幅がグンと広がりますよ。

≫ 第4回:ウェブサイトを作るための言語について知ろう

第5回:ウェブサイトをデザインするための基礎知識

デザインにセンスは必要ありません。誰かが言ってましたが「経験8割、センス2割」です。つまり、たとえセンスがなくても経験でカバーできる余地がたくさんあるということです。

デザインというとどうしても見た目の装飾の部分のことばかりイメージしてしまいがちですが、デザインとは設計のことです。

コンテンツ(画像やテキスト)を見やすいようにレイアウトするとか、関連する要素とそうでない要素との距離(余白)何かを考えるのもデザインです。

≫ 第5回:ウェブサイトをデザインするための基礎知識

第6回:スマホ時代の対応するためのレスポンシブデザイン

現在のウェブサイトはスマホ対応が必須になっています。

Googleは、将来的にPC版とスマホ版のインデックスを別にすると発表しています。つまり、スマホでも見やすいようにウェブサイトを構築しておかないと、スマホで検索されたときの順位が上がりづらく、スマホからのユーザー流入を逃すおそれがあるということです。

ウェブサイトのテーマによってはスマホからの流入が半数以上、場合によっては8割以上ということもあります。それを取りこぼすのは痛いですよね。

ということで、1ソースでPCにもスマホにも対応するためのレスポンシブデザインを取り入れましょう。

≫ 第6回:スマホ時代の対応するためのレスポンシブデザイン

第7回:ワイヤーフレーム(ウェブサイトの設計図)を作ろう

第7回にしてやっとウェブサイト制作っぽくなってきました。よくイメージされる「ウェブサイト制作」というと、たいだいこの辺りからですね。

でもちゃんと成果を出したければ、その前にやることがたくさんあるんです。そのことが伝えたくてこの制作ガイド作ったみたいなところもあります。

これまで考えた構成やコンテンツを踏まえて、ウェブサイトの設計図となるワイヤーフレームを描きましょう。事前にキャッチコピーやコンテンツの見出し、テキストのボリュームなんかをはっきりさせておくと、ワイヤーフレームの作成は非常にスムーズです。

なので、ここに至るまでの工程は是非手を抜かずにやって頂きたいと思います。

≫ 第7回:ワイヤーフレーム(ウェブサイトの設計図)を作ろう

第8回:ワイヤーフレームが完成したら、いよいよデザインへ!

ワイヤーフレームを元に、実際のデザインを制作していきます。

ウェブサイト制作でもっとも楽しくやりがいがあり、そしてもっともしんどいところでもあります。デザインに正解はありませんし、同じコンテンツでもデザインする人によってまったく違うものができあがります。

ここでドツボにはまらないためにも、やはりこれまでの工程にしっかり取り組んでおくことが大事です。

≫ 第8回:ワイヤーフレームが完成したら、いよいよデザインへ!

第9回:ウェブサイトを公開するためのドメインとサーバーの準備

これまでの工程でウェブサイトが完成したとしても、それはあなたのPCの中にあるだけなので、他の誰も見ることはできません。ウェブサイトを公開するためには、ネット上にウェブサイトのデータをアップロードしなくてはいけません。

そのために必要になるのが、ドメインとサーバーです。

ここではドメインの取得方法とサーバーの契約について、そしてFTP接続によるファイルのアップロード方法についてご紹介しています。

≫ 第9回:ウェブサイトを公開するためのドメインとサーバーの準備

第10回:ウェブサイトを成功させるために

ここまで頑張ってウェブサイトを制作し、やっと公開にこぎつけたあなたには酷な話かもしれませんが、ウェブサイトを公開しただけでジャンジャン売り上げがあがるなんてことはまずありません。

はじめに立てた目的を達成するためには、Googleアナリティクスなどでデータを収集し、検証と改善を繰り返していくことが必要です。

またいろいろなウェブサイトやブログを見て回ることで得られる気づきもあります。ただのユーザーではなく、ウェブサイト運営者という目線でたくさんのウェブサイトを見てみましょう。きっと自分のサイトに活かせるものが見つかります。

≫ 第10回:ウェブサイトを成功させるために

投稿者: