webサイトの画面設計で定義するもの５つ。【設計とデザインの違い】

2023年02月16日 2023年02月16日

webサイト制作にプロデューサー、ディレクターとして携わってもう25年以上経過します。

その中でwebサイトの企画・設計という部分を主に担当してきました。

制作のステップの中で「設計」というフェーズがあるのですが、どうもその言葉の理解が人によりまちまちに感じることがあるので、その意味するところを整理しておきたいと思います。

結構自分の備忘用メモです・・・。

画面設計で定義すること5つ。

設計で定義することは何か？その結論としては、以下の5つであると考えています。そしてこの説明でお客さんは概ね理解してくれていると感じています。

ゾーニング
要素
コンテンツ
機能
導線

これらを意識して画面設計をすると、設計の精度とスピードが上がります。逆になんとなくはじめてしまうと、後々情報の破綻や導線的な辻褄が合わなくなったり、コーディングやシステム開発時に困ることになります。

それぞれ文字通りではあるのですが簡単に補足します。

1. ゾーニング

情報のエリア分類です。

ヘッダーエリア
コンテンツエリア
フッターエリア
ローカルナビゲーションエリア
検索ナビゲーションエリア

など。これをしておくことで、エリア単位に分解して情報整理をすることができます。

設計の効率化もそうですが、サイトを利用するユーザーのわかりやすさにも繋がります。

2. 要素

ページを構成する部品としての定義です。例えば、画面設計に表示しているものが、何を意味するものか？というところです。

タイトルなのか
見出しなのか
リード文なのか
本文なのか
リストなのか
リンクなのか
ボタンなのか
表なのか

例えばそういったことです。どのような定義の部品として画面に配置するものなのかを定義します。

ちなみに、この定義する要素の数は上限数を定義しておくべきです。

そうすることで煩雑さがなくなり情報設計の精度が上がります。画面設計の作業そのものの効率化スピードアップにも繋がります。（まず要素を定義して、それをページで使い回すという順番です。）

3. 機能

UIに触れた際にどのようなアクションを起こすのか、どういう変化が起きるのか、というところです。具体例としては・・・

プルダウン選択項目
開閉メニュー、アコーデオンメニュー等の動作
絞り込み検索の動作
ページングの動作
CMSで更新可能な項目

など。

webサイトが単なる平面的な読み物ではなく何らかの操作によって、表示されるものが変化する場合、どう変化するのか、何を選べるのか、何と連動するのか、どう更新できるのか、といった画面として見ただけでは分からない部分を補足するのも画面設計時に行うべきものと思います。

4. コンテンツ

コンテンツは、定義した「要素」に対して、どのようなテキスト、画像、場合によっては動画などを適用するのか、ということです。

設計時には、掲載情報は確定しておらず、お客さんから提供してもらうということもあるでしょう。ただ、その場合でも「あああああああああ」といったアタリのテキストではなく、「ここには、製品の使い方について、5段階くらいのステップで説明が入る想定です。」等、どういう情報をいれるべきなのか、ということは画面設計内に補足として入れておくべきです。

既存のwebサイトの情報を編集して入れ込める場合は、一旦設計者の方でコンテンツ編集を行って画面設計に反映します。

5. 導線

導線は、そのリンクを押したらどのページに飛ぶかということです。

この情報は結構画面設計で抜けがちです。

すべてのボタンやリンクに飛び先のページを名称で書き込むのは現実的ではありません。

通常webサイトの画面設計は、XDやSketchといった専用のツールで行うことがほとんどで、それらを使えば画面単位でページを作成できます。こういったUIデザインツールの機能ではページのリンク機能がありますので、画面設計上でページ間をリンクさせておくことが必要と思っています。

そうすることで、デザイン時やコーディング時の混乱も起こりにくく、画面設計上で実際にリンクを辿るようにページを遷移することが出来るようになるので、プロトタイピング的なことも同時に行うことができます。

いまだに原始的にPowerPointで画面設計書を送られてくることがありますが、本当にやめてほしい・・と切実に思います。

画面設計に含んではいけないこと。

一方、画面設計に含んではいけないことにも触れておきます。含んではいけない、、というか、気づかずに、含めてしまいがちなことだったりします。

装飾
カラーリング
英語

ここは例えばにはなりますが上記のようなことです。すべて意匠にあたるものと考えるべきで、これらはUIデザイナーに任せましょう。

設計作業していると、つい楽しくなって、装飾的なことにも手を出してしまう設計者ってたまにいるんですよね。。そこはぐっと耐え、装飾部分には手を触れない方が良いです。