webサイトの画面設計。コンポーネント定義が効率化のカギ。
たぐと申します。
東京のweb制作会社でプロデューサーをしています。
今回はwebサイトの企画・設計を行うwebディレクター、インフォメーションアーキテクトの方向けに書きます。
webサイトの設計には、ステップがあります。
まずは大枠から、そこから詳細に落としていきます。
例えば
- 課題
- 必要なコンテンツ整理
- 全体構造整理
- 導線整理
- 画面設計
- 機能設計
こんな感じ。
画面設計をする際、画面設計書、もしくはワイヤーフレームと呼ばれるものを作成すると思うのですが、効率的な進め方ができていますでしょうか。
時間をかけてやっていると、いろんなルールを作ってしまい、ページ数が増えれば増えただけ、また、クライアントから注文が入ったらその分ページを構成する要素が増えていきがちです。
そうならないために・・・・
今回は「どうやってページを構成する要素を定義したらいいの？」
と思っている方の手助けになる話をします。
要コンポーネント化。ページの構成要素は使いまわす。
まず、画面設計を作る際、ページを構成する要素を定義していく。
コンポーネント化という考えが重要です。
コンポーネント化とはなんでしょうか？
- 使い回しができる最小単位
- 画面にそのままブロックとして積み上げられるもの
というような理解をしておくとシンプルでわかりやすいかもしれません。
定義したコンポーネントというパーツを、ページの下方に向けて、積み木のように積み上げていくイメージです。
コンポーネントの設定タイミングについては以下の記事を参照ください。
コンポーネント化のメリット
ページを構成する要素を「コンポーネント」というパーツ化をすること。
それをすることで、どのようなメリットがあるでしょうか？
次のようなものが挙げられます。
- 表現が統一される。
- ページ更新の際にパーツを使いまわせる。
- 制作費用の見積で齟齬が起きにくくなる。
1. 表現が統一される。
一番のメリットはこれでしょう。
要は、結果としてわかりやすくなる、ということです。
ページを構成する要素の表現にばらつきがあるとユーザーは混乱します。
「見出し」はこの表現
「リスト」はこの表現
「ボタン」はこの表現
という形で、見た目が整理されることで、webサイト内を回遊するユーザーの迷いが軽減されます。
それはわずかな時間の差かもしれませんが、確実に蓄積されユーザーのストレスになります。
ページを構成するコンポーネントの表現ルールを最小限にすることは、
制作の手を抜くこととは違います。
必要なものが何かを整理し、洗練させている。
と考えるべきです。
2. ページ更新の際にパーツを使いまわせる。
ページ更新の際、ページを構成する要素が定義された状態になるので、勝手なルールが作られることを阻止できます。
Webサイトのリニューアル時点では、整ったサイトだったのに、クライアントが運用を始めたら、さまざまな独自ルールが作られ、時とともに崩壊した、ごちゃごちゃになった、、という状況に遭遇したことはありませんか？
これ、よく起こりうることではないでしょうか？
クライアント視点で考えると、ページを構成する要素がコンポーネント化されておらず、何が定義されているのか分からないので、独自の表現を作ってしまっていた、というようなことではないかと想像します。
そうならないためにも、コンポーネントの定義をして、クライアントと確実にその認識を合わせておきましょう。
結果運用時のクライアントの満足度向上にも寄与すると言えます。
3. 制作費用の見積で齟齬が起きにくくなる。
webサイト制作の見積は、設計前に確定しないといけないことがほとんどです。
その際、web制作会社側は、
例えば1,000ページのサイトリニューアルだとして、その1,000ページを個別にページデザインしていくなんてことはやってられません。
通常、数ページのみデザインを行い、そのデザインを元に他のページは展開していきます。
予めコンポーネントパーツの数は最大50点程度を目安にします、という握りをしておけば、制作ページ数がある程度増えたとしても、さほどのダメージにはなりません。
コンポーネントパーツは5つに分類すると分かりやすい。
パーツをリストアップするにあたり、まず、その分類を決めておくと整理がしやすいです。
- エリア要素
- リンク要素
- コンテンツ要素
- フォーム要素
- 独自要素
試行錯誤の結果、この5つに分類しておくと整理がしやすいです。
次に、それらに属するコーポレートサイトの画面を構成する要素を洗い出してみます。
「こういうの必要だよね。」というイメージは持っていただけるのではないかと思います。
あくまで、例ですのでご了承くださいませ。
1. エリア要素
- ヘッダー
- グローバルナビ
- メガメニュー
- フッター
- サイドナビ
など
2. リンク要素
- レコメンド・関連リンクエリア
- リンクブロック
- 標準ボタン
- 前へ・次へボタン
- ページングナビ
- フリーワード検索ボックス
- タブ
- アコーデオンブロック
- カルーセルボタン
- タグ
- パンくずリスト
- 関連・レコメンドリンク
- リンクリスト
- ニュースリスト
- ファイルリンク
- シェアボタン
など
3. コンテンツ要素
- 見出し（h1からh6）
- リード文
- キャッチコピー
- 標準テキスト
- 画像
- 画像＋テキスト等のミックス ※複数パターン
- リスト（記号）
- リスト（連番）
- 手順
- 訴求ポイント
- Q&A
- 罫線
- 動画
- 地図
- 表
- 備考テキストブロック
- 引用・転載ブロック
- 連絡先・問い合わせ先
- コンテンツブロック
4. フォーム要素
- ラジオボタン
- チェックボックス
- テキストボックス
- セレクトボックス
- エラーメッセージ
- テキストエリア
- コンバージョンボタン
5. 独自要素
上記分類に属さないもの、サイト独自のものとして個別に定義。
まとめ
予め、こういうものをコンポーネントとして定義しておき、使いまわせるようにしておくことはメリットが多いです。
- 設計
- デザイン
- コーディング
- CMSテンプレート開発
これらにシームレスに展開できるからです。
最終的にはコーディングのスタイルガイド的なものにしておくと、制作をかなり進んだ状態からスタートすることができます。「強くてニューゲーム」的なことですね。
こういった内容は常に継続してブラッシュアップすることで
質が高い、効率的な制作に活かしていけると考えます。
