私はどうデザインしているか

今はウェブサイトを作るのがとても速い。テンプレートを選んで、名前とアイコンを差し替えれば、午後のうちに公開できる。けれどそのせいで、似たり寄ったりのサイトが多い。問題はたいてい技術ではなく、自分が何を求めているのかわからないことにあると私は思う。自分の世界観がなければ、他人の用意した選択肢から選ぶしかない。

私は配色やフォントにそれほど詳しくなく、なぜこれが美しいのかを理論で説明することはできない。それでも確かだと思えることが二つある。一つは、日本の引き算の美意識がとても好きだということ。取り除けるものは取り除き、残ったものにはそれぞれの居場所がある。もう一つは、画面の良し悪しで私がいちばん気にするのは、調和しているかどうかだということ。

先に断っておくと、デザインは主観的なものだ。シンプルで直感的なインターフェースが好きな人もいて、それも間違いではない。違うのは、どれだけの人に好まれるかだけだ。以下は私のやり方であって、唯一の答えではない。その中でいちばん大切な前提は、自分が作ったものを自分自身が好きであることだ。

まず自分が何を求めているかを知る#

世界観というと大げさに聞こえるが、出発点は小さい。自分が本当に好きなものは何か、だ。私が宇宙を選んだのは、ずっと天文に興味があって、よく天文の本をめくったり、いろいろな科学解説を見たりしているからだ。好きなものでなければ掘り下げ続けようとは思えないし、この先のどのステップでも、それを十分に知っている必要がある。

好きなものは、まだ世界観ではない。それを世界観にするために、私はそれで問いに答えることにしている。どのサイトも同じ問いにぶつかる。それを書き出して、一つずつ宇宙で答えていく：

この表に答えきれたら、もう世界観はある。使い道は二つ：

• 答えられないものは、「貼り付けたような」ものになる。 ボタンでも、アニメーションでも、イラストでも、自分の世界でそれが何なのか言えないなら、置いてもたいてい浮いてしまう。
• 最後の行は、それまでの行と同じくらい大切だ。 世界は何ができるかだけでなく、何をしてはいけないかも教えてくれる。これが引き算の第一歩だ。海王星のテーマを作ったとき、飛んでいく点の尾を風の筋として描いた版があった。風は惑星の大気にあるものだが、画面遷移は星と星のあいだで起きる。だから丸ごと外した。

世界観はフィルターではない。宇宙に決めたからといって、星しか置けないわけではない。このサイトには帰還カプセルも、スペースシャトルのロボットアームも、地平線の木も、鉄塔も六分儀ろくぶんぎもあって、どれも自分がなぜここにいるのかを言える。

それに、写実的である必要もない。この世界は架空で、衛星の横に文字が浮かび、一つの点がページのあいだを飛び回る。SF 映画を観るのと同じで、宇宙船が光速を超えたくらいで興ざめする人はいない。興ざめさせるのは小さなところだ。光の消え方がおかしい、あるものの質感が周りと違う、ある動きに理由がない。だから私の判断基準は「リアルかどうか」ではなく「調和しているかどうか」だ。現実のデータはとても役に立つが、それは調和にたどり着くための道具であって、目的ではない。

選び、その代償も引き受ける#

世界観が決まると、サイト全体の姿を決めるいくつかの大きな選択がやってくる。私にとっていちばん大きかったのは、サイト全体を 3D にすることだった。

宇宙の広さは平面では見せられない、と私は考えている。3D の利点はわかりやすい。空間の立体感が十分にあり、細部も平面より深く彫り込める。星は自転し、傾き、裏側に回り込んで隠れる衛星を持てる。

代償もはっきりしている。UX の一部を犠牲にするし、パフォーマンスを抑え込むのに大きな労力がかかる。一般の読者にとっては、動いて奥行きのある画面は、すっきりした文字だけのページよりずっと認知負荷が大きい。これは自分で選んだことで、代償がないふりをするつもりはない。

私のやり方は、核は譲らず、代償は一つずつ補う、というものだ。

• パフォーマンス： 目標は「3D なのにどうしてこんなに滑らかなんだ」と思わせること。ただし品質を落とさないのが前提だ。最適化で手法は変えてもいいが、画面を変えてはいけない。
• 読みやすさ： 記事ページには一枚下地を敷き、背後の星が文字の邪魔をしないようにした。
• デバイス： GPU のないデバイスでは、より簡素な星空に切り替わる。機能はすべてそろっていて、演出が少し減るだけだ。

どんな大きな選択でも同じだ。何を差し出して何を得るのかを先によく考え、選んだら本気で補う。途中で引き返して、どっちつかずにしてはいけない。

カメラを決める：読者はどこに立つのか#

3D を選ぶと、平面ではあまり考えなくていいことが一つ増える。カメラをどこに置くかだ。私は角度やカメラワークがとても気になるほうで、映画を観ていてもよく、このシーンはどんな角度で、どう撮ったのだろうと考える。サイトを作るときは、まず読者がどこに立つかを決め、それから何が見えるかを決める。

• ページごとに、まずカメラ位置を決める。 ホームは土星の北側から斜めに見下ろし、ほとんどのページは 3D のあおりだ。
• 内容そのものが平らなときだけ、平面にする。 写真ページは写真の壁なので、平面のほうがきれいに見える。でも全ページを平らにはできない。航海日誌まで平面にしたら、ページを順に見ていくうちに飽きてしまう。
• カメラが動くとき、背景には視差しさをつける。 遠いものはゆっくり、近いものは速く動いてはじめて、ページが背景の上を滑っているのではなく、カメラが動いているように見える。
• 画面遷移は長回しのように。 まずあの点にピントを合わせ、追いかけて撮り、最後にカメラが止まっても点はまだ動いていて、そこでようやく背後の軌跡が映る。詳しくは前回の記事に書いた。

カメラの位置は、そのページが何を語るかを直接変える。旧版の自己紹介ページには窓があって、青い火球が夜空を横切り、地面に落ちる瞬間を映していた。そのとき読者は地上に立ち、星が落ちるのを見ていた。リニューアル後は、落ちるのが読者自身になった。見出し「しっかりつかまって。」の句点があの琥珀色の点で、下へスクロールすると、点はあなたと一緒に落ちていき、最後は「ここに降り立つ。」の瞬間に帰還カプセルが着地する。素材はほとんど同じで、カメラが地上から、落ちていくその星の上へ移っただけだ。

引き算でまとめる：点と線だけ#

画面には二種類のものしか残さなかった。点と線だ。「このサイトについて」のページの副題に書いた「ここには何もない。夜と、白い墨と、かすかな光だけ。」は、まさにそのことを言っている。

語彙が少ないことの利点は、それが代わりに決めてくれることだ。新しいものが入ってくるときは、まず自分が点なのか線なのかを言えなければならない。言えないものは、ここには属さない。あなたのサイトが点と線である必要はない。四角とグリッドでも、紙と折り目でもいい。大事なのは二、三種類だけを選び、どのページもどの部品もそれで組み立てることだ。点と線は、たまたま星空のいちばん正直な姿でもある。星はもともと点で、軌道も星の軌跡も彗尾すいびももともと線だ。別の図形言語を発明する必要はなかった。

引き算には余白も含まれる。ホームを開くと、土星と数本の線しかない。五つのセクションはふだん軌道上の点にすぎず、カーソルを重ねたときか、順番が来て光ったときにだけ名前が浮かぶ。画面のものが少ないからこそ、読者は自分で探索するし、現れる一つひとつが大切に見える。

色：先に役割を決め、それから色を選ぶ#

多くの人は、まず好きな色をいくつか選んで、それからどこに置くかを考える。私は逆だ。先にどんな「役割」が必要かを決め、それぞれの役割に意味を一つだけ持たせ、最後に色を当てはめる。

1. 紙は純黒にせず、墨は純白にしない。 黒地に純白はまぶしすぎる。#F1ECE3 は少しだけ暖かく、紙に置いた墨に近い。長文を読み続けても目が疲れにくい。
2. 墨は一色だけにして、透明度で階層を作る。 見出し、本文、説明、線は、すべて同じ墨色の透明度違いだ。どの層もコントラストを測っていて、本文は最低でも 4.5:1。
3. シグナル色は一つだけ残し、意味も一つだけ与える。 私の琥珀色は「あなたはここ」だけを表す。大きくする必要も、点滅させる必要もない。画面で色を持っているのはそれだけだからだ。
4. 警告色はエラーのときだけ現れる。 シグナル色とは十分に離れていなければならない。そうでないと、削除ボタンが「あなたはここ」に見えてしまう。

色の引き算がいちばん難しい。どの色も単体で見ればきれいだからだ。旧サイトの紫と緑のリンクはすべて外した。コードのシンタックスハイライトもずいぶん迷った。サイト全体でごく数少ない色のある場所になるからだ。混ざる色が増えるほど、画面から主役がいなくなる。

配色を何組も作るとき#

オープンソース版では天体を切り替えられるようにして、四組作った。配色を何組も作るときは、さらに三つのことを守った：

• 紙と墨も、ほんの少しだけ寄せる。 海王星は寒色に、ベテルギウスは暖色に。差はごくわずかだが、サイト全体が切り替わると空気の温度が変わる。
• 主役には色を塗らない。 海王星はもともと青い。惑星まで青みがかった版があったが、サイトのテーマと少しぶつかり、あの点も特別ではなくなった。惑星はいつも墨色で、色はあの点だけのものだ。
• シグナル色は見分けがつくように。 自分の文字色とも、ほかの組とも見分けがつかなければならない。私は色差（ΔE2000）で測り、組どうしは 20 以上離してはじめて見間違えなくなる。もともと月の組があったが、シグナル色と文字色の差がわずか 6 で、点がほとんど見えなかった。最終的にブラックホールに替えた。

白黒テスト#

最後のチェックがいちばん簡単で、いちばん役に立つ。色を取り除いても、それが何かわかるか？ 二つのものが色でしか区別できないなら、形の作り込みが足りないということだ。海王星は一時期、まだ土星のように見えていた。土星と同じ筆致ひっちで、青を少し足しただけだったからだ。そこで形で分けることにした。土星は途切れ途切れの刷毛目はけめと大きな環、海王星はなめらかな筆致と暗斑、ブラックホールはぽっかり空いた影と吸積円盤きゅうせきえんばん、ベテルギウスはもこもことした対流胞たいりゅうほうだ。

線：太さはひとつ、明るさと実線・点線で語る#

線のルールも色と同じだ。先に制限し、それから意味を与える。サイト全体で太さは一種類だけ、1px のヘアラインだ。

太さが変えられない以上、線に違う意味を持たせるには、明るさと、実線か点線かに頼るしかない。実線はすでに起きたこと、点線はまだ来ていないことだ。

ルールを決めたら、それを実際に使う場所を見つけたほうがいい。そうでないと、ただの飾りになる。私は記事の目次で使った。目次は一本の星の軌跡で、読んだところは実線、まだ読んでいないところは点線、琥珀色の点がいま読んでいるあなただ。

ルールを破るなら、理由が要る。例外の線は一本だけだ。点が飛ぶときに後ろに引く、あの一本。白いヘアラインでは光に見えないので、点の色を使い、ごく淡い光のにじみをまとわせた。色を持っていいのは、それがもともとあの点の放つ光だからだ。

継ぎ目ですべての細部を確かめる#

ここまでに決めたのはルールで、このステップは毎日やっていることだ。

リニューアルのあいだ、いちばん私を立ち止まらせた感覚は「貼り付けたみたい」「無理やりつないだみたい」「合っていない」だった。どれも調和が崩れたときの感覚で、ぼんやりしていて直しにくい。やがて気づいたのは、それがほぼ必ずどこかの「継ぎ目」がうまくつながっていないせいで、継ぎ目には数種類しかない、ということだった：

もう一つ、とても役に立つ問いがある。それの次の一手は何か？ 機材ページのスペースシャトルのロボットアームは箱を持ち上げるが、その箱はそのあとどこへ行ったのか？ 「いま」しかなく、前後の因果がないものは、長く見ているうちに嘘っぽくなる。

こうした細部はほとんどの人が気づかないし、一つずつ取り出せばどれも重要ではない。でも、サイトの中でつながっていない箇所が増えると、継ぎはぎのように見えはじめる。逆に、一つずつつないでいけば、読者は理由を言えなくても、そこを一つの完結した場所だと感じる。

どこがおかしいのか言葉にできないとき#

上の表は後から整理したものだ。実際に作っているときは、たいてい「なんか変」と感じるだけで、問題がどこにあるのかを一言で言えることはめったにない。うまく言い表すとなればなおさらだ。不調和が見えることと、なぜ不調和なのかを言えることは別の能力で、前者は美的な蓄積がものを言い、表一枚で身につくものではない。

そんなとき、私は三つのことをする：

• 本物と見比べる。 土星の縞はもともと独特なので、刻線こくせんは本物の土星をなぞって描く。北極の六角形はカッシーニの写真をもとに描いた。中は空っぽではなく、一面の雲と中央の嵐の目がある。旧版の自己紹介ページのあの青い火球は、その自撮り動画と見比べて、光が暗から明へ、そして着地へと移るリズムを確かめた。
• 人がどうしているかを見る。 リニューアルの初めに、さまざまな星空のデザインを見るのにかなりの時間を使った。自分が見ても目を奪われるものを作りたかったからだ。目次は、fumadocs の目次デザインだけを扱った記事を読んで、目次はそれだけで一つのデザインとして作る価値があると知った。favicon がうまくいかないときは、みんなが小さいサイズをどう処理しているかを見に行った。
• 仕様をきちんと調べる。 「変」の中には、事実をわかっていなかっただけのものもある。コントラスト比や色差は測れるし、iPhone Duo のような折りたたみ画面のサイズや折り目の位置は、Apple の公式仕様で調べられる。

参考は丸写しではない。見終わったら自分の世界に戻り、自分の語彙で描き直す。fumadocs の目次はまっすぐだが、私のは一本の星の軌跡だ。

物語は読者に見える場所に置く#

オープンソース版の四つの天体は、このやり方がいちばん徹底的に試された場面だった。資料を調べ、本当の物語どおりに描くのは、つまるところ模倣にすぎず、資料があれば誰にでもできる。本当に難しいのは、それをどう取り込むか、しかも筋が通っていて、サイト全体と調和するように取り込むかだ。読者に見えない場所に物語を作っても、作っていないのと同じだ。取り込んだのに浮いてしまえば、作らないより悪い。

海王星の第一版ができたとき、画面遷移は土星とほとんど同じに見えた。遷移の画面の多くはページごとの閉じ方と現れ方で、テーマで変えられる部分は実は少ないからだ。そこで、読者が必ず目にする場所を先に書き出し、物語を一つずつはめ込んでいった：

一つひとつのマスを埋める前に、三つの問いで確かめる。

その大きさで読み取れるか#

物語を一つの点、一本の線にまで縮めると、抽象的になりすぎやすい。土星にはとてもいい物語がある。カッシーニは最後に、土星と環のあいだを 22 回くぐり抜けた。でも文字どおりに画面遷移にすると、一つの点に縮んだ状態では意味がまったく読み取れない。だから入れなかった。

ブラックホールの遷移も同じだった。第一版では時間の遅れ、スパゲッティ化、重力波を全部遷移に入れたが、できあがると円が一つ飛び回っているようにしか見えなかった。画面にブラックホールがないので、読者にはなぜ点がそう動くのかわからない。ブラックホール自身を登場させてはじめて、読み取れるようになった：

海王星のスイングバイも同じだ。点が回り込む星は、最初はただの淡い小さな円で、ノイズに見えた。刻線で描いた小さな海王星にすると、ひと目で星を回り込んでいるとわかる。物語の主役は見えなければならない。

事実どおりに描くか、調和するように描くか#

事実は読みやすさとも、調和とも同じではない。そんなときは、両方を守れるやり方を探す。海王星のオープニングは、アダムズ環に実在する四つの明るい弧だ。長さはまちまちで、すべて 40° ほどの範囲に詰まっていて、読み込みバーとしてはとても読みにくい。四等分すればいちばん読みやすいが、海王星とは関係がなくなる。最終的に、実際の長さの比率を保ったまま、一周を埋めるまで拡大した：

ベテルギウスの表面もそうだ。実際の写真はぼんやりした光の斑にすぎず、そのまま描くと抽象的で、サイトの刻線とも合わない。そこで刻線は残し、線をもこもことした対流胞のまわりで渦巻かせた。沸き立つ恒星だとわかれば、それで十分だ。

ほかの組と同じ体系か#

ベテルギウスは四つの中でいちばん難しかった。恒星なので自ら光り、明暗境界線めいあんきょうかいせんもなく、環もない。土星や海王星で使い回せたものは、ほとんど探し直しになった。オープニングだけで三回作り直した：

第一版は、あれほど小さな範囲に縮めると、ただの標的で読み取れなかった。第二版は読み取れたが、ほかの三つのオープニングはどれも傾いた、3D 風の読み込みなのに、これだけが平らで、ほかの組と同じ体系ではなかった。第三版でようやく三つの関門を同時に通った。伴星ばんせいがほかのテーマと同じ傾きの斜めの軌道を一周する。そしてこれ自体が物語でもある。天文学者は最初、ベテルギウスの明るさに見られる約六年の長周期から、伴星がその周りを回っていると推測したのだ。

この関門は、逆に古いものも確かめることになる。ベテルギウスを作り終えると、今度は土星だけが自分の物語を持たない天体になっていた。表の土星の列にあるホームの三つは、どれもそのときに付け加えたものだ。

コピーは物語を語り、機能を語らない#

文字もデザインの一部だ。どの天体にも私が書いた一文があり、トップバーの天体メニューにカーソルを重ねると、そばにその物語が現れる。

最初、その説明には「画面遷移で点がどうなるか」を書いていた。これは機能を書いている。私の原則は、物語を説明して、画面で何が演じられているかは読者自身に思い描いてもらうことだ。ブラックホールは光さえ引き戻すと知っている読者なら、点が逃げ出すとき背後の光が引き戻されるのを見て、それだけでわかる。

ここは宇宙の禁域。 光はここで引き返し、時はここで止まる。 すべては落ちていき、帰り道はない。 人が書いたどの法則も、ここでは生き残らない。

文字にも引き算は効く。私は冗長じょうちょうな言葉が嫌いで、おとぎ話のような言い回しも嫌いだ。一文で言えることは二文で書かない。

人に使ってもらうなら、つまみではなくプリセットを#

自分のデザインを人に使ってもらうなら、たとえばテンプレートとしてオープンソースにするなら、最後にどこまで開放するかを決めなければならない。

私の選択は、自由な配色を開放しないことだった。選べるのは私が作ったいくつかの天体で、それぞれの色、惑星、画面遷移、コピーはすべて一式として調整してある。自由に埋められるのは内容だけだ。丹念に作ったプリセットをいくつか渡し、私の美意識の範囲の中で選んでもらう。そうすればサイト全体の質感を守りつつ、一人ひとりに「これは自分のものだ」という感覚も少し持ってもらえる。

これも引き算で、取り除いたのがつまみだというだけだ。ここまでのどのステップも、ものどうしを調和させるためのものだった。任意のカラーコードを開放するのは、その一片を誰でも気軽に外せるようにするのと同じだ。

自分のサイトから始める#

そのまま実践できるチェックリストにまとめておく：

これらのステップは「どこか変」を分解して、どの継ぎ目なのかを突き止める助けにはなるが、目の代わりにはならない。どこが調和していないかを見抜く目は時間をかけて育てるもので、私が知っている方法は一つしかない。本当に良いものをたくさん見て、分解して研究し、それから自分のものを見直すことだ。作ったものが良いかどうかは、最後はやはり、あなた自身が好きかどうかに戻ってくる。