# DESIGN 心地とインターフェースをつくりながら、あとで思い出したいことを書いておく。 このサイトでは、記事で考えていることが、文字の大きさや余白、鳥の置き方にも少しずつ滲んでいてほしいと思っている。 ここにあるのは、完成したデザインシステムではない。ページをつくるたびに見つかったことを残す作業ノートに近い。新しいページでは、まず今のサイトから始める。ただし、書いてあることをそのまま再現するのではなく、なぜそうしたのかを考える。実際の数値はCSS、見え方は表示されたページを基準にする。 ## 大事にしていること ### 関係から考える インターフェースは、情報や機能を伝える面だけではない。人ともの、人とこと、そして人とテクノロジーのあいだに、どんな距離が生まれるかまで含めて考えたい。 ### すぐに完成させない 記事が増えると、それまでのデザインでは受け止めきれないものが出てくる。そんなときは、いきなり全体のルールを変えず、まずそのページで試してみる。一度うまくいった形も、すぐに型にはしない。 速さや分かりやすさだけを心地よさとは考えない。少し立ち止まったり、行き来したり、自分なりに受け取ったりできる時間も残しておく。 ### きれいに整えすぎない 揺れや癖、少しの曖昧さが、ものの表情になることがある。だから、均質で隙のない完成だけを目指さない。ただし、不親切さや使いにくさまで「味」と呼ぶことはしない。 新しい技術や効率のよい方法も使う。でも、それだけを理由には選ばない。この場所にどのくらい馴染むのか、何かを失っていないか、一歩引いて見る。 ### 静かでも、弱くしない 読むことを邪魔しない、静かな画面にしたい。ただ、すべてを小さく、薄くすれば静かになるわけではない。読んでほしいものにはきちんと強さを持たせ、装飾や反応は必要なところだけに使う。 手描きの鳥と、数字で付けた号数が隣り合うように、このサイトには性格の違うものが一緒にある。そのどちらかに揃えるより、内容に合うところまで重心を動かしたい。 ## 今のサイト ### 文字 日本語には、モリサワの太ゴB101（CSSでは `MFW-PFutoGoB101Pr6N-Medium`）を使っている。長い文章を支えられる安定感がありながら、硬くなりすぎないところが、この文章に合っている。 欧文、数字、号数、メタデータには、LinetoのUnisoft 77 LL（`Unisoft77LLWeb-Regular`）を使う。丸みがあって親しみやすい一方、コードやデータのような記号的な感じもある。日本語と完全に馴染ませず、少し違う表情のまま並べている。 書体を変えるときは、一文字だけで決めない。日本語と欧文が混ざる見出し、長い本文、号数や日付、モバイルでの読み心地を、同じページで見る。Webフォントの契約範囲も確認する。 ### 色と線 背景はわずかに赤みのある淡い色、文字は黒に近い色にしている。真っ白と真っ黒の強い対比を避けながら、文字の読みやすさは弱めない。 色数はむやみに増やさない。リンクや選択状態など、意味のある違いには色を使うが、画面を賑やかにするためだけのアクセントは加えない。リンクは、白っぽい面と下線を重ねず、その場所に必要なほうを選ぶ。 罫線は文字と同じように、黒に近い色で引く。淡くして存在を消すのではなく、使う場所を絞る。線だけが先に目へ入らないかは、周囲の文字と一緒に見る。 ### 余白 余白は、ただ空いている場所ではなく、目を休めたり、次の内容へ移ったりするための時間だと思っている。ページの冒頭には、読み始めるまでの間を置く。段落や図版のあいだは、文章の切り替わりが感じられるように決める。 すべてを広く離すわけではない。関係の近いものは近づけ、切り替わるところにはしっかり間を取る。小さな画面で余白を減らしても、何がひとまとまりなのかは崩さない。 ### 鳥 各記事には、その記事のために描いた水彩の鳥を一羽添える。鳥は内容を説明する挿絵というより、つくる過程に自分の手が入っていることを示す、小さなサインのようなものだ。 鳥は毎回描く。同じ絵を使い回したり、形をテンプレートへ揃えたりはしない。デジタル上で白い背景や大きさを整えることはあるが、線の揺れ、にじみ、濃淡、個体差は残す。 Birdwatching、記事ページ、OGPでは、001の鳥を見かけの大きさの基準にしている。画像の外形や同じ表示寸法ではなく、鳥本体の大きさと視覚的な重さを比べる。周囲の余白や役割が違うので、同じ補正値は使わず、それぞれの画面で確かめる。 ## 新しいページをつくるとき 最初に、内容と既存ページを一緒に見る。情報だけでなく、文章の速さ、繰り返し出てくるもの、見たあとにどんな感じが残ってほしいかを考える。 次に、今あるレイアウト、部品、色、書体、余白からつくり始める。それだけでは内容を受け止められないときに、どこを変えたいか、その理由と一緒に提案する。差分は、できるだけ小さく、あとから戻せるものにする。 最後は、実際の画面を見る。意図どおりかだけでなく、文字の強さ、密度、余白の呼吸、素材と構造のバランスを人とAgentで確かめる。そこで見つけたことのうち、次にも使えそうな判断だけを、この文書へ戻す。 記事ページは冒頭だけでなく、本文末尾からPrev／Nextへのつながりも既存記事と比べる。原稿のMarkdown区切り線も画面上では新しい要素になるため、編集用の区切りを意図せず掲載しない。既存記事にない装飾や区切りを、依頼なく加えない。 _記事 #006の末尾に不要な罫線が表示された際のユーザーレビューから。_ ## つくるなかで分かったこと ### 何を一件として読むのかを先に決める Article Notesの初稿は、記事ごとに問い、気づき、デザインへの手がかりをまとめていた。きれいには整理されていたが、どこから読めばよいか分かりにくかった。 そこで、ひとつの気づきをひとつの項目として並べ、参照記事は小さな出典にした。情報が増えていくページでは、分類を増やす前に、何が一件として加わるのかを決めると、画面の構造も見つけやすい。 _Article Notesをつくるなかで。_ ### 静けさは、小ささではない Article Notesを最初につくったとき、静かに見せようとして、見出しも本文も出典も近い大きさにしていた。すると、何を中心に読めばよいのかが弱くなった。 静かなページでも、中心になる内容には十分な強さがいる。補助情報との差をつけ、罫線も文字との関係で見る。 _Article Notesを調整するなかで。_ ### 手描きのものは、枠のほうで整える Birdwatchingでは、水彩の鳥を同じ大きさのグリッドへ入れ、号数と一緒に並べた。鳥そのものを均質にしなくても、共通の枠や番号があると、手描きの違いと記録としての見やすさを両立できた。 ただし、画像ファイルの大きさを揃えるだけでは、鳥の姿勢や原画の余白によって不揃いに見える。001を基準に、鳥本体の見かけの大きさを合わせ、足先の位置を見ながら上下を調整する。石や植物、画像の下端は、鳥の接地位置として扱わない。 このグリッドや補正値を、別のページへそのまま持ち込む必要はない。素材の違いを消さず、周囲の構造で受け止める、という考え方は次にも使えそうだ。 006を並べたときは、幅や高さが近くても、胴体の量感や羽の黒い面積によって大きく見えた。輪郭だけでなく、塗られた面の重さも001と見比べ、一覧のなかで一羽だけが強く見えないかを確かめる。 Coming Soonは固定件数で打ち切らず、最後の行が埋まるところまで置く。鳥が増えても、PCとモバイルの両方でグリッドの外周が途切れないようにする。 _Birdwatchingと004のOGPの調整、006追加後のユーザーレビューから。_ ### 操作を任せたあとの接点も考える AIに作業を任せられる画面では、操作の手順だけでなく、任せたあとに状況を確かめたり、自分で判断したりできる接点も必要になる。ずっと見ていなくても、気になったときには何をしているか分かることが、安心して別のことへ目を向ける助けになる。 途中経過を見ることと、購入などの判断を引き受けることは分けて考える。何をどこまで任せたいかは作業によって違うため、確認を一律に増やすのではなく、必要な場面で人に判断を返せるようにする。 _記事 #006「操作しないインターフェース」を読むなかで。_ ### 完成したルールだけでは足りない デザインシステムには、できあがった色や余白のルールを残せる。でも、そこへ辿り着くまでに「少し強すぎる」「もう少しだけ離したい」と感じた理由は、完成形からは見えにくい。 人とAgentでつくるときは、採用した値と一緒に、何を見て、どちらへ動かしたかも残しておく。次にルールから外れる必要が出てきたとき、その記録が判断の手がかりになる。 _記事 #004「デザインの重心」を読むなかで。_ --- この文書も、ページが増えるたびに書き直していく。