非ウェブデザイナーが自社/商用サイトを作るときのポイント

今や、小企業・小店舗でもホームページを持っているのが当たり前となってきました。
けれど作ってもらうほどの予算がない。予算がないから自分達で作らないといけない。
専任ではない人がホームページを作成できるポイントをまとめてみました。

個人でもインターネットをする人であれば、自分のサイトやblogを持っている人は非常に多いと思います。
そんな中、「持っていないと拡販できない、企業としてのステータスが低い。」と思われている経営者の方も多いと思います。
でも、デザイン会社にホームページを作ってもらう予算がない。仮に作っても割りに合わないのでは?と感じる方もいるでしょう。

確かに0からホームページを作るのは非常にお金がかかります。 どのくらいの費用がかかるとざっとみてみましょう。

項目料金備考
レンタルサーバ代10,000円~初期設定費。一回のみの支払い。
レンタル料2,000円~月額価格
ドメイン取得料2,000円~ドメイン名によって価格はかなり異なります。一年単位で更新が必要です。
ホームページ制作代行数万円~数百万円ページ数や画像点数によります。
ホームページ更新料5,000円~更新頻度や内容による

※料金は地域や業者によっても異なりますので、あくまで参考程度に留めてください。

ホームページ制作会社にレンタルサーバ申し込みの代行などを頼むと、別途料金がかかったりします。その他、デザイン料とかも取られたり・・・。結構お金はかかりますね。

そんな予算面の理由から、「いきなりちょっとインターネットに詳しいからって上司から会社のホームページを作ってくれと言われた」「個人で店舗を経営しているけどホームページも作ってみたい!」という方は意外に多いのではないかと思います。
冒頭では、"小企業・小店舗でもホームページを持っているのが当たり前"と言いましたが、作りたくてもなかなか敷居が高くて作れない人はまだまだいます。

また、そういう方は、本職が別にあって、片手間でホームページを作成しないといけないことがしばしばでしょう。つまり、ホームページ作成をする勉強の時間も制作する時間も限られています。

そのような、全くホームページを作ったことがない、あるいは、ホームページは個人サイトで作った程度の方が商用サイトをすばやく作成するときのポイントをまとめてみました。

1.デザインは2の次。まずは中身をしっかり考えること。

自分が作るのだから「ださい」なんて言われたくない。それは皆思うことでしょう。
でも、まずは中身です。どんな目的でホームページを作ろうと考えたのかよく思い出して、その中で優先順位を決めましょう。
そうすれば、おのずとどのようなホームページのレイアウトにするべきか見えてきます。

おすすめな方法は、ホームページに出したい情報を、付箋紙のような小さな紙1枚につき1つだけ書いて並べてみることです。
次に大きな紙にカテゴリごとに、先ほどの付箋紙をはっていきます。つまり、大きな紙は、ホームページでいうページ、付箋紙が1コンテンツになるわけです。
あとは、どの大きな紙同士が結びつくか考えます。それがリンクになります。

最初からパソコンを使わずに、紙と鉛筆を使ったほうが、頭の中が整理されやすいと思います。

2.イメージ画像はできるだけ使用しない

企業サイトだったら、ヘッダー部分にばーん!とかっこいい画像があります。
しかし、これって意外に作るのが難しいのです。
まず技術的なこともさることながら、素材(写真など)が必要です。
どこから素材を調達してくるのか?自分で撮る?ロイヤリティフリーの素材を探してくる?それだけで重労働です。
デザイン的に手を加えれるほど余裕ができたら挑戦してみましょう。

3.どうしても画像を使用したほうがよい部分もある

上記とは逆に、テキストより画像のほうが絶対にいいものがあります。
例えば、「お申し込みはこちら」とかそういう類のものです。
しかし、画像を作るには画像編集ソフトが必要です。
画像編集ソフトのPhotoshopCS3はなんと10万円します。そんな予算ありませんよね・・・。

実は、世の中便利なことに、フリーの画像編集ソフトがあります。
PictBearがお勧めです。
PictBear用のプラグインはこちらのサイトからどうぞ。

あと、私は使ったことが無いので、使いごごちとかはわかりませんが、有名な画像編集ソフトを紹介します。

GIMP - Windows installers

Pixiaホームページ

最近は、かっこいい画像をオンラインで作成したり、画像の編集が出来たりするサービスもあります。
いろいろ探してみると面白いと思いますが、ここでは、まとめたサイトを紹介します。

WEBデザインに便利なオンラインジェネレーター&ツール集:phpspot開発日誌

だいたい、この手のサイトは海外のものですが、感覚で使いこなせるので大丈夫だと思います。

4.画像に使用するフォントの選び方・使い方

イメージ画像を作るときのポイントですが、重要なのは「フォント」です。
フォントひとつでイメージが随分変わってしまうので、フォント選びは慎重に。

画像に使用するフォントの種類は1種類だけ
フォントの種類は1種類。多くて2種類までにしましょう。これはたくさんのフォントを使用すると統一感がなくなってしまうためです。
どうしても雰囲気を変えたいときは、文字の太さや文字間の幅を変えたり、縁どりをしてみたりしましょう。
フォントには、「MS ゴシック」「MS P ゴシック」は使用しない
テキストのほうで、MS ゴシックやMS P ゴシックを日本語フォントとして使用することが多いと思いますが、それと同じフォントにしてしまうと、画像のフォントが目立たなくなる傾向にあります。
あと、個人的意見ですが、MS ゴシックはかっこよくない(笑)日本語フォントを買うのは結構いい値段しますので、標準でWindowsに入っているのならHG丸ゴシックM-PROとかHG創英角ポップ体がお勧めです。
OSがVistaなら、メイリオもきれいでお勧めです。

フォントの種類

また、こちらの当サイトのフォントリンク集には、商用利用可能なフォント配布サイトのリンクもありますのでご覧ください。

デザインテンプレート無料配布 || Cool Web Window
文字にアンチエイリアスをかけて文字は大きめにする
できれば、目立つために画像を使用しているので、文字は最低12px以上、アンチエイリアスをかけると文字がきれいに引き立ちます。
しかし、文字が小さいのにアンチエイリアスをかけてしまうと文字がつぶれて逆に見にくくなりますので、どうしても文字を小さくしないといけない場合は、アンチエイリアスをかけないのもひとつの方法です。

でも、画像編集ソフトも使いこなせない・・・って方は、CSSにて、重要な部分のフォントを大きくしたり、目立つ色にするだけでも効果はありますので、試してみてください。

4.ロイヤルティフリーのデザインテンプレートを使ってみる

例えば、テンプレートを真ん中にもってくる、それだけでも最初は難しい作業です。
どのようにHTMLを組んでよいのかわからないときは、ロイヤルティフリーのデザインテンプレートを使用するのが近道です。
この手のものは海外が多いのですが、いろいろ探してみると面白いかもしれません。

当サイトでも、フリー(ロイヤリティフリーでないものも含む)のデザインテンプレートを配布しているサイトを集めてみましたので、参考にしてみてください。

フリーデザインテンプレート/オススメなサイト || Cool Web Window

投稿日:2007年10月25日

トラックバック歓迎です。以下URLにて登録をお願いいたします。

このエントリーのトラックバックURL:

↓↓↓トラックバックしてくださった方々↓↓↓
※トラックバックされても管理人がスパムと判断したものは公開されません。

top