「AIDA」でデザインの効果を計測する：エンジニアのためのWebデザイン基礎の基礎（最終回）（5/5 ページ）

[吉田光利，＠IT]

Action（行動）

　ユーザーは最後のフェーズ「Action（行動）」で、フォームに個人情報などを入力します。後はボタンを押すだけです。

　無事ボタンを押してくれれば「完了！」となるのですが、ここまできて「やっぱりやめた」という事態がけっこう起こります。

　その原因は「複雑なフロー」だったり、「情報が多過ぎる故のデザインの汚さ」だったりします。そうした要素があると、ユーザーは「今はやめておこう」と思いとどまってしまうことが多いのです。

Actionの計測方法：「離脱率」「ファネル計測」

　ユーザーがうまく情報を入力して最後の段階をクリアすれば、Webサイトから「離脱」しないはずです。ですから、ここは「離脱率」をActionの指標にします。

Amazonの購入までのフロー　出典：「スタートアップのための起業のWeb技術」（吉田光利著／日本実業出版社）

　支払いのフローは、数段階に分かれています。通販サイト「Amazon」は、支払い終了までに4ステップあります。各ステップでユーザーが「離脱」していく様子は、「じょうご」（ファネル）の形に似ています。

Google Analyticsの離脱率画面　出典：「スタートアップのための起業のWeb技術」（吉田光利著／日本実業出版社）

　Google Analyticsには「目標プロセス」というファネルを計測する機能があり、段階ごとの離脱率を計測できます。非常にビジュアライズされていますので、見やすく簡単に使えます。

　「売り上げ」というコンバージョン（単なる訪問者が見込み客に変わるという意味）を上げるためには、各段階での「離脱率」を下げることが大切です。

Action（行動）でのデザイン対策

• 申し込みページの文字数をできる限り減らす（文字数で圧倒しない）
• 規約などはインラインフレームを使って文字数の多いものを隠す
• 薄い色使いにして、安心感を与える
• ページをまたぐ場合はナビゲーションを付け、ユーザーが今どの段階にいるか分かるようにする

---

　エンジニアのためのWebデザイン基礎の基礎、いかがだったでしょうか？ 「エンジニアでもデザインスキルを身に付けられそうだ！」とお分かりいただけたのではないでしょうか。

　すご腕のエンジニアがデザインスキルを身に付けたら、それこそ最強だと思います。最近はWeb上にある無料のコンテンツを使ってデザインの勉強ができるようになったので、それらをうまく活用してデザインスキルを高めていくと良いかもしれませんね。ぜひデザインスキルの習得にトライしてください。

　それでは、またどこかでお会いしましょう。ありがとうございました。

「エンジニアのためのWebデザイン基礎の基礎」バックナンバー

• 「AIDA」でデザインの効果を計測する
• Webサイトの満足度を上げる「UX（ユーザーエクスペリエンス）」の作り方
• 28歳、女性、未婚、年収300万円――サイトの方向性を決める「ペルソナ」
• 情報のレベルをコントロールする――Webデザインの4原則その4「コントラスト」
• デザインで使い勝手を向上させる――Webデザインの4原則その3「反復」
• “見えない”線を“見せる”グリッドシステム――Webデザインの4原則その2「整列」
• 重要な情報は左上に――効果的なデザインに必要な4つの原則

書籍紹介

「スタートアップのための 起業のWeb技術

吉田光利著　日本実業出版社　2160円（税込み）

起業家（予備軍）向けに、最新のトレンドを踏まえたWebサイトの開発に不可欠な技術を、概論的かつ多角的に紹介する。

プログラミング（コーディング）の実際や個別ソフトの操作解説などではなく、スタートアップに合わせたWebサイトの開発から運用までの全体感、しくみ、流れなどを中心に、初心者にも分かりやすく解説する。

吉田光利

デザインからプログラミング、サーバーシステム構築までを手掛けるオールラウンドなクリエイター。IT／Webの教育に長く携わり、企業研修や専門学校などでの講師も延べ1000社以上務める。アイデアをカタチにしてビジネスにできるところが強み。現在は2つの会社の代表を務め、精力的に活動している。

無料デザイン講座 Skillhub[スキルハブ]

※この連載は「スタートアップのための 起業のWeb技術」（吉田光利著）の一部を、著者と出版社の許可の下、一部修正して転載するものです。