Webデザインは提案書と同じ?一瞬で伝わるWebデザインのコツと駄目なデザイン

Webデザインというのは一瞬で伝わらないと意味がない

6abc7231b463ea494542918355831592_s

過去Webデザインを行う事において基本的な要素の1つである、8秒ルールというのがありましたね、当時は回線速度も影響はあり8秒以内にページを理解してもらわないと離脱するという事です。近年では3秒ルールとなっておりそれだけ一瞬で画面を見てターゲットに伝わらなければ意味がないのです。

人間が画面に認識できる文字数は1秒4文字、1行12文字が基本

映画を見にいくとわかると思いますが、字幕映画で流れる文字は1秒に4文字、1行12文字程度と言われているのです。
字幕翻訳で有名な戸田奈津子さんいわく「どんな名訳でも20文字になったら、読み切れません。」とあります。

戸田奈津子氏が語る「映画の魅力を表現する字幕翻訳」
~1秒4文字、10文字×2行の世界~

Webデザインも提案書も基本的には一緒

b09d1aadc5dfd69999ecc90e97e44ab1_s

このように人間が視覚出来る範囲というのは非常に限られており、自分が求めている情報がなければ即離脱されてライバルに取られてしまうのが現実。これはデザインに限った事ではなく、提案書も同じです。
想像して下さい。プレゼンで出される資料が小さい字で専門用語が沢山ある資料を。そんな資料みたくないし結論だけ言って欲しい事ってありませんか?
結局提案書と一緒で、一言で伝われば良いのです。更に文字じゃなくても提案書は良いのです。優れている提案書は1Pに10文字程度で完結しております。それだけ言いたい事を絞っているのです。
デザインも一緒でそのページで「誰に」「何を」伝えたいのかを明確にしてデザインを行い、いかに簡略化して詳細ページに遷移させるかという点に重きを置くのです。

極論を言うと伝われば○一つでも良いのです。シンプルこそが1番良いのです。

一瞬で伝わる効果的な3つのデザイン手法とコツ

これはデザインじゃなくても良いです。プレゼン資料でも良くどんな広告にでも当てはまります。

1.結論をトップページに配置する

ユーザーが求めている情報をトップページに配置しその結論に対しての理由を詳細ページに配置してみてはいかがでしょうか。
ユーザー自身はあなたの説明は聞きたくないのです。単純に結論だけを知りたいのです、しかも文字数は10文字以内がいいでしょう。

2.恐怖心を抱く文言を使い、安心させる為に詳細ページへ誘導する

広告の常套手段と言える恐怖訴求。これが最も効果的かもしれません。そのターゲットに対してこの商品がないと「仲間はずれにされる」「恋人から嫌われる」などその商品がもつターゲットに対して恐怖を提案しその恐怖を取り除く方法を提案するとコンバージョン率は飛躍的にあがるでしょう。これは提案書にも言える事。

3.悩み訴求をして共感を抱く

基本的に「検索」するという行為は悩みを取り除く為に検索するのです。その結果悩んでいる自分に共感できる記事があるとクリック率が高まり、コンバージョン率が上がるという事です。

絶対やってはいけないWebデザイン

デザインをする上で絶対にやってはいけいないのが、ユーザーの利益を考えないで自分たちの情報をのみを出す事です。
これが一番嫌われかついまのGoogle先生の検索アルゴリズムではSEO効果はゼロに等しいと言われております。
家を建てるのに住む人を知らない訳がない。

今後パララックスが急激に増える

2014-08-06 23.20.42

最近パララックスというデザインが増えております。パララックスはWebデザインが発展してきた結果最終形態に近いかもしれません。Webページに訴求したい文言を最小限に納め、相手にイメージと言葉を伝える。まさに提案書そのものですよね。
視差効果(パララックス)|縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG

Webデザインは相手の利益を最大限に考えることが1番重要でSEO効果も強い

このようにWebデザインで重要なのは相手を理解して相手の利益を最大限に考える事ができるサイトが生き残っていくのです。
ですので自己満足のようなサイトはドンドン淘汰されていきますので、相手の事をいかに知るかという点が非常に重要になるのです。つまりWebデザインを行うにはまずは「コンセプトシート」で相手を深く知る事が大切になります。

ああ、最近「今週の本」更新してないなぁ。

以上Webデザインは提案書と同じ?一瞬で伝わるWebデザインのコツと駄目なデザインでした。気に入ってくれたらシェアしてね!

2014/08/06 | デザイン

関連記事

PASONAZ160306470I9A2122_TP_V

ECサイトに必須!商品検索したあとの検索結果の正しい表示について考える

ECサイトに必須!商品検索したあとの検索結果について考える ECサイ...

記事を読む

skitched-20180814-223313

今日からあなたもデザイナー!?忘れがちな商業デザインの配色テクニック

デザイナーの商業デザイン配色テクニック 配色については過去ある程度テ...

記事を読む

6935b31778bafbaa90cbd4cc223ae54e_m

見積金額を高く!デザインや営業に使える訴求力を高めるたった3つの事

最近はどうも忙しくてなかなか更新できてないのですが、最近カメラマンから...

記事を読む

document_img01

15年の経験から理解した!書類選考を通す為に必要な5つのこと

すっかり時間が空いてしまいましたが、しっかり書いていきましょう。 ま...

記事を読む

design_skill

今年こそWebデザイナーになりたい!初心者の為のデザインスキルを上げる簡単な2つの方法

今回は、諸々スキルも大筋ついてきたけど肝心なデザインスキルがどうしても...

記事を読む

新着記事

smartphoneIMGL0018_TP_V

UIデザインの幅に関しての基本的な考え方と理論

全く更新できず時間が過ぎていく…気ままに更新していきますのでたまに見て...

記事を読む

PASONAZ160306470I9A2122_TP_V

ECサイトに必須!商品検索したあとの検索結果の正しい表示について考える

ECサイトに必須!商品検索したあとの検索結果について考える ECサイ...

記事を読む

skitched-20180814-223313

今日からあなたもデザイナー!?忘れがちな商業デザインの配色テクニック

デザイナーの商業デザイン配色テクニック 配色については過去ある程度テ...

記事を読む

6935b31778bafbaa90cbd4cc223ae54e_m

見積金額を高く!デザインや営業に使える訴求力を高めるたった3つの事

最近はどうも忙しくてなかなか更新できてないのですが、最近カメラマンから...

記事を読む

document_img01

15年の経験から理解した!書類選考を通す為に必要な5つのこと

すっかり時間が空いてしまいましたが、しっかり書いていきましょう。 ま...

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

smartphoneIMGL0018_TP_V
UIデザインの幅に関しての基本的な考え方と理論

全く更新できず時間が過ぎていく…気ままに更新していきますのでたまに見て

PASONAZ160306470I9A2122_TP_V
ECサイトに必須!商品検索したあとの検索結果の正しい表示について考える

ECサイトに必須!商品検索したあとの検索結果について考える ECサイト

skitched-20180814-223313
今日からあなたもデザイナー!?忘れがちな商業デザインの配色テクニック

デザイナーの商業デザイン配色テクニック 配色については過去ある程度テク

6935b31778bafbaa90cbd4cc223ae54e_m
見積金額を高く!デザインや営業に使える訴求力を高めるたった3つの事

最近はどうも忙しくてなかなか更新できてないのですが、最近カメラマンから

document_img01
15年の経験から理解した!書類選考を通す為に必要な5つのこと

すっかり時間が空いてしまいましたが、しっかり書いていきましょう。 まず

→もっと見る

  • -売る技術-

    ウエブデザイン暦15年目。犬をこよなく愛するデザイナー。今はディレクションとデザイン を中心に制作全般をしてます。主にマーケティングを軸にデザインを組み立て商品が売れるサイトを構築しています。 デザインとマーケティングについて研究の日々。現在はオランダでWebデザイナーとして働いています。

    ツイッターやってます。
  • Amazonアソシエイト・プログラム規約による記載

    売る技術はamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

PAGE TOP ↑