すべてのデバイスでサイトの見栄えを良くする方法

ちょうど10年前、ウェブマスターは、さまざまなプラットフォームで表示するためにウェブサイトの複数のバージョンを作成することを心配する必要はありませんでした。 消費者は、自宅やオフィスでデスクトップまたはラップトップコンピュータを使用して、製品の調査、休暇の予約、最新ニュースの閲覧を行いました。 画面は大きさは異なりますが、同じデザインパターンで消費者に情報を提供し、予測可能性があり、仕事が少し楽になりました。

今日、消費者はデスクトップ、ラップトップ、スマートフォン、タブレット、電子書籍リーダー、およびゲームコンソールからWebにアクセスします。 これらのデバイスは、さまざまな接続速度を使用し、さまざまな画面サイズ、さまざまな解像度で提供され、反応時間の点で亀からウサギまでの範囲の処理速度を提供します。 消費者がさまざまなデバイスでページを閲覧している場合、ブランドとのやり取りにどのデバイスを使用しても、サイトの見栄えを良くするにはどうすればよいでしょうか。

この投稿では、覚えておく必要のある要素について説明し、複数のデバイスで表示できるようにWebページを最適化するための役立つヒントをいくつか紹介します。

さまざまなデバイスでサイトを表示する方法

あなたがほとんどのアメリカ人のようであるならば、あなたはおそらくスマートフォンかタブレット、あるいはその両方を持っています。 ただし、これらのデバイスにさまざまな画面サイズ、プロセッサ、およびオペレーティングシステムがすべて搭載されている可能性は低く、現在市場に出回っています。 幸い、HubSpotの優秀な人々は、各デバイスでテストしなくても、さまざまなデバイスでWebサイトを表示できるツールを作成しました。 彼らのデバイスラボは2013年に立ち上げられ、サイトのURLを入力するだけで済みます。

デバイスラボでは、さまざまなデバイスやオペレーティングシステムでページがどのように表示されるかを示すだけでなく、さまざまなプラットフォームからのモバイル訪問者の割合に関するクイックレポートを生成します。 iPhone 4 / 4S、iPhone 5、iPhone 6/6 Plus、Samsung Galaxy S3 / S4 / S5デバイス、および今日最も人気のあるタブレットデバイスのレポートが表示されます。

モバイルフレンドリーサイトを作成する方法

Device Labは、さまざまなプラットフォームでWebサイトを表示するのに役立ちます。 ページがタブレットで途切れているか、訪問者からのズームとスクロールの操作が多すぎるかはわかりますが、モバイル対応プラットフォームを開発するために必要な変更を加える方法については説明していません。 消費者がサイトにアクセスするデバイスに関係なく、ユーザーフレンドリーな魅力的なWebサイトを確実に見つけられるようにする必要があります。

起業家は、どのデバイスでも見栄えのするサイトを作成しようとしているウェブマスターにいくつかの基本的な出発点を提供します。 手始めに、あなたはあなたの現在のサイトを調べて、それが今日のウェブユーザーと一致することを確認するために時間をかけるべきです。 世界中で10億人以上がスマートフォンを使用しており、その多くがスマートフォンをインターネットの主要なアクセスポイントとして使用しています。

サイト全体のデザインを簡素化することから始めます。 読み込み時間を短縮し、モバイルデバイスで見やすくするために、よりシンプルなページデザインとより大きなフォントサイズを検討する必要があります。 「折り畳みの上」という古い新聞用語は、現代のウェブデザインにおいて重要です。 視聴者がモバイルデバイスでページを下にスクロールする必要がある場合、視聴者はすぐに諦め、適切に設計されたサイトを支持します。 重要な情報が折り畳みの上にあることを確認し（スクロールして見つけられないことを意味します）、大きくてタッチ可能なボタンを使用します。 バットダイヤリングは過去のものですが、太い指は日常的にスマートフォンで誤ってボタンを押すことにつながります。

現在のWebサイトを変更したくない場合は、モバイルサイトを作成することもできます。 あなたのビジネスのためのモバイルサイトを開発することはあなたの伝統的なウェブサイトとは別に存在するが接続されている並列ウェブサイトを確立します。 プロセッサは、訪問者がデスクトップ/ラップトップまたはスマートフォン/タブレットから発信されているかどうかを判断し、URLを入力するとすぐにモバイルサイトにリダイレクトします。

ただし、モバイルサイトにはトレードオフがあります。 2番目のURL、特に.mサブドメインを使用するモバイルサイトを構築すると、検索エンジンでの可視性が低下します。 GoogleとBingは.mサブドメインで見つかりません。可視性を高め、検索エンジンを最適化するために、ウェブマスターが1つのURLを使用するようにプッシュします。

そうは言っても、予算によっては、プライマリサイトを再構築する代わりに、別のモバイルサイトを作成する必要がある場合があります。 目立たないモバイルサイトは、モバイルオーディエンスを完全に見逃すよりも優れています。 モバイルサイトをメインサイトにリンクすることを確認してください。そうすれば、ギャップの一部を埋めることができます。

最良のオプション

もちろん、あなたはいつでもあなたのビジネスに多額の投資をして、いつでもどんなデバイスでも動作するサイトを再構築することができます。 アダプティブでレスポンシブデザインにより、使用しているデバイスに関係なく、訪問者がページをクリックするたびに適切に表示されることが証明されているWebサイトを構築できます。 両方の概念の簡単な紹介は次のとおりです。

• アダプティブデザイン：大企業はアダプティブデザインに多額の投資をしています。 アダプティブWebサイトは、各ユーザーのデバイスを数秒で検出および識別し、その特定のデバイスの機能に一致するページを生成します。
• レスポンシブデザイン：レスポンシブデザインは、カスケードスタイルシート（CSS）テクノロジを使用して、古い携帯電話を除くほとんどのデバイスで正しく表示されるように自動調整するWebサイトの単一バージョンを作成します。 レスポンシブデザインは、ディスプレイのサイズやデバイスのプロセッサの速度に関係なく、サイトの見栄えを良くするのに十分な柔軟性を備えています。

これらのアプローチには欠点があります。 アダプティブデザインは、今日のWebサイトデザインの頂点を表していますが、実装とサポートには非常に費用がかかります。 レスポンシブデザインはより手頃な価格ですが、アダプティブデザインのレベルではありません。 それでも、他のオプションと比較して、応答性は、単純なモバイルサイトを構築するよりも頭と肩を並べています。

Webの再設計を検討するときは、この投稿で言及した要素を念頭に置いてください。 予算に関係なく、どのデバイスでも表示され、ユーザーフレンドリーなWebサイトを設計するための資金を確保する必要があります。 今日、それはスマートフォン、タブレット、そしてますます多くのスマートテレビです。 明日、消費者はあなたのページを冷蔵庫のドアのキッチンや鏡のバスルームで見ているかもしれません。 挑戦のために今日あなたのウェブサイトを準備してください。