自他共に認める“フォントおたく”のデザイナー・伊達千代が、タイポグラフィが際立つWebサイトをピックアップし、デザインの奥に潜む意図を制作者に聞き出す本連載。今回は 高知県で生姜の生産・販売を手がける坂田信夫商店のLP を紹介します 。
目次
教えてくれた人
犬飼 崇 デザイナー／ディレクター
1981年新潟生まれ。2006年多摩美術大学情報デザイン学科卒業。 数社のデザイン事務所でグラフィック、エディトリアル、W ebのデザインに従事し2019年に独立。 現在はNEWTOWNの代表を務める。Tiny desk Designとして個人でも活動中。https://newtown.tokyo/
聞き手
伊達 千代
株式会社TART DESIGN OFFICE代表。グラフィックデザイナー・ライター。メーカーのデザイン室、広告制作会社勤務を経て独立。デザイン・編集・執筆のほか大学や企業でのトレーニングも行う。2017年よりフォントかるた制作チームに参加。著書に『文字のきほん』（グラフィック社刊）。監修に『デザイン9×9』（ホビージャパン刊）など。絶対フォント感は持っていないが、毎日文字のことだけを考えて暮らしたいくらいのフォント好き。
雑誌の記憶から生まれたWebデザイン 力強く大きな明朝体の見出し、縦組みと横組みが混在するレイアウト、写真と文字が大胆に切り替わっていく構成。坂田信夫商店の 「 黄金（こがね）しょうが 」 を紹介するWebサイトには、一般的なLPとは一線を画すダイナミックさとテンポ感があり、雑誌のページをめくるような展開の妙が感じられます 。
雑誌の見開きページのようなダイナミックなタイポグラフィが印象的な「 坂田信夫商店」 のLP このサイトのアートディレクションとデザインを担当した犬飼さんは、大学在学中に大手雑誌編集部でアルバイトを経験。その後、エディトリアルデザインの仕事に携わり、広告制作を経てWebへと活動の領域を広げてきました。
犬飼さんのタイポグラフィやデザインには、仕事を始めた頃にそのもとで働き、直接多くを学んだ二人のデザイナーの影響があるそうです。一人は松本弦人さん。グラフィックデザインからデジタルメディアまで幅広く手がけ、『STUDIO VOICE』のアートディレクションなどでも知られるデザイナーです。もう一人は、 手がける菊池祐さん。東野圭吾氏の『クスノキの番人』の装丁などでも知られ、ドラマチックでありながら、細部まで美しく調整されたタイポグラフィが印象的です。
「松本さんの 力強 さと、菊池さんの繊細さ。その二つが、自分のデザインの基礎になっています」（犬飼さん）
今回のサイトにも、画面いっぱいに文字を置く大胆さと、細部まで丁寧に文字を組み上げる繊細さがあります。一見すると対照的な二つの感覚は、現在の犬飼さんのWebデザインにも受け継がれているように感じられます。
そして今回の制作で犬飼さんの頭にあったのが、自身が通ってきたエディトリアル文化の記憶です。
「このサイトは広告のように商品の魅力を押し出すというより、読み物として読めるようなものにしたいと思いました。自分が2000年代に『Meets Regional*』をパラパラとめくっていたときに感じた、明朝体の心地よさやかっこよさをWebに持ち込みたいと思ったんです」（犬飼さん）
昔の雑誌をそのまま再現するのではなく、自分の中に残っているエディトリアルデザインの記憶を手がかりに、現在のWebとして組み直す。そこに犬飼さんならではのアプローチがあります。
*『Meets Regional（ミーツ・リージョナル）』は、
「おしゃれにしない、新しくしない」 サイトの中でも特に目を引くのが、画面いっぱいに現れる太い明朝体です。
「生姜をどう見せたいかと考えたとき、親しみやすさよりも少し特別なものとしてキリッと見せたかったんです。細い明朝体だとシャープになってしまってちょっと違う。生姜は土の中にあるものですし、洗練させすぎず、力強さや大胆さ、 少し 泥臭い感じも表現したいと思いました」（犬飼さん）
そこで思い浮かべたのが、かつて雑誌やレシピ本で目にしていた明朝体の使い方でした。
犬飼さんが目指したのは、「おしゃれにしない、新しくしない」こと。少し古さを感じさせながらも、悪い意味で古臭くならない。そんな微妙な時代感と、生姜という素材が持つ力強さを表現する書体として選んだのが、モリサワの「リュウミン」です。
一方、ゴシック体には同じくモリサワの「A1ゴシック」が使われています。墨溜まりを再現したレトロな書体と考えられがちですが、犬飼さんが注目したのは少し異なる一面でした。
「A1ゴシックは、墨溜まりを除いて考えると、骨格自体はかなりモダンだと思っています。リュウミンに加えて、ほかの書体まで古い印象にしてしまうと、本当に古臭くなってしまう。そこで、モダンな骨格を持つA1ゴシックを使って、少し引き戻しています」（犬飼さん）
モダンな骨格を持つA1ゴシックで古くなりすぎないように引き戻す 雑誌の「リズム」をスクロールへ 犬飼さんがエディトリアルからWebへと持ち込んでいるのは、タイポグラフィだけではありません。本サイトをスクロールしていくと、大きな見出しが現れたかと思えば、写真が画面を占め、次には縦組みの文字が現れます。背景色や写真、文字の大きさも次々と変化し、ひと続きのLPでありながら、ページをめくっているような展開感があります。
「雑誌には、巻頭特集があって、コラムがあって ‥‥ と、展開していきますよね。あの読後感や体験をWebにも持っていきたいと思って作っています。写真で完全に分断したり、アニメーションを使ったりして、『ここで場面が変わった』ということを無意識に感じられるようにしています」（犬飼さん）
黄金生姜のサイトでも、飲食店での使われ方を紹介するパート、利用者の声、レシピと、大きく場面を切り替えながら進んでいきます。文章の縦組みと横組みの組み合わせからもリズムを作り出 し、 ところどころに縦組みを取り入れることで画面に変化をつけ ています。 日本の土地に根ざした商品のイメージも強調しています。
しかし、紙のエディトリアルデザインの技法を、そのままWebに移せばいいわけではありません。
「エディトリアルの技術を持ち込みました、というだけだと、たぶん読みづらくなります。紙とオンスクリーンでは、文字の最小サイズや最大サイズも全然違います。Webをつくってきた経験とエディトリアルの経験を、うまくバランスを取って配合している感じです」（犬飼さん）
紙で培われてきた「読むための技術」を、スクロールというWeb独自の体験へと読み替えていく。そこに、このサイトならではのタイポグラフィがあります。
で実現するデザイン 今回のサイトは、ノーコードWeb制作プラットフォームの 「 S tudio」 で制作されています。犬飼さんはStudio Design Award 2021でグランプリを含む5冠を達成し、S tudio 認定パートナーとしても活動するなど、早くからS tudio を使いこなしてきました。その理由のひとつが、文字表現の自由度でした。
S tudio ではモリサワの書体が利用できるほか、今回のサイトでも使われている縦組みに対応しています。また、横組みでは文字をプロポーショナルに詰めることも可能です。タイポグラフィが重要な役割を果たすデザインにとって、こうした文字組みの機能は大きなポイントです。
一方、エディトリアルデザインを経験してきた犬飼さんにとっては、 少し 物足りない部分もあ るといい ます。
「本当はもっと細かく文字を詰めたいという気持ちがあります。でも、それよりもWebとしての運用性や、あとから修正できることを優先しています。文字組みは大切ですが、Webとしての機能を阻害するようなら諦める、という割り切りはしています」（犬飼さん）
たとえば、文字を個別のボックスに分ければ、より細かく位置を調整することもできます。しかし、それによって文章としての構造や運用性を損なうのであれば採用しない。紙と同じ精度を追い求めるのではなく、Webとしての機能を保ちながら、可能な範囲で文字を追い込んでいきます。
Studio のテキスト設定画面。文字詰め有の横書きが選ばれています
そして犬飼さんにとって、S tudio を使うもうひとつの大きな理由が、デザインから実装までを自分で行えることです。犬飼さんはコーディングを専門としていないため、通常のWeb制作では実装を外部に依頼する必要があります。S tudio であれば、デザインした本人がそのまま実装し、実際の画面で動かしながら調整することができます。
「受注からデザイン、実装、納品まで一貫してできます。自分で動かしながらつくれるので、クオリティもコントロールしやすいですし、スケジュールも立てやすくなります」（犬飼さん）
タイポグラフィは「話し方」 犬飼さんがタイポグラフィを考えるとき、その基準になるのは、文字そのものの美しさだけではありません。
「依頼主と見る人とのコミュニケーションを、どういう形に設計するのかがデザインだと思っています。文字を使うというのは、いわば『話し方』ですよね。タイポグラフィは、その内容にどんな話し方が適しているのかを考えることだと思っています」（犬飼さん）
その考え方は、フォント選びだけでなく、「何を使わないか」にも表れています。 今回のサイトでは、英語の見出しを使わないことも意識しました。英語を入れればスタイリッシュに見せることはできます。しかし、そうした「かっこよさ」は、この生姜について語るためのコミュニケーションには必要ないと考えたのです。
大きな明朝体を使うことも、縦組みを取り入れることも、雑誌のように場面を切り替えることも、それ自体が目的なのではありません。誰が、誰に、どんな口調で語りかけるのか。
その答えとしてタイポグラフィが選ばれています。 では、その感覚はどのように身につければよいのでしょうか。
「興味を持つきっかけに出会えるかどうかだと思います。僕自身も、最初から文字に興味があったわけではありません。松本弦人さんと菊池祐さんからも多くのことを学ばせてもらいましたし、自分でもいろいろなデザインを見て、『こんなに面白いんだ』と気づいたのがきっかけでした。だから、いっぱい見て、自分が少しでも楽しい、面白いと思えるものに出会ってほしいですね」（犬飼さん）
雑誌に触れる機会が少なくなった今なら、美術館のポスターや書籍のカバーを見るのもいいと 言う 犬飼さん。特にJR新宿駅から京王線へ向かう連絡通路には美術館のポスターがずらりと並び、グラフィックやタイポグラフィを見るには格好の場所だそうです 。
取材・文：伊達千代、編集：栗原亮
