Webデザイナーに推奨！サイトマップと画面遷移を融合した「ライブデザイン」
はじめに
全部読むと"集客できる"Webサイトが作れる――。そんな記事を目指して。
成功しているクリエイターの実例を通じて、クリエイターの考え方や技術についての知識をお伝えしていきます。
【執筆クリエイター】
デザイナー・エンジニア・広告セールスマネージャー
株式会社エニィ代表取締役
阿萬 真紀
デザイナー、エンジニア、マーケターの経験を活かし、経営戦略からWEB企画(制作・開発・広告) までを幅広く担当。企業コーポレートサイト、ロゴデザイン、ブランディング、開発ディレクション、アニメーションなど現場でのデザインと実装など対応領域は多岐にわたる。新規事業立ち上げやコンサルティングの経験も豊富。３児の母。透き通った心で、明るい未来を描き、美しい世の中をデザインするために活動中。
Webサイト制作では、プロジェクトメンバーと顧客で完成するサイトの全体像に関する共通認識を持つことが重要です。そのため、多くのWebディレクターはサイト構造や階層が一目で分かるサイトマップを制作しているでしょう。サイトマップは、制作過程において非常に重要度が高いWebサイトの構成図であり、いろいろな領域に関わることから「Webサイトの種」とも表現されています。
サイト構成を事前に作成するサイトマップは、ステークホルダーのWebサイト全体の構造理解をするうえで不可欠です。ただ、サイトマップには難点があります。それは見る人が見れば、サイトマップで全体の構造を即座に理解できますが、くわしくない人が見ても正確な把握ができないことがある点です。特に顧客への説明の際には苦労することもあるでしょう。そこでおすすめしたいのが、Webデザイナーの力を借りた「ライブデザイン」という手法です。
◆サイトマップを見ただけで全体構造をイメージできる顧客は少ない
Webサイト制作においてサイトマップは、構成図としての役割を果たします。プロジェクトメンバー間でWebサイトの仕上がりのイメージを共有する段階において、視覚的に階層などを理解するうえで役立ちます。しかし、顧客に関してはサイトマップを見ただけで、Webサイトの全体構造を理解できる人はあまり多くありません。
建築業界でも「住みたい家にするためには、3回は建て直す必要がある」という口伝があるそうですが、顧客やユーザーにとって本当に使いやすい・タメになるWebサイトを構築することは簡単ではありません。Webサイトには“ホームページ”という名前もあり、利用者によって快適になるように設計する点は家と考え方が大きく変わるものではないでしょう。だからこそ、構造理解においてより共通認識を持てる手法が重要になります。
私は提案時にサイトマップと画面遷移を組み合わせた「ライブデザイン」という手法を採用しています。プレゼンテーションをしながら画面遷移をすることでWebサイト全体のイメージを伝えるやり方であり、主に顧客との合意形成の際の活用が中心です。顧客が想像でしかできない部分を、デザインの前段階で画面遷移を見せることでイメージを共有しやすくします。
◆Webデザイナーは合意形成のためのプレゼン力が求められる
Webデザイナーの仕事は、ユーザーにとって使いやすく、顧客のビジネスを助けられるWebサイトを設計することです。Webサイト全体の構造については、Webディレクターがサイトマップによって可視化してくれるでしょう。プロジェクトメンバー間ではそれだけでも同じ絵を描けるかもしれませんが、先述の通り、顧客のリテラシーによってはそれだけでは伝わらないケースも少なくありません。
そのため、時にWebデザイナーは主体的にプレゼンテーションをするなどして、顧客との合意形成の動きができると理想的です。Webサイトは実態のない無形商材なので、デザイン案が提出されるまで顧客はどんな仕上がりになるかをまったく予期できていないケースもあるかもしれません。だからこそ、本格的なデザインに入る前に、画面遷移によってサイトマップを補足できる簡易的なデザインがあると顧客との合意形成が取りやすいでしょう。
「ライブデザイン」は、決してその場でデザインを一から設計するものではありません。サイトマップに応じた画面変遷をその場で見せることで、顧客へのイメージの共有の深度を高めることが主目的となります。顧客のちゃぶ台返しにお困りのWebデザイナーの方であれば、デザインの前段階で画面遷移のプレゼンテーションの機会を提案するのも1つの手でしょう。そうすることでその後の制作も格段にやりやすくなるかもしれません。
◆顧客のリテラシーや目的に応じたツール選定を
サイトマップと画面遷移を掛け合わせたライブデザインは、あくまでもデザインの前段階の施策になります。そのため、凝った仕様よりも単純な分かりやすさ、イメージのしやすさを意識することが大切です。顧客によってもリテラシーや目的は異なるので、それに合わせたツール選定を行うことも重要になります。
私の場合は、画面遷移を見せる際にはイラストレーターを使うことが多いのですが、XDでももちろん対応できますし、グーグルスライドを使うこともあります。それらはすべて顧客がどういう提案を求めているかによって変わってくるので、要望や粒度によって提案内容や選定するツールも最適なものを選ぶようにしましょう。
サイトマップにより視覚的で、感覚的に分かりやすい画面遷移を加えたライブデザインは、イメージの共有において大いに役立つことでしょう。しかし、画面遷移を作ること自体が目的とならないように注意しましょう。さらにツールに使われないように対応することが重要であり、顧客にプレゼンをすることでどんな共通認識を得ようとしているのかを具体的にイメージして取り組むことを意識できるとベストです。
・・・
ー Twitter
『はいふぁい＠HIGH-FIVE転職エージェント』では、「はいふぁい」編集部員が日常も交えて、クリエイターさんと遊んでいます（情報交換）。使える情報も3割！
ー クリエイターキャリア支援メディア『HIGH‐FIVE』
IT/Web領域クリエイターの転職情報・キャリアコラムを配信中！
１．C＆R社の転職エージェントってなにしてくれるの？
２．具体的な転職事例が知りたい！
３．どんな求人を持っているの？
ー LINE
ー Instagram
