意味・概要

ウェブ制作におけるプロトタイプとは、プロトタイプテストを行うために作られるもので、プロトタイプテストでは、実際にユーザーが閲覧しうる端末で簡易的にレイアウトや操作性を確認することができます。

主にコーディング工程より前に行われるため、実際にコーディングを行った後に、レイアウトの変更などが発生してしまうと、工数のロスに繋がってしまったり、制作期間の関係上で、レイアウトに課題が発見されたとしても、改善できなくなってしまうような場合があります。

プロトタイプはコーディングよりも簡易的に制作できるため、改善点が検出されれば簡易的に修正することが可能なのです。
改善しつくされたプロトタイプからコーディングを行う事で、妥協のないウェブサイトを制作するコトができるのです。

補足説明

プロトタイプを制作するツールをプロトタイピングツールと言いますが、有名なモノとしてはAdobeのXDというソフトウェアや国内プロトタイピングツールのPrott(プロット)というものがあります。

プロトタイプを制作するタイミングは制作方針によって2パターンあります。

デザインを制作する前に、ワイヤーフレームをプロトタイピングして、ざっくりとした印象で操作性やレイアウトを確認するパターンと、
デザインを制作した後に、プロトタイプを制作し、実際のデザインで操作性の確認を行うパターンがあります。

前者の場合は、しっかりとレイアウトや操作性を確認してからデザインを制作できるため、デザインに対して余計なコストが掛かりにくく、効率的に制作を行いやすい一方、実際のデザインとは異なるため、確認する側にある程度の経験値や想像力を求められてしまいます。

一方、デザイン後にプロトタイプを制作するパターンでは、実際のデザインをプロトタイピングするため、実際にコーディングされるイメージに近しい画面でテストすることができます。しかし、デザインをプロトタイプ化するとワイヤーフレームからプロトタイプ化するよりも工数がかかりやすいことと、調整をするたびに、デザイン工程まで戻らなければならないため、時間と費用が嵩みやすくなってしまいます。

確認者のリテラシーや費用と時間を考えながらどのようにプロトタイプを利用すべきかしっかりと考えていく必要があると言えます。

意味・概要

WEBやマーケティング領域において、ペルソナとは、サービスや商品に対する顧客行動をできる限り正確になぞるために設定される、特定の架空人物を指します。

補足説明

ターゲットの設定では、「買ってほしい人」または「利用してほしい人」を対象にしていますが、ある程度広い幅で設定を行っているため、ユーザーの細かな行動や考えまでは想像していくことが難しくなったり、広い幅の中での平均的な行動のみを考えがちになってしまいます。
ペルソナでは、ユーザー像を細かく設定することで、こういう人ならばどう考えて、どう行動するのか想像しやすくなるため、行うべき施策や対策を検討しやすくなります。

関連情報

顧客行動分析の軸となる「ペルソナ」を作ろう!

意味・概要

PDCAとは、「Plan(計画)Do(実行)Check(点検・評価)Action(改善・処置)」のそれぞれの頭文字を取った言葉です。
計画的に成果を向上させていくために行う改善手法です。継続的に、計画・実行・評価・改善を繰り返すことで効率よく成果を高めていくことができます。
PDCAを繰り返し、改善し続けることをPDCAサイクルと呼びます。

Plan(計画)では、現状を踏まえたうえで成果を上げるための取り組みを計画します。合わせて目標を設定します。具体的に数値化することで達成・未達成がわかりやすくなるため、計測できる基準を設定することが一般的です。
仮説を立てるように「〇〇を実行することで××が△△上がると考える」などのようにプラン立てすると後のDCAが遂行しやすくなります。

Do(実行)では、上記で示した仮説の〇〇の部分を実際に実行に移します。
実行をする際に、しっかりと実行内容を記録していくことが非常に重要なファクターとなります。
数値的なモノやイレギュラーな要素などが含まれた場合もしっかりと記録しておくようにしましょう。

Check(評価)では、実行の結果、プランで立てた目標値を達成できたのか、出来なかったのかチェックします。
ここでは、間違っても贔屓目で何かを見たりしない事です。
どうしても成功したと言いたくなる気持ちはありますが、ここでは冷静に、達成できたのか、または達成できなかったのかその部分だけに目を向けててください。
理由に関しては、次のステップで考えれば良いのです。

Action(改善)では、上記の結果の理由を分析します。
達成できなかったのは何故なのか?どんな理由があったのか?しっかりと洗い出すようにしてください。
但し、この場で「だったら〇〇をすれば良い」というところまで行きつく必要はありません。
改善案に関しては、またPlan(計画)の中で仮説を立てていけば良いのです。
しっかりと理由の分析を行っておくことが重要となります。
もちろん、達成した場合でもその理由をしっかりと考えておくべきです。
プラン通りに事が運んだから目標を達成できたのか、またはプラン通りに運んでいないにも関わらず目標が達成されたのか?
PDCAサイクルでは継続的に成果を高めていくことが目的なので、達成したとしても、しっかりと分析し、次の計画へ進めていくことが大切です。

CheckとActionが同時に行われやすい事から、PDCAではなくPDS(Plan、Do、See)という形で最期をSee(考察)とするような手法もあります。

補足説明

PDCAサイクルは仕事の現場だけで使われるものではありません。
日常的に用いる事でも、物事の改善に役立てる事のできる手法です。

例えば、PDCAを利用してダイエットの計画を立てるとします。

まずはPlan(計画)です。
ダイエットで体重を5キロ痩せるために、毎日会社まで歩いて通勤する
という計画を立てます。

Do(実行)では、「毎日会社まで歩いて通勤する」を忠実に実行します。

Check(評価)では、「毎日会社まで歩いて通勤することで5キロ痩せることができたのか」を確認します。
ここでは単純に、毎日会社まで歩いたが2キロまでしか体重が落ちなかったとします。

Action(改善)では、なぜ、2キロしか体重が落ちなかったのか?を分析します。
歩くスピードをいつもよりも遅くしていた
いつもよりも食事を多くとってしまった
通勤以外の運動をしなくなってしまった
など、原因をあげていきます。挙げられた原因の中から、もっとも改善することで効果のありそうなものを
選出し、次の計画へ繋げていくことでダイエットを成功へ導きます。

このようにPDCAサイクルは日常でも役立てることができます。
もちろん、仕事の現場では利用されることが多く、継続的に改善を行っていくためには欠かせない手法なのです。

意味・概要

ヒューリスティック分析とは、ウェブサイトのリニューアルや改善を行う際に、「どのような問題があるのか」などの問題点を発見するための解析ツールと合わせて行う分析手法のことを指します。

補足説明

ヒューリスティック分析は分析者の経験から見出した法則で主観的に行える分析方法なので、他の人員を必要とはせず、分析者のみで完結させることができるのでコストはそれほどかかりません。また、様々な比較や幅広い評価などをつけることが出来るため、競合を比較した際に課題の仮設を立てやすいなどメリットもあります。ですが、分析者の経験などや思い込みで左右されることも考えられるため、正確に課題を見つけるということはなかなか難しいというデメリットもあります。そのメリットデメリットを考えたうえで使用してみるのもいいでしょう。

関連情報

押さえておきたいヒューリスティック分析の基礎知識

意味・概要

ハンバーガーメニューとは、食べ物ではなく、スマートフォンサイトなどや最近ではパソコンサイトでも見かけるようになった3本線のナビゲーションメニューのことを指します。

補足説明

3本線がハンバーガーに見えることから「ハンバーガーメニュー」と呼ばれることになったということです。別名としては、「ドロワーメニュー」と呼ばれることもあります。

ハンバーガーメニューを実装するメリットは情報を整理してサイトをすっきりとまとまった見た目にしてくれるなどがあります。デメリットはハンバーガーメニューを開いてみないと内容がわからないなとがあげられます。サイトに応じてユーザーにとってどんなメニューがいいのか検討する必要があると考えられます。

意味・概要

ベクターデータとは、図形やイラストなどのデータを占めるIllustratorが採用しているベクタ形式のことで、画像を点の座標とそれを結ぶ線などの数値データをもとにして再現していることを指します。

補足説明

点で描いているため、画像の解像度を気にせず、拡大や縮小が自由自在に行うことができます。動かした位置により、ソフトウェアが再計算して画像を描きなおしてくれるなど数値をもとに再現してくれているので主に文字のデザインや単純な図形、イラストなどの画像などに大変優れています。

ただし、写真のような細かい表現や透明感を出す、微妙な色の変化を表現したい際には向いていないので、用途に合ったソフトや使い方をすることをおすすめします。

意味・概要

ポップアップとは、ユーザーがウェブページを表示した際に、ユーザーの意思に関係なく自動的に新しいウィンドウが表示される別のウェブページのことを指します。

補足説明

閲覧したいウェブサイトにアクセスした際に、重要なお知らせや見落としてほしくない内容を表示させるときなどに使用されることが多くあります。最近ではあまり見かけないですが、クリックすると、自動的に広告が2個~3個ポップアップウィンドウで出てくることがとても多く、ブロックしているユーザーが多くいたため、最近ではポップアップウィンドウを見ることは少なくなりました。その名残から勝手にブロック設定にしている方がいるかもしれないという懸念点がありますが、ポップアップウィンドウを使用したい場合は、ホームページの掲載内容なども考慮して検討してみるのもいいでしょう。

意味・概要

バナーとは、インターネット上やウェブサイト上で他のウェブサイトや商品、サービスを紹介する役割をもっている画像のことを指します。

補足説明

画像にリンクを貼ることでクリックするとそのウェブページに移動する仕組みになっています。ウェブページ上で目立つように貼る画像のことをバナーと呼ぶようになったのが始まりだそうです。最近では、アニメーションや動画を使い、目に留まるようなバナーも出てくるようになりました。バナーを置く目的は様々だと思いますが、商品やサービスを画像や動画で伝えることによって視覚的に分かりやすく伝えることや、他のウェブサイトから誘導することができるということです。不特定多数の目に触れる機会が多いため、表示されるだけで認知などの効果も果たしてくれます。ただし、他のインターネット広告に比べると費用が高いなどもありますので検討が必要になります。

意味・概要

パララックスとは、スクロールなどの動作に応じて、複数のレイヤーにある要素を異なるスピードで動かすことで視差を生み、立体感や奥行きを演出などが行える視差効果のことを指します。

補足説明

ウェブデザインでは2012年ごろから流行り始め、最近ではよく見かけるようになりました。パララックスデザインの魅力は、単純にカッコいいや面白いだけでなくスクロールというシンプルな操作だけで、視覚的に楽しみながら情報が提供できるという点があります。

また、視覚的に特別な快感を覚えさせる操作と展開によっては、ユーザーの感覚が刺激され、サイトに滞在する時間が長くなったり、繰り返しコンテンツを閲覧するという行動が見られることが期待でき、ユーザーにとって記憶に残す体験が出来るというプラスな印象を与えることも出来るでしょう。

意味・概要

バックログとは、ビジネス利用に特化したツールでプロジェクト管理や課題管理などをガンチャートなどを使い、プロジェクトを迅速に管理できるツールのことを指します。

補足説明

プロジェクトで発生するタスクや問題、進捗状況をウェブ上で一括管理し、調整していくことが出来ます。また、独自の機能として、ユーザーアイコンを選択できる機能や絵文字など楽しくプロジェクト管理でき、視覚的なコミュニケーションも実現できます。

また、チームのタスクに関して、担当者が選べ期限を設定することができ、作業内容の更新した際にメールで通知を受け取ることが出来ますのでミスを少なくすることも可能です。

もちろん、社内メンバーはもちろんお客様とコメントのやり取りもできますので、導入を検討してみるのもいいでしょう。