WD Online

特別企画 [PR]

手を動かしてモノをつくる、現場主義と文字へのこだわり [MONSTER DIVE 岡島将人]

インターネットが家庭に普及し始めた四半世紀前、Webサイトはコンピュータの画面を介して「情報」を得るための媒体として活用されてきました。それは現在、さまざまなデバイスを介して「体験」を届けるプラットフォームとなり、その中で「文字」という要素が担う役割も変わってきています。今、その最前線に立つクリエイターはWebサイトの中で文字とどう向き合っているのでしょうか。

職人とオタクを集めた集団、モノづくりの原点

今回お話を伺ったのは、株式会社MONSTER DIVE(以下、MONSTER DIVE)の代表取締役 岡島将人さん。技術もクリエイティブも手を動かしモノをつくってこそ――同社は岡島さんのそんな思いから設立された「職人とオタクを集めた集団」だといいます。

職人肌のこだわりとオタク気質な探究心が、モノづくりの原動力なんですね。

「本を読んでいるだけではいいモノはつくれません。勉強して、実際に手を動かしてコードを書いたりデザインして、触っていくうちに発展し、自分で広げていくものです。かつて世界へ出て行った日本企業のトップも、技術者が多いんですよね。彼らへの憧れも含めて、口下手でも“いいモノ”をつくる人が評価される会社があっていいと思ったんです」

201701311325_1-600x0.jpg
株式会社MONSTER DIVE 代表取締役 岡島将人さん

2009年にWebプロダクションとして事業をスタート。2011年には映像事業部を新設しましたが、それはこの先「Webと動画がどんどん融合していく」と見越してのことでした。テレビやCMではなく、あくまでWebの中で映像を活用することを目的とした事業。そのためには自分たちの手で制作し、中継し、視聴者の温度感を体験するべき、という現場主義の姿勢がここにもありました。
 

「情報」ではなく「表現」としての文字


岡島さんが考えていたとおり、Webと動画の融合が進む現在。MONSTER DIVEが制作したHonda『クルマやバイクができるまで-工場見学に行こう-』は、まさにそれを象徴するような内容になっています。 201701311301_2.jpg

Honda『クルマやバイクができるまで-工場見学に行こう-』
小学生をメインターゲットに、ホンダのものづくりを紹介するサイト

「工場の生で見た格好良さを伝えようと思ったら、映像で見せるのが一番伝わると思いました。巨大な鉄板のロールから巨大なプレス機でドーンという迫力。これは、腕のいいカメラマンがいいカメラできっちり撮ることに凝らなくては表現できませんし、今の小学生はデバイスに抵抗がない。映像も見慣れて目が肥えています。そういったユーザーに格好良い! と思わせるためにハイクォリティを求めたかったんです

この企画は「自分たちが、今この時代に考えた最適解」(岡島さん)としてコンペに提案し、採用されました。岡島さん自身が現場で目にした感動、それをWebで体験して欲しいという思いが伝わってきます。岡島さんが重視したのは映像のクォリティだけではありません。

映像を映像と意識させずに見てもらうことが重要でした。クリックして見るというよりも、自然に流れるような。だから、軽くシームレスということが重要でした。うちのエンジニアには何人か泣いてもらいましたよ(笑)」

その施策のひとつとしてTypeSquareを使用。画像による負荷を軽減しています。しかし、ただ軽さを求めただけではないと岡島さんは話します。

文字の表現にこだわりたい部分を画像でなくテキストにできることがいいですよね。クリエイティブを表現する上で、見栄え良く、ブラウザやデバイスごとに調整した上で格好良く読ませようと考えると、他に選択肢はないかな

30代後半以上の世代とは異なり、若手のクリエイターには紙媒体の経験がない人も少なくありません。書体だけでなく、ツメ、行間、揃え方といった要素も文字の表現力を形づくるものですが、単なる「情報」としてWebの文字に接しているだけでは、その視点を身に付けることはできません。また、ブラウザという世界の中で、機種依存文字だけではできることに限界があります。

