レスポンシブ Web デザインのベスト プラクティスとヒント

Google が引き続きモバイル フレンドリーなサイトを優先しているため、ビジネス向けの応答性の高い Web サイトを持つことがますます重要になっています。 Web サイトがレスポンシブであれば、すべてのデバイス (モバイル、タブレット、デスクトップなど) で美しく表示されます。

既存のサイトをオーバーホールするのは困難に思えるかもしれませんが、レスポンシブ Web サイトのデザインは難しくありません。 以下は、優れた使いやすい Web サイト製品を簡単に、手間をかけずに作成するのに役立つ便利なヒントとベスト プラクティスです。

あなたのスタイルを定義する

カラー パレットの作成

定義済みのブランド カラー パレットを使用する場合でも、独自のカラー パレットを作成する場合でも、明確に定義された視覚的階層を確立できるように、対照的な色を十分に含めることを忘れないでください。 ニュートラルカラーのさまざまな色合いを追加すると、デザインに多くの柔軟性がもたらされます.

モバイルを第一に考える

最初に小さなモバイル デバイスで Web 要素がどのように表示されるかを考えてから、大きなビューポート サイズに適用します。 たとえば、ボタンは指で押すのに十分な大きさで、他のクリック可能な要素から十分離れていますか?

スタイル ガイドは、最初のレイアウトの前ではなく、レイアウトの後に作成します。

忠実度の高いプロトタイプやモックアップを作成する前に、スタイル ガイドを作成して Web 要素のスタイルを定義することを好む人もいます。 ただし、要素がページ上に配置され、相互に関連して表示されると、ページの全体的なデザインが失われる可能性があります。 いくつかのモックアップを作成して開始し、スタイルを確立してから、必要に応じて残りのページを作成します。

一貫性があるからといって、退屈である必要はありません

ユーザビリティのヒューリスティックは重要ですが、ウェブ上の何十億もの他のウェブサイトから際立っていることも重要です。 より記憶に残り、あなたのウェブサイトのブランドを群集から際立たせるために、何か違うことを試すことを恐れないでください. あなたのウェブサイトは創造的で、非常に使いやすいものになります。 優れた UI デザイナーやデジタル アート ディレクターは、これら 2 つの要素のバランスを取ることができるはずです。

スタイル設定と標準化が必要な要素には次のものがあります。

• 見出しレベル: H1、H2、H3…
• メインまたはヒーローの画像
• プライマリ ナビゲーション
• 二次ナビゲーション
• ボディコピー
• 番号付きリストと箇条書きリスト
• コールアウトまたはバッジ
• コンテンツ画像の扱い
• 引用スタイル
• ウィジェット (ローテーター、ソーシャル埋め込み、カレンダーなど)
• 大きなコールトゥアクションボタン
• セカンダリ ボタンまたはテキスト リンク
• フォーム要素
• 脚注と合法的なマウスの種類
• ソーシャルシェア

タイプ

ブロックをコピー

文字間隔 (トラッキング)、マージン、行間 (リーディング) を調整して、階層を再定義します。 間隔が狭いほど、テキストが重くなり、閉所恐怖症になります。

デスクトップ画面の左端から右端まで続く長いテキスト ブロックは、非常に目に負担がかかる可能性があることに注意してください。 可能であれば、より狭いコピー ブロックを使用します。 ただし、間隔が広すぎると、乾燥した散らばった感じが生じる可能性があります。

壊すことを恐れないで

コンテンツが非常に多い Web ページがある場合は、引用符、コールアウト、画像、スタイル付きリスト、表などを使用してコンテンツを少し分割します。アコーディオン、ドロップダウン、カルーセルを組み込んで、ページを興味深く有益なものにすることもできます。 .

はい、人々は下にスクロールします

ウェブページのすべてがデジタル フォールドの上に表示されなければならないと考える、昔ながらの罠に陥らないでください。 最も重要なコンテンツや説得力のあるコンテンツをページの上部に配置して、ユーザーをさらに下に誘導します。 これは、創造的でありながら説明的な見出し、説得力のある導入文、または強力な画像である可能性があります。

