情報システム部が理解すべき！Webページのデザイン改善と効果

情報システム部の中でも自社のWeb管理や実装に携わる担当者は、広報部や企画部からのWebページデザイン改善依頼が続き、負担を感じることも多いのではないでしょうか。

しかし、このWebページのデザイン改善タスクをただこなすのではなく、その背景や目的を深く理解することで、プロジェクトの真のパートナーとして力を発揮することができます。その結果、改善の目的を達成し今後の改善の方向性が確立され、改善にフェーズが磨き上げられ、情報システム部の負荷がコントロールできるものにシフトしていくことでしょう。今回はそんな情報システム部が理解すべき、Webページのデザイン改善と効果について触れていきます。

Webページのデザイン　一般的な改善フロー

　そもそもWebページのデザインは、大きく分けるとUI要素・UX要素の2つの要素があります。具体的にはどのような内容・効果が期待されるでしょうか。

UI要素は、WEBページの外観にかかわるすべての情報に関わるデザインを行います。具体的には、配色や使用するフォント、レイアウト等の類です。
UI要素が良いことで期待できる効果は、ユーザーが「使いやすい」と感じ、求めるゴールに最短でたどり着くための最適なツールの提供ができるということです！

UX要素は、ユーザーにもたらされる体験から逆算をし、WEBページのデザインをおこなうことです。もちろんUIUXと区別できるタスクもあれば、どちらも入り混じったようなデザイン業務も多々あります。
UX要素に関しては、該当のWebデザインであるからこそユーザーが良い体験ができ、企業目線ではユーザーのファンやリピーターの創出が期待できるので良いものを追求します。

一般的な改善のフローとしては、GoogleアナリティクスなどでWebを訪れたユーザーの行動を数値で分析、課題を抽出し、改善後に数字の変化にインパクトが期待できるものから優先順位をつけて対応します。

具体的に改善するとなった場合に想定されるフローの一例を紹介します。

想定される役割としては、Web運用者・デザイナー・エンジニアの3社です。Web運用者として「Webページの改善」は、Webにおける課題を分析した際に、一番結果にインパクトの出る方法だと仮定し、動き出していることがわかります。

【情シス目線】Webデザインで負担が大きくなりがち実装3選＋α

情報システム部の役割によって異なってきますが、ここでは「会社規模が50名未満」の「Webページの実装を担当するエンジニアがいる場合」で3つ挙げます。

①実装の対象ページが複数、指定有り等
　実装する対象がTOPページのみや、全ページなどでない場合は、想定の工数よりも多く工数がかかることは、なかなかWeb運用者にとって理解されていない点と言えます。実装するページページ数で決まるわけでないので、知見がないと想定しにくいのです。

②URLの変更につながるような修正
　実装自体が負荷の大きい作業ではないことが多いですが、この依頼においての怖さはその変更がどこまで影響するか把握できていない場合における、修正後の終わらない依頼の連鎖です。一か所変更したことで、連動している導線に影響があると、負荷が膨れ上がりやすいです。

③今日明日でいけますか？（なるはやでお願いします）
　こちらも、実装する負荷のイメージが持てないWeb運用者によくある依頼文言です。悪気がなくとも、そもそも実装する側のタスクの優先順位やスケジュールもあるので、そもそもどの程度工数が必要なものかリサーチした上で依頼があると、役割が異なっても同じ仕事を行うものとして信頼が持てますが、実施できている担当者は多くないでしょう。

＋α｜装飾目的の背景について
ベタな一枚画像の掲載ではない装飾の実装は実現のための調整が多くかかる場合があります。例として、デザインとしては枠線の吹き出しでも、塗りつぶしの吹き出しでも良い場合でも、実装するエンジニアの視点としては塗りつぶしのほうが罫線などを設けることが可能なので、実装の負荷が変わってくる部分になります。（ご紹介した内容のじｓ枠線の場合は、枠の背景＋白の背景色＋テキストでレイヤーを重ねる必要がある）

【Web運用者目線】目的はCVRを上げること！

１：そもそもCVRとは
　情報システム部でも、普段からGoogleアナリティクスやABテストに関わるメンバーであれば聞いたことがある方もいらっしゃるとは思いますが、「Conversion Rate（コンバージョンレート）」の略で、Webサイトが目的としている成果（CV：コンバージョン）の達成割合を示す指標を意味します。

２：CVRを上げるために必要な方法
　これは、Web運用者やマーケティング担当者が喉から手が出るほど知りたい内容です。今回はどのようなWebデザインにも根底として有効な改善点として2つのポイントは下記の通りです。

①ユーザーを具体的にイメージして課題を抽出する
②UIUXデザインの目的を考え、目的に沿ったデザインを実装する

その他にも、様々な結果や分析を行い、CVRをあげるために最も効果的な改善を絶えず実行し続けるのです。

３：CVRを上げるために必要な対応フロー
　フローは、実施する改善方法や登場するメンバーによって都度変わりますが「Webデザインの改善」であれば概ね先ほど第一章でご紹介したフローが想定されます。ただし、その改善内容がデザインだけでなく、操作性の部分も大きく変更する場合には、相談の時点で実装するエンジニアを含めて進めると良いでしょう。
なぜならば想定外の事象や、手戻りの発生を防げる可能性があるのと、エンジニアからのフィードバックも含めてより精度を高められる可能性があります。

【Web運用者目線】Webページのデザインで大切な3つのレイアウト

１：ファーストビュー
　Webサイトを開いたときに最初に目に入る画面全体を指します。Webデザインの中でもユーザーの行動を決める一番大事なエリアです。どんなに良いサービスでも、ファーストビューの印象が悪かったり、キャッチコピーがユーザーにとって自分事に捉えられない内容であるとそのまま離脱してしまう可能性があります。

２：セカンドビュー
　一般的には、ファーストビューで実証の場として使われるのが、このセカンドビューです。ユーザーにファーストビューよりもより納得度や信頼性を高められるようなコンテンツや内容の掲載が多いエリアになります。

３：バナー
　こちらは上記のビューとは異なり、「ユーザーにお知らしたい情報やサービスの認知拡大」や「見てもらいたいページへの導線」の役割があります。バナーにも大きく2つ種類があり、Webサイトの上部でよく見かける「サイトバナー」と「バナー広告」があります。

一般的なWebデザインのレイアウトとは異なり、Web運用者目線でのレイアウトについて説明いたしました。デザイナー目線のレイアウトですと、ヘッダーやナビゲーション、フッダーなどになるのでご注意ください。

【情シスが率先してサポートしよう！】課題へ直結アタック！便利ツール紹介

１：ABテスト・ヒートマップ
　A/Bテストには、次の3つのメリットがあります。

　・ユーザーへの理解が深まる
　・施策の効果の有無が数値でわかる
　・仮説検証のサイクルを実施できる

改善施策は必ず期待した結果が出るとは限らないです。そのため、何度も仮説を立て検証・分析をし続け、改善のサイクルを止めないことが重要です。そのためにはABテストの実施が必要不可欠です。またABテストとあわせてさらにメリットを増大できる相性の良いものがヒートマップです。視覚的にユーザーの注目度や導線、離脱などの動きが読み取れ、仮説を立てる上で効果的な判断材料になり得ます。

ここで紹介するのは「Optimizely」「Ptengine」「DLPO」などがあります。なかなか無料のトライアルなどの実施はないようですが、「Ptengine」は無料で始められるプランもあるので、まずはABテスト・ヒートマップがどのようなものかお試しで初めてみることをお勧めいたします。

２：UIUX改善
　CVRを下げる要因の一つにユーザーが使いにくいUIUXのデザインが挙げられます。とはいえ、どこを改善したらよいか、お困りのWeb運用者は少なくありません。とりあえず、改善のサイクルを止めないように優先順位度外視で施策を行っていると、情報システム部の実装の負荷も変わらないどころか増える懸念さえ考えられます。そんな際にオススメなのが、UIUX改善の外部パートナーです。お困りの内容によって、強めのコンサルティング会社や、改善とあわせて実装までサポートが受けられるシステム会社など様々あります。

代表例として「UIナビ」「Member’s」「デザインレスキュー」「ココナラ」などがあります。

有名どころの「ココナラ」は、スポットで依頼しやすい体系です。とはいえ、いきなり予算のない中で依頼は難しいという企業も多いと思いますので、まずは「UIナビ」で無料のUI診断を受け、改善ポイントをプロのデザイナーよりフィードバックいただくのはお勧めです。

もし、すぐにでも良きパートナー先を見つけて、UIUX改善を進めていきたい場合は「デザインレスキュー」をご紹介します。こちらは珍しい定額制のデザインサービスで、不明瞭な見積りではなく、20時間からご利用が可能で、対応範囲もUIUXデザインだけでなく、グラフィックの対応など多岐に依頼が可能です。また使い切れなかった時間は翌月までの繰り越しできるのも魅力です。

さいごに

　情報システム部の担当者でも、Web運用者の立場に立ち、提案やフィードバックを行うことは重要な一つの役割です。具体的に依頼を受けていなくとも、同じプロジェクトの一員であり、各人の持つ知見や経験を活かしてこそお互いに信頼できる良きメンバーになるでしょう。

　では、どんな知見をWebデザイン改善で活かすか。それはWeb運用者やデザイナーの悩みの種や負荷軽減に役立つ、DXツールや外部サービスの提案を交えることだと考えます。単なるサポートを超えた行動が取れた際に、初めて成果を最大化するための重要な役割を担う新たな一歩を踏み出すことができるのです。