Web をデザインするための 15 の超実践的なヒント footers_html/css

はい、これはほとんどのデザインプロジェクトの鍵の 1 つですが、最優先事項でもあり、今すぐ言う価値があります。シンプルなデザインは、フッターに配置する必要がある大量の情報を扱う場合に特に重要です。清潔な要素にこだわり、十分なスペースを確保し、目的を持って情報を整理します。乱雑にならないようにし、どの要素をフッターに含める必要があるのか、またなぜそこに含める必要があるのかを考えてください。フッターのサイズは通常、Web サイトのページ数と情報量に関係します。

Agra-Culture はフッターに色、アイコン、テキストを使用しますが、シンプルでトラフィックが多いです。各リンクはクリックしやすく、緑の背景に映る農場の画像の微妙なディテールが素晴らしいです。

2. 自分の情報へのリンク

Web サイトのフッターにある 2 つの最も重要なリンクは、「会社概要」と「お問い合わせ」です。ユーザーはあなたがどんな人なのか、あなたの会社やブランドについて知りたいと思っています。ユーザーがこの情報を見つけやすくします。また、あなたのチームのメンバーとその連絡先情報を知りたい人もたくさんいます (これは重要なツールです。多くの人が名刺を紛失しても、連絡先情報を見つけるためにあなたの Web サイトに戻ってきます)

Heckford には、会社、ソーシャルネットワーキングサイト、およびその仕事に関する情報へのリンクが多数含まれていました。

3. 基本的な連絡先情報を含める

完全な「お問い合わせ」ページにリンクする必要がありますが、フッターに関連する連絡先情報を表示するのも悪くありません。主要な電話番号、電子メール、実際の住所を含めます。 (番号を自動的にダイヤルしたり、電子メールを自動的に送信したり、クリック時に地図を表示したりできればボーナスポイント)

Root Studio は、テキストが巨大であることを除いて、「フッター」であるべきと考えられているほぼすべてに反するフッターを作成しました。、連絡先情報の非常に単純なリストに凝縮されています。 (これは、プロジェクトの協力について議論したいユーザーを容易にする影響力のあるデザインコンセプトです)

4. フッター内のリンクを整理する

フッターコンテンツ内のリンクと情報を分類すると、人々にわかりやすくなります。たとえば、連絡先情報、リンク、サービス、ソーシャルネットワーキングサイト、および最もトラフィックの多いコンテンツの一部を複数の列 (または行) に分割します。読みやすいように、各セクションにタイトルを付けます。

SugarSync のフッター情報には、見やすい列が多数含まれています。「製品」、「会社」、「詳細」、「つながり」という見出しの下で、次にアクセスしたいものを簡単に見つけることができます。

興味のある学生は、Youshe にも同様のデザインがあることがわかりますので、ホームページをチェックしてください。

5. 著作権に関する声明を含める

この小さなテキスト行があなたの救世主となる可能性がありますので、忘れないでください。ほとんどの Web サイトでは、Web サイトの下部に別の行に配置されていますが、フッターにさらに統合されるようにデザインすることを検討することもできます。著作権ステートメントは手書きすることも、小さな丸で囲んだ c ロゴを入れるだけでも構いません。通常、テキストには出版年と著作権者の名前が含まれます。コンテンツとデザインに対して複数の著作権侵害の申し立てを行うことができます (第三者によって部分的に作成されたサイトに適用されます)。

Adventure.com では、画面の下部に 1 行の著作権に関する声明が表示されます。より重要な情報リンクからスポットライトが奪われないように、この情報行には低コントラストを使用します。

6. 行動喚起を含める

ユーザーがフッターにアクセスしたら、何かをするように指示します。電子メール通知にサインアップしたり、ソーシャルメディアでフォローするよう招待したりすることが含まれます。クリックのコンバージョンという点では、この領域の価値を忘れないでください。

Collabogive は、フッター領域に「メール購読」バナーを追加します。この CTA は見やすく、フッターのデザインに溶け込んでおり、ユーザーは組織に参加しなくても組織から最新ニュースを入手できます。

7. グラフィック要素を使用する

通常、フッターは単なるブロックです。ロゴやグラフィック要素を追加すると、視覚的な面白さを加えることができます。この小さなスペースに、収まりきらないほど多くの要素を追加しないように注意してください。このシーンを想像してください。「Weibo/ブログ/何でもフォローしてください」と書くだけでなく、ロゴも含めてください。小さなアイコン要素を使用して、地図や電話番号などの横に追加することもできます (ただし、この情報を示すためにホバー状態エフェクトを追加する必要がある場合があります)

Kikk Festival では、フッタースペースにロゴと簡単な連絡先情報を使用して、イベントパートナーを強調します。アイコンのサイズに注意してください。それぞれのアイコンは見やすく、読みやすいものになっています。スライダーを使用して、この小さなスペースに多くの情報を収めます。

8. コントラストと読みやすさに注意してください

