ホームページ制作 良い例・悪い例

ホームページ制作での良い例と悪い例を見てみましょう。

ホームページ制作 デザイン・レイアウト

ホームページ制作の良い例とは

■情報がよく整理されている
情報が整理され、各情報への導線が確立されていて必要な情報をすぐに見つけることができる。

■ターゲット設定が明確
ターゲットが明確に設定されておりターゲットにとって使いやすく、心地よいデザインとなっている。

■文字・文章が整理されている
フォントが統一され、長文はしっかりと段落に分けられ、適度にリスト表示、図解等を挟むことによってストレスなく読み進めることができる。

■ブランディングが明確
商品の画像が鮮明で、説明も分かりやすく、商品が十分アピールされている。

■ページが軽い
ページが軽くストレスなく閲覧できる。

悪い例とは

■情報が散漫で見つけにくい
トップページにあれもこれも掲載したいのはわかりますがその情報がきちんと整理されておらずユーザーが必要な情報が見つけられない、あるいは見つける気にもなれないのは問題です。

■ターゲット無視
ターゲットの設定が曖昧で、誰に見せたいのかはっきりしないデザインになってしまい、訴求力に欠ける。

■文字の不揃い
フォントの不統一、行間、文字間のバランスが悪く非常に読みにくい、あるいは読む気にならない。

■ブランディング無視
商品の画像が暗い、解像度が低い、商品のコンセプトが見えない。
ページの印象は商品の印象に直結しますので、ユーザーの購買意欲は下がってしまいます。

■画像が重い
ページ内の画像容量が大きく表示に時間がかかってしまうと、多くのユーザーは離脱してしまいます。

コーディング

良い例とは

■XHTMLによるCSSレイアウト
XHTMLで文書構造を構築しCSSによってレイアウトがなされている。

■クロスブラウザ
最低限のブラウザに対しての対応が出来ている。

■ヘッダー情報が整理されている
メタ情報は必要最小限にとどめ、スタイルシート、JavaScript等は外部に出して読み込んでいる。

■メンテナンス性が確立されている
誰が見ても分かりやすい記述で書かれており、イメージ画像、CSS、JavaScript等しっかりとフォルダ管理されている。

悪い例とは

■テーブルレイアウト
すべてのレイアウトがテーブルによって構築されている。

■フレームの使用
メニュー部分、ヘッダ部分等にフレームが使用されている。

■クロスブラウザの無視
特定のブラウザでしか正常に閲覧するこのが出来ない。

■ヘッダー情報が長い
メタ情報、スタイルシート、JavaScriptなどの情報が長い。

■ツールによる不必要なコード
必要のないソースコードが多く挿入されている。

■メンテナンス性無視
常に同じ担当者がサイトを運用するのであれば問題はありませんが、そうであるとは限りません。
制作者にしか分からない複雑な記述ルール、フォルダ構成は問題です。