見出し画像

Webデザインの基本　ビジュアルヒエラルキー編

SynergySolo

イントロダクション

ウェブデザインは、ユーザーが情報を見つけやすく、使いやすくするための重要な要素です。今回は、特に重要な要素の配置やホワイトスペースの活用、テキストやコンポーネントの強調方法について、簡潔に解説します。これらのベストプラクティスを理解することで、より魅力的で効果的なウェブサイトを作成する手助けになります。初心者でもわかりやすいように、具体的な例を交えながら説明していきます。

前提

この記事はWebデザインの基本を説明していくシリーズの第7話です。
過去の記事を読んでいただくとよりわかりやすくなります。

過去記事一覧

  1. Webデザインの基本　全体像編

  2. Webデザインの基本　タイポグラフィ編

  3. Webデザインの基本　カラー編

  4. Webデザインの基本　写真とイラスト編

  5. Webデザインの基本　シャドー編

  6. Webデザインの基本　境界半径編

  7. Webデザインの基本　ホワイトスペース編

ウェブデザインのベストプラクティス

1. 重要な要素の配置

まず、ページの上部に重要な要素を配置することが大切です。上部に配置された要素は、より多くの注意を引きます。また、画像を使う際は慎重に選びましょう。特に大きな画像は強い視覚的なインパクトを持つため、効果的に使用することでユーザーの関心を引くことができます。

2. ホワイトスペースの活用

ホワイトスペース（空白）は、要素間の分離を生み出し、視覚的に要素を強調するために戦略的に使用します。テキスト要素においては、フォントサイズ、フォントの太さ、色、ホワイトスペースを駆使して重要性を伝えましょう。具体的には、タイトル、サブタイトル、リンク、ボタン、データポイント、アイコンなどが強調すべきテキスト要素です。

3. コンポーネントの強調

重要なコンポーネントを強調するために、背景色、影、またはボーダー（またはその組み合わせ）を使用します。例えば、あるコンポーネントAを強調するためには、コンポーネントBを目立たせないようにすることも一つの手段です。具体的に強調すべきコンポーネントとしては、テストモニアル（お客様の声）、コール・トゥ・アクションセクション、ハイライトセクション、プレビューカード、フォーム、価格表、テーブル内の重要な行や列などが挙げられます。

これらのベストプラクティスを活用することで、ユーザーにとって見やすく、使いやすいウェブデザインを実現することができます。

サンプル

実際にサンプルを見てみましょう。
beforeはこんな感じです。何が強調されているのかわからないですよね。

前回のCSSファイルに手を加えてみました。今回は一部おさらいもありますが、変更したところを中心に紹介します。

.Container_WineBed {
  background-color: #676767; /* メインカラー */
  color: white; /* アクセントカラー */
  margin-top: 100px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px;
  row-gap: 20px;
}

1. 基本設定

まず、.Container_WineBed というクラスの基本設定について説明します。このクラスはウェブページの特定のセクションに適用されます。background-color: #676767;は、そのセクションの背景色を指定しています。ここでは、ダークグレーのような色が設定されています。color: white;は、テキストの色を白に設定しています。このコントラストによって、テキストが背景に対してはっきりと見えるようになります。

2. レイアウトの調整

次に、レイアウトの調整について見ていきましょう。margin-top: 100px;は、このセクションの上部に100ピクセルの余白を追加する設定です。これにより、上にある他のコンテンツから適度な間隔を空けることができます。display: grid;は、このセクションのレイアウトをグリッド形式に変更します。グリッドレイアウトは、複数のアイテムを整然と配置するために便利です。

3. グリッドの設定

最後に、グリッドの具体的な設定について説明します。grid-template-columns: repeat(2, 1fr);は、2つの等しい幅の列を作成する設定です。ここで、1frは1フラクションユニットを示しており、2つの列が均等に幅を分け合います。column-gap: 10px;は、列間の間隔を10ピクセルに設定し、row-gap: 20px;は、行間の間隔を20ピクセルに設定します。これらの設定により、要素間に適度な余白ができ、見た目が整ったデザインになります。

このように、CSSを使ってデザインを調整することで、ユーザーにとって見やすく、使いやすいウェブページを作成することができます。

Afterを見ての通り、強調すべきところが強調されています。

Githubでも公開してるよ！

先ほどのコードはGithubで公開しているよ。
ここ見てね！


この記事が気に入ったらサポートをしてみませんか？