フッターの情報は通常、非常に小さいです。このため、テキスト要素と背景の間の色、太さ、コントラストが非常に重要になります。どの単語も読みやすくなければなりません。シンプルなフォントの使用を検討してください (サンセリフや中程度の太さが適切です)。白の背景に黒のテキスト、または黒の背景に白のテキストなど、コントラストの高い色を選択します。異なる色や派手なフォントの使用は避けてください。

P53 フッター情報には、最も伝統的な (そして最も読みやすい) テキスト背景の組み合わせ、つまり白と黒を使用します。

そうですね、カラーマッチングに関しては上手くなりたいわけではありませんが、それが正しいことを願っています。「数秒でカラーマッチングの達人になる!」の記事を参照してください。絶対に失敗しないウェブデザインの色の6つの原則

9. ウェブサイトのデザインテーマを含む

ウェブサイトのフッターは犬のしっぽのように見えてはなりません。ウェブサイト全体のデザインスタイルと一致している必要があります。色、スタイル、グラフィック要素はすべて一貫している必要があります。フッターに不適切なボックスを追加しないでください。これはよくある間違いです。要素の不一致により設計プロセス中に行き詰まらないように、プロジェクトの開始時から、この領域をどのように表示するかを検討する必要があります。

Swiths Interactive Group のシンプルなフッターはウェブサイト全体を補完しており、テーブルに座っている人物とその上にさまざまなアイテムが置かれている様子が描かれています。シンプルなフッターには関連情報が表示され、サイトと統合されているように見えます。

10. 小さくする (ただし小さすぎない)

一般的なフッターには小さな項目がたくさん含まれていますが、小さすぎないように注意してください。フッターのテキストは、Web サイトの本文で使用されるフォントサイズよりわずかに小さい場合があります。また、アイコンと画像は、選択したサイズで読み取れる必要があります (アイコンが何であるかわからない場合は、小さすぎます)。要素は、簡単にクリックまたはタッチできる程度の大きさでなければなりません。リンクが小さすぎる場合、またはリンク同士が近すぎてユーザーがリンクをクリックできない場合は、隅に座って泣いていてください。

Curious Space では、あまり伝統的ではないフッタースタイルが使用されており、スタイルの寸法の使用からその存在を感じることができます。フッターのテキストは、ページ上の他のテキストよりもわずかに小さく、薄く、軽いですが、見えなくなるほど小さいわけではありません。

11. より多くのスペースを使用します

フッターは通常狭いスペースにあるため、スペースと間隔が非常に重要です。フッター内の要素用のスペースとテキスト用の行間隔を十分に確保します。十分なスペースがあると、フッターがゆったりとした快適な印象になります。クリックやタッチも簡単です。フッター内のほとんどのリンクは他の場所にリンクしているため、これはユーザーエクスペリエンスにとっても重要です。フッターで使用するスペースは、サイトの本文とまったく同じである必要はありません (特に本文内に小さなスペースが必要なサイトの場合)

Sailing Collective では、要素間に水平および垂直のスペースを十分に使用します。次に、種類とクリックできるかどうかに基づいてそれらをまとめます。

12. 多すぎることに注意してください

グラフィック要素とヘッダーを使用するのは良いアイデアですが、十分と多すぎるの間には紙一重があります。これらの要素は慎重に使用し、特定の要素に対してのみ使用してください。ヘッダー、アイコン、または写真を使用する理由を自問してください。答えが単に「見た目が良いから」である場合は、もう一度考える必要があります。すべての要素には独自の意味がある必要があります。これは、使いやすいフッターをデザインし、スペースを最大限に活用するのに役立ちます。

Master & Dynamic のフッターから、less is more のデザイン美学を確認できます。シンプルなアイコンとテキストにより、フッター内を簡単に移動できます。

13. 階層感を作り出す

ウェブサイトの他の部分と同様に、フッターにも自然な階層が必要です。これは 2 つの側面からなるデザインであり、フッターは Web サイト階層全体の最下部に配置する必要があります (結局のところ、そこに配置する必要があります)。同時に、その内部の要素にも階層が必要です。最も重要な要素 (通常は連絡先情報、行動喚起、サイトマップ) が最も目立つようにする必要があります。著作権情報などの標準情報は、通常、この領域で最も小さくなります。

Griflan Design Inc. フッターで何をすべきかをユーザーが望む順序で伝えます。まずはメールで連絡し、どちらの方法もうまくいかない場合は電話をかけ、ソーシャルメディアで探します。

14. サブフッターの作成を検討してください

フッターはまだ必要ですか?サブフッターレイヤーを追加することを検討してください (これは実際に非常に一般的です)。サブフッターは、追加のレベルを追加したり、フッターにスペースを追加したり、フッターが密になりすぎないようにしたり、興味深いコンテンツ用に少しスペースを確保したりするのに最適です。この領域を使用して、名誉や行動喚起を強調表示します。

Smart Passive Income Blog の複数レベルのフッターはよくできています。行動喚起、次に Web サイトへのリンク、次にソーシャルサイトへの軽いリンクを含むサブフッターがあり、その後に免責事項とプライバシーポリシーが続きます。フッターナビゲーションの階層にはある程度の深さがあり、簡単に移動してクリックできます