サイト作成

サイト作成

テーマが決めたら、サイト作成に入ります。

サイト作成の知識のない人が賢威を使用して、実際に作成するにはかなりの覚悟が必要です。

安易にHP作成ソフトで作るのではなく、頑張って賢威を使用して下さい。
分からなければすぐ調べるの繰り返しです。

賢威の使用を前提としていますので、基本的な説明は省略します。
(XHTMLやCSSについては賢威内で解説されているため。)

賢威はデフォルトでタグ使用例のサンプルがありますので、最初はとりあえず真似してみて下さい。

最初はレイアウトが崩れたりと、何が分からないのか分からない状態になると思います。

僕も人には言えない失敗を何度もしています。

この壁を乗り越えるか諦めるかで、今後の展開が大きく変わってきますので頑張って下さい。

エラーは最小限に

僕がサイトを作成するときに意識していることは文法エラーを出さないです。

このサイトもそうですがW3Cのチェックを通過するまでは、必ず修正をします。

Another HTML-lint gatewayは基本100点になるまで修正しますが、アドセンスコードなどを使用すると100点にはならないので作成するサイトに合わせて最小限のエラーに止めるようにしています。

SEOのプロでもサイト作成のプロでもない我々が勝負をするには、
文法通りに正しくソース記述することが同じフィールドで戦う上で重要なことです。
詳しくは最低限のSEOのページで説明します。

ちなみに僕が賢威で一番最初に作ったサイトは-80点くらいでした。

当時は何がダメなのかもよく分からず・・・。

サイト作成ツール

僕がサイト作成の際に使用しているソフト・ツールを紹介します。

大して使いこなしてはいませんが、逆に僕でも使えたので素人に優しいツールなんだと思います。


テキストエディタ
Crescent Eve

エラーチェックでタグの打ち忘れを防止してくれます。実際、よくやっちゃうので助かってます。
タグの予測もしてくれるので便利です。


画像作成・編集ソフト
Adobe Fireworks

リンクはCS4ですが、僕はまだCS3のままです。
特に使いこなしていることもないのでしばらくはCS3のままで十分かなと思います。
ヘッダー画像作ったり、商品画像作ったりで使用しています。


FTPソフト
FFFTP

コレ以外使ったことがないのと、凝った使い方をしていないのでコレで十分です。

基本的にこれだけです。
たまにフォトショップ使うくらいですね。

ブラウザはFIREFOXを使用しています。

計画的に進める

作業のスケジュールを自分なりに考えます。

作り出すと意外に視野が狭くなってのめり込んじゃうので、注意です。
後で見直すと結構自己満足なサイトになってたり・・・。
このサイトがそうなってるかもしれないですけど大目に見て下さい。

僕の場合は、

1.原稿を書く。

記事サービスなどを利用して原稿がある場合はいいですが、無い場合は原稿を書きます。

コンテンツ用の記事があってもトップページは自分で考える必要があると思いますので、どちらにせよ考えることにはなりますね。

ちなみにこのサイトは当初の原稿からかなり変わってます。


2.広告を決める

サイトに掲載したい広告を決めてリンク表を作ります。
各ASPから商品名とリンクをコピペします。

その後に各広告の画像をチェックして、満足いかない場合やそもそも画像ない場合は自分で作ってしまいます。
このサイトの画像もほとんど自分で作ってます。


3.トップページを作ってみる

自分で決めたテーマやサイト構成を基にトップページを作成してみます。

メタなど細かい部分は気にせずにとりあえずサイトのデザインとか雰囲気などを確認しながら作成します。

慣れてくると自分の形がありますので、余計な部分の削除とかかなりスピーディーに作れます。


4.細かい部分を詰める

トップページのレイアウトがほぼ完成したら、メニューとかメタを埋めていきます。

メニューを打ち込む際は、フォルダ名も一緒に変えましょう。

僕はいつもサイトの紹介文が思いつかなくてかなり適当になってしまいます。
SEO的にはキーワードを3つ入れて・・・とあるみたいです。調べてみて下さい。

※サイトが完成してからアップするのか、とりあえずトップページだけアップするのか。
トップページのみの場合もフォルダ名を入れて全フォルダをアップしてしまうと、デフォルトのままのページが表示されてしまうので注意して下さい。
僕はトップのみアップするときはフォルダ名をすべて【test】にしています。

僕はサイト全体の8割くらい完成したらアップして細かい部分を作ります。
このサイトに限っては初めてトップを先にアップしてみました。

どうせクロールされるまでに時間掛かるし、誰も見ないだろ・・・と思ってましたが早く他も作らないとってプレッシャーが凄いです。
作業を強制的に進めさせられるので、トップページを先にアップするのもある意味いいかもです。

アップしたら戦略URLも一緒にアップしてアフィリリンクをすっきり整理します。


5.他のページを作成する

やり方は人それぞれだと思いますが、僕の場合はトップページと階層が一緒なのでサイトマップを先に作成します。
(グーグル用のじゃないですよ。)

サイトマップ自体そんなにボリュームがあるページではないので、余計な広告はカットします。

リンク集、プロフィールなんかも余計な広告はカットですね。

コンテンツページは、とりあえずトップページと共通の部分(このサイトなら右側のメニューなど)をコピペしちゃいます。
その後に階層を修正しています。(../←コレ)

その後、そのファイルを全コンテンツフォルダにコピー

後は自分が作りたいように作成。→アップ

コンテンツのページも8~9割完成したらアップしちゃってます。

ここに画像あったら分かりやすいなと思う部分があっても、文章だけで意味が通じているのであれば画像は後回しにしています。

アップしてから更新したほうがSEO的にもちゃんと更新されているページと認識されるのと、客観的に自分のサイトを見れるので他の修正点も見つかる可能性があります。

もしかしたらサイト作成の役に立つかもしれないこと

僕は全くの0から始めたので、つまずきも人一倍経験しています。
もしかしたら役に立つかもしれないことをいくつか書いてみます。

エラーが出てどうしても解消できない

エラーが出てどうしても解消できない場合の調べるコツは、
『エラー認識されるタグ XHTML』で調べれば大抵検索で引っ掛かります。

動画を張り付ける際に、objectタグでのエラー解消が今までで一番苦労した記憶があります。

ただ、一回苦労してしまえば次からは調べる必要はないので楽です。

素人だからこそここまで文法にこだわるべきだと思うんですよね。
他にこだわれる部分ないですから。

タグはひとまとめに出来る

これを言うのは恥ずかしいんですが、もしかしたら100人に1人くらい同じ間違えしちゃうかもしれないので書きます。

4サイト目くらいまでは『青字・太字・文字大きく』を記述するのに、

<span class="b"><span class="blue"><span class="big">『青字・太字・文字大きく』</span></span></span>と記述していました。

正解は<span class="b blue big">『青字・太字・文字大きく』</span>です。

しかも指摘していただいたのが賢威の作者の松尾さんという失態。

タグはまとめましょう