見出し画像

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

SynergySolo

イントロダクション

ウェブデザインにおいて、シャドウは要素を際立たせ、深みを与えるための重要なツールです。しかし、適切に使わなければデザインが乱雑になりかねません。本記事では、シャドウの使い方のベストプラクティスを紹介します。シャドウを使うべきかの判断から、要素ごとの適切なシャドウの大きさ、インタラクションに応じたシャドウの変化や色付きのシャドウの活用方法まで、段階的に解説します。これらのポイントを押さえることで、洗練されたプロフェッショナルなデザインを実現する手助けとなるでしょう。

前提

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

過去記事一覧

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

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

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

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

Webデザインにおけるシャドウのベストプラクティス

1. シャドウの使用判断と基本的な使い方

シャドウを必ずしも使用する必要はありません。ウェブサイトの個性に合う場合にのみ使用しましょう。シャドウは小さな量で使うことが重要です。全ての要素にシャドウを追加しないようにし、適度なバランスを保ちましょう。また、シャドウを濃くしすぎないようにすることがポイントです。

2. 要素ごとのシャドウの大きさ

小さな要素には小さなシャドウを使って注目を集めます。中程度のサイズのシャドウは、少し目立たせたい大きなエリアに使用します。インターフェースから浮き上がって見えるようにしたい要素には、大きなシャドウを使用します。このように、要素の大きさや重要性に応じてシャドウのサイズを使い分けることで、視覚的な階層を作り出すことができます。

3. シャドウのインタラクションと実験


マウス操作に応じてシャドウを変えることも効果的です。クリックやホバー時にシャドウを変化させることで、ユーザーの操作に対するフィードバックを視覚的に提供できます。さらに、色付きのシャドウを試してみることも一つのアイデアです。これにより、デザインに独自性と遊び心を加えることができます。

以上のポイントを守ることで、シャドウを効果的に使い、ウェブサイトのデザインを引き立てることができます。適切なシャドウの使い方を習得することで、デザインに深みと魅力を持たせることができるでしょう。

サンプル

実際にサンプルを見てみましょう。
前回のCSSファイルに手を加えてみました。今回は変更したところだけを紹介します。

header {
  font-size: 60px;
  text-align: center;
  font-weight: bold;
  font-style: italic;
  color: #676767; /* メインカラー */
  border-bottom: #676767; /* メインカラー */
  text-shadow: 0 10px 15px rgba(0, 0, 0, 0.7);
}

headerにシャドーをつけました。
font-size: 60px;: フォントサイズを60ピクセルに設定し、非常に大きな文字を表示します。

  • text-align: center;: テキストを中央揃えにします。ヘッダー内の全てのテキストが中央に配置されます。

  • font-weight: bold;: テキストを太字にします。強調されて視覚的に目立ちます。

  • font-style: italic;: イタリック体にして、スタイルに変化を加えます。

  • color: #676767;: メインカラーとして #676767（グレー系の色）を使用します。

  • border-bottom: #676767;: ヘッダーの下にボーダーを引きますが、ここでは色のみ指定されているため、線の太さを指定する必要があります（例：border-bottom: 1px solid #676767;）。

  • text-shadow: 0 10px 15px rgba(0, 0, 0, 0.7);: テキストに影を付けます。影の位置は水平方向0ピクセル、垂直方向10ピクセル、ぼかし半径15ピクセル、色は不透明度70%の黒（rgba(0, 0, 0, 0.7)）です。これにより、テキストが浮き上がって見える効果が生まれます。

.Container_PhotoOfIsu img {
  box-shadow: 0px 10px 20px 10px rgba(0, 0, 0, 0.4);
}

.Container_PhotoOfIsu クラスの中にある img 要素に対して以下のスタイルを適用しています：

  • box-shadow: 0px 10px 20px 10px rgba(0, 0, 0, 0.4);: 画像にボックスシャドウを付けています。具体的には、

    • 水平方向のオフセットは0ピクセル（影が左右にずれない）

    • 垂直方向のオフセットは10ピクセル（影が下にずれる）

    • ぼかし半径は20ピクセル（影が20ピクセル分ぼやける）

    • スプレッド半径は10ピクセル（影が10ピクセル分広がる）

    • 色は不透明度40%の黒（rgba(0, 0, 0, 0.4)）

このシャドウ効果により、画像が浮き上がって見える視覚的効果を作り出し、画像の立体感を強調します。視覚的に強調するためのテキストと画像のスタイルを設定しています。ヘッダーは大きく、太く、イタリックで、影を付けることで目立たせています。画像にはボックスシャドウを追加して立体感を持たせています。


Githubでも公開してるよ！

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


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