ホームページ制作講座/こまホームページシステムズ静岡

ホームページ制作、作り方、運営、管理で何かお困りですか?ご質問やご相談を受け付けております。初心者の方歓迎です。個別のお返事は難しい状況ですが、ホームページ作成ビギナーズガイドとしてサイトの作成に反映させていきたいと思っています。伝わるホームページ制作・改善の「こまホームページシステムズ」は、大好きな事で仕事をする人をホームページ制作・Webデザインで応援します。

ホームページ制作講座 - Webデザインのビギナーズガイド

ホームページ制作講座 - Webデザインのビギナーズガイド
Webデザインとは(ウェブデザインのイメージ図)-概要-

紙に描いてみましょう

紙に描くことで、イメージが整理され、また、広がります。
※ 白黒で描くのがおすすめです。色に頼らないデザイン(設計)を考えやすいです。
また、自分がいいなと思うページを探して参考にするのもいいです。

▲MENU

ホームページ作成・構成の手順(形にし方)

出来るところから少しずつ…がコツです。 いきなり完璧なものを作ろうとしないことです(出来ちゃう人はそれでいいですが)。 実際に少し作ってみると、そこから新しいアイデアがひらめいたりしますから、 順番に固執することなく、思いついた所に少しずつ手を加えていきましょう。 おおざっぱに言って、半年とか1年とかかけて、じっくり育てていく感じがいいと思います。

なぜ、最初に完璧なものを作ってから一挙に公開しないかというと、 完璧なものを作ったつもりでも結局、 使ってるうちにより良いアイデアがひらめいて、少しずつ手を加えて育てていくことになるからです。 それにひょっとしたら、とんでもない大失敗に大きな時間とお金を注ぎ込んでいるかも知れません。 でも、少しずつ『実際に反応を見ながら』作っていけば、 間違いや勘違いなどがまだ小さな段階で訂正しながら、ホームページ作成を進めていくことが出来ます。

検索エンジン対策(SEO対策・検索エンジン最適化)などもそうで、 何々をやれば絶対上位表示!というものではありません(そうだとしたら、何万件何十万件の検索結果がみんな上位10位以内…なんて事になりますね)から、 約1ヵ月単位で反応を確認しながら、試行錯誤を繰り返していくことになります。 これがホームページが大きくなってしまってからだと、 全文書き換え!なんて事になった場合に、ものすごい労力が必要になってしまいます。 小さいうちから少しずつ、自分のサイトに合ったノウハウを貯めていけば、 そういったことも防げるでしょうし、ホームページが大きくなる頃には、 検索エンジン対策(SEO対策・検索エンジン最適化)上、より良い文章を書く事も出来るようになっているでしょう。

▲MENU

見やすいホームページデザイン(レイアウト)とは?

基本的なレイアウトはメニューも含めて全ページ共通にしましょう

サイト内でページを移動した時に、同じサイト内にいるという安心感を訪問者の方に持ってもらうために大切な事です。

メニューの位置なども把握しやすいので、使いやすいホームページになります。ちなみに、メニューの位置は1cmずれるともう分からなくなるといわれています。

ページ上部にはサイトの雰囲気を象徴する写真またはイラストや文字を配置

最初の印象が後まで尾を引くので、ページを開いた最初に目に入る部分に、サイトの雰囲気を象徴するものを置きます。

レイアウトは黄金比(1:1.618=約5:8)または白銀比(1:1.414=約5:7(または1:2.414=約5:12))で分割

1:1、2:1、3:4、なども、すっきりして良かったりします。

画面横幅はYahoo!などの大手ポータルサイトとほぼ同じにします。大手が皆その幅だという事はつまり、それが最も多くの人にとって一番使いやすいからだと考えてよいでしょう。逆に、自分のサイトを訪れるお客様のパソコン環境が明らかにそれと違うと分かっている場合は、こちらを優先した方が良いでしょう。

使いやすさの考慮

今開いているページはサイト内(メニュー)のどこなのか、が分かる工夫を

メニューはテーマ別に分ける

リンクボタンは大きめに

▲MENU

破綻しない色の使いかた

背景色は「白」 … 初心者の鉄則

雰囲気はパーツで出します。パーツをしっかり作ると、ホームページもしっかりとした感じに見えてきます。(これ、想像以上に重要です!)

背景を白にするのは、気が変わってサイトのデザインを変えたい時に、パーツの作り直しが極力少なくて済み、また何にでも応用が利くからです。背景に色を付けてしまうと、例えば季節毎にホームページの雰囲気をちょっと変えたい、といった場合に、ホームページ全部を作り直し…という事態になりかねません。

1色選ぶ←どんな気分になってもらいたいのか?

パターン1 … 選んだ色の明るさを変えた色(2~3色)と選んだ色とを使う

パターン2 … 選んだ色と同じ鮮やかさの別の色(1色)と選んだ色とを使う

文字色とその背景色は明暗の対比をはっきりさせる。

▲MENU

文章の書き方

掲載内容は5つに分類

Webサイトの基本的な構成は「会社概要(スタッフ紹介)」「お問合わせフォーム」「よくあるご質問と答(FAQ)」「お客様の声(活用事例)」「商品・サービス紹介」の5つ

ホームページは手紙的論文

誰に話しかけてるの?

もし、ホントの手紙だったら、文字を書けなくても、より良い文章の書き方が分からなくても、書く内容まで他人任せにはしませんよね?

「人」を感じてもらえるようなホームページ制作を心がけて(=おもてなしの心)

ホームページの題名(サイト名・タイトル)は20文字程度を目安に

本の題名はだいたいこれくらいの長さです

検索されたいキーワードと類語を意識した文章作り(検索エンジン最適化・SEO対策)

アクセス解析をして、試行錯誤。

メールアドレスの公開時は「@」に注意

「@」の記述を、タグ内は「%40」、タグ外は「@」とします。これで迷惑メールを全て防げるわけではないと思いますが、かなり有効な対策のようです。

▲MENU

Eメールやホームページで使わない方が良い文字

お客様の機械では正常に表示されていても、
他の機械で見た時に文字化けする可能性の高い文字です。
インターネット上で使わない方が良い主な文字一覧【ゆうゆうプラネット】

▲MENU

ファイル管理のコツ(初心者向け)

表紙(トップページ)名は「index.html」。2ページ目以降は英語でファイル名を付ける

ページが多い(または多くなる可能性がある)場合は、表紙(トップページ)以外のページファイルを内容のテーマ毎に別々のフォルダにまとめる。

フォルダ名は意味のある英語で

1フォルダ内の1ページ目は「index.html」。2ページ目以降は英語でファイル名を付ける。

画像、CSS(スタイルシート)、JavaScriptは一つのフォルダにまとめる

フォルダ名の例「imgs_etc」「shared」など。

各ファイル(画像、CSS、JavaScript)は名前の付け方で順序よく探しやすく並べる。
例:btn_botan.gif、icon_aikon.gif、mark_zugara.gif、logo_title.gif、_style.css、_java.js
※ メリット…ページファイル(HTMLファイル)以外はとにかくここにあるのでここを探せばよい。
※ デメリット…不要になったファイルを削除するのが不便。→しかし、最近のサーバーは大容量なので不要ファイルを削除しなくても容量的にはほとんど問題なし。
※ 画像ファイル名を「banner」のつづりで始めないようにしましょう。画像が表示されない場合があります(jpgだと大丈夫なようです)。悪い例「banner.gif」「banner_.png」「banner-.gif」「banners.png」「bannera.gif」

▲MENU

ホームページは全てのページが入り口

トップページにカッコイイ写真を大きくドンと載せておいて、 ENTER(入口)ボタンをクリックして内容に入って行くという構造(←この説明で分かりますか?)は、 閲覧者にとって二度手間ですので、基本的にはやめた方が良いと思います。 ホームページを検索した事がある人は分かると思いますが、 ネット上ではどこが入り口…という考えは通用しません。 ホームページの全てのページが入り口になります。 表紙(トップページ)=入口、ではないんですね。 ですので、各ページが全て入口であると考えて、 1ページあたり、1~3個程度のキーワードを良く選んで、 例えば一番重要なキーワードが○○だとしたら、○○専用のページを作る、くらいの気持ちで、 各ページを作り込んで行く事が重要です。

▲MENU

ブログの効用

基本的には書いた方が良いと思っています。 ホームページの場合は広告を出したり相互リンクを辿って来てもらう他は、 検索でヒットしないと見てもらえませんが、 ブログを大手のポータルサイト内で開設すれば、 それこそいろんな人が見に来ますから、 そこで興味を持った人がホームページを訪れてくれるでしょう。 検索されそうな単語をフルに使って、何かに特化した記事を充実させれば検索エンジン対策にもなります。 それに、ホームページだとつい商品説明だけで終わってしまいがちですが、 あってもなくてもいいようなキレイゴトだけの文章より、 裏事情とか、本音の部分、熱い理想などを通して、あなたの人柄が伝わった方が、 読む方としてもファンになりやすいし、安心して仕事も頼もうかなという気になりやすいと思います。 やっぱりどんな人か分からない人からは買いづらいですよね。

▲MENU

主なドメイン(gTLD:generic Top Leves Domain)の意味

●「.com」…会社組織などの営利団体(組織)用。ただし現在は誰でも登録可能。(Commercial)
●「.info」…用途に制限が無い。誰でも登録可能。
●「.net」…ネットワーク事業者(組織)用。ただし現在は誰でも登録可能。(Networks)
●「.org」…個人や非営利団体(組織)用。ただし現在は誰でも登録可能。(Organizations)
●「.biz」…企業や個人商店などの商用目的用。ただし現在は誰でも登録可能。

▲MENU
内部SEO対策に則したホームページ制作・Webアプリケーション開発「こまホームページシステムズ」 お問い合わせはこちら