これからのWebデザインは、コンポーネント化を意識しよう

実践で学ぶ Web サイト制作ガイド まとめ

コンポーネントとは？

Web デザインにおいて、コンポーネントとは機能を持つ各パーツ（部品）の集合体です。例えば料金表ひとつとっても、テキストや線、ボタン、色など、様々な情報を組み合わせて作られていることがわかります。それらの要素をまとめて成り立っているものがコンポーネントです。

こちらの図を見てみると、画像の角丸やテキストのフォント、ボタンのスタイルはそれぞれ独立してデザイン・コーディングされています。これらを組み合わせると「コンポーネント」としてひとまとまりになるわけですね。

CSS フレームワークではおなじみ

サクッと Web ページを作成するのに便利な CSS フレームワーク。Bootstrapを皮切りに、現在では数えきれないほどの CSS フレームワークが存在しています。これら CSS フレームワークではコンポーネントが用いられ、必要な要素を組み合わせて、付随するクラスを付加するだけで素敵に Web ページが作成できちゃいます。有名ドコロの CSS フレームワークにおける、コンポーネントについての紹介ページは以下を参考にしてください。

• Material Design Lite
• Bootstrap
• Foundation for Sites 6

コンポーネント化するメリット

なんだか便利そうではありますが、具体的にどんなメリットがあるんでしょうか？

制作スピードを短縮できる

最初にコンポーネントを作成しておけば、Web ページを作成する際に必要なのは、これらのコンポーネントをうまく組み合わせていくという作業になります。ひとつひとつを最初からデザインしたり、コーディングする必要がなくなるので、Web サイトを制作をする作業効率を飛躍的に上げられます。もちろん最初にコンポーネント化する作業には時間がかかってしまうかもしれません。しかし、一度デザインがまとめられていたら、デザイナー以外の人でも簡単なカスタマイズや配置の変更などを行えます。チームで制作するなら、Web サイトの規模が大きければ大きいほど事前にコンポーネント化しておくことに意義があります。

カスタマイズしやすい

いくつかのパターンを用意しておけば、カスタマイズだって簡単にできちゃいます。見た目がほんのり違うだけで、要素自体は変わらない場合に便利です。デバイスによる要素のレイアウトやサイズの違い、ボタン色の変更など、考えられる場面はたくさんありますね。

Bootstrap を使った例だと、「.panel-」に続いて用意されたスタイルのコンポーネントを指定すると、異なる色を指定できます。

メンテナンスも楽ちん

カスタマイズのしやすさは、メンテナンスのしやすさにも繋がります。何度も繰り返し同じ記述をしてしまうというエラーを防ぎ、修正する場合を最小限の箇所のみで済ませられるでしょう。コンポーネント化をしていない場合、特に大規模のサイトにもなると、CSS の記述が多くなってどこを修正すればいいのかもわからなかったり、少しいじっただけで他の要素の表示が崩れてしまう…なんていう大惨事も考えられます。コンポーネントはコンポーネントだけで別の CSS ファイルを作成し、管理するといいですね。

スタイルガイドを作ろう

スタイルガイドとは、デザインのルールをひとつにまとめたルール集です。スタイルガイドを作ることで、統一感のある Web サイト制作や運営を行えます。特に将来的にサイトを更新したり、他の人にデザインや運営作業を依頼する時には大変役にたちますよ。

スタイルガイドと聞くと、配色やフォントなどの見た目部分のみにフォーカスされがちですが、コンポーネントもリスト化して一箇所にまとめておくと大変便利です！要素の見た目と一緒にコードを管理できますし、一覧表示されるので、クラス名の衝突も避けやすくなります。

さらに、パーツごと、コンポーネントごとにデザインしていると、どうしても全体像が把握しづらくなってしまいます。スタイルガイドとしてひとつにまとめておくと、組み合わせによって雰囲気にばらつきがでないよう、バランスを見ながらデザインをすすめられるでしょう。

これからの Web デザインの制作手順は？

それでは前述した過去記事「実践で学ぶ Web サイト制作ガイド まとめ」を見なおしてみましょう。そこでは

1. プランニング
2. サイトマップ作成
3. ワイヤーフレーム作成
4. デザイン
5. 画像をスライス
6. HTML マークアップ
7. CSS で組み立て・装飾
8. Web サイト公開

と紹介していましたが、これからは

1. プランニング
2. サイトマップ作成
3. ワイヤーフレーム・プロトタイプ作成
4. スタイルガイド作成・コンポーネントデザイン ←NEW!
5. 各デバイスに対応した画面デザイン
6. 画像の書き出し
7. HTML マークアップ
8. CSS で組み立て・装飾
9. Web サイト公開

こんな感じになるのかな？と思っています。もちろんスタイルガイド制作はこれまでもきちんと行っていた人もたくさんいると思いますが、これからは必須となるでしょう。このへんはまたちゃんと記事にしたいですね。

Web サイトはもはやひとつのページを表示して完結するものではなく、ユーザーが閲覧する場所や場面、デバイスによって姿を変える情報伝達ツールです。どのような場所で、どのような場面で、どのようにして閲覧しても、求められる情報が「その Web サイトらしさ」とともに伝えられる。それがこれから必要とされる Web サイトかなと思っています。