伊達千代の「今日もフォントを探して」Vol.1｜Webサイトを別格にする！ アクチュエルイメージの光るタイポグラフィ
自他共に認める“フォントおたく”のデザイナー・伊達千代が、タイポグラフィが際立つWebサイトをピックアップし、デザインの奥に潜む意図を制作者に聞き出す本連載。記念すべき第1回は、クリエイティブスタジオ・株式会社アクチュエルイメージのコーポレートサイトを紹介します。
教えてくれた人
イノウエ ノリマサ
株式会社アクチュエルイメージ代表。1985年生まれ。アパレルメーカー、ナイトクラブ、編集プロダクションなど、幅広いフィールドにて活動。その後、2013年から戦略コンサルティング・デジタルマーケティング会社のクリエイティブプロダクションでディレクター及びマネージャーとして8年間勤めた後に、2020年12月より独立。2023年にアクチュエルイメージを設立。
聞き手
伊達 千代
株式会社TART DESIGN OFFICE代表。グラフィックデザイナー・ライター。メーカーのデザイン室、広告制作会社勤務を経て独立。デザイン・編集・執筆のほか大学や企業でのトレーニングも行う。2017年よりフォントかるた制作チームに参加。著書に『文字のきほん』（グラフィック社刊）。監修に『デザイン9×9』（ホビージャパン刊）など。絶対フォント感は持っていないが、毎日文字のことだけを考えて暮らしたいくらいのフォント好き。
「瞬間」を大切にしたランディングページ
この記事を読もうかな？と思った方は、その前にぜひ上のリンクからサイトを訪れて、実際に体験してみてください。サイトを開くとまず、ローディング画面に続いてサウンドの有無が選択できます。ここは没入感を高める「START WITH SOUND」にすることを強くオススメします。
情感あるピアノの演奏とともに、アクチュエルイメージのロゴが大きくアニメーションで表示されます。極太かつ縦長なロゴは黒々として力強い印象ですが文字のディテールには液体をイメージさせる有機性があり、アニメーションの効果と相まって情緒的な雰囲気が感じられます。大きなロゴとは対照的な、繊細で小さい周囲の文字。さらにゆったりとしたベージュの余白も文字の美しさをいっそう引き立てています。
カーソルにはドットが軌跡を描くアニメーション効果が付加され、スクロールによって画面上からロゴが見えなくなっても、ロゴの「i」から来るイメージだけが常に漂っているようです。筆者はこの導入部分ですっかり心を奪われてしまい、同社代表のイノウエさんへの取材申し込みを決めました。
「Webデザインにも、コーポレートサイトやECサイト、メディアサイトなど色々な種類があって、制作会社さんや個人の方でも多ジャンルを手掛けていらっしゃる方が増えていると思いますが、僕は基本的にランディングページ（LP）のご相談をお受けすることが多いです。
特にファッションやビューティのジャンルではシーズンというリズムがあるので、その瞬間に一気にドライブをかけて引き上げたいんですね。Webサイトが10年〜20年先に見られることよりも『その瞬間』を大切にして、花が開く一瞬のような表現を自分の得意な領域にしようと心掛けています」
今回紹介しているアクチュエルイメージのWebサイトは、基本1ページ構成。内容はコーポレートサイトでもあり、アクチュエルイメージの手掛けたデザインを見せるギャラリーの役割も兼ねています。縦スクロールの操作に合わせて作品が横に流れ、動画も再生される複雑な作りですが、全体を通じてシームレスで気持ちのよい操作感があります。
「自社のサイトなので、いわゆるUIやUXといった言葉にしばられず、純粋に自分がやってみたいことをトライできる環境を、と考えました。ロゴのデザインやアニメーションなどは、自分が興味や関心であったり、あこがれを持っていた方々に依頼しました。このサイトからなんとなく裏側の人の雰囲気が伝わってくれれば大満足、と思ってます」
「読ませる」だけではない文字の使い方
さらに文字部分にフォーカスして見て行きましょう。和文のフォントにはMonotype（旧フォントワークス）のクラシカルなニュアンスを持つゴシック体の［セザンヌ］を使用し、雑誌のような二段組みが採用されています。文字色は縦スクロールに合わせてグレーから黒に変化し、対応する欧文は画面からはみ出して見切れていて「読む」ことは難しそう。デザイン的な意図を感じる文字組みと言えます。
「和文は他にも選択肢あるかも？と思いつつ、愛用しているのはセザンヌです。ゴシックでアクセントがないようなものを使う選択肢もありますが、どこかに癖を持たせたかったので読みやすさの中にゴシックでもセリフ感のある、セザンヌを使わせてもらっています。
オンスクリーンでは、紙の本のようにしっかり文章を読むのは難しい。ここでは文章を目に追わせる動作の一つの要因として色の変化を加えました。段組みはWebでも珍しくはありませんが、普通に流し込まれているよりは目に留まるきっかけになる、という可能性を感じてこの形にしています。英訳についても意図的に装飾扱いにして見切らせることで、『違和感』の要素としました」
抑揚の効いた欧文フォントの使い方
さらにスクロールを進めて行くと、繊細で柔らかな印象の欧文コピーが大きく表示されて印象が変化します。背景に溶けて行くようなにじみ感のあるフォントは、一般的なセリフ書体とは一線を画す優雅さや、独特のフォルムを備えていて見応えのある部分となっています。
「このサイトで使っている欧文は3種類。『Interactive…』のところは、Pangram Pangramというファウンダリーの［Editorial Old style（エディトリアル・オールド・スタイル）］という書体です。古めかしい感じもありつつ、現代的にも感じられるセリフ体で個人的にも愛用しています。
ナビゲーションバーや画面の上下に使用しているのは、同じファウンダリーの［Formula Condensed（フォーミュラ・コンデンス）］。スポーツやレースのキャンペーンのために作られたフォントなのでインパクトがあり、弊社のロゴとも親和性が高いと思いました。それ以外の欧文は、ミニマルで他の部分を邪魔しないフォントとしてSwiss Typefacesの［Suisse（スイス）］を選んでいます」
世の中に馴染んでいない「異質なもの」を取り入れる
タイポグラフィとは、文字を用いたデザイン表現のこと。SNSからYouTubeまで文字がまったくないWebサイトはありません。Webサイトに求められるタイポグラフィとしてよく、読みやすさや視認性、美しさ、ブランディング……などの要素が挙げられますが、イノウエさんのタイポグラフィからは、さらに一歩進んだ『情感』や『スペシャル感』を感じられます。
「僕自身は師匠がいたり、デザインの基礎学習を経てきたわけではないので、自分のやり方が正しいかどうかわかりません。制作業界に入って間もない頃には、いわゆるセオリーとして『フォントの種類は必要以上に増やさないように』と言われていましたが、全体がきれいにまとまっている、読みやすいという状態では抑揚をつけるのが難しい。どこかにまだ世に馴染んでいない『異質なもの』を取り入れるように意識しています」
Webでは、GoogleフォントやAdobeフォントが主に使われていますが、イノウエさんはその流れにはない自身の『選球眼』を大切にしています。お勧めしてくれたのは海外の雑誌や作品を見ること。例えば上記の欧文フォントのファウンダリーPangram Pangramは、イノウエさんがカナダやフランス、香港のクリエイティブスタジオとの交流から見つけたものだそう。自分の選球眼をどこまで磨き、大事にできるか。それがアクチュエルイメージのWebサイトの別格感を生み出しているのだと感じました。
「Googleフォントを使うことはありますが、対価を払って得られるものはやはり違うと思っています。フォントサービスやWebフォントも各種契約をしていますし、使うシーンが少なかったとしても費用を投じて得られるものがあれば、個別にフォントを購入することもあります。
今はフォントだけでなくWebサイトを作る行為自体も簡易にできるようになってきているので、デザイナーのスキルセットの強弱が見えづらくなっていますが、タイポグラフィは各々の特性がすごく出やすい部分があるので、とても重要だと思っています」
取材・文／伊達千代