【ビジネスサイト作成】HTMLって何?レベルからテーマ決定まで。【ガイド】

ビジネスサイトのつくりかた。初心者編。

ビジネスサイト作成

また性懲りもなく新カテゴリを設置しました。
カテゴリ名は「ビジネスサイト作成」です。
中身は、仕事を受注する窓口となるサイトを作成するのが目的となります。

僕がWEB担当として利益を生み出してきた手法も
紹介していく予定ですので参考にしていただけると幸いです。

ただ、詳しい解説が他所でもされている箇所は省いています。
※ワードプレスの導入の仕方やテーマインストールなど
同じ事を書いても意味があまりないので、書きません。
細かい箇所、ありきたりな箇所については書籍・他ブログ様を参照してください。

はじめに

マインド本やマインド記事を数百ページ読むより、
運よく100 円稼くだけで一気に視界が「開ける」ものです。
なわけで啓発本は横に置き、とりあえず動き出しましょう。

当記事の対象者

・HTML/cssが分からない
・親族に経営者・自営業者がいない(何も教えてくれる人がいない)
・正社員経験がない
・大学中退者だ
・貧困家庭出身で良質な文化資本を継承できなかった人
・コネなし金なしキャリアなし
・アフィリエイトは性に合わなかった人
・ひきこもり
・おっさん

当てはまる項目が多いほど親和性が高いと思います。

HTMLって何?な人は

本を買いましょう。一冊でOK。
どのような構造で出来ているかを理解できればいいからです。
タグを見ないで書けるようにならなくても良いんです。

僕は20代半ば頃にようやく取り組みましたからね。
その時点ではHTMLとcssの知識が皆無でした。

そのとき非常に参考になったのがこの本
HTML&スタイルシートレッスンブック 単行本 – 2002/11

当時は2chでも他サイトでも「divタグばっか使ってるから
初心者が参考にすると変な癖がつく」、と言われている本でした。
でも、デザイナーやコーダーになる気がない人であればなんら
問題ない。ましてやHTMLとCSSの基本を知るだけであれば
間違いなく良書です。

IQ32の僕でも無知の状態から2週間ほどで本に書かれてある
サイトを製作できたんですから。

ちなみに新しいのがこっち
HTML/XHTML&スタイルシートレッスンブック―ステップバイステップ形式でマスターできる 

スタイルシートレッスンブックで基本ができたら、
次は「HTML/XHTML&スタイルシートデザインブック」に
向かうとすんなり理解できます。

ただ、 「HTML/XHTML&スタイルシートデザインブック」は
誤植があるので注意。分からない箇所があったらスルーするのがお勧め。
ちなみにスタイルシートデザインブックのほうも改訂版とも呼べる
本が出版されています。
これ「HTML5&CSS3 レッスンブック

活用法

最初は本を片手に一通り、手打ちでサイトを作ってみてください。
まったく分からない方はたぶん、index・文字コード・リンクの仕方
とかで迷うとおもいます。宣言文とかUTF-8とか。
基本だけ知っておけばOK。
宣言文は手打ちしないでコピペしてください。
今後はワードプレス使うので意味ないです。
本を1週したら大体仕組みがわかるはず。
それだけでいいです。今はワードプレスが主流になって来ているので
見返す程度にします。

実際に、モニタの画面上でつくるがポイントです。
ノートにタグを書いて覚えてはだめですよ。
実践ではないのでなかなか覚え難いからです。

今後は「書く」量より「タイプ(打つ)」量が多くなります。
いちいちペンを片手にノートに書く暇はありません。

分からない箇所はネットで検索コピペです。
真面目な人ほどタグを覚えようとするけれど覚えなくて大丈夫。
こんなタグがあるな、ここはあのタグで装飾できるな、
文字間隔はcssのプロパティで調整でるよなって感じでね。
この部分を変えるにはこのセレクタいじれば良いよなと
思える程度で大丈夫。

本を買える程度のお金があるのならば迷わず買いましょう。
ネットでは体系的に学べませんし、知識がぶつ切り状態になる
おそれがあります。AはできるけれどBはまったく理解できないみたいな。
個人のサイトですと必ず間違いがあるんです。
そして初心者がドツボにはまる。

かえって本は何人もの人間がチェック・校正をしています。
ですので信用性はネットより高いのは当たり前です。
そして、質はともかくとりあえずはレベルの低いほうから高い方へうまく
流れをつくってくれています。

