ウェブサイトデザインの経験 ウェブサイト構築におけるよくある間違いのまとめ

ウェブサイトデザインの経験 ウェブサイト構築におけるよくある間違いのまとめ
注意: 計画、設計、開発のいずれの場合でも、これらの間違いは避けなければなりません。

1. ナビゲーションメニューは画像とFLASHを使用する

もちろん、ナビゲーション メニューで画像や FLASH を使用すると、プレーン テキストよりも見栄えが良くなりますが、検索エンジンは画像や FLASH を認識しません。ナビゲーションに美しい画像を使用する必要がある場合は、背景を置き換える方法を使用できます (この方法については次回説明します)。ナビゲーションに FLASH を使用する場合は、お手伝いできません。ナビゲーション メニュー リンクの XML ドキュメントを作成し、検索エンジンに送信することをお勧めします。

2. 画像の不適切な使用

ウェブページを美しく見せるために、あちこちに画像を貼り付けることがよくあります。これは誤りです。コンテンツに関係のない画像は少なくする方がよいでしょう。これらの画像をコンテナの背景にすることができます。

3. コンテンツ内での特殊フォントの使用

楷書体はとても美しく、草書体も宋書体に劣らないことは認めます。しかし、すべてのコンピュータにこれらのフォントがインストールされているわけではありません。これらの特殊なフォントを使用すると、他の人のコンピューターで表示される Web ページが見苦しくなります。

4. 新しいウィンドウが開きます

お願いします! 画面をウィンドウで汚さないでください (特に現在のオペレーティング システムの貧弱なウィンドウ管理テクノロジでは)! 新しいウィンドウが必要な場合は、自分で開きます。デザイナーが新しいウィンドウを開く本来の目的は、ユーザーを自分のサイトに留めておくことです。しかし、これはユーザーのマシンを制御することの悪影響を無視しています。この戦略は、ユーザーが「戻る」ボタンで前のサイトに戻りたいときに、もう戻れなくなるため、自滅的です。特にモニターが小さく、ウィンドウが最大化されている場合、ユーザーは新しいウィンドウが開かれたことに気付かないことがよくあります。そのため、ユーザーが元のサイトに戻りたい場合、使用できない灰色の「戻る」ボタンが表示されます。

5. 実用上意味のない特殊効果

派手なテクニックの使用は避けてください。これらの効果は Web ページにとって実際の意味を持ちません。

6. コンテンツのスクロール

コンテンツスクロールにより、より小さなスペースに多くのコンテンツを表示できます。それが利点の一つです。しかし、コンテンツのスクロールは、メリットよりもデメリットをもたらす可能性があります。すべてのプラットフォームとブラウザがスクロールをサポートしているわけではありません。W3C の見解では、コンテンツのスクロールによりユーザー エクスペリエンスが低下します。

7. ユーザーが望むコンテンツを入手するのが難しい

あなたのウェブサイトでのユーザー体験が迷路に迷い込むようなものだったらどうなるでしょうか? 3 クリック ルールについて聞いたことがありますか? 小規模な Web サイトの場合、ホームページ上のどの情報も 3 回以上のクリックを必要としません。大規模なサイトでは、ナビゲーションとツールバーを使用して操作性を向上させます。

8. ファイル名が標準化されていない

この点を無視しないでください。たとえば、ニュース ページでは、2323123.html のような非標準化された命名方法の代わりに News.html を使用できます。標準化された命名方法を使用すると、検索エンジンにメリットがあるだけでなく、Web サイトの将来の保守と管理にも役立ちます。

9. 長い記事はページ分けされない

ページ区切りのない長い記事は、Web ページの読み込みが遅くなり、ユーザーの読み疲れを引き起こします。そのため、長い記事の場合はページ区切りを設定することをお勧めします。

10. 間違った色の組み合わせはウェブページを読みにくくする

必要がない限り、白い背景と黒のテキストを使用し、汎用フォントを使用するようにしてください。

11. 後戻りできないポイント

バックリンクは Web ユーザーの生命線であり、ハイパーテキスト リンクに次いで最もよく使用されるナビゲーション機能です。ユーザーは、Web ページが導く先を自由に試すことができ、「戻る」ボタンを 1 回または 2 回クリックするだけで前のページに戻ることができます。

12. 目立つクリックカウンター

ウェブサイトに目立つクリックカウンターを設置することを軽々しく考えないでください。ウェブサイトを設計するのは、自分が重要だと思うものを販売するためではなく、訪問者にサービスを提供するためです。ほとんどの視聴者は、カウンターは意味がなく、偽造が容易であり、視聴者は広告を見たくないと考えています。サイトの人気度を示す場合は、訪問ログを表示するリンクを提供することをお勧めします。

13. フレームワークを使用する

カウンターと同様に、フレームも Web 上でますます人気が高まっています。ほとんどのウェブサイトでは、画面の左側にフレームがあります。しかし、設計者はフレームワークの使用時に多くの問題があることをすぐに発見しました。フレームを使用する場合、17 インチのモニターがないと Web サイト全体を表示することはほぼ不可能です。フレームを使用すると、サイト内の個人のホームページをブックマークすることもできなくなります。おそらくもっと重要なのは、検索エンジンがフレームを混同し、サイトをリストに表示できないことが多いことです。

14. 音の不適切な使用

音の使用にも注意が必要です。インライン サウンドも、Web デザイナーにとっては避けるべきものです。サウンドを過度に使用すると、視聴者にあまりメリットがなく、ダウンロード速度が遅くなるためです。マウスの音を聞くのは最初は楽しいかもしれませんが、何度も聞くと間違いなく煩わしくなります。音を使用する前に、それが自分にどのような影響を与えるかを慎重に検討する必要があります。

15. 互換性が低い

あなたのウェブページは 1024 でもきれいに見えますか?では、1280 に変更してみてはどうでしょうか?すべての人のモニターの解像度が同じというわけではありません。あらゆる解像度で完璧な Web ページを作成することはできませんが、あらゆる解像度でエラーが発生しないことを保証できる Web ページを作成する必要があります。
あと 2 つのポイントがあります。Web はコンピューターでしか閲覧できないと考えないでください。世界にブラウザは 1 つしかないと思ってはいけません。

17. ウェブサイトの立ち上げを急ぐ

ウェブサイトにはコンテンツがなく、ウェブサイトのプログラムにバグがあります。これらの問題が解決されたらリリースしてください。コンテンツが豊富でプログラムバグが少ないウェブサイトだけがユーザーを引き付けます。

18. ウェブサイトを公開した後、検索エンジンにログインしない

顧客から、「私のウェブサイトが公開されている場合、Baidu で検索すれば見つかりますか?」と尋ねられました。私はいつもこう答えます。「Baidu は私の家族が運営しているわけではありませんし、あなたの家族が運営しているわけでもありません。Baidu はあなたがいつウェブサイトを公開したか知りません。」したがって、Web サイトを公開した後は、主要な検索エンジンのログイン ポータルに Web サイト情報を送信する必要があります。

19. 空白を残さない

空白スペースに注意してください。十分なスペースがある場合でも、画像、テキスト、不要なアニメーション GIF で Web ページを乱雑にしないでください。デザイン時にこれらを使用しないようにします。

20. インタラクティブ性の欠如

ユーザーが Web サイトとやり取りしたり、ユーザー同士がやり取りしたりできるようにします。したがって、少なくともゲストブックを用意して、訪問者が Web サイトに戻ってくるように促し、Web サイトのコンテンツを拡張できるようにしてください。これは非常に重要であり、Web 2.0 の中心的な考え方です。

<<:  49 個の JavaScript のヒントとコツ

>>:  インデックススキャンを使用したMySQLソート

推薦する

MySQL外部キーの3つの関係例の詳細な説明

この記事では、例を使用して、MySQL 外部キーの 3 つの関係について説明します。ご参考までに、詳...

MySQL データベースの基本的な SQL ステートメントの概要

この記事では、例を使用して、Mysql データベースの基本的な SQL ステートメントについて説明し...

MySQL のスローログ監視の誤報問題の分析と解決

以前は、さまざまな理由により、一部のアラームは真剣に受け止められませんでした。最近、休暇中に、すぐに...

HTML は Double 11 クーポン取得を実装します (クーポン取得ページを開く時間を設定します)

さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <!DOCTYPE htm...

ico ミラー コードを HTML に追加します (favicon.ico はルート ディレクトリに配置されます)

コード:コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC &...

NginxにおけるRewriteのリダイレクト設定と実践の詳しい解説

1: アドレス書き換えとア​​ドレス転送の意味を理解する。アドレス書き換えとア​​ドレス転送は異なる...

モバイルの赤い封筒の雨機能ページを実装するための JavaScript HTML

この記事の例では、モバイル紅包雨機能ページを実現するためのHTMLの具体的なコードを共有しています。...

editplus の Zen コーディング例コードの説明

たとえば、次のように入力します。 XML/HTML コードdiv#ページ>(div#ヘッダー&...

Tomcat9 Windows サービスのインストールに関する詳細なチュートリアル

1. 準備1.1 service.bat を含む tomcat 圧縮パッケージをダウンロードします。...

CSS3 でシンプルな白い雲が浮かぶ背景効果を実現

これは非常にシンプルな純粋な CSS3 の白い雲の浮遊する背景効果です。浮かぶ白い雲の特殊効果は、C...

仮想マシンのLinux初心者がIPを設定し、ネットワークを再起動する

仮想マシンを初めて使用する方や、仮想マシンに Linux をインストールしたばかりの方は、システムが...

Kali に docker と portainer をインストールする方法

dockerの登場により、多くのサービスが徐々にハードウェアアーキテクチャへの依存から脱却しました。...

MySQL 外部キー制約とテーブル関係の概要

目次外部キーテーブルの関係を決定する方法テーブル関係を作成する方法1対多の関係 - 従業員テーブルと...

Linux (Ubuntu 18.04) に vim エディタをインストールする方法

デスクトップ システムをダウンロードするには、Ubuntu の公式 Web サイト (https:/...

Vue+Element UI でサマリーポップアップウィンドウを実装するプロセス全体

シナリオ: 検査文書には n 個の検査詳細があり、検査詳細には n 個の検査項目があります。実装効果...