Html5+CSS ホームページ制作

*画像のレイアウトタイプの赤い文字の部分をクリックすると、 そのレイアウトタイプの説明のページにリンクします。

デザイン

デザインの注意点

 デザインですが、閲覧者は「老若男女」様々です。 製作者のデザインの好みと万人の閲覧者の好みは別です。 せっかくホームページを作成しても、閲覧者に気に入られなければ再度訪問してもらえません。

 ”自分がどう思うか?”という事も重要ですが、特に、宣伝して注目されたいサイトの場合は、 ”他人が操作しやすいか?”という事を重点において常識で考えて、デザインした方が利口です。

 特に配色は、なるべく柔らかい色を選択して過激にならないように、 ボーダーの太さや色で効果的なアクセントをつけましょう。 画像の配置や選択は、けっこう重要です。

 重要な事は「コンテンツの記事」を>ターゲットにして、注目してひきつけるような配色が好ましいと思います。

 閲覧者がページを開くとだいだいの人の視線は、「上」(>下)や「左」(>右)に注目します。 その事を考えてデザインしましょう。

 「JavaScriptやFLASH」は、どの閲覧者も操作がしやすく効果的にほどほどにした方が無難です。

 「FLASH」を制作するにはけっこう手間がかかりますが、 その手間のわりには、訪問者には嫌われている事が事実です。 「FLASH」は効果的にアクセントと考えて程々にした方が無難です。

 特に「JavaScript」は、1ページに対してせいぜい「 2つ 」くらいに心掛けないと、 ページの反応が重く鈍くなり訪問者に不快感を与えてしまうので、注意が必要です。

 訪問者は、「JavaScript」を楽しむのではなく、「コンテンツの記事」の記事情報を知りたいだけです。

「JavaScript」の中で特に「アコーディオン式のメニュー」は、 製作者は解りやすくても、訪問者には操作に戸惑いや不快を感じる事が多いので、 なるべく避けたいツールの一つです。

 「JavaScript」や「FLASH」に手間をかけるよりも、 コンテンツの記事の方を充実した内容にするよう労力を費やした方が、 効率のいい作業ができます。

 ホームページの視覚的効果は、ホームページを運営してからある程度落ち着いた状態で、 実際にインターネットを通してWebブラウザで客観的に閲覧してみて、 どうしても必要と感じた時に設置するように心掛けましょう。 (どうしても、カッコ良さが優先したくなるのが人間ですけれどもネ!)

 訪問者に記事情報をゆっくり読んでもらいたい記事の部分には、 ページ内リンクを貼らないでおきましょう。 あまり、便利にするとその”ゆっくり読んでもらいたい記事”から逃げられる可能性が増えます。

 記事の内容により、暖かい「色」・落ち着いた「色」・注目して欲しい「色」・強調したい「色」を、 ページの内容に合わせてセンスよく選択する必要が有ります。

 背景色は、基本的に「白」が無難で1番有利です。 その他の「色」はなるべく淡い色の方がベターです。

原稿制作

 何よりも説得力の有るコンテンツの原稿・記事が無ければ、始まりません。

 記事の内容により配色等のセンスにも気を配る必要が有ります。 例えば、恋愛についてのサイトにバックが「黒」はタブー(=邪道)ですよね、 その他の画像にしても希望のにじむものがベターですよね。

 コンテンツの内容は、最初からうまく書こうと悩み過ぎずに、 訪問している相手の事を考えて、具体的に誤解の無いように伝えたい事を素直に書くように心掛けましょう。 その素直でストレートな文面が自然とセンスのいいデザインに反映されます。

 自分だけ解っていても、相手に解らない文面や相手に伝わらない文面は避けましょう。 また、訪問者には、様々人達が閲覧します。専門的な知識のレベルも100人いれば100人とも違います。 どの様な人でも解るような文面にする事が重要です。

 原稿を書く時は、自分を基本に中心に考えて作成する事は、皆同じですが、 「html文書」にする段階では、”訪問者(=ユーザー)がどう捉えるか?”を基本に作成する事を重点に置く事がポイントです。

 クオリティーの高いホームページにしたければ、”タメ口風”では話しになりません。 訪問者を見下すような言葉や上から目線の言葉を選ばずに丁寧な言葉の選び方を選択しましょう。 間違い無く訪問者が好感を持てる様な文面にするように心掛けましょう。

 やはり、原稿の誤字・脱字には十分注意しましょう。 ページ数が増えるとだんだんと入力ミスが増えますが、1文字違いで意味がぜんぜん変わります。

 特に重要なお知らせ等は、注意がよりいっそう必要です。

検索エンジンにとってわかりやすいHTMLページ

綺麗に構造化されたわかりやすいHTMLページ

画像編集について

 画像編集は、お金に余裕が無ければフリーの画像編集ソフト「GIMP」で十分です。

 「GIMP」を使った事のない方は、最初からすべて覚えようとしないで、 まずは、画像の「拡大・縮小」と画像の保存方法さえ解れば、ホームページの画像を編集できます。

 「GIMP」に興味が湧いたなら、少しずつ他の機能も学習して行けば申し分の無い、覚えて損の無い性能です。

 「GIMP」に関しては、こちらを参考にしてみてください。 初心者向けに解りやすく解説しています。

 あの「yahoo!」や「google」のロゴは、「GIMP」や「Inkscape」で作成したというのは、 あまりにも有名な話です。

ページトップへ