関連している

2020 年の主要なデザイン トレンド

サイズアップタイプ

一般的に言えば、レスポンシブ Web サイトでは 14 ～ 18 ピクセルのフォント サイズに固執します。 一般に、コピーの大きなブロックにはシンプルなサンまたはセリフ フォントを使用し、適度に対照的な書体の色を使用した明るい背景に保持します。 メインの見出しは大きくすることができますが、モバイル サイズのブレークポイントが検出された後は、スタイルを少し小さくする必要がある場合があることに注意してください。

タイプ カラー

文字の色の秘訣は、簡単に確認できるように背景から十分なコントラストを持たせることですが、多くのデザイナーが知らないのは、文字のコントラストが強すぎて目がきつく、振動しているように見えることがあることです。見たとき。 暗い背景に明るい文字を使用するのは控えめにし、小さなテキスト ブロックにのみ使用してください。

タイプ 重量

太いフォント スタイルは、小さいサイズでは読みにくく、大きいサイズではページが暗く重く感じられる場合があります。 細くて軽いフォント スタイルは、Retina および Retina タイプの画面では見栄えがよくなりますが、多くの標準解像度の画面ではかすれて見えることがあります。

ナビゲーション

ハンバーガー！

ナビコンは、3 本の線が重なり合った小さなサンドイッチやハンバーガーのようなアイコンです。 一般的なユーザー層がオンライン技術に精通していないと思われる場合は、常にナビコンの上または横に「メニュー」という言葉を含めてください。 これまでのユーザー調査によると、ナビコンの横または上に「メニュー」または「ナビゲート」という単語を含めると、ユーザーはサイトを閲覧しやすくなることが示されています。

長いスクロール ページの下部に [トップに戻る] ボタンを含める

調査によると、多くのモバイル デバイス ユーザーは、モバイル Web ブラウザー内で Web ページのトップに簡単にジャンプする方法を知りません。 これを解決するには、ウェブページの下部に「トップに戻る」ボタンを用意してください。 これにより、フッターに反映されていない場合でも、ユーザーはサイト ナビゲーションに簡単にアクセスできます。

もう 1 つのオプションは、スティッキー ナビゲーションを作成することです。 これは、ページをどれだけ下にスクロールしても、常に画面の上部に表示されるトップ サイト ナビゲーション バーです。 このルートを選択する場合は、スティッキー ナビゲーションの高さが 100 ピクセルを超えないようにしてください。そうしないと、小さいビューポート サイズでページ コンテンツ用のスペースが不足する可能性があります。

設計用語集:

叫ぶ
ページの残りの部分よりも強く扱われ、注目を集めることを意図した短いテキスト。

ブロックをコピー
テキストのグループ化された段落または一連の段落。

(デジタル) フォールド
スクロールせずに表示されるウェブページの部分を指すために、ウェブサイトのデザインで（「スクロールの上」とともに）使用されます。 画面サイズは大きく異なるため、折りたたみを定義するピクセル数の定義はありません。

セリフ
特定の書体で文字のストロークを仕上げるわずかな突起。

サンセリフ
サンセリフ、サンセリフ、ゴシック、サンセリフ、または単にサンセリフの書体は、ストロークの終わりに「セリフ」と呼ばれる小さな突出した特徴を持たない書体です。 この用語は、「なし」を意味するフランス語のsansと、「線」を意味するオランダ語の schreef に由来する「 serif 」に由来します。

タイプ (印刷) 重量
ストロークの相対的な太さから生じる活字フォントの文字の相対的な暗さで、明るい、太字、極太字などで表現されます。

ユーザー
何か、特にコンピューター、デバイス、またはその他の機械を使用または操作する人。

ビューポート
情報を表示するための表示画面上のフレーム領域。

ホワイトスペース
ページ レイアウト、イラスト、彫刻では、余白はしばしばネガティブ スペースと呼ばれます。 それは、マークされていないページの部分です: 余白、ガター、および列間のスペース、活字の行、グラフィックス、図、または描画または描写されたオブジェクト。