「特に日本語は難しいんですよ。フォントが原因で、デザインの段階では良かったものが、コーディングしてみるとデバイスによって見映えが変わるケースが度々あります。それを解消するには文字の扱いにこだわっていくしかないと思います」

制作フローの変化がもたらしたもの

もう一つ、岡島さんがTypeSquareを使用する大きな理由として挙げたのが、Web制作フローの変化です。

「最近はJavaScriptやHTML5/CSSを使ったアニメーションありきのサイトが普通なので、かつてのように最初に画像だけでデザインを出すことはほとんどありません。仮の状態であってもプログラムを組み、こんな感じで動きますというモックにして初めてクライアントに見せます。画像を使って言葉でいくら説明しても伝わらないんです

201701311325_2-600x0.jpg

数年前あるWebサイトを制作した際、事前に十分な説明を尽くしたつもりが出来上がってからクライアントに「思っていた動きと違う」といわれたことがあったそうです。その時は「思っていたより格好良いから良い」という結果で落ち着いたものの、この経験から「アニメーションを説明する場合はモックをつくろう」という意識に変わったといいます。

そして、このモックを見せる際のファーストインプレッションが非常に重要であると、岡島さんは語ります。

「パッと見た瞬間にダサいと思われたら、その後どんな提案をしてもダメなんです。逆に、最初にいいねといわれればすごくやりやすくなる。だから、文字を含めたデザイン表現が、完成形だけでなく、つくる過程においても必要になってきていると感じます

モックアップの段階から必要な書体で見せるためにも、Webフォントが不可欠になっているんですね。

Webフォントはデザインや制作フローだけでなく、サイト運用においても利点があります。写真に文字を乗せたり、スタイルのある見出しを画像でつくってしまうと更新にデザイナーの手が必要になりますが、こうした要素をクライアントの担当者がテキストベースで更新できるように、同社ではWordPressやMovableTypeといったCMSとWebフォントを連携させるそうです。また、これらの文字がテキストのまま扱えることで、SEO対策としても効果的であると考えられます。

「日本語だから格好良い」を目指して

では、実際にどんな形でWebフォントを導入しているのでしょうか。先のホンダの事例では、岡島さんの提案によりクライアントが直接TypeSquareの契約を結ぶ形になりました。ライセンスの対象はhonda.co.jp以下になるため、クライアントは他のプロダクトやキャンペーンのページでもWebフォントを利用できます。

 この事例以外にもMONSTER DIVEでは多くのプロジェクトでWebフォントを導入していますが、契約の形はさまざまです。

 「基本的にはお客様に直接契約していただくことを勧めますが、期間限定のプロモーションだったり、アクセス数によって料金変動があるために予算枠を取りにくいなど、事情によっては弊社が代行し、制作費に料金分を加えて請求する場合もあります」


201701311325_3-600x0.jpg

MONSTER DIVEのプロジェクトにおいてはすでに無くてはならないものになっているTypeSquare。岡島さんはこの先、日本語ならではの格好良い文字表現を追求していきたいと語ります。

「社内の勉強会で社員が見つけた良いWebサイトを発表しているのですが、やっぱりシンプルでクールなサイトは海外のものが多いんです。欧文だから格好良く見えるけど、日本語にするとそうじゃない、という状態をいかに打破できるか。日本語だから格好良いといわれるものをつくれたらいいですね。それをうちのクリエイターがつくってくれたら嬉しいし、個人的にも見たいと思っています」

モリサワフォントなら見る側にも馴染みがあって受け入れられやすくなるのでは、と最後に付け加えた岡島さん。Webを閲覧する環境と見る層が変化する中で、それに対応した制作フローの構築と、Webでのコミュニケーションの進化に、Webフォントがますます重要な役割を担ってきそうです。

岡島さん、この度はありがとうございました。

TypeSquareではサイトの規模にあわせた最適なプランを提案してくれるとのこと。導入を検討される方はこちらのフォームから問合せてみてはいかがでしょうか?(リンク先:https://typesquare.com/contact/

企画協力:株式会社モリサワ

この記事を見た人はこんな記事も見ています