だからこそ、まずは書籍で勉強することをお勧めします。

行動しよう

思考改革のため「マインド」と分類された記事を読んでいても
行動できないと意味がない。

プチ成功者たちのブログを読んでも結局「今日もなにもできなかった」ぱてぃーんに
陥る人がたくさん。心身ともに健康な人だってそうなのだから
われらヒッキーは目も当てられない惨状。

なわけで自宅でできること、そして出来る範囲で行動してましょう。

サーバー確保

ビジネスサイト(商用サイト)をつくる下準備です。

可能ならば有料のサーバーを使いたいですね。

無料サーバーだと同業他社の広告を掲載しながら運営するはめになります
集客すればする分相手にも益があるという構造を強要されますから。

でも、お金がないのであれば商用利用可能のブログでも大丈夫です。
fc2・seesaaブログは商用利用可能であり、
いまだに無料スペースで商業活動している方が居ます。

なんでもかんでも有料を進めてひっそりpx8~とのアフィリエイトリンクアドレス
をつけるのは嫌なので、具体的な有料サーバーは明記しません。

初心者は料金が高いが親切で操作が簡単な会社を選択すれば良い。
操作性は低く、放任主義だが料金が安いのを求める上級者は
そのようなサービスを提供している会社を選らべはいいだけの話です。

ご自分で調べて納得がいったサーバーを選んで下さい。

最初から無理に高級なサーバー使わなくてもいいです。
表示速度が少し遅くともサイトを作りこめば依頼は来ますから。

ドメイン取得

独自ドメインは信用が薄くなりがちな個人事業主にとっては
最低限とっておきたいもの。
しかし、お金がないのであれば後回しでも構いません。
収入があってから有料サーバー+独自ドメインを取得すればいいだけですので。

経験があり、当人だからわかるのですが高い料金払っても
ひきこもりなんでやる気ないでしょ?
なかなか気軽にできないんですよね。
行動することが重要なおで軽い気持ちでできる無料サーバー・ブログで
やっちゃいなよyou。

でも、お金があるなら初期から独自ドメインを購入しましょう。
中古ドメインは目利きが必要ですので、立ち入らないように。

中級者は被リンク付きまくってる中古ドメインでも良いんじゃないの?

基本テンプレート

ワードプレス業種によって適したテンプレート・デザインというのがあります。
けれどここでぐちゃぐちゃしゃべっても無駄なので、
僕が決めます。そうしないとテンプレート選びで数日~数年かかりますからね。
本当に。

ここはビジネスサイト鉄板の青を基調にした背景白の
テンプレートに決めます。

青は「信頼性」「誠実さ」を与える効果があります。
そして、白は「信頼感」「清潔感」などを与えます。
重複する意味合いもありますが、不信感を与えない
色合い、無難な組み合わせと思ってください。

つまり、安心感をアッピルするのです。

デザインの知識・経験がないのであったら
青・白で決まりです。なぜなら「無難」だからです。

女性向けならピンク+白。
親近感を抱かせるのならば暖色系(赤・オレンジ・黄色)。
高級路線でいくならば黒+ゴールドなど、配色パターンは
いくつもあります。なのでたぶん迷います。
何をおいてもコンテンツ(中身)が先なので、
安心感・信頼性を与える青系+白色でとりあえず作成しましょう。
ベースカラーが青・サブカラーが白です。
これでくよくよ配色に考える時間を費やさずに済みます。

ひと昔まえの手製の企業サイトは無駄に似たようなデザイン
のサイトばかりでした。

逆にいまではオサレ感をだしている企業もいますね。
でも、新規のお客様を得るのであればわかり難いデザイン、
オサレ系よりも基本に立ち返ったほうが良いです。

ネット上から新規顧客を獲得する必要のない法人のように
オサレウェブデザインじゃ駄目ですよ。
個人なら個人のやりかたがあるのです。

ブロガーお勧めの有料テンプレートと現場派の齟齬

正直に言いますと、こてこてのアフィリエイター・ブロガーが進めるものは
アフィ報酬狙いなので、どこかズレているんですよね。
もし、あなたがアフィリエイト報酬を当てにしないビジネスサイトをつくるのであれば
この点を注意しなければなりません。

ブログでは報酬率が高い洗練されていて一見「すごい」「きれい」と
見える有料テンプレートを勧めているのに、稼ぎ頭のサイトでは
別のテンプレートを使っていたりね。よくあることです。

