【随時更新】自分でWebサイトを作るために必要な4つのステップ

どうもこんにちは〜!

最近ぼくは「自分で書評のWebサイトを作りたい!」と強く思い始め、その制作過程を勉強しています。

今日は学んだ内容についてここでまとめます!

ちなみに当記事で述べることは、いま通ってる「コラボキャンプ」から学んだこと。

より詳しく学びたいひとは受講してみるのをおすすめします^w^

(関連:【1ヶ月で就活終了!?】18卒は必見の「コラボキャンプ」がすごすぎる!!

今日はWebサイトを作るのに必要な4つのステップを紹介しますね!!

①要件定義

まず初めにやらなければならないのは「いまから作るWebサイトとは何か」を定義すること。

具体的には、以下4つの内容を決定します。

・ターゲットは誰か?
・サイトのゴールはどこにあるか?
・具体的に、どんなひとを想定しているか?
・どんな流通経路を通ってゴールまで来てもらうか?

例えばターゲットに関して。

ぼくは書評ブログを作っているんですが、その場合ターゲットは「本は読みたいけど、何を読むべきかハッキリしないひと」などと定義できます。

サイトのゴールは、例えば「アフィリエイトの本を買ってもらうこと」などと設定できますね。

具体的な人物は、Webサイトはネットリテラシーが高いひとがみるので、「ITに強い」が入りそう。

更に「書店に行って探すほど本が好きでなく、効率的におすすめ本を探したい」も特徴としてありそうっすね。

この時のポイントは、友達でも誰でもいいので,「具体的な人間を一人挙げてその人の特徴をすべて書く」こと。

この作業を「ペルソナ」といい、ターゲット選定において極めて効果的な方法といわれています。

流通経路に関しては、例えば「検索エンジン、SNS」ですかね。

以上、上記4つのことをしっかり考える「要件定義」をまず最初に行いましょう。

ここで、サイトの方向性が決まります。ここを誤るとどんなにカッコイイサイトを作っても宝の持ち腐れになってしまいます。

なので手を抜くことなくしっかりやりましょう。

②デザイン

さて、サイトのコンセプトが決まりました!!

さあ、次は?と聞かれたら、次はサイトの「デザイン」を考えましょう。

デザインのためのツールとしては「Photoshop」というサービスを使います。

基本有料なんですが、1ヶ月無料お試し版もあるのでまずはそっちを使ってみましょう!

Photoshopの使い方は、ググれば死ぬほど出てくるので独学でも十分対応可能です。

ちなみにぼくがこの間、Photoshpで作ったサイトデザインはこんな感じ。

スクリーンショット 2016-06-08 22.49.43▲ひどいwwwwwwwwww

今通ってるコラボキャンプで、同期に遅れをとったので、頑張って修正したらこんな感じになりました。

スクリーンショット 2016-06-15 0.51.07

▲このように、Photoshopを使えば簡単に綺麗なデザインを作ることができます。

ここで作ったデザインをもとに、実際にコードを打って作成していきましょう。

③コーディング

Photoshopでデザインを作ったら、どんどんコードを書いて作っていきましょう。

コーディングとは、実際にプログラミングコードを書いてWebサイトを作成することです。

で、すみません、まだここは学べてないので、随時更新します!(6/15付近想定)

④公開

コーディングが終わって実際にサイトが完成したら、オンライン上に公開しましょう。

これで、立派なwebサイトが完成しました!!!!

ワーーーーイ!パチパチパチ!!!

・・・・さーせん、ここも学習不十分なんで随時更新します泣(6/30付近想定)

おわりに

というわけで、webサイトを作るために必要な4つのステップでした!

なんかしりすぼみになってしまい申し訳ありません・・・・。

随時更新していきますのでよろしくお願いいたします!!!

ちなみに初心者でも簡単にwebサイトの公開まで学べる「コラボキャンプ」は、受講システムが画期的で超おすすめです!!!

(関連:【レボート】webデザインを学ぶ「コラボキャンプ」の最初の授業に参加したから感想書くぞ!

というわけで今日はここまで!

学習したら随時更新してゆきます(・ω・)ノ






ABOUTこの記事をかいた人

毎日1000回読まれる書評系ブログの中の人。音楽と漫才をライフワークにし、自然溢れるのどかな場所に家を買うのが夢。