【ワイヤーフレーム】webサイトを構成する要素をコンポーネントパーツ集として定義する手順。【画面設計】
たぐと申します。 東京のWeb制作会社でプロデューサーをしています。
webサイトのページを構成する要素をコンポーネントと言ったりします。
見出し、キャッチコピー、リスト、ボタン、画像、画像とテキストの組み合わせ、などなど。
今回は、そのコンポーネントの定義と管理についての考え方について大事だと思っていることをまとめます。
「コンポーネント」とはページを構成する部品群の総称。
コンポーネントを活用したwebサイト制作のステップですが、コンポーネントというものは、新規にwebサイトを作るたびに０から定義しなおすものではありません。
予め準備されているものと考えるべきです。
その使いまわせる汎用のコンポーネント準備について説明します。
コンポーネントというものはページを構成する「使い回しができる最小単位」と考えていただくと分かりやすいと思います。
コンポーネント定義のメリットについては以前以下の記事で紹介しているのでそちらも参照ください。
また、コンポーネントを定義するタイミングについての注意点もまとめています。
汎用的なコンポーネントを定義する。
コンポーネントの定義を行うにあたり、いきなりコンポーネントという最小単位から考えるのは効率的ではありません。以下のような手順で整理をするとやりやすいです。
手順1。webサイトを構成するページのパターンを想定しておく。
上記でお伝えした通り、いきなりパーツを考えるのではなく、もう一つ上のレベルで、webサイトがどのようなページから構成されるのかを考えるところからスタートすることをお勧めします。
サイトの種類も多岐に渡りますが、ここではBtoBのコーポレートサイトをイメージすることにします。 コーポレートサイトというと、概ね下記のようなページで構成されることが多いはずです。
- トップページ
- 会社情報（一覧、詳細）
- 強み
- サービス紹介（一覧、詳細）
- 事例紹介（一覧、詳細）
- イベント・セミナー（一覧、詳細）
- 採用情報
- お知らせ（一覧、詳細）
- お問い合わせ（トップ、入力、確認、完了）
実際世の中の一般的なコーポレートを見回しても大体これらのページ（コンテンツ）から成り立っていますよね？
そして、これらのページに入る要素も概ね似たのが多いはずです。
サービス一覧に入る要素、サービス詳細に入る要素、会社情報一覧に入る要素、会社情報詳細に入る要素、、そうやって考えていくと「あ、こういうパーツが必要だな」というイメージが湧いてくるはずです。
例を挙げます。イベント・セミナーの一覧には、 ・ステータス ・受付締切日 ・開催場所 ・セミナータイトル ・開催 ・登壇者名 ・登壇者写真 などが入ることが多いはずです。全ての要素を網羅できなくても大まかに「こういうものが入るよね」というイメージを持ち、それらがどういうパーツになるとわかりやすいか、というくらいの視点で整理していきます。
それをイメージしながら汎用的に使えるページの画面設計を定義します。
中に入るテキストや画像はすべて仮（アテ）のもので問題ありません。
手順2。ページごとの設計を進めながら使い回しできる部分を部品化していく。
使い回しが効く部分を部品として定義していきます。
- 機能・役割
- 重要度
などを鑑みて整理します。
具体的には、XDやSketchといったUI設計アプリで、アセット化、シンボル化という操作を行います。
定義ができたら、ページのテンプレート、コンポーネントパーツ集を複数のプロジェクト関係者で使いまわせるように共有します。画面設計のマスターデータを作るイメージです。
ここで、作成した汎用的なページパターンのことをここではテンプレートと呼ぶことにします。
テンプレートを予め定義するのは「インフォメーションアーキテクト」の役割。
この汎用的に使いまわせるテンプレートやコンポーネントを定義するのはとても重要なことです。 そこがブレているとまともなサイト設計はできませんし、定義したものを使ってもらうことも難しいです。
テンプレートを定義するのは、webサイト設計をマーケティング的視点で提案できる人にお任せするべきです。
ただ、一人で全部を担ってもらうというより、実際に各プロジェクトで画面設計を行う人の意見を聞き、取りまとめることができる人でないといけません。
テンプレートが定義できたらそれを実際のプロジェクトで利用する。
実際にwebサイト設計をするとなったら、テンプレートをコピーするところからスタートします。 マスターのテンプレートデータは更新しないようにしましょう。
画面設計を行うときは、「基本的に」予め定義されたテンプレートからを画面設計をするようにしましょう。
定義したコンポーネントだけで対応しきれない要素が出てきたら？
そこでもし足らない部品が出てきたら、どうするのがよいでしょうか？
それは新たに汎用のテンプレートに追加するべきかもしれません。
その部品が今後も別プロジェクトなどで使うことが考えられるものであるならば、新たに加えるコンポーネントとして、テンプレート管理者にアップデートを依頼しましょう。
汎用のテンプレートは随時チューニングをしていくことで、webサイトを構成する（可能性がある）要素を網羅できる可能性が高まります。
ただ、数が多ければ良いというものではありません。同じような意味合いのものが増えても混乱をきたすだけですので、重複のない必要なものだけに絞り込むようにしましょう。
また、汎用コンポーネントに追加するほどではないそのプロジェクトでしか使うことがなさそうなパーツの場合はどうでしょう。 その場合は、どのパーツがテンプレートに含まれない独自パーツなのかを記録して、デザイナーやコーダーにお伝えできる状態にしておくことをお勧めします。
なぜならデザイナーやコーダーは予め定義されたテンプレートを自分の制作用に管理しているからです。
すでに定義されているコンポーネントを使ってサイト設計がされていれば、予め定義されているものを使って作業ができるので制作工数は劇的に下がります。
独自追加されたコンポーネントがある場合は、それを改めてデザインしたり、HTMLやCSSのコーディングを行う必要があるので、そこは明示してあげる必要があるのです。
「型（テンプレートやコンポーネント）を押さえて進行し、差分になる部分を埋めていく」という考え方。
今回は、webサイトを構成するパーツをコンポーネントとして定義し、プロジェクトチームで使い回すときに押さえておくべき手順についてまとめてみました。
webサイトの良し悪しは設計に掛かっていると言っても過言ではありません。 ただ、設計と言ってもその基本的か型はあらかた固まってきていることも事実です。
そこで重要なのは、型は最初から押さえた上で進行し、差分になる部分を埋めていくという考え方です。
コンポーネントの定義と活用は、単にプロジェクトの効率化のためだけに有効なものではありません。 要素ではなく、そこにはいるコンテンツの中身を整理しアップデートすることに時間を割くにはどうしても必要な考え方です。