無料の鉄板テンプレート

基本であり、大半の業種にあってしまうテンプレートとはこういうものです。
定番テンプレともいう。

TempNate – テンプレート一覧
http://tempnate.com/tinyd5+index.htm#value
定番テンプレート

懐具合に余裕があるならば有料サーバー+独自ドメイン+ワードプレスでの作成。
テンプレートはbizvektor(ビズベクトル)にしましょうか。

無駄にデザインを変えず「そのまま」でも十分効果がある堅実なテーマです。
僕がウェブ担当として動いている便利屋さんでも bizvektor を導入しています。

便利屋開設希望者にはまず、この bizvektorテーマを進めています。
と、いうかこれで依頼をとっています。
売り上げ2~5万レベルの商品・サービスを売れることは実証済みです。

競合もbizvektor です。類似業者ももちろんbizvektor。
ここまで広まる理由は「商用サイトをつくる際に面倒なことがコピペ一発」で
できるからでしょう。

個人の便利屋さんはデザインなんてできませんし、いちいち画像加工して
ボタン作成やfaq作成なんてできない。面倒なんです。
だから簡単に作成できてSEO対策済みのテンプレ・テーマが大好き。

とくに手間がかかるフローチャート(ご依頼のながれ)がデザイン
されているのが嬉しい。

また、よくある質問のデザインがコピペで簡単に済ませられるのが
非常に大きな利点でもあります。

フォント(文字)やフォントサイズ・行間・文字間隔を細かに
設定する必要もないですし、携帯向けにも活用できる。

とりあえず bizvektor(ビズベクトル)にしとけば問題ありません。

しかし、ぱっと見ると、一昔前の企業サイトです。
しっかり見ても一昔前の垢抜けないデザインです。
でも、基本を押さえているテーマなので初心者にもってこいです。

なので、いきなりオサレ感丸出しのデザイン重視のテーマを使う前に
基本をしっかり覚えるのに最適です。

ワードプレスでビジネスサイトを作成するときには bizvektor(ビズベクトル)です。
そして、 bizvektorを導入したら必ずこのページ( デザイン要素サンプル -BizVektor )はブックマークしてください。

ブックマークバーに表示して、すぐに開く・確認できるようにしてください。
ひきこもりやニートはやる気があるときにやらなければま「いので、
すぐに開けるようにしてください。

▼デザイン要素サンプル -BizVektor
http://sample.bizvektor.com/service/sample-design/

ちなみに bizvektor の拡張デザインスキンの売れ筋は
DLmarketから確認できます。

ブロガー・アフィリエイターが勧める有料テンプレートと傾向が
違うことが分かりますよね。
上記文は2015年8月5日記載

説明
2016年現在はopencage(オープンケージ)作成の
アルバトロス」「ハミングバード」が1位2位を獲得しています。
ブロガーに指示され、口コミで短期間で認知度を上げたテーマと言えます。

なお、「ブロガー専用WordPressテーマ」と銘を打っているように、
純粋なビジネスサイト向けテーマではありません。
とは言っても、ビジネスサイトテーマとしても十分通用すると思われます。
個人的に思う難点は「ごまかせない」ところですね。
ブロガー向けなので記事量が少ないと見栄えが良くありません。
また、アイキャッチ画像設定を記事ごとにしなければ見た目がダサくなります。

ビズベクトルの難点

一方、ビズベクトルは細部の修正が面倒という難点があります。
基本がすこしカスタマイズしただけであちこちに不具合が生じます。
こっちを直したらあっちが壊れる、みたいな。

これは元もとのCSSの記述によるものです。
どの記述がどれに適用されているのかを明確に分かる人でないと辛いでしょう。
なので中級者ならば対応可能な領域。
初心者であるならば配色を変える程度にして、
中身(コンテンツ)を優先的に作成していくことになると思います。

以上ここまで。

まとめ

  • アフィリエイト用テンプレートとビジネスサイト用のテンプレートは異なる
    ※アフィリエイター向けのテーマでも十分ビジネスサイトはつくれます
  • 青+白カラーを基調としたテンプレート・テーマをつかう
  • ワードプレスの場合、テーマに迷ったらbizvektorで決まり。
  • 配色設定に時間を奪(と)られないように注意

コメントを残す

メールアドレスが公開されることはありません。