このTIPSでは、未経験から独学でフリーランスWebデザイナーを目指して日々勉強中という方へ、Webデザイン・制作歴10年以上の現役フリーランスデザイナーがお役立ち情報を発信しています。
第二回目は「ウェブサイトは導線設計が命」です。
プロのWebデザイナーにおける最重要な内容について詳しく解説していきますね！！
デザインには不正解が必ずあります
「デザインに正解はない」
そんなことを云われていたり書かれているものを目にすることがありますが、厳密にいうと、デザインには必ず不正解があります。
よく芸術（アート）とデザインの定義が混同されがちですが、超端的にいうと芸術（アート）とは「創作活動」、デザインとは「計画」や「設計」のことです。そのため、芸術（アート）とデザインは、根本的には全くの別物であると捉えておいたほうが良いでしょう。
創作活動である芸術（アート）は、個々の自由な発想で表現する分野になるので「アートの正解」というのは確かに不明確、または存在しないかと思います。
しかし「計画」や「設計」という定義があるデザインに正解がないのだとしたら……？
それこそ「無計画」ってやつですよね（汗）。無計画な仕事をしてしまったら、せっかく依頼をしてくれたクライアントさんにめちゃめちゃがっかりされちゃいますよね。
プロのWebデザイナーを目指したいのであれば、美しい見栄えはもちろんのこと、十分な計画とユーザビリティの高い設計が施されたウェブサイトを制作できなくてはなりません。
デザインの勉強をしていて、このデザインは正しいの？間違っているの？と迷った場合、「計画」や「設計」ができていないデザインなら不正解！と、自分に厳しいジャッジができる目線でいましょう。
見栄えだけでなく美しい導線設計がプロの仕事
Webデザイナーの役割として一番大切なことは、情報を届けたいひとへ、届けたい情報がある場所へ正しく導くことができているかどうか？ということです。
つまり「ウェブサイトの導線づくり」というものが、Webデザイナーにとって最重要課題となります。
ウェブサイトの導線とは？
導線とは、読んで字の如く「線を導く」ということですが、ウェブサイトにおける導線というのは「ユーザーを目的の場所へ正しく導く」ということです。
導線と動線の違いは何か？
導線設計のために「動線」を把握することも大切です。同じ字なので混同しがちですが、導線と動線は別物です。
導線とは「ユーザーをゴール（目的地）まで誘導するための設計」であり、動線とは「ユーザーが実際にウェブサイト上で動いた道筋」のことです。
つまり導線設計は、いちばん最初の構築時に1度だけ設計すれば良いというわけではなく、ウェブサイト運用が始まってからも実際のユーザー動線を分析し、さらに動きやすい導線へと改良していく必要があります。
導線を設計するときのポイント
1. 目的・目標の設定
まずは必ず目的と目標の設定をする。というか、これがないと始まりませんよね。でも意外とこの部分がしっかりできていないことも多いです。
実際にわたしもウェブサイト制作の依頼をいただいて、クライアントの方に「ウェブサイト制作の目的と目標は何ですか？」とヒアリングするのですが、「えーっと、集客？」とか「ホームページがあったほうが良いと思ったから…」など、意外とここがふんわりしてしまっているケースが非常に多いです。
プロのWebデザイナーの仕事は、サイトの見栄えについてだけをヒアリングするのではなく、ウェブサイトの目的・目標についてもじっくりとヒアリングをし、それに応じたデザインを提案していくことが大切です。
2. ユーザーの目線を分析
先ほども少し触れましたが、導線設計のためには「動線」も把握する必要があります。
ウェブサイト上の目標部分（商品やサービス）へと導くためには、実際にユーザーがどのような行動をとるかを想定したり分析したりして、それらを導線設計へ落とし込んで活用します。
ユーザーの行動を想定・分析する方法としては、カスタマージャーニーマップの作成がとてもおすすめです。
3. ナビゲーションの設計
ウェブサイトのナビゲーションとは「サイト内の案内役」ですので、これもまたとても重要なポイントです。
例えばツアーコンダクターを例に挙げて、優秀な案内役をイメージしてみましょう。ツアーコンダクターは、ツアー参加者が安心して旅を楽しめるように様々な準備をし、お客様を目的地へスムーズに誘導する仕事です。
ウェブサイトのナビゲーションも謂わばそれと同じことで、ウェブサイト内を自由に行き来するための案内役となります。でしゃばらないけど存在感はあって、それでいてわかりやすく、痒いところに手が届くというのが理想的なナビゲーション設計です。
4. UIとUXの設計
UIとは
UIとはユーザーインターフェース（User Interface）のことで、「ユーザー」と「システムやサービス」の接点のことを指します。
インターフェースとは、例えばタッチパネルやキーボードなど、ユーザーが直接手に触れる部分であり、また、それらによって間接的に操作する画面上のリンクやボタンのことでもあります。
UIのデザイン設計とは「そのインターフェースをより使いやすく設計する」ということです。
UXとは
UXとはユーザーエクスペリエンス（User Experience）のことで、ユーザーがサービスによって受ける全ての体験のことです。
え？全ての体験って何？と、UXについて言葉できちんと説明しようとすると、だいたいわかりづらいと言われがちですが（笑）、ここでひとつ皆さん体験がある「Instagram」に例えてみますね。
美味しいものを食べに行き、写真を撮ってアップして、いいねやコメントなどの反応をもらう。写真を撮る前後の過程も含めたその全ての体験（=UX）が、Instagramというサービスの価値を形成しています。
これが、InstagramにおけるUXの設計・デザインです。
つまりざっくり言うと、そういった一連の体験を想定し設計することがUXデザインなのだという認識で良いかと思います。
ウェブサイトの導線設計についてもっと詳しく
ただ見栄えが良いだけのウェブサイトを作れるというだけでは、プロのWebデザイナーとは言えません。優れたWebデザイナーにはウェブサイトの導線づくりのスキルが必須です。ぜひここでご紹介した内容をきっかけに、ウェブサイトの導線設計について詳しく学んでみてください。
さいごに、わたしが導線設計の学習で利用した書籍をご紹介しておきますね！
UIデザインの教科書［新版］ マルチデバイス時代のインターフェース設計
UIにおけるデザインの定義から、ハードおよびソフトによる制約、人間の心理による影響、そして具体的にデザインを形にする方法までを、図や画像を使いながら、わかりやすく体系的に解説しています。
著者： 原田 秀司
出版社： 翔泳社
Web制作者のためのUXデザインをはじめる本 ユーザビリティ評価からカスタマージャーニーマップまで
Web制作者が知っておくべき、UXデザインの「基本」から「ユーザビリティ評価」「プロトタイピング」「構造化シナリオ」「ユーザー調査」「カスタマージャーニーマップ」「ユーザーモデリング」「組織導入」までを、8つの章に分けて解説しています。
著者： 玉飼 真一 他
出版社： 翔泳社
［買わせる］の心理学 消費者の心を動かすデザインの技法61
どのような状況で人の心理が作用するかの心理効果を、デザインやUI、マーケティング施策に生かす実践的な方法についても紹介しています。WebデザインやWeb制作、マーケティングに携わる方がすぐに使えるテクニックも得られます。
著者： 中村 和正
出版社： エムディエヌコーポレーション（MdN）
情報を届けたいひとへ、届けたい情報がある場所へ正しく導くことができる。それがプロのWebデザイナーの仕事です。今日からぜひ導線設計ができるWebデザイナーを目指していきましょう！