ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeウェブデザイン基礎講座 > ウェブデザインでよくある3つの間違い

ウェブデザインでよくある3つの間違い

投稿日:2014年6月20日   ソフトウェア:-

このチュートリアルでは3つのステップでレスポンシブデザインを作成する方法について紹介します。


Step1:はじめに

会社のウェブサイトは多くのことを物語ります。
良いウェブサイトは、閲覧者にとってこのサイトが重要であるという信頼を作り、何度も訪問したり取引をしようと促します。
一方で、悪いウェブサイトは、「戻る」ボタンを押して閲覧者が帰ってしまいます。
スタンフォード大学が行ったウェブの信頼性調査によると、75%がウェブサイトを見て会社の信頼性を判断するということです。

はじめに

ウェブを調べると、悪いウェブデザインの例はたくさん見つかります。
この種のサイトは、ウェブデザイナーにとっては面白くて、笑いを提供してくれるものではありますが、それらのものを見たくないという人にとっては実用性がありません。
結局は、アリの行列のようで見た目が悪いスクロールが必要なテキストを使って誰にとっても見つかりにくいサイトになってしまいます。
1990年代前半の見た目をコピーしてサイトをデザインしているなら誰でも、この記事をブックマークして後で読む必要があるでしょう。
調べるべきことがあるのです。

先に説明したことを取り上げるまでもなく、これらの例が現代のウェブにおいては失敗であることについて多くを明らかにしています。



Step2:失敗その1 - モバイルユーザーのことを考えていない

モバイル環境でのウェブ閲覧は、2012年当時はウェブトラフィック全体の30%で、2014年までに50%に増加すると予想されています。
もし、モバイルブラウザを無視するなら何かしらあなたを頼りにして来てくれた訪問者の半分がどこかに出ていく理由を与えてしまうことになります。

モバイルユーザーのことを考えていない

この失敗を挽回するのは簡単で3つのオプションがあります。
初めの選択はウェブサイトのモバイル版を作ることです。
サーバーはモバイル端末のブラウザをモバイル版のサイトに案内します。
このオプションの欠点は2つのサイトを作って管理する必要があるということです。
2番目の選択はモバイルアプリでウェブコンテンツを表示させることです。
この選択はほとんどの訪問者にとって望ましいものとなっていますが、デバイスごとにアプリを作る必要があり、コストがかかります。
3番目の選択はスクリーンの解像度(サイズ)にかかわりなく適切に表示されるレスポンシブウェブサイトを採用することです。
あらゆる点でベストな解決策の中から選べるレスポンシブウェブサイトのテンプレートはたくさんあり、制作と管理が必要なサイトのバージョンは一つで済むためです。






Step3:失敗その2 - 面倒なナビゲーション

ユーザーがウェブサイトを見て回るのに混乱するようになると、必要と思えるところならどこへでも行きます。
そのため、最小限のクリック数で行きたいところを探せるよう、また「戻る」ボタンを使わずに初めにいた場所に戻れるようにする必要があります。

この失敗も、フラッシュに頼らない、あるいはHTMLやCSS以外の技術で使いやすいナビゲーションを作ることで挽回可能です。
パンくずリストは訪問者がどこにいるか、どうすれば行けるかがわかるもう一つの方法です。
最後に、良い検索オプションはどこにもリストのない場合にユーザーが必要なものを見つけるのを助けます。



Step4:失敗その3 - 表示に時間がかかり過ぎる

昔は、サイトを紹介するフラッシュのスプラッシュスクリーンを使ったウェブサイトが数多くありました。
それらのサイトはもはや人気のあるものとはいえず、iOS端末がフラッシュをサポートしていないので、フラッシュを使うと画面の表示にずっと時間を費やすことになり、ユーザーが黙って待つことはなくなりました。
とはいえ、画面の表示に時間がかかるのはフラッシュが悪いのではありません。貧弱なコード、大きすぎるファイルサイズ、サーバー構成が原因になっているのです。

表示に時間がかかり過ぎる

ページの表示時間に関する問題を解決するのは、他の要因があると込み入ってきます。
まず何が原因なのかをデザイナーが識別することが求められるためです。
Pingdom Website Speed Testのようなツールを使うことが問題解決のスタートといえるのは、ボトルネックの原因となるフィードバックと共にスコアが提供されるからです。
問題点が特定されれば、コーディングや最適化のいずれであっても、デザイナーが解決し、サーバーサイドに問題がある場合はホスティングプロバイダが解決します。



Step5:最後に

大切なのは、これらのウェブデザインにおける失敗はありきたりの見た目の悪いサイトよりももっと深刻だということです。
美的感覚はテンプレートを使えば簡単に修正できますが、すべての訪問者のためにサイトのデザインを完璧に行わないと、長期的に高くつくことになります。
これらの間違いについて時間をかけてサイトを監査すると、閲覧者が快適になるだけではなく、それぞれの問題を解決することで検索エンジンのランキングも向上するのです。



引用:Web Design Library   著者:JeffOrloff  翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング