モバイルで信じられないほどに見えるようにウェブサイトを再設計する方法
公開: 2016-01-24[ Proto .io は、起業家や新興企業が実際のアプリのように見える完全にインタラクティブで現実的なプロトタイプを作成するために使用するモバイル アプリのプロトタイピング ツールです。]
15 年前、Web サイトの再設計は、はるかに簡単な作業でした。デスクトップ エクスペリエンスの外観を決定し、それに応じてコンテンツを整理し、Web サイトを構築するだけでした。 信じられないことに、一部の Web サイトはいまだに真のモバイル エクスペリエンスを欠いています。
デザインは終わりのないキャッチアップ ゲームのように感じることがありますが、これらのモバイル アプリの専門家は、どのデバイス、デスクトップ、またはモバイルでも見栄えがするように Web エクスペリエンスを再設計するプロセスをガイドします。
ハンサムなモバイル体験のためにウェブサイトを再設計する方法
Handsome (@HandsomeMade) は、「あらゆるレベルでの人間中心の思考」と「意図的に美しく楽しいソフトウェア」をコアバリューとするデザインおよびテクノロジー企業です。 クリエイティブ ディレクターの Brandon Termini とテクニカル ディレクターの Alex Zub が、これらの原則をモバイル Web サイトの再設計にどのように適用するかについて説明します。
Termini 氏によると、ハンサムなウェブサイトの再設計の鍵は、「モバイル ファーストの設計アプローチ」を採用して、ユーザー エクスペリエンスを可能な限りエレガントで使いやすいものにすることです。 「モバイル ファースト デザインを適用する 1 つの方法は、小さな画面サイズから始めることです。これにより、インターフェイスを可能な限り簡素化し、本当に重要なものだけを画面に表示する必要があります。」
Zub 氏は次のように付け加えています。 多くの製品では、レスポンシブ グリッド システムに固執することは理にかなっています。これにより、あらゆる種類の画面で優れた外観を維持しながら、構築に必要な労力が簡素化されます。」
モバイルで美しく見えるようにウェブサイトを再設計する方法
Termini 氏にビジュアル デザインのベスト プラクティスをいくつか紹介してもらいました。 「私たちが何年にもわたってまとめてきた何百ものすべきこととすべきでないことがあります」と彼は言います。 彼がハンサムで導入したベスト プラクティスのトップ 3 は次のとおりです。
- レイアウト階層を慎重に検討してください。 「成功したレイアウトとは、ユーザーが意図した順序で見たり読んだりすることができることを意味します。 余白、色彩理論、タイポグラフィなどの適切な使用はすべて、これにおいて極めて重要な役割を果たします。」
- 色を適切に使用します。 「あなたのブランドにふさわしい色を選び、それらがうまく調和するようにしてください。 行動喚起ボタンなどの重要な UI 要素に関連付けるヒーローの色を使用します。 ユーザーがインターフェースを通過し、行き詰まらない適切な場所では、色を控えめに使用するようにしてください。」
- タイポグラフィは目に優しくなければなりません。 「タイポグラフィがブランドに適切であり、デザインしているデバイスで読みやすいことを確認し、装飾的な文字を控えめに使用してください。」
モバイル ウェブサイトの再設計のテスト
もちろん、モバイル サイトを構築したら、優れたユーザー エクスペリエンスを確保するために、そのペースを調整する必要があります。 Termini 氏は次のように述べています。 潜在的なユーザーに最初の手描きのスケッチを見せたらすぐにテストを開始し、設計されたシステムを完全に構築するまで、プロセス全体でテストを続けます。 フィードバックを聞き、統合し、反復できるように設定することは、製品の成功にとって非常に重要です。」
あなたにおすすめ:
反営利条項はインドのスタートアップ企業にとって何を意味するのか?
Edtech スタートアップがインドの労働力のスキルアップと将来への準備をどのように支援しているか...
今週の新時代のテック株：Zomatoのトラブルは続き、EaseMyTripはスト...
インドの新興企業は資金調達を求めて近道をする
デジタル マーケティング プラットフォームの Logicserve が 80 億ルピーの資金を調達し、LS Dig...
レポートは、Lendingtechスペースに対する新たな規制精査を警告しています
Zub 氏は次のように付け加えています。 また、オフィスにすべてのデバイスを配置することは事実上不可能であるため、クラウド内の多数の「仮想」デバイスへのアクセスを提供するオンライン サービスを利用して、可能な限り自動化しています。 適切な自動化への投資があれば、今後クロスデバイス テストを簡単かつ迅速に実行できます。」
モバイル Web サイトの再設計のテストと QA の方法について、さらに詳しく知りたいと考えていました。 そのために、Crowdsourced Testing (@crowdsourcingqa) の CEO である Simon Papineau から話を聞きました。 Papineau 氏は、多数のモバイル アプリ、Web サイト、ゲームなどをテストした経験で遭遇した問題点のいくつかに対処するために、Crowdsourced Testing を作成しました。
デスクトップで機能するものがモバイルでも常に機能するとは限らず、その逆もある
Papineau 氏は次のように述べています。 モバイル ユーザーの意図、考え方、目的はまったく異なります。 訪問者は、電話で 20 分もかけて会社の歴史や詳細を読むことはありません。
代わりに、彼らが望むものをできるだけ直接的かつ迅速に提供してください。 それがあなたの連絡先情報である場合は、追加の綿毛なしでホームページに直接掲載してください。」
Papineau 氏によると、課題の 1 つは、モバイル Web サイトの再設計が多くのデバイスで適切に表示され、適切に機能することを確認することです。 企業ができる最善のことは、訪問の大部分を占める上位 15 ～ 20 台のデバイスに注目することです。 サイトが完全に表示されないモバイル デバイスは常に存在します。 しかし、そのデバイスが訪問者の 0.05% を表している場合、おそらく追加の開発努力をする価値はありません。」
レスポンシブ デザインを使用して Web サイトを再設計する方法
Bob Bentz は、さまざまな業界のクライアントのウェブサイトの再設計を監督するフルサービスのモバイル マーケティング エージェンシーである ATS Mobile (@atsMobile) の社長です。 Bentz は、Web サイトのエクスペリエンスが高解像度のデスクトップ モニターと同じようにモバイル デバイスでも見栄えがするようにすることに情熱を傾けています。
なぜレスポンシブ デザインなのか? プライマー
「レスポンシブ Web デザイン (RWD) は、HTML5 で最も一般的に設計されており、ほぼすべての新しいモバイル Web ビルドで選択される可能性があります」と Bentz 氏は言います。 「CSS3 と Javascript を使用して設計することもできます。 レスポンシブ デザインには、あらゆるデバイスに対応するように流動的に変化するため、非常に柔軟であるという顕著な利点があります。 RWD は、デバイスに関係なく同じコードを送信し、クライアント側で再配置することで機能するため、同じ Web ページをどのデバイスでも表示できます。」
レスポンシブ デザインの実際の動作を確認するには、このブログ投稿をデスクトップ画面に表示してください (まだ行っていない場合) (お待ちください!)。 ユーザー インターフェイスが「中断」して再配置されるウィンドウ サイズが複数あることに気付くでしょう。そのため、使用するデバイス (およびそのデバイス内のウィンドウの大きさ) によってページの外観が異なります。
では、レスポンシブ デザインはどのように機能し、ウェブサイトの再設計に使用する必要があるのでしょうか? 「レスポンシブ Web サイトの再設計は、ユーザーのデバイスがデスクトップ、タブレット、ファブレット、スマートフォン、フィーチャーフォン、またはウェアラブル (Apple Watch など) であるかどうかに関係なく、同じ URL で同じ HTML コードを提供します」と Bentz 氏は言います。 「また、サイトの画面サイズに応じて異なる反応を示すこともあります。 開発者は、モバイル ユーザーとタブレット ユーザーに使用するグラフィックスとコンテンツを決定できます。 テキストと画像は、ブラウザや画面サイズに合わせて調整できます。」
レスポンシブ デザインを使用すると、モバイル デバイスの現状が変化するたびに新しい更新を行うことがなくなります。 「新しいデバイスが市場に出て Web サイトにアクセスするとき、サイトがレスポンシブ デザインで構築されていれば、追加のプログラミングは必要ありません」と Bentz 氏は言います。 「しかし、最も重要なのは、レスポンシブ デザインが Google が推奨するデザインのベスト プラクティスであることです。 多くの Web サイトで、RWD はモバイル対応と実装の容易さの間で適度なバランスを実現しています。」
レスポンシブ ビジュアル デザインのベスト プラクティス
Bentz 氏によると、次のベスト プラクティスを考慮に入れることで、レスポンシブ Web サイトの再設計を最適な状態で行うことができます。
- シンプルで印象的なヘッダー。 「ヘッダーとマストヘッドは、主要なセールス ポイントを損なわないようにシンプルにする必要があります。 ロゴは重要なブランド イメージです。 過度に横長のロゴは、小さな縦型画面では見栄えがよくない可能性があります。」
- 使いやすいナビゲーション。 「ナビゲーションは、小さな画面でははるかにトリッキーです。 多くの場合、デザイナーは通常、サイトの右上にある 3 本の水平線で示されるナビゲーション ボタンを使用します。 ハンバーガーの周りをバンズで囲んだように見えることから「ハンバーガーメニュー」と呼ばれています。 一部のサイトでは、外側に拡張して画面の大部分をカバーできる左側のナビゲーションを使用しています。」
- たくさんの画像。 「モバイル画面にあまりにも多くの画像を含めることは困難ですが、言葉はすぐに UI を圧倒してしまいます。 したがって、デザイナーは、コピーで画面を窮屈にする代わりに、ユーザーが複数の製品画像をスワイプできるようにする画像カルーセルをよく使用します。」
- フッターの賢い使い方。 「消費者はフッターをナビゲーション ツールとして使用することに慣れており、スクロール ヘッダーの上の貴重なスペースを占有しません。 また、非常に重要な「お問い合わせ」リンクも含める必要があります。」
ゴージャスなウェブサイトのリデザインは、ゴージャスなプロトタイプから始まります
モバイル向けにウェブサイトを再設計する方法を学ぶのは簡単なことではありませんが、経験をテストするのに役立つ強力なラピッド プロトタイピング ツールを使用することは、最大の違いを生みます。 コピーをトリミングし、要素を削ぎ落とし、ナビゲーション スキームを理解したら、モバイル Web サイトの再設計が引き続き使用可能で直感的かどうかについて、ユーザーからすぐにフィードバックを得ることができます。 次に、テルミニが提案したように、本当に自慢できるプロトタイプができるまで繰り返します。