幅千二百ピクセル、高さ六百五十ピクセル、五十ミリ秒、三秒、離脱五割。ファーストビューの設計を調べると、まずこの種の数が並びます。
数は具体的なので、そのまま作業に落とせます。指定された高さに収まるよう要素を削り、指定された秒数に収まるよう画像を軽くする。作業が進むので、設計も進んでいるように見えます。
ところが、この作業を全部やり終えても、結果が動かないことがあります。寸法は指定どおりで、要素も揃っていて、それでも訪れた人は数秒で去る。このとき、数のほうを疑う手はもう残っていません。全部合わせてあるからです。
最初の画面で起きているのは、寸法の判定ではありません。訪れた人は、これが何についてのページで、自分がその対象に入っているかを判定しています。この判定に使われる材料を、以下では輪郭と呼びます。輪郭が出ていない画面は、寸法をどう合わせても輪郭が出ません。逆に、輪郭が出ている画面は、寸法が多少ずれていても機能します。
先に、この記事が扱う範囲を三つに区切ります。第一に、寸法の指定が成り立つ前提——「折り目」という一箇所の境界——が、いまの画面には存在しないこと。第二に、短時間で判定されていると言われているものが、実際には何であるか。第三に、輪郭が具体的に何と何でできているか。この三つは、いずれもここで答えが出ます。
答えの出ないものも書いておきます。その事業の見出しに何を書くべきかは、ここでは決まりません。書ける言葉は対象が決まった時点で自動的に狭くなるので、決めるのはページの外の作業になります。ここで渡せるのは、決まっているかどうかを自分で判定する材料までです。
実害の所在も、先に置きます。輪郭が無いまま寸法だけを整えた画面は、壊れた画面としては現れません。見た目は整っていて、要素も揃っている。数字の側でも、離脱の割合は「やや高い」程度にしか出ません。判定の材料が渡っていないという事実だけが、どこにも記録されないまま残ります。そして、記録されないものは、改善の対象にもなりません。
この見えなさは、作業の向きも変えます。輪郭が足りないと分かっていなければ、次に手を付ける先は配置になります。要素の順序を入れ替え、余白を広げ、画像を差し替える。どれも実際にやることがあるので、作業としては成立してしまいます。成立している作業を続けているあいだ、見出しの一文だけは最初のまま残ります。
📖 目次
ファーストビューの助言は、寸法と要素の二層でできている
案内されている内容は、二つの層に分かれています。一つは表示の寸法、もう一つは配置する要素の一覧です。
寸法の層では、スクロールせずに見える範囲が定義されます。英語では折り目の上を意味する言い方があり、新聞を折りたたんだときに上半分に来る紙面が語源だと説明されます。具体的な目安も示されます。パソコンでは幅が千から千二百ピクセル、高さが五百五十から六百五十ピクセル程度。表示領域は機器によって違うため、パソコンと携帯端末のそれぞれに合わせた設計が要る、と補足されます。
要素の層では、その範囲に何を入れるかが列挙されます。何を提供しているかを示す見出し。それを補う一文。信頼の材料。そして次の行動を促すボタン。この四つを限られた面積に収める、という組み立てです。
二つの層をつなぐ根拠として、離脱との関係が置かれます。訪れた人はこの範囲を見て読み進めるかどうかを短時間で決める。だからここで伝わらなければ後は読まれない、という説明になります。第一印象は一秒未満で形成される、最初の数秒で半数以上が離れる、といった数値が添えられます。
作法も示されます。画像は大きく、文字は読みやすく、余白を取る。動きのある表現を使う場合は読み込みの速さに注意する。
ここまでは、実務の記述として正しい内容です。表示領域に合わせて要素の配置を変える必要があるのは事実ですし、上部ほど見られやすいのも繰り返し観測されている傾向です。何を提供しているかを最初に示すべきだという指摘も、外れていません。
そのうえで、二つの層が共有している前提を取り出します。ファーストビューは、面積として扱われています。決まった大きさの枠があり、その枠に何を入れるかを決める。空間配分の問題として整理されているわけです。
面積として扱うこと自体は誤りではありません。実際に画面には大きさがありますし、入る量には限りがあります。入れる要素の優先順位を決める作業は、確実に必要になります。
問題になるのは、面積の問題として整理し切ると、入れる中身が既に決まっている前提で話が進むことです。見出しに何を書くかは決まっていて、あとは配置だけ、という前提が入ります。
多くの場合、決まっていません。決まっていないまま配置の話に入るので、見出しには「あなたのビジネスを次の段階へ」のような、どの事業でも使える文が入ります。配置は完璧で、輪郭はゼロという状態が、こうして出来上がります。そして、この状態は寸法の側からは見えません。寸法は正しいからです。
新聞の折り目は一箇所に決まっていた。画面の折り目は決まらない
寸法の層が立っている前提は、新聞から借りたものです。そして、新聞には成り立っていた条件が、画面には成り立っていません。
新聞は物理的に半分に折られ、売り場では上半分だけが見えます。だから上半分に最も重要な記事を置く。この配置には明確な根拠がありました。折り目の位置が、紙の寸法によって一つに決まっていたからです。すべての読者にとって、境界は同じ場所にありました。
画面には、この一つに決まる折り目がありません。表示領域の高さは機器ごとに違い、しかも連続的に分布しています。同じ携帯端末でも、機種によって、ブラウザによって、画面の向きによって変わります。
つまり、スクロールせずに見える高さは、訪れた人ごとに違います。ある人が最初に目にする画面と、別の人が最初に目にする画面は、重なってはいますが同じではありません。
帰結は二つ出ます。第一に、特定の高さを境界として設計することができません。六百五十ピクセルまでに収めるという指示は、六百五十ピクセルの人にしか当たりません。それより高い人には余白が残り、低い人には切れた要素が残ります。
第二に、境界を前提とした詰め込みが機能しません。折り目の上に全部入れなければならない、という制約が消えるからです。入れるべき量は、面積ではなく、判定に必要な材料の量で決まります。
上部ほど見られやすいという観測は、この帰結と両立します。上部に置かれた要素のほうが多く見られるのは事実です。ただし、多く見られることと、境界があることは、別の主張です。前者は連続的な傾向で、後者は不連続な断絶です。傾向であれば、上から順に重要な順で並べるという設計になります。断絶であれば、境界の内側に全部詰め込むという設計になります。同じ観測から、まったく違う設計が出てきます。
境界を前提にすると、上部が過密になります。過密になった上部は、要素が多すぎて何を見ればよいか分からない画面になります。詰め込むことで、かえって輪郭が消えるという逆転が起きます。
帰結は、検証の仕方にも出ます。境界があると考えていると、改善の作業は境界の内側の配置を入れ替えることになります。入れ替えの組み合わせは無数にあるので、この作業には終わりがありません。終わりが無い作業は、続けている限り前進しているように感じられます。境界が無いと分かると、この作業自体が要らなくなり、問いは上から順に何を並べるかという一次元の問題に縮みます。
寸法を無視してよい、という話ではありません。携帯端末の狭い画面で見出しが五行に折り返されれば、一目で読めなくなります。寸法が効いているのは、輪郭が読めるかどうかという水準においてです。境界の内側に収まっているかではなく、その機器で無理なく読めるかを見ます。
五十ミリ秒で決まっているのは、好ましさであって輪郭ではない
判断の速さを示す数値は、実在する研究から来ています。そして、その研究が測ったものは、輪郭ではありません。
カナダのカールトン大学のリンドガードらは、ウェブページの視覚的な魅力がどれだけ短い提示時間で判定されるかを調べました（Lindgaard, Fernandes, Dudek & Brown, 2006, Behaviour & Information Technology, 25(2), 115–126）。実験では、ページを五百ミリ秒だけ見せる条件と、五十ミリ秒だけ見せる条件を用意し、同じ刺激で評価を取っています。
結果は、条件をまたいで評価が強く相関したというものでした。五十ミリ秒しか見ていない場合でも、より長く見た場合と近い評価が出た。ここから「五十ミリ秒で第一印象が決まる」という言い方が広まりました。
確認すべきは、何が測られたかです。測られたのは、視覚的な魅力の評価です。その画面を見て、好ましいと感じるか否か。色、配置の密度、画像の質、書体といった要素が、その短時間で全体の印象を作ります。
測られていないものが二つあります。一つは、そのページが何についてのページかを理解できたかどうか。もう一つは、自分がその内容の対象に入っているかを判定できたかどうか。
この二つは、五十ミリ秒では起きません。文字を読む必要があるからです。好ましさの判定は文字を読まずに成立しますが、輪郭の判定は文字を読まないと成立しません。
だから、この研究を「五十ミリ秒で読むかどうかが決まる」と読み替えると、射程が変わります。決まっているのは好ましさであって、読むかどうかではありません。
射程の取り違えは、設計を逆向きにします。好ましさが決め手だと読めば、投資先はデザインの完成度になります。輪郭が決め手だと読めば、投資先は何と書くかになります。同じ研究を根拠にして、まったく違う作業へ向かうことになります。
好ましさが無関係だという話ではありません。見た目が粗い画面は、そこで離れられる可能性が高くなります。好ましさは、輪郭を読んでもらうための前提条件として働いています。
順序で言えばこうです。好ましさは、読まれないという結果を防ぎます。読まれるという結果を作るのは、輪郭のほうです。前者を上げても後者はゼロのままでありえます。
どちらも要るなら区別する意味は薄い、と読めるかもしれません。区別が効くのは、時間の配分のほうです。ひとりで運営している場合、画面の作り込みに使える時間には上限があります。その上限のなかで、デザインの微調整に時間を使うか、見出しの一文を決め直すことに使うかは、別の選択になります。区別しないと、この選択が意識に上りません。
最初の画面は、ページの続きを推定する手がかりとして読まれている
人は目に入っている画面からしか判断できず、まだ見ていない続きについては、目に入っている画面から推定しています。この推定の材料を渡すことが、最初の画面の仕事です。
この推定の仕組みは、情報を探す行動の研究として定式化されています。ピロリとカードは、人が情報を探すときの振る舞いを、動物が餌を探す行動と同じ枠組みで記述しました（Pirolli & Card, 1999, Psychological Review, 106(4), 643–675）。中心にあるのは、手近な手がかりから、その先にある内容の価値を推定するという構造です。手がかりが強ければ先へ進み、弱ければ引き返す。
これを最初の画面へ当てると、こうなります。最初の画面は、そのページ全体の見取り図として読まれています。最初の画面を見た人は、その先にこの続きがあるはずだという予測を作り、続きを読むかどうかの判断は、実際の続きではなく、この予測に対して下されます。
だから、最初の画面の役割は興味を引くことではありません。予測を正確に作らせることです。予測が正確であれば、その内容を必要としている人は残り、必要としていない人は離れます。
これは、離脱を減らす設計とは向きが違います。予測を正確にすると、対象外の人の離脱はむしろ増えます。減るのは、対象の人が誤解して離れる分だけです。
この区別は、数字の上では見えません。どちらも同じ離脱として記録されるからです。数字だけを見ていると、予測を曖昧にして全員を引き止める設計のほうが、良い値を出します。
曖昧にすると何が起きるか。残った人のうち、対象でない人の割合が増えます。その人たちは読み進めた先で離れるので、離脱の発生地点が後ろへ移動するだけです。移動した分、読む時間が費やされています。
ピロリとカードの枠組みは、その一段先も説明します。手がかりが弱いとき、探し手は先へ進むのをやめて別の場所へ移ります。弱い手がかりは、間違った予測を作るのではありません。予測そのものを作らせないので、探し手は判断を保留せずに離れます。「あなたのビジネスを次の段階へ」が何も起こさないのは、この位置にあるからです。
対象かどうかは読んでみなければ分からないので最初の画面で切るのは早すぎる、という見方もありえます。読んで初めて自分に関係があると分かる主題は、確かに存在します。
その場合でも、輪郭は要ります。輪郭とは「あなたはこれに関係している」という宣告ではなく、「これは何の話か」という提示だからです。何の話かが分かれば、自分に関係があるかどうかは読み手が判定できます。判定の材料を渡すことと、判定を代わりに下すことは違います。
輪郭を正確に出すと、対象の幅は狭く見えます。実際には広い範囲に効く内容でも、明確に書くほど自分ではないと読む人が出ます。これは避けられません。明確さと網羅性は、同じ面積のなかでは両立しないからです。選ぶとすれば、明確さです。網羅的で曖昧な提示は、誰にとっても自分の話に見えず、結果として多くの人が離れます。
輪郭は、主題と状態という二つの問いへの答えでできている
輪郭を分解すると、二つの問いが出てきます。主題の問いと、状態の問いです。
第一の問いは、これは何についてのページか、です。答えるべきは、扱っている主題です。商品名ではありません。商品名は、既にその商品を知っている人にしか意味を持ちません。扱っている主題とは、その商品が何の問題に関わっているかです。
ここで多くの画面が躓きます。「独立を成功させる」「ビジネスを加速する」といった表現は、主題を示していません。どんな事業にも当てはまるので、範囲を絞っていないからです。
主題が示されている状態とは、それを読んで扱っていない範囲が分かる状態です。何を扱っているかは、何を扱っていないかとセットでしか伝わりません。
第二の問いは、自分はその対象に入っているか、です。答えるべきは、読み手の側の状態です。属性ではありません。年齢や職種を書いても、読み手は自分が対象かどうかを判定できません。判定できるのは、いま自分が置かれている状態と一致しているかどうかです。
たとえば「独立して数年、売上は立っているのに時間が減り続けている」は状態です。この記述に対しては、当てはまるかどうかを読み手が即座に答えられます。「三十代のフリーランス」に対しても答えられますが、答えたところで自分に関係があるかは分かりません。
二つの問いに答えが出ていれば、輪郭は出ています。どちらか一方でも欠けていると、輪郭は出ません。主題だけがあれば、何の話かは分かるが自分に関係があるかが分からない状態になります。状態だけがあれば、自分のことだと分かるが何をしてくれるのか分からない状態になります。
二つの問いに答えるのに、必ずしも文章が要るわけではありません。図や画像で主題が示せる場合はあります。ただし、状態のほうは、ほぼ確実に言葉が要ります。状態は内側の記述なので、絵にすると一般的な人物像になり、判定の材料になりません。
状態を書くと、その状態にない人が離れます。これは設計どおりの動きですが、離れた人数は記録に残り、書かなかった場合との比較はできません。輪郭を出す設計は、効果を数字で証明しにくい設計でもあります。証明できないものを採るかどうかは、判断の側の問題になります。
二つの問いの順序も、読まれ方を変えます。状態を先に置くと自分のことだという判定が先に立ち、主題は後から入ってきます。主題を先に置くと、関心の無い主題であればそこで離れます。どちらが良いかは、その主題が既に知られているかどうかで変わります。知られていない主題ほど、状態を先に置いたほうが読まれます。
見出しが決まらないとき、決まっていないのは対象のほうである
実務で最も詰まるのは、見出しの一文です。そして、詰まっている原因は、書く技術の不足より、誰に向けて書くかが決まっていないことにある場合が多くあります。
判定は簡単です。この一文は誰が読んだときに刺さってほしいか、と自分に問い、一つの状態で答えられるかを見ます。独立している人全般としか答えられないなら、決まっていません。
決まっていない状態で書こうとすると、必然的に広い言葉が選ばれます。広い言葉を選ぶのは、対象が絞れていない以上、絞った言葉を選べないからです。言葉が広いのは結果であって、原因ではありません。
だから、見出しを直す作業は、書き直す作業ではありません。対象を決める作業です。決まれば、書ける言葉は自動的に狭くなります。
対象を決める作業がどこで行われるかというと、ページの外です。自分が何を扱う事業なのか、その価値がどこから来ているのかが決まっていないと、対象は決まりません。この順序は動かせません。
対象を決めるために反応を見る必要があるので先に出すしかない、という順序もありえます。出すこと自体は妥当です。反応を見なければ分からないことは実際にあります。
ただし、広い言葉で出すと、反応が読めません。独立している人全般に向けた文に反応が無かったとき、対象が違ったのか、言葉が悪かったのか、そもそも需要が無いのかを分けられません。狭く出せば、外れたときに何が外れたかが分かります。
狭く出すと、初期の反応の数は減ります。数が減ると、判定に必要な期間が長くなります。早く判定したいという動機が、広い言葉を選ばせる圧力として働きます。この圧力は自然に発生するので、意識していないと広い側へ倒れやすくなります。
対象が一つに決まらない事業も存在します。扱っている内容が複数の状態に効く場合、一つの見出しに畳むと、どの状態にも半分しか当たらない文になります。
この場合の解き方は、見出しを広げることではありません。入口を分けることです。状態ごとに別のページを用意し、それぞれの見出しでその状態だけを書く。一つの画面で複数の対象を捉えようとすると、広い言葉に戻りやすくなります。入口を複数持つことと、一つの入口を広くすることは、まったく別の設計です。
そして、入口を分けたときに合流点まで分ける必要はありません。入口は複数でよく、その先の受け皿は一本で足ります。この考え方は、導線設計で扱っています。
要素を足すと、輪郭は薄くなる
最初の画面に置く要素を増やすと、輪郭は薄くなります。面積が有限だからではありません。要素が増えると、どれが主題を示しているかが分からなくなるからです。
たとえば、見出しの下に実績数、導入企業の名前、受賞歴、期間限定の案内を並べると、それぞれは信頼の材料として機能しそうに見えます。しかし、四つが同時にある画面では、読み手はまずどれを読むかを決めなければなりません。
この、どれを読むか決めるという作業は、読み手の側の負担です。負担がかかった分だけ、輪郭の判定は後ろへずれます。
有効な操作は、主題と状態を示す要素だけを最初の画面に残し、他をその下へ送ることです。送っても消えるわけではありません。上下に並べれば、上から読まれます。これができるのは、境界が存在しないからです。折り目の上に全部入れる必要が無いのであれば、順序で解けます。
要素を減らせば必ず良くなる、という単純な話ではありません。主題を示すために二つの要素が必要な場合はありますし、状態の記述が長くなる領域もあります。判定の基準は数ではなく、それぞれの要素が二つの問いのどちらかに答えているかです。答えていない要素は、下へ送ります。
下へ送った要素は、上にあったときより見られる回数が減ります。実績や信頼の材料を下へ送ると、それを見て安心していた層の反応が落ちる可能性があります。
このとき、上へ戻す前に確かめることがあります。落ちたのが、輪郭を読んだうえで判断した人の数なのか、輪郭を読む前に離れた人の数なのか。前者なら要素の配置の問題ですが、後者なら輪郭そのものの問題です。同じ数字の下がり方が、二つのまったく違う原因から出ます。
知られていない相手のページなのだから実績や信頼の材料こそ最初に見せるべきだ、という順序も考えられます。しかし、信頼の材料が効くのは、何についての信頼かが決まった後です。何を扱っているか分からない相手の実績数を見ても、その数字が多いのか少ないのかを判定できません。判定できない数字は、信頼を作らず、面積だけを消費します。
順序で言えばこうです。まず主題が分かり、次に自分が対象だと分かります。そこで初めて、この人に自分の仕事を任せてよいかという問いが立ち、信頼の材料がその問いへの答えになります。問いが立つ前に答えを置くと、答えは読み飛ばされます。
この順序は、要素を減らす作業に上限を与えます。減らせるのは、問いが立つ前に置かれていた答えだけです。問いが立った後の位置にある要素は、減らすと判断の材料が欠けます。だから、削る対象を決めるときに見るのは要素の種類ではなく、その要素が画面のどの位置にあるかになります。同じ実績数でも、見出しの直下にあれば読み飛ばされる材料で、状態の記述の後にあれば問いへの答えです。
画像と動きが担っているのは、好ましさの側である
大きな画像や動きのある表現は、好ましさを上げる方向に効きます。ただし、輪郭は伝えません。画像が伝えるのは雰囲気であって、主題でも状態でもないからです。
分かりやすい例が、人物の写真です。机に向かって微笑んでいる人物の写真は、どんな事業のページにも置けます。置けるということは、範囲を絞っていないということです。
もう一つの例が、抽象的な図形です。構造や設計を扱っている事業では相性が良く見えますが、図形そのものが主題を示すことはありません。
判定は、要素の数を見たときと同じ基準で行えます。その視覚要素を外したときに、二つの問いへの答えが失われるか。失われないなら、それは輪郭を担っていません。
だからといって外すべきだ、という話ではありません。好ましさを担う役割には、それ自体の意味があります。位置づけを取り違えないことが重要で、画像を大きくすることで輪郭の不足が補われることはありません。
図解で主題を示している例はあります。商品の使用場面や、扱っている構造の見取り図は、主題を伝えます。伝わるのは、その図が特定の内容を指しているときだけです。見分け方はこうです。その図を、まったく別の事業のページに貼り替えられるか。貼り替えられるなら、その図は主題を指していません。
動きのある表現は、読み込みの時間を増やします。増えた時間の分だけ、輪郭が表示されるのが遅れます。好ましさを上げるための要素が、輪郭の到達を遅らせるという逆向きの作用が生じます。
切り替わる表示には、別の問題があります。複数の見出しを順に切り替える表現を使うと、どの一文が主題なのかが決まりません。最初に表示された一文を読んでいる途中で次へ切り替わると、読み手は読むのをやめます。切り替えは、複数の主題を持てないという制約から逃げるために使われますが、逃げた結果として主題が一つも伝わらなくなります。
画像そのものが商品である領域では、話が変わります。作品や制作物を売っている場合、画像は雰囲気ではなく主題そのものです。見分け方は変わりません。作品を売っているページから作品の画像を外せば、何を扱っているかは伝わりません。その場合、画像は輪郭を担っています。
ただし、この領域でも状態の側は空いたままです。画像が答えているのは主題の問いだけで、誰に向けたものかは画像から読めません。作品の写真が並ぶページで、その作品を必要としている人がどういう状態にあるかは、言葉でしか置けません。画像が主題を担っている領域ほど、状態の記述が忘れられます。主題が伝わっているので、輪郭も出ていると読めてしまうためです。
テキストだけを残したとき、二つの問いに答えが出るか
輪郭が出ているかは、三つの手で確かめられます。どれも寸法には触れません。輪郭は面積の性質ではないので、確かめる対象は画面に書かれている中身になります。
第一は、最初の画面のテキストだけを抜き出して、他人に見せることです。見せる相手は、その事業を知らない人にします。そのうえで二つを聞きます。これは何の話か。どういう状態の人に向けて書かれているか。二つとも答えられるなら、輪郭は出ています。
画像を外してテキストだけにするのが要点です。画像が入っていると雰囲気から推測できてしまい、テキストが輪郭を担っているかどうかが分かりません。
第二は、その見出しを競合のページに貼り替えられるかどうかです。貼り替えても違和感が無いなら、その見出しは範囲を絞っていません。違和感が出るなら、絞れています。これは自分ひとりで実行できるので、他人に見せる前の一次判定として使えます。
第三は、対象でない人からの問い合わせの割合を見ることです。輪郭が出ていれば、対象でない人からの接触は減ります。減らないなら、輪郭が広すぎるか、輪郭が伝わる前に行動が起きています。問い合わせの内容を読めば、どちらかは判別できます。
この三つには、届かない範囲があります。第一と第三は、他人が要ります。ひとりで進めている段階では、第二しか使えません。
第二だけでも、相当のことが分かります。貼り替えられる見出しを書いている限り、輪郭はまだ設計されていないからです。
競合が見当たらない領域では、第二の確認が使えないように見えます。その場合は、自分の別の商品や別のページに貼り替えます。同じ事業の中でも、扱っている内容が違えば貼り替えは不自然になるはずです。不自然にならないなら、その二つは同じ輪郭を持っているということで、それ自体が設計の情報になります。
数として渡せるものは、一つもありません。見出しの文字数、要素の個数、画像の要否。三つとも、扱っている主題の複雑さと、読み手が既に持っている前提知識の量で意味が変わります。外から数を置けば、その条件を見ないまま判断が済んだことになります。
新聞の折り目。折り目が一箇所に決まっていたのは紙の側の事情で、画面はその事情を引き継いでいません。境界が消えた場所に残るのは面積ではなく順序で、順序を決めるのは、その画面が何と何に答えているかです。短時間で判定されているのは好ましさのほうであり、輪郭は文字を読まないと判定されません。そして輪郭は、主題と状態という二つの問いへの答えでできています。
だから、ひとりで確かめられる手が一つあります。この見出しを、競合のページにそのまま貼り替えられるか。貼り替えられるなら、輪郭はまだそこにありません。
輪郭を出した先で、そのページ全体をどう組み立てるかは、ランディングページの構成で扱っています。何を主題として掲げるかがそもそも決まらない場合は、コンセプトの作り方と世界観の作り方が上流に当たります。主題と状態は、画面を作る時点ですでに決まっていなければ出せません。判断を実行の側から設計の側へ移すという操作そのものは仕組み化が扱っています。
