2012年5月12日土曜日

初心者が5日間でHPを作った軌跡(前編)



前回の記事に引き続き、

今回は具体的にどういった流れでHPを作ったか紹介していきます。

(前回は心構えと開発準備について書きました)

大まかな流れを先に書いておきますね。

1.作りたいサイトのイメージを固める
2.コンテンツを決めて、ページ数を定める
3.テキストを作り、デザインを決める
4.コーディングを始める
5.最終チェックして公開!


こう書くと、意外とあっさりしていますが、
実際は3⇒4⇒3⇒4⇒4,,,と思い通りにいかずに、
同じ箇所を行ったり来たりします。

ただ、1~3はPCがなくてもほぼ大丈夫です。
むしろサイトを作るからPCしか使わないと、
想像力が働かず良くないように感じました。

ということで、各コンテンツごとにどういったことをするのか、
しっかりと見ていきますね!



1.作りたいサイトのイメージを固める
サイトといっても、いろんなサイトがあります。
今回のような会社のHPもあれば、もっとオシャレで自由なモノもある。
まずは自分が作りたいサイトに近いサイトを見つけましょう。
サイトの探し方としては、
検索で探すのもいいですが雰囲気だと検索には引っかからないので、
この2つを使うと便利かもしれません。
・AnotherBookmark(http://www.anotherbookmark.com/)
・+bookmark(http://bookmark.mellowdown.net/#/1)
サイトまとめをしてくれているサイトは結構多いので、
こういったサイトでお手本となるサイトを幾つか見つけましょう。

ついでに、自分が手本にしていたサイトは、
・SDA(http://www.s-design.jp/)
・株式会社フーモア(http://whomor.com/)
・東京ゲストハウスtoco(http://backpackersjapan.co.jp/)
お手本にするときには、どの部分に魅力を感じたのかしっかり認識して、
手本とする箇所をはっきりさせておくといいです。
自分はデザインをSDAさんを参考にし、フーモアさんではコードや配置を参考にしました。


2.コンテンツを決めて、ページ数を定める
参考にするサイトを決めたら、次はコンテンツ決めです!
自分のサイトをどういったサイトにしたいのか決めていきます。
これは元々作りたいサイトや参考サイトを選んだ理由から、
ある程度明確にはなってくると思います。
それをより具現化させるために、ページ数を決めましょう。

ページとはサイト上のHTMLファイルの数と同意義だと捉えてくれればいいかなと。
つまり、自分のサイトだと、
・HOME・ABOUT・SERVICE・MEMBER・WANTODO...
の9ページです。
(「WANT」の部分を本当は1ページにする予定だったので当初は5ページでした。)
ページが決まると広がりすぎたコンテンツをまとめることができます。
作り始める前は結構コンテンツをたくさん考えて、
どこから手をつけたらいいかわからなくなるので、ページ数でコンテンツを決めます。

あと、大枠さえ決めてしまえば、
その後にページからリンクなどで幾らでも広げられるので、大枠決めちゃうと楽です。

大枠ができたら、そのページ数と同じ枚数の【A4用紙】を用意しましょう!

実際にA4用紙に、そのページのイメージを書いていきます。
小さい紙だと実際のイメージとかけ離れてしまうし、本物に近いほうがいいです。
このときのコツとしては、
・書き込めることはなんでも書き込んでおく
・リンク先などを明記しておく
・簡単にタグで印をつけておく
この段階で、テキスト内容や実際のリンク先などイメージしていおくと後が楽です。
これから先は想像をふくらませるというより、
要らない部分はそぎ落として、足らない箇所はないか確認していくことになります。
この段階で考えられることは全て考えておきましょう!

意外と長くなってしまったので、
紙で各ページを作った後の流れは次回に回します。
次回からいよいよPCを使うことになります。
お楽しみに!

ではでは。