基本コンセプト(デザイン面)
ぱた・ウェブデザインラボラトリー では、以下のことに重点を置いたデザインを基本としています。
- HTMLはページの理論的な構造のみにして、ファイル容量を1バイトでも減らす方向で制作する。
- 色や文字の大きさなど、全体的なデザインは外部CSSで設定する。
文字の大きさについては、読み易さを優先して大き目に設定する。 - JavaScriptは原則として外部ファイルとする。
- 容量の大きい画像ファイルを最小限の使用にとどめ、使用する場合は出来る限りバイト数の小さい画像にする。
フラッシュ・クイックタイムなどは使わない。
HTMLファイル内で設定するデザインは、基本的に以下のとおりです。
-
HTMLによるデザイン
- 部分的な色変更
- 部分的な文字修飾
- IMAGEのBORDER属性
- その他、適当と思われる箇所を最小限に
-
タグ内CSSによるデザイン
- ブロック要素のWIDTH(巾)
- ブロック要素のHEIGHT(高さ)
- ブロック要素のTEXT-INDENT(始まりの文字のインデント)
- ブロック要素のLINE-HEIGHT(行間隔)
- その他、適当と思われる箇所を最小限に
基本コンセプト(アクセスアップ面)
せっかく苦労してH.Pを立ち上げたとしても、たとえ美的に素晴らしいH.Pを作成しても、誰にも見てもらえなければ意味がありません。
ぱた・ウェブデザインラボラトリー では、充分なアクセスを見込めるH.P制作を第一に考えています。充分なアクセスを確保するための、基本的なポイントは以下のとおりです。
-
全体のプラン・設計について
- 訪問者へのメリットが何かを考えたプラン
- コンテンツの整理・整頓(ターゲットを絞ったH.P作り)
- トップページの役割・サブページの役割を明確にする
- 有効なタイトル・キーワード・概要などをしっかりと検討する
-
デザイン面について
- ナビゲーション・ページデザインの統一
- ファイル容量は最小限に抑える(ページ表示のスピードが速いH.P作り)
- 読み易い文字の多きさ・改行の位置・行間など
-
アクセス確保について
- タイトル・キーワード等の配置を最適化する
(ロボット型検索で上位にリストアップされるためのHTML構造) - 検索エンジン登録・相互リンク・リンク集・メールマガジン等の有効利用
- 無料エリア・有料エリア間のバランス
(営利目的がないH.Pの場合は必要ありません。営利目的のH.Pであっても、全部を有料エリアにしてしまうとアクセスが極端に減ってしまいます) - 良いサーバー選び
- 検索エンジンで推奨されている正しいHTMLコードの使用
ぱた・ウェブデザインラボラトリー では、上記の各項目に重点を置いたH.P作りを心がけます。また、H.P作成ソフトなどであらかじめH.Pを作成しているお客さまへのアドバイス等も受け付けています。
トップページの制作手順
トップページは機能の面から見て、主に6つのタイプに分類されます。
-
トップページのタイプ
- 目次・カタログ型(実用的)----○
- ポータルサイト型(多量な情報を扱う)----○
- いきなりコンテンツ型(キャンペーン向き)----○
- エントランス型(ウェルカムメッセージ中心)----×
- イメージマップ型(マップリンクによる斬新なデザイン)----×
- アニメーション型(新感覚のデザイン)----×
ぱた・ウェブデザインラボラトリー では、1・2・3のタイプを積極的に推奨しています。なぜならば、充分なアクセス数を確保することを重点に考えたときに、以下のような考え方に基づいているからです。
- 「エントランス型」について...
早くコンテンツの内容を見たい訪問者にとって、"不必要なページ"となる場合が多いため。 - 「イメージマップ型」について...
容量の大きい画像を使用するため、ユーザー環境によって非常に"重たいページ"になる場合が多いため。 - 「アニメーション型」について...
フラッシュやクイックタイム等を使用することが想定される(これらもユーザー環境によって"非常に重たいページ"になる場合が多いため)。
ぱた・ウェブデザインラボラトリー では、アクセス数に重点を置いたときに、
フラッシュやクイックタイム等を使用してサイトを重たくすることは『マイナス100に対してプラスは1』ぐらいに考えています。
企業のH.P・個人のH.Pに関わらず、ほとんどの場合、@番の「目次・カタログ型」になると思われます。
-
トップページの制作手順
- 情報の整理(トップページに載せるべき情報を整理する)
- ビジュアルテーマを決める(イメージや色使いの選定)
- レイアウトを考える(タイトル・メニュー・コンテンツの配置)
- タイトル・ロゴをデザインする(ビジュアルテーマにマッチしたロゴ・デザイン)
- ナビゲーションのタイプを決める(ビジュアルテーマにマッチしたナビゲーション・デザイン)
トップページは、まず第一にサイトの内容の概要と印象を、訪問者に素早く伝えなくてはなりません。そのため、サイトの目的・種類によってデザインは大きく異なるのです。
サイトデザインの基礎
サイト・デザインの基礎として、ここでは文字・文章(とそのレイアウト)・色彩について考えていきます。
ポイントは以下の通りです。
-
文字・文章・行間のポイント
- 通常のフォントは「メイリオ」または「MS P ゴシック」「MS UI Gothic」を推奨します。(ロゴ・タイトルやナビゲーションデザインを除く)
- 1行の文字数・1行の幅を読みやすく調整する(20字〜35字程度が最適)
- 行間を読みやすく調整する(文字の大きさの0.2〜0.5倍分の行間を取る)
- 2行以上の文章には、センター寄せを使わない。
- 機種依存文字は使わない。
ぱた・ウェブデザインラボラトリー では、アクセス数の確保の一環として文章の読み易さを重要なものとして位置付けています。
1. のフォント選定について...
「メイリオ」や「MS P ゴシック」「MS UI Gothic」の他に、もう一つ一般的なフォントとして「MS P 明朝」があります。
ですが、印刷物ならともかくパソコンの画面で文字を読む際に、このフォントは比較的に読みづらい面があります。和風のH.Pなど特別な場合を除いて「MS P 明朝」の使用は控えた方が良いと考えてます。
5. の「機種依存文字」について...
m2(平方メートル)や(株)などの組文字は、ユーザーのパソコンやサーバーコンピューターによっては正常に表示されずに文字化けしてしまう場合が多々あります。これらの使用は絶対に避けるべきです。
-
色彩のポイント
- サイトのイメージに合わせて「ベースカラー」を決める
- 同系色2色+ポイントカラー1色の色使いがスッキリとまとまる(無難なプラン)
- 多色をうまくまとめる(ちょっと冒険なプラン)
- 原則として「WEBセーフカラー(216色)」を使用する
4. 「WEBセーフカラー」について...
ブラウザ共通で使用されている216色のことをWEBセーフカラーと言います。ユーザーのモニター環境によっては、この216色しかキチンと表示されない場合があります。
ページデザインの基礎
読み易い・分かり易いページを作成するには、もちろんレイアウトやデザインのセンスもありますが、まったくのアマチュアでも底々なレベルのものが作れる「基本的な3つの法則」があります。
ここでは、「基本的な3つの法則」について解説していきます。
-
基本的な3つの法則
- グループ化する(文章をグループ化して、見出し・小見出しをつける)
- メリハリをつける(強調したい文字を大きく、補足的な文字を小さく)
- 揃える(文章は左揃えが基本)
以上は、最低限の法則です。しかし、この最低限の法則すら守られていないH.Pが、サイト上には数限りなく存在するのも確かです。
- 「グループ化する」について...
だらだらと長く続く文章は非常に読みにくいものです。
文章を内容ごとにグループ化して、それぞれに見出しをつけると読みやすくなります。 - 「メリハリをつける」について...
訪問者は、ページが開いてから約3〜5秒で内容が"面白いかつまらないか"を判断してしまいます。
強調したい文字・画像や訪問者が興味を惹きそうな文字・画像を大きくすることによって、訪問者が他のサイトに移動してしまうのを防ぐことが出来ます。 - 「揃える」について...
文章のセンター揃えは非常に読みにくい文章になります。
また、文章に関連した画像が右にあったり左にあったり上にあったり下にあったりすると、目が左右に動かされたり、説明と画像が結び付き難くなり、とても分かりにくいページになってしまいます。
ナビゲーションデサインの基礎
ナビゲーションとは、いわゆる「リンク」のことです。(内部リンクであり、他サイトへの外部リンクではありません)
ぱた・ウェブデザインラボラトリー では、充分なアクセスを見込めるH.P制作を第一に考えたときに、効果的なナビゲーションと非効果的なナビゲーションを区別しています。
効果的なナビゲーションとは「分かりやすく・興味をそそられる」ナビゲーションのこと、非効果的なナビゲーションとは「分かりにくく・クリックしにくい」ナビゲーションのことです。
-
効果的なナビゲーション
- 文字リンク
- 分かりやすいアイコン+文字リンク
- 上記のどちらかを使用した上でデザイン的に統一感のあるリンク
-
非効果的なナビゲーション
- アイコンのみのリンク
- マップリンク
- デザイン的に統一感のないリンク
以上です。
あえて説明の必要はないと思いますが、
- 「アイコンのみのリンク」...
分かりにくい場合があります。(アイコンの中に文字が入っていればOK) - 「マップリンク」...
分かりにくい上に画像のバイト数が大きくなり、ユーザー環境によっては表示が遅くなる危険があります。 - 「デザイン的に統一感のないリンク」...
分かりにくいし、どれがリンクなのか迷ってしまいます。