「ワイヤーフレーム」って何だろう？デザインカンプに必要不可欠

WEBデザインを作る上でとても大事なのは、しっかりと準備をしておくことです。
「こういうものを作ろう」とイメージしていても、いざphotoshopを開くと全く手が動かない・・・ということはよくあります。
それは、WEBデザインの設計図がないから。
どんなベテランでも、設計図なしに完璧なWEBデザインは作れません。
今回は、谷宜樹がWEBデザインの設計図「ワイヤーフレーム」について解説していきましょう。

■「ワイヤーフレーム」って何？

家を新築する時やマンションの部屋を探す時、必ずと言っていいほど目にするのが間取り図ですよね。
どこに部屋があって、どこにトイレやお風呂があるのか、それぞれどのくらいの大きさなのか知ることができるのが間取り図です。
WEBデザインにおいても、まずどこに何をレイアウトするのかを明確にしておきます。
ホームページであれば、ロゴやトップ画像、メニューバーの位置などをあらかじめ決めておきましょう。
このページ内の間取りを表すのが、「ワイヤーフレーム」です。
そしてこれを見ながらWEBデザインに起こしていくので、設計図としての役割もあります。

■なぜワイヤーフレームが必要なの？

ワイヤーフレームを作らずに、クライアントからの指示をメモしたものだけを見ながらWEBデザインをするとどうなるでしょうか。
一般的なプロのデザイナーではあり得ないことですが、独学で学び副業でWEBデザインを請け負っている人のなかには、そういう人がいるかもしれません。
しかし、ワイヤーフレームを作っておかないと、プロでもWEBデザインは難しいものになるでしょう。
ワイヤーフレームは、ページのデザインを作っていく上で忘れてはいけない情報を整理し、十分なアイディアを集めるために必要不可欠なものです。
ワイヤーフレームがない場合、クライアントからの指示を忘れてしまったり、指示やアイディアを全て取り入れたために、ちぐはぐな印象になってしまったりすることがあります。
また、チームでWEBデザインする時に意見がまとまらないこともあるでしょう。
設計図の段階でしっかり情報を整理し、クライアントやチームメンバーの意見をまとめておくことで、スムーズにデザインカンプへ進めます。

■何をワイヤーフレームに記入するの？

ページに入力するテキストや画像を、どこに配置するのか分かるようにするのがワイヤーフレームです。
位置や大きさが分かれば、内容は「ロゴ」「本文」「トップ画像」などのメモ書きで良いでしょう。
ワイヤーフレームの段階では修正が多くなるので、谷宜樹はphotoshopを使って作成することをおすすめします。
ツールを使うのに慣れていない人は、もちろん手書きでも良いですよ！

今回は、ワイヤーフレームを作ることの意味について谷宜樹が解説しました。
次回からは、具体的にどのようにしてワイヤーフレームを作成していけば良いかお話ししていきますね。

行動経済学を利用しよう！「エンダウド・プログレス効果」と「現在志向バイアス」

前回は、行動経済学で定義されている法則の2つを谷宜樹が解説しました。
損をしたくないという心理「プロスペクト理論」、イメージを固定化させる効果「アンカリング効果」の2つは、非合理的な行動を導くものとしてWEBデザインに応用されています。
今回は、この他にも谷宜樹がWEBデザインによく活用する法則を解説します。

■「エンダウド・プログレス効果」とは？

人は、ゴールまで順調に進んでいると感じると、モチベーションがアップします。
これを「エンダウド・プログレス効果」といい、より達成感を持たせる表現がモチベーションの向上に良い影響を与えると分かっています。
この効果を理論づけるものとして、2つのポイントカードを使った実験が有名です。
1枚は10ポイント貯めるポイントカードであり、すでに2ポイント獲得しています。
もう1枚は8ポイント貯めるカードで、まだ0ポイントです。
どちらもゴールまではあと8ポイントですが、人が感じる達成感には違いがあります。
すでに2ポイントが貯まっているカードをもらった人は、まだ0ポイントのカードをもらった人よりも、10ポイントに到達した時の達成感が大きかったと感じました。
この実験では、ポイントが全部貯まるまでにかかった時間や労力が同じだったとしても、ゴールした時の達成感には違いがあるというのが分かります。
これは「ゴールまであといくつ貯めれば良いか」というのが視覚化されたことが理由です。
今から1つずつ貯める必要があるというイメージよりも、あと○ポイント貯めれば良いというイメージの方が、やる気をアップさせることができるのです。
WEBサイトにおいても、ゴールまでの道筋を示したものは選ばれやすいでしょう。

■「現在志向バイアス」とは？

将来に得られるであろう利益よりも、今すぐ得られる利益の方が価値が高いと感じるのが「現在志向バイアス」です。
例えば、1ヶ月利用して100ポイントもらえるスポーツジムと、入会したその日に100ポイントもらえるスポーツジムでは、どちらが魅力的ですか？
利益が出るのが1ヶ月先のものよりも、今すぐ利益を得られるものの方がお得であると思いますよね。
この法則をWEBサイトで使うなら、「1回で効果実感！」「当日から使えます」などの文章が効果的です。

デザインや文章から感じ取れるイメージは、ある程度多くの人に共通するものがあります。
行動経済学の法則を応用すれば、ユーザーに狙った行動をさせることができるかもしれません。

WEBサイトに活かしてみよう！「プロスペクト理論」と「アンカリング理論」

前回は、「行動経済学」についての概要を谷宜樹が解説しました。
人間の非合理的な行動をWEBデザインに活かすということの意味が分かっていただけたでしょうか。
今回は、行動経済学で定義されている法則をいくつかご紹介します。
それぞれどんなWEBデザインに活かせるか、谷宜樹と一緒に考えてみましょう。

■「プロスペクト理論」を学ぼう

行動経済学の中心となる法則に、「プロスペクト理論」というものがあります。
これは、与えられた情報ではなく、自分の状況や感情によって期待値を変えてしまうという考え方です。
例えば、次のような宝くじがあったとしましょう。

①100万円をもらえる確率が80%である
②200万円をもらえる確率が40%である

みなさんならどちらの宝くじを買いますか？
①はかなりの確率でお金を手に入れられます。
②は①の2倍の金額ですが、もらえる確率は半分です。
「プロスペクト理論」では、多くの人が「たくさん得をするよりもできるだけ損をしない」選択をすると定義されています。

■プロスペクト理論をWEBデザインに活かすと…

プロスペクト理論を活かしたWEBデザインでは、「○%」「○割」という確率や、「先着○人まで」という数字がよく使われます。
「早く申し込まないと売り切れる」と思わせることで、より購買意欲を刺激できるでしょう。
本当に必要なものか判断するよりも、他の誰かに取られないようにすることを優先させる非合理的な行動を促しています。

■「アンカリング効果」って何だろう

アンカー（いかり）を使って船の位置を固定するという意味から、「最初に見た情報が人間の思考の中で無意識のうちに固定化される」という法則です。
例えば、服屋さんに行ってTシャツが2000円で売られているのを最初に見たとします。
その後、別のお店で同じものが750円で売っているのを見つけたら「安い！」と感じますよね。
もっと探せば750円以下で売っているお店はいくつも見つかるのに、最初に見た2000円の値札が大きなイメージを持ち、判断に影響を及ぼしています。
これが「アンカリング効果」です。

■アンカリング効果がWEBデザインに利用されている例

アンカリング効果が発揮されるのは、主に価格を示す一覧表です。
よく「料金を比較」という記事がありますよね。
同じサービスでも、A社は12万円、B社は15万円、C社は18万円であると書いてあれば、これを見た人は「安くて12万円か」と考えるでしょう。
まずこの価格が脳内に固定化されます。
その後で「私たちに依頼すれば10万円！」と書いてあれば、「安い！お得だ！」と思いますよね。
他社の料金と比較する他に、自社の従来の商品の価格と比べて安いセール品をおすすめするのもアンカリング効果によるものです。

今回は、谷宜樹が「プロスペクト理論」と「アンカリング理論」についてお話ししました。
次回も行動経済学の法則について、WEBデザインの例とともに解説していきましょう。

「行動経済学」を学んでWEBデザインに活かす！人間の思考を分析

人間は、経験や知識に基づいた合理的な判断をしようとする生き物です。
しかし、そうすることが良いと判断できる明確な根拠がないのに、なんとなくその行動を選んでしまうということもありますよね。
これは、非合理的な行動です。
WEBサイトで商品を買ってもらうために設置するCTAボタンや宣伝文句は、ユーザーの気持ちを刺激して非合理的な行動を促しているといっても過言ではありません。
今回は、人の気持ちを動かして経済活動につなげる「行動経済学」について、谷宜樹が解説していきましょう。

■「非合理な行動」って何？

みなさんは、次のような行動をしてしまったことはありませんか？

①バイトで稼いだ1万円は大切に取っておくけど、パチンコで当たった1万円はすぐに使ってしまった
②うな重を食べに行って並・上・特上があったら、いつも上を頼む
③健康のためにウォーキングを始めたが、天気が悪い日が続いたのでやめた

これを行動経済学の観点から見てみると、次のようなことが分かります。

①同じ1万円だから価値は同じだが、苦労して手に入れたのと楽して手に入れたのでは重さが違う気がする
②一番安いものを頼んだらケチだと思われるかも、でも一番高いものを頼むのは贅沢だ、間を取って上にしておこう
③ウォーキングを続けた方が良いと分かっているが、何かと理由をつけてはサボろうとしてしまう

これらの考え方は、はっきりとした根拠のない非合理な判断ですね。
例えば②の場合、自分でそう思っているだけで、誰かに「ケチ」と言われたわけではありません。
また、こういう判断をする人も、「特上が贅沢だと感じるのは自分だけかもしれない」「全ての人の基準が一緒ではない」と分かっていると思います。
それなのに、なぜこのような判断をするに至ったのでしょうか。

■「行動経済学」って何？

人間は常に合理的な行動をするわけではなく、時には非合理な行動をすることもあります。
非合理な行動には法則があり、これを定義しているのが「行動経済学」です。
行動経済学の考え方は、マーケティングやWEBデザインにも応用されています。

■WEBサイトでどんな風に活かせるの？

谷宜樹がやっているWEBデザインでも、行動経済学の法則が利用されています。
詳しく言えば「プロスペクト理論」や「ナッジ理論」などが用いられていますが、これによってどんなワード、どんな視覚表現が効果的なのか分かります。
WEBサイトの目的と照らし合わせて、より効果的なデザインにするのが谷宜樹の仕事です。
なんとなくその色をチョイスするという「非合理的」な判断ではなく、行動経済学に基づいた「合理的」なWEBデザインを行なっていると言ったら、ここまでしっかり理解してこれた方は混乱するかもしれませんね（笑）

今回は、WEBデザインにも応用されている行動経済学についてお話しました。
次回からは、具体的にどんな法則が定義されているか見ていきましょう。

企業のサイトに不可欠？LPの意味を整理しよう

前回は、WEBデザインの構成について谷宜樹が解説しました。
今回は、その解説で出てきた「LP（ランディングページ）」について、詳しく見ていきましょう。
企業のホームページやブログ、サイトのLPとは何でしょうか。

■「LP」とは？

LP（ランディングページ）とは、大きく分けて2つの意味があります。
広い意味での場合と、狭い意味での場合では定義が違います。

・広義でのLP
訪問者が最初にアクセスするページという意味です。
例えば、「りんご」と検索していくつかの結果が表示され、そのうちの1つ「青森県産りんご直売店」のサイトをクリックしたとします。
クリックしてから一番最初に出てきた「青森県産りんご直売店」サイトのトップページがLPです。
また、他のサイトを見ている時にポップアップ広告などが出てくることもありますよね。
それをクリックして出てきたページもLPになります。

・狭義でのLP
訪問者が何らかのアクションを起こすことを誘導するためのページという意味です。
例えば、先ほどのりんご直売店を使って考えてみましょう。
狭義では、実際にりんごを購入させるための注文入力画面や、りんご直売店へ直接メールを送るためのお問合せフォーム画面がLPとなります。
検索からの流入の場合、「りんご直売店　注文」「りんご直売店　問い合わせ」というワードからこのページにたどり着くことが多いでしょう。

■WEBデザインでは狭義を考えよう

LPには広義・狭義があり、それぞれかなり意味が違いますね。
Googleアナリティクスというアクセス解析ツールで出てくる「ランディングページ」は、広義の意味です。
検索からのアクセスを増やしたい、広告を貼ってアクセスを増やしたいという場合は、広義LP、つまりトップページの工夫が必要になります。
しかし、WEBデザインにおいて注目すべきは狭義の方です。
WEBマーケティングやWEBデザイン制作についての解説では、サイトのトップページを「LP」とは言わないのが普通だと谷宜樹は思います。
ここで語られているのは狭義のLPなので、間違わないように注意しましょう。

■LPの特徴は？

狭義のLPについて見てみましょう。
これは営業のためのページであるため、集客から注文・問い合わせまでを1枚で表現することが求められます。
営業担当者がセールスしているような内容となり、情報量も多くなるので、縦長のページであることが一般的です。
また、トップページなどと違って1枚で完結する内容にしているので、他のページへのリンクがあまり貼られていないでしょう。
逆にリンクを貼ってしまうと、注文・問い合わせページから離脱し、訪問者のアクションを逃してしまう可能性があります。

LPには広い意味と狭い意味があることが分かりましたか？
SEO対策には広義の方を、WEBデザインには狭義の方を考えると覚えておいてくださいね。