Webサイトに「時間」をデザインする｜伊達千代の「今日もフォントを探して」Vol.6

2026年7月31日

自他共に認める“フォントおたく”のデザイナー・伊達千代が、タイポグラフィが際立つWebサイトをピックアップし、デザインの奥に潜む意図を制作者に聞き出す本連載。今回は、WRITING & DESIGN Inc. / WRITING & DESIGN PARTNERS Inc.（以下W&D）のWebサイトを紹介します。

・クリエイティブディレクション、アートディレクション、デザイン：イムジョンホ（mount inc.）
・プランニング、アートディレクション、テクニカルディレクション、開発：岡部健二（mount inc.）
・デザイン：タイトウオン（mount inc.）
・プロデュース：吉田耕（mount inc.）
・プロジェクトマネジメント：仲橋祥子（mount inc.）
・コピーライティング：高崎卓馬（WRITING & DESIGN）
・翻訳：リリア・シルバ（LATINA FORTIS）
・音楽：青柳拓次（Little Creatures）

Webサイトはこちら

教えてくれた人

タイトウオン
デザイナー

1997年台湾生まれ。日本語への興味をきっかけに来日し、留学を経て制作会社へ入社。現在はWebデザイナーとして、企業やブランドのWebサイトを中心に、デザイン制作や写真撮影に携わっている。
https://mount.jp/

聞き手

伊達　千代

株式会社TART DESIGN OFFICE代表。グラフィックデザイナー・ライター。メーカーのデザイン室、広告制作会社勤務を経て独立。デザイン・編集・執筆のほか大学や企業でのトレーニングも行う。2017年よりフォントかるた制作チームに参加。著書に『文字のきほん』（グラフィック社刊）。監修に『デザイン9×9』（ホビージャパン刊）など。絶対フォント感は持っていないが、毎日文字のことだけを考えて暮らしたいくらいのフォント好き。

タイポグラフィやアニメーションから生まれる「読む体験」

私たちは普段、Webサイトを「情報を得るためのもの」と考えています。必要な情報に素早くたどり着き、短時間で目的を果たすことがWebデザインでは重要です。

一方で、今回紹介するW&DのWebサイトは少し違います。情報量はミニマムで、余白がゆったりとと設計されています。窓から差し込む静かな木漏れ日の中に、文字が静かに流れてきます。サイトを開いたとたんに引き込まれる独特な世界観と時間感覚によって、ひとつひとつの言葉を味わいながら読み進めたくなる、心地よさに溢れたサイトです。

今回お話を伺ったのは、本サイトを手掛けたmount inc.のデザイナー、タイトウオンさんです。タイポグラフィやアニメーションから生まれる「読む体験」の背景をお聞きします。

映像と文字が織りなす静かな時間

W&Dは、電通出身の高崎卓馬さんと矢花宏太さんが2025年に立ち上げた会社です。

「初めに高崎さんと矢花さんからは、『ドイツの古い出版社にいた、文字を大事にしている職人』といった感覚的なイメージを伺っていました。お二人のキャラクターや、仕事への向き合い方などの姿勢の部分を根幹に据え、最終的には『書き続ける一人の男』を設定しました。ものづくりに対しての実直で丁寧な姿勢だったり、静かに語りかける言葉、そして社名でもある『書くこと』と『描くこと』を本サイトのコンセプトにしています」（タイさん）

サイトのトップで流れるシーンは、『影の映画』と名付けられています。窓から差し込む光に照らされた部屋を舞台に、人や動物、木々のシルエットがさまざまなカメラワークによって美しく映し出されます。部屋の正面には活版印刷の組版を思わせるオブジェが置かれ、そこには読むことのできないドイツ語のメッセージが、うねるように現れては消えていきます。クリックすると液体のように揺らぐ表情を見せる静謐なモノクロームの空間は、見る人を自然とその世界へ引き込みます。

トップページをクリックするとギターの美しい音色とともに断片的なイメージや光の揺らぎが影のように立ち現れる

影に重ねられた社名の表記は、現れれるときやスクロールによって見えなくなる瞬間に、砂が崩れるような一瞬のアニメーションが加えられています。

「アニメーションが目立ち過ぎると、文字よりも動きに意識が向いてしまいます。そうではなく、気づかないくらい自然に、読むリズムを整える役割であってほしいと思っています」（タイさん）

タイポグラフィはコンテンツの『人格』を表すもの

本サイトで印象的なのは、フォント選びだけではありません。文字サイズや行間、改行位置、文字詰め、行揃えなど、タイポグラフィの基本設計が細部まで丁寧に整えられています。

そのひとつが、W&Dのステートメントです。行を中央揃えでレイアウトし、映画のエンドロールを思わせるように静かに流れていきます。ユーザーのマウススクロールに合わせて文字がゆっくりと上へ移動することで、読む速度そのものがデザインされ、映画の余韻をたどるような体験を生み出しています。

「ここをセンター揃えにしたのは、『影の映画』がつくり出す時間の流れとの調和を意識したからです。同時に、新しいW&Dのロゴタイプとの親和性も考え、このレイアウトを選びました」（タイさん）

使用されているフォントは、『小塚明朝』です。

「ここで語られているのは、お二人の『生き方』の話だと思ったんです。だから、少し緊張感がありながらも、人の手仕事を感じる温かみのある小塚明朝を選びました。タイポグラフィは、コンテンツの人格を表すものだと思っています。だから今回は、サイト全体の世界観に自然と溶け込むタイポグラフィを目指しました」（タイさん）

英語版で使用されているのは、Adobeの『Minion』という、ルネッサンス後期の書体に着想を得て作られた上品で伝統的なセリフ書体です。

「Minionはセリフが印象的で、適度な丸みがありながらも、端正な印象を持つ書体です。わずかに長体がかって見える表情にも、人の手を感じさせる温かみがあり、W&Dらしい雰囲気を表現できると考えて選びました。また、『Writing』の頭文字でもある『W』は、サイト内で頻繁に登場するので、今回は特に『W』がきれいに見える書体を選びたいと思っていました」（タイさん）

書体だけでなく、文字をサイトの世界観に溶け込ませるための工夫も随所に見られます。特に印象的なのが、サイト全体で文字や罫線に施されたカスレやムラのような表現です。画像であれば実現しやすい演出ですが、本サイトでは可読性やテキスト情報を維持したまま、この質感を表現している点が特徴です。

「デジタルなら、線も文字もきれいに表現できます。でも、そのきれいさが見る人との『距離』を作ってしまうような気がしたんです。そこでわずかにカスレやズレを加え、人の手で作ったものならではの温度感を残しました」（タイさん）

この加工表現は、タイさんがPhotoshopでさまざまな強さや質感を試しながら方向性を固め、その表現をmount inc.のエンジニアがWeb上で再現しています。

Webだからこそできる、「時間」のデザイン

本サイトのデザインを語るうえで欠かせないのが、2023年末に公開されたヴィム・ヴェンダース監督の映画『PERFECT DAYS』公式サイトです。このサイトを手がけたメンバーが、本サイトでも再びチームを組んでいます。

映画の静かな空気感や感情の揺らぎ、時間の流れを、テキスト、映像、音響によって繊細に表現した『PERFECT DAYS』公式サイトは、単なる作品紹介にとどまらないWeb表現として大きな注目を集めました。

本サイトでも、スクロールに合わせて少しずつ作品の世界へ入り込んでいくような体験が設計されています。文字や写真、アニメーションの現れ方まで細かく調整し、「読む時間」そのものをデザインしている点は、『PERFECT DAYS』公式サイトにも通じるものがあります。

タイさんにとって、『PERFECT DAYS』公式サイトはタイポグラフィへの向き合い方を大きく変えたプロジェクトでもありました。

「『PERFECT DAYS』は、mount inc.に入社して間もない頃に担当した仕事でした。当時は文字組みの知識も十分ではなく、アートディレクターのイム（mount inc.代表のイムジョンホさん）から『タイポグラフィ・ハンドブック』を渡されて、一から勉強したんです。改行位置や文字組みが少し変わるだけで、受け取る印象や空気感が大きく変わることを、このプロジェクトで学びました。フォントを選んで終わりではなく、その先の組み方まで含めてタイポグラフィなんだと教えてもらいました」（タイさん）

mount inc.が手がけるタイポグラフィには、グラフィックデザインの考え方が色濃く反映されています。本サイトでも、版面を意識し、左右のラインを美しく揃えた文字組みが随所に見られます。雑誌や書籍では一般的な手法ですが、Webではレスポンシブデザインとの相性や実装上の制約から、ここまで丁寧に取り入れられることは多くありません。

しかも、ただ左右のラインが揃っているだけではありません。よく見ると、ひらがなやカタカナの前後には「文字詰め」と呼ばれる細かな調整が施されています。文字詰めは、文字間のばらつきを整え、文章全体のリズムや読み心地を向上させるための技法です。しかし、こうした組版品質をWebで実現するのは簡単ではありません。

mount inc.では、この文字詰めをWeb上で実現するための独自ツールを開発。デザイン段階で調整した文字組みを、そのままブラウザ上で再現できるようにしています。

「自社のことを言うのも変なんですが、mount inc.はデザインの再現性をとても大切にしています。デザインしたレイアウトやタイポグラフィが、実装の段階でも崩れることなく、そのままWeb上で再現される。だからこそ、意図したタイポグラフィを実現できているんだと思います」（タイさん）

最後に、mount inc.で実践しているタイポグラフィの学び方について教えてもらいました。

「社内のデザイナーが毎日ひとつ、気になった組版やレイアウトをSlackに投稿するんです。特にタイポグラフィが印象的なものを選び、『なぜこの組み方がいいのか』『どんな意図があるのか』を考え、言葉にします。そうやって観察したことを言語化することが、タイポグラフィを身につける一番いい練習になっていると思います」（タイさん）

タイポグラフィというと、新しいフォントや美しい文字組に目が向きがちです。しかし、文字の印象は『形』だけで決まるものではありません。どんな順番で現れ、どんなリズムで読まれ、どんな時間を生み出すのか。その「読む時間」まで設計することが、Webにおけるタイポグラフィなのだと感じました。

取材・文：伊達千代、編集：栗原亮