2017年01月30日Webデザイン

デザインフェーズで浮かび上がる「デザイン以外」の問題点について

デザインフェーズで浮かび上がる「デザイン以外」の問題点について

デザインを評価するために、ヒントとなる2つの視点」という記事でも紹介しましたが、デザインについて評価しているはずがいつのまにか「デザイン以外」の要素について議論していることが多々あります。

これら「デザイン以外」の問題を突き詰めてみると、その多くが情報設計や企画フェーズにおける不備や間違いに起因することがわかってきます。

ラベリングは「表記ルール」と「情報設計」の問題

デザイン案に対して最も多い指摘は、実はナビゲーションのメニューラベルやリンクボタンのテキストといった、いわゆるラベリングに関する事項だったりします。

例えば申し込みボタンの文言一つとっても「お申し込み」「お申込」「申し込む」といった形で表記のブレは起こりがちです。

こうした問題の多くはワイヤーフレーム作成など設計の段階で表記ルールが定められていないことが原因であり、サイト全体で統一的な枠組みの中で表記について定めていく必要があります。

カテゴリやタグなどのメニューラベルも同様にサービスや商品などの分類や検索軸の検討に関わる、つまり情報設計の問題です。

こうした問題をデザインの中だけで解決を試みても、結果としてサイト内での統一ルールや因果関係が崩れてしまい、後々問題が複雑化する遠因にもなりかねません。

配色や読みやすさに関わる「優先順位」と「文章構造」

配色(カラーリング)や読みやすさについてはデザインが担うところが大きい要素です。
調和のとれた配色、あるいはリズム感のある文面を目にしたときの気持ち良さはデザインの力を感じる瞬間でもあります。

こうした内容について違和感や読みにくさを感じた時は行間やホワイトスペースといったデザイン手法に起因することもあるのですが、「優先順位」「文章構造」が適切に定められているかどうかも大きく影響しています。

優先順位が設計の段階で明確でない場合はデザイナーの判断で配色せざるを得ず、結果として目的や意図が正しく伝わらないこともあります。

他方、「もっと目立たせてほしい」というリクエストもよくいただくのですが、優先順位を無視して対処してしまうと序列が崩れてしまい、「あちら立てればこちらが立たぬ」といった状態に陥りがちです。
(なので、他の要素を「目立たなくする」というのも良く使うテクニックの一つです。)

構造の問題に目を向けると、文章を構成するタイトル・リード文・本文・注記・補足・引用…といった要素が視覚的に認識できるようデザイン処理されていると、序列や因果関係といった文章の構造も直感的に理解できるようになります。

これら要素の区別が曖昧だったりバラつきがある場合、文章(ライティング)の意図が伝わっていなかったり、そもそもルールが定められていない可能性があります。

ビジュアルやメッセージは「コンセプト」に立ち戻る

メインビジュアルに代表されるメッセージ性の強いビジュアル要素。
良くも悪くもデザインの評価に直結する要素でもあります。

ところで見た目も美しくインパクトもあるけれど、「どうもしっくりこない」「うまく説明はできないけどイメージと違う」といった経験はないでしょうか?

こうしたケースではなおのこと、レイアウトや配色といったデザイン処理では解決に至りません。
少々遠回りに思えますが、デザインのコンセプトに立ち戻って検討した方が結果的には近道です。

  • 訴求したい商品・サービスの内容・企業イメージに沿っているか
  • ターゲットユーザー(ペルソナ)に訴えかける内容か
  • カスタマージャーニーにおいて機能するか etc.

コンセプトの趣旨がデザイナーに正しく伝わっていなかったり、あるいはコンセプトそのものが間違っていることもあります。

プロジェクトの初期段階で策定されたコンセプトはフェーズを重ねるに伴い風化しがちなことも事実。
コンセプトがきちんとプロジェクトの中で継承されているか、初期に定めたコンセプトの妥当性を検証するという点でも意味がありそうです。

プロセスの積み重ねとしての「デザイン」

企画や要件定義〜設計といったフェーズを経て、長い議論やプロセスを積み重ねて具現化されたデザイン案。

だからこそ「デザイン以外」に問題が潜むのもある意味、当然のことのように思えます。

少々古い概念ですが、Jesse James Garrett氏※はWebデザインを「5 Planes Model」として5つの階層(5つの「S」)で捉えています。

  • 表面(Surface):視覚的デザイン
  • 骨格(Skelton):インフォメーション・デザイン/ナビゲーション・デザイン/インターフェイス・デザイン
  • 構造(Structure):インフォメーション・アーキテクチャ/インタラクション・デザイン
  • 要件(Scope):コンテンツ要求/機能要件
  • 戦略(Strategy):ユーザーニーズ/サイトの目的

参照元:http://gitanez.seesaa.net/article/24184889.html

わたしたちが日頃「デザイン」と呼んでいるのは「表面(Surface)=視覚的デザイン」にすぎません。

表面に浮かび上がった綻びはこれまでの議論やプロセスにおける間違いや不備の「視覚化」でもあるのです。

※アメリカのWebコンサルティング企業「Adaptive Path」の創業者としても有名です。

Getting Betterとは

企業の忙しいWeb担当者(Web担当者)の方のために、コーポレートサイトやオウンドメディアの運営に欠かせない情報やトレンド・ノウハウを解説するブログです。

日々のサイト運営のご参考になれば幸いです。

IMAGICAイメージワークスのWeb制作サービスについてはこちら
https://www.imagica-imageworks.co.jp/web/

Webも映像もグラフィックも。

IMAGICA IMAGEWORKS
トップへ