Webデザインに機能と統一感を!デザインのコンポーネントとは?

Webデザイン
さいとぅ
さいとぅ

Webサイトには、画面上部に固定するヘッダー(グローバルナビゲーション)や最下部に配置するフッターなど、構成する「型」があります。

また、ユーザーにアクションを起こしてもらうため、ボタンやカード・ページ遷移用のリンクなどサイト内にはいくつかの機能をもつパーツがあります。この各パーツを「コンポーネント」と呼びます。

本記事では、Web制作の「コンポーネント」について詳しくまとめていきます。

デザインのコンポーネントとは

はじめに、コンポーネントとは、以下の意味があります。

コンポーネント:
構成要素をなす各部分。また、独立した各部分の組み合わせで一つに構成できるようにしたもの。

出典元:コンポーネントの意味−デジタル大辞泉−コトバンク

つまり、上記のコンポーネントの考え方をデザイン工程にも取り入れることをデザインにおけるコンポーネントといえます。

具体的には、Webサイトを構成するコンテンツや要素を分解してとらえ、各パーツごとにデザインして要素の規模を大きくしていきます。

さいとぅ

Web制作においてデザインのコンポーネントは主流であり、普段から知らず知らずのうちに目にしていると思われます!

コンポーネントのメリット

それでは、コンポーネントがWeb制作において主流とされる理由やメリットを以下にまとめていきます。

機能のデザイン

Webサイトでは、デザインする各要素に「機能」も含みます.

たとえば、サイト内のボタンひとつとっても、“検索” “確定” “進む” “戻る” など複数の種類と役割があります。

統一感を重視してすべて同じデザインのボタンにすると、ユーザーに迷いを与え、目的のページや情報までたどり着けません。そのため、各要素のボタンはデザインによる統一感と役割の区別が必要になります。

左のデザインは、検索・決定・戻る・進むが全て同じなため、機能がわかりにくいです。右は、それぞれのデザインが異なるため、操作時の迷いがなくなります。
機能に応じたデザイン

さらに、サイト内の各ページにおいて機能ごとのデザインを合わせることで、サイト全体の統一感や同じ機能をひと目で理解しやすくなります。

変更の柔軟性

コンポーネントを使用するとき、そのベースとなるものを「マスターコンポーネント」といいます。
デザイン時は、マスターコンポーネントから複製した子となるコンポーネントをレイアウトします。

デザインに変更があった場合や差し替える場合は、マスターに紐づくすべてのコンポーネントが、同様の変更を適用する対象となります。

とくに、Webサイトのページ数やコンポーネント数が多い制作、複数のデザイナーで共同作業が必要な規模が大きい制作では管理・変更しやすく、スムーズなデザイン作業が可能です。

さいとぅ

Adobe XD、Figma などは、共同作業やコンポーネントがあつかいやすい代表的なデザインツールです!

コードの軽量化

デザインでコンポーネントを用いると、実装工程のコーディングでもメリットがあります。

コンポーネントの部分にはスタイル(CSS)を一括で指定できるため、コードの総量が抑えられます。結果として、サイトの高速化にもつながります。

また、デザインで変更がしやすいと挙げましたが、コードも同様に後からの変更や転用が容易です。

さいとぅ

デザイン工程でコンポーネント一覧を作成すると、さらにコーディングの時短になります!

コンポーネントの単位

前章の機能のデザインでも触れましたが、コンポーネントは機能や役割によって分割・展開されます。

Webサイトにおいてよく分割されるコンポーネントの単位は以下の通りです。

ヘッダー・フッター

ヘッダーはサイト(画面の)最上部に固定される要素です。
サイト内のどのページを閲覧していてもすぐさまトップページに戻るボタン(ロゴ)や任意のページに遷移が可能なグローバルナビゲーションなどが置かれます。

一方、フッターはサイトの最下部に配置される要素です。
サイト内の全貌を記載するサイトマップや連絡先、外部の関連サイト・SNSへのリンクなどがよく置かれます。

ヘッダーとフッターは基本的にどのページでも表示するため、大きな単位のコンポーネントといえます。

カード

カードはお知らせや記事、商材などカテゴリが同じで情報に区切りが必要な時に用いられる単位です。
情報量に応じてカードのサイズやデザインは異なりますが、並列に並べてグリッド表示されることが多いです。

カードのコンポーネントはひとつのページでのみ用いる場合とサイト内でページを横断する場合のどちらもあります。

フォーム

フォームはWebサイトを閲覧しているユーザーが、自身で情報を入力するときに必要な要素です。
おもに検索機能やお問い合わせで用いられるコンポーネントです。

要素自体はシンプルな構成ですが、情報の入力箇所が複数のテキストエリアに別れるため、統一感がありつつ、入力時に混乱をまねかないデザインが求められます。

ボタン

ボタンは、もっともコンパクトな単位のコンポーネントです。そして、ボタンの中でも複数の役割に分かれます。

代表的な例としては、以下の役割が挙げられます。

  • 内部遷移(戻る、進むなど)
  • 選択(カテゴリ、コンテンツなど)
  • 確定
  • 外部遷移(リンク)

どれもWebサイトでは頻出するボタンであり、役割が異なるので見た目も異なるデザインが必要です。

また、サイト内のどのページであっても同じ役割のボタンをコンポーネントで統一すると、快適な操作感が得られます。

コンポーネントの詳細度

ある程度大きな単位としてコンポーネントを分割しましたが、そこからさらに詳細なスタイルも設定できます。

ボタンを例にあげると、ボタンそのものの形や配色、内部のテキストや余白がスタイルを指定できます。また、シャドウの効果やホバー時のアニメーションなどもスタイルの一部です。
コンポーネントの詳細度(例:ボタン)

テキスト

Webサイト内の情報はおもにテキストで記載します。このとき、そのテキスト(コンテンツ)の役割によってデザインに変化をつけるため、役割ごとにコンポーネントが可能です。

見出しサイト内で見出しが必要なコンテンツは複数あり、そのコンテンツの規模によってフォントのサイズやスタイルを設定します。
本文サイトが複数ページにおよぶ場合は、本文のフォントサイズや文字の間隔、行間などもページ間で統一すると読みやすくなります。
装飾リスト表示や装飾テキストなど、本文とは異なるデザインが必要で繰り返し用いる場合は、その適用箇所専用のコンポーネントが必要となります。

大きな単位のコンポーネントを設定するとき、その情報量やコンセプトに応じた要素のサイズ・形状を決定します。

配色

配色は役割を明確にできる要素のひとつです。各要素に持たせたい役割をあらかじめ決めておくとともに、サイトやコンテンツになじむ配色が求められます。

効果

大きな単位のコンポーネントに、シャドウや光彩をはじめ特殊効果をくわえる場合も、適用するコンテンツごとにスタイルを統一します。

アニメーション

WebサイトをPCで閲覧するとき、マウスカーソルが機能をもつコンテンツを指すと、ホバーのアニメーションがしばしば起こります。このアニメーションも効果同様にコンテンツ・役割ごとに統一します。

余白

カードやボタンなどの内部の余白は、上記のスタイルを決める過程で自然と決定されることが多いです。
このとき、内部の要素はテキスト量でサイズが変わるため、テキストが増減したときのスタイルも考慮する必要があります。

さいとぅ

詳細なスタイルはレスポンシブ対応(画面サイズ)による変化の影響が出やすいので、場合に応じて調整します!

コンポーネントの実例(Wepot)

さいとぅ

今回取り上げたコンポーネントについて、Wepot のサイトを例にいくつか見てみましょう!

ヘッダー・フッター

Wepot のヘッダー(上)とフッター(下)

Wepot のヘッダーは各下層へのグローバルナビゲーションと記事検索機能にくわえて、記事のカテゴリを選択できるナビゲーションがあるため、ヘッダー内でも区別化しているのが大きな特徴です。

一方、フッターはグラデーションが目を引くお問い合わせと、サイトマップ、SNSへのリンクが並んでいます。

カード

Wepot のカード表示

Wepot には3種類のカードがあります。

その内訳は、トップページの新着記事と記事一覧、ページ下部の内部遷移です。

一覧用の記事カードはおすすめ記事として、内部遷移用のカードはページの内容に応じて各ページのフッターと一緒に表示(コンポーネントとして転用)しています。

ボタン

Wepot のボタン

ヘッダーのお問い合わせ、サイドバー、内部遷移のカード上、おすすめ記事から一覧への遷移や記事一覧のページ移動などでボタンを使用しています。

サイドバーとおすすめ記事のボタンは似ているデザインですが、形やホバーのアニメーションが異なり、詳細設定による役割の調整が確認できます。

さいとぅ

このように、ページ間でのまとまりや使いやすさを重視したコンポーネントによるデザインの作り込みが、Webサイトのクオリティを格段に向上させます!

まとめ

デザインにおけるコンポーネントは全体の統一感のみならず、機能や役割を持たせる有効な手法です。また、拡張性や保守性にも優れ、Webデザインには欠かせません。

Wepot では、継続的にお使いいただけるWebサイトを設計・制作いたします。お困りごとがございましたら、ぜひ一度ご相談ください。

ご依頼・ご相談はこちら

お客様の課題解決に最適なメンバーアサインでスムーズなプロジェクト進行をいたします。制作して終わりではなく、お客様が求める成果に結びつくご提案をさせていただきます。

この記事がシェアできます

この記事を書いた人
さいとぅ

さいとぅ
デザイナー

さいとぅ
デザイナー

Webデザインをはじめロゴデザインやインフォグラフィックなどのグラフィックデザインも幅広く対応可能です。コンセプトを重視し、ビジュアルから想いが伝わりひろがるようなデザインを軸としています。

  • Wepotについて

    アイコン

    Wepotはデジタルクリエイティブで課題を抱えるすべての人への解決策を提示できます。

  • 実績一覧

    アイコン

    Wepotには多種多様な実績があります。メンバーの強みが生きた実績をご覧ください。

  • 制作のご相談

    アイコン

    現在の課題やお悩みをお聞かせください。あなただけのクリエイティブチームを編成し解決へと導きます。