メール受信設定のご確認をお願いいたします。

AdverTimes.からのメールを受信できていない場合は、
下記から受信設定の確認方法をご覧いただけます。

×

「答え」を積み重ねて物語を紡ぐ、mount の Webデザイン

share

企業の物語を、Webサイト上ではどう伝えればよいのだろう?日々無数に公開されるWebサイトの中で任天堂創業家の「Yamauchi No.10 Family Office」やポーラ「2029年ビジョン」など企業の意志を確かに感じるサイトを制作するWebデザイン会社 mountの2人に、同社ならではの制作の秘訣を聞いた。
(本記事は月刊『ブレーン』2021年11月号「ブランドの物語を紡ぐクリエイターの思考とプロセス」に掲載したものです)。

 

mount アートディレクター米道昌弘さん

mount テクロカルディレクター岡部健二さん

 

ヒアリングを徹底し、「わからないままにしない」

キャンペーンサイトやプロモーションサイト、ECサイトなどさまざまなWebサイトを企画・制作しているmount。クライアントの想いをサイトのデザインに落とし込む上で最も大切なのが、「徹底したヒアリング」だとアートディレクター米道昌弘さんは話す。「mountはクライアントとの直取引の仕事が約7割を占めますが、広告会社経由の場合でも、まずは担当のメンバー全員でクライアントに話を聞きに行くところから始めます。知らない業界も多く “素人丸出し”なこともありますが、そうすることで『誰にサイトを見てもらいたいのか、何を理解してもらいたいのか』という “答え”を自分たちなりに出すのが大切です」。

大まかなテーマは依頼の段階で既に決まっていることも多いが、細部まで理解し自分たちなりの答えを出さないと、ユーザーが実際に触れるWebサイトに実装することは難しいと言う。

2021年4月に公開されたWebサイト「YamauchiNo.10 Family Office」

「ヒアリング段階でもらえる資料は全て目を通して、何が大事かを自分たちで抽出するんです。情報が多すぎて混乱することもありますが、それはヒアリングが足りないから。“わからないままにしない”というのは全員が意識しているポイントです」と、テクニカルディレクター 岡部健二さん。依頼時の「前提」に安住せず、自分たちなりの答えを出す。だから基本的にプレゼンで提案するのは1案のみ。「僕たちの答えはこれです」と提示するのがmountのやり方だ。

任天堂創業家・山内家一族の「Yamau­chi No.10 Family Office」のWebサイト。全体では、山内家の脈々と続くストー リ ーを四季で表現している。

実際、任天堂創業家である山内家が2020年に資産運用などを目的に設立した「YamauchiNo.10 Family Office」のWebサイト(21年4月公開)はどのようにつくられたのだろう。はじまりは、任天堂を世界的ゲーム機器メーカーに押し上げた3代目山内博社長の孫であり、同オフィス代表である山内万丈さんからの依頼だった。

「仕事を正式にお受けする前の段階でヒアリングに伺った際、山内さんの凄い熱量を感じました。でも全く知らない業界のことでわからない部分も多く、『もう1回話を聞かせてください 』とお願いし、結局2時間ほどのヒアリングを4回させていただいています。結果的にそこに一番時間をかけましたね」(米道さん)。ヒアリングを続ける中で米道さんたちがサイトを通じて伝えるべきだと考えたのは、創業時から受け継がれてきた任天堂の挑戦や創造の精神、それを未来に伝えていきたいという山内さんの使命感。それらを明確にした上で実際にサイト制作に取りかかることになった。

専用のオブジェクト制作ツール(左)。側面(画面左上)・真上(右上)・正面(右下)からそれぞれボクセル(小さな西角の単位)を足したり引いたりすることで形をつくり、左下に完成形が映し出さ れる。パラパラ漫画のように動きもつけられる(右)。

ページを拡大すると全ての要素がボクセルでつくられていることがわかる。

山内家の想いを伝えるには、力強い言葉が必要だと考えました。そこで企業の想いをまっすぐに言葉にするのが得意なコピーライター渡辺潤平さんに依頼。『挑戦と、生きていく。』から始まる一連のステートメントを書いていただきました」(米道さん)。ビジュアルはそのステートメントを軸に、任天堂の歴史や創造性をどう表現し、実装するかがカギとなった。

「当初は平面の表現を考えていましたが、チームで意見を出し合う中で、挑戦し続ける姿勢や創造性を表現するために、立体にしたらどうだろうという案が出ました。そこで全ての要素を初期のファミコンのような8ビット風のボクセル(voxel)という立方体の単位で構成することに。立体的な様子が伝わるよう、斜めに進むサイトにしました。また同社の歴史を感じられるよう、ステートメントの周りには四季を意識したさまざまなオブジェクトを配置しています」(米道さん)。

オブジェクトの数は全部で270種類以上。専用の制作ツールをつくり、それぞれの形や動きをパラパラ漫画のように一つひとつ組み立てていった。スマホ版・PC版で配置が異なるため、「途方もない作業だった」と米道さんも苦笑い。太陽や花がニョキニョキと出てくるポジティブな表現や、反対に雷が落ち火を噴く恐竜が出てくる物々しい雰囲気のものもある。企業の歴史には山あり谷あり。その紆余曲折を見事に表現した。

老舗のブランド牛専門店の店主が「接客」するECサイト

いわゆるナショナルクライアントだけでなく、「街のお肉屋さん」のような企業も手がけている。明治時代創業の神戸牛専門店「辰屋」のECサイト(8月公開)もユニークだ。このサイトでは、商品ページを含む全ページに4代目/現店主辰巳真一さん(通称:たっちゃん)のイラストが表示され、ページごとに「赤身ながらも柔らかいのが特徴。」「脂がないのにと~ろとろっ」といったおすすめコメントをしてくれる。お肉のシズル感はもちろん、お店自体の雰囲気も伝わるつくりになっている。

「話を聞いてみると、街中にある小さなお肉屋さんながらECサイトの売上はとても良く、ブランド牛の中でも売上上位のサイトであることがわかりました。ただ、結構前につくられたサイトでデザインや仕組みも古くなったためリニューアルしたいという依頼内容でした」(米道さん)。

8月に公開した、神戸牛専門店「辰屋」のECサイト。イラストの店主が商品をおすすめしてくれる。

辰屋の店主によるコメントは約300種類 (!)用意した。

米道さんはヒアリングと同時に、他のブランド牛のECサイトをリサーチするところから始めた。すると、どのお店も 「老舗」や「高級感」を強調していて、アピールポイントが似通っていることに気付いたという。「それから改めて辰屋さんを見てみると、店主の方のキャラが際立っていて存在感があるし、関西の活気のあるノリも感じられる。つまり “働いている人の姿が見える”ところが他のお店にはないポイントだと気付いたんです。それを土台にして、EC上でも店舗で接客を受けているような親近感を感じられる見せ方をしたらどうか、という提案をしました」(米道さん)。

その後、デザインで悩んだのは 「老舗の高級感と親近感のバランス」。すきやき用の牛肉で2~3人前が約6000円からと決して安い価格帯では無いため、上質さは保ちつつ、親しみやすさも感じさせたい。そこで一度ポスターをつくってバランス感を確かめるという手法を用いた。「実際には使用しないものですが、 1枚絵をつくると色味やフォント、写真やイラストなどのバランス感が際立ち、わかりやすくなるんです」と岡部さん。そのポスターがもととなり、白いお皿にお肉がのった上質な商品写真、チャーミングなイラストの店主による接客、という今のバランス感ができ上がった。

ちなみにコメントは約300種用意。Excelに商品名を記載し、店主にコメントを記入していってもらった。一方で商品写真は、辰屋のスタッフが必要な時に簡単に撮影できるよう、撮影用のセットを制作して辰屋に設置。サイトのクオリティの維持の観点からも配慮をした。

(……この続きは月刊『ブレーン』11月号に掲載しています)。

本記事のこの後のTOPIC
・細かなつくり込みがストーリーを際立たせる
・より濃度の高いサイトをつくるには?

月刊『ブレーン』2021年11月号

【特集 ブランドの物語を紡ぐ クリエイターの思考とプロセス】
・明治/明治 エッセル スーパーカップ「日々」シリーズ
・サントリー食品インターナショナル/GREEN DA・KA・RA、やさしい麦茶「またあえるボトル」「ムギちゃんとふしぎなおじさん」
・西武・そごう
・mount
・石川コンピュータ・センター「君のやる気と相思相愛」
【第9回BOVA課題発表】
【青山デザイン会議】
ロボット社会とデザインの関係
青木俊介×石井啓範×竹本芽衣
【SPECIAL】
・ピンクリボンデザイン大賞 受賞作品発表
・Next Creative Challenge Project
「“チェキ”instax mini 40 × THE FIRST TAKE STAGE」
・今夜も窓に灯りがついている./成田洋一
【PICK UP】
・NTTドコモ「あなたと世界を変えていく。」
・KDDI/UQ mobile「UQUEEN」
【CONTENTS】
・CMの裏側/FJ ネクスト「尾野さんと『天気』」篇
・リサーチ主導のデザイン 文:山崎みどり
・プロトタイピング発想のデザイン 文:三冨敬太
・新連載 デジタルファブリケーションで広がるデザインの可能性 文:平本知樹
・広告少年/松田翔太×吉兼啓介(博報堂)
・C-1グランプリ/鈴木智也(博報堂)×小野直紀(博報堂)
・デザインプロジェクトの現在/幅允孝(BACH)
・今月のブックマーク/藤原明広(MEFILAS)
・STAND THE FLAG(青森県/山形県)
・心に残ったプレゼン術/物語コーポレーション「焼肉きんぐ」
・名作コピーの時間/前田知巳
・クリエイターおすすめのブック&マガジン/諸隈元
・デザインの見方/西川圭(サントリーコミュニケーションズ)
・SPECIALIST NAVI/美術 小林康秀(ビアード)
【連載】
・BRAIN’S BRAIN
・QUESTION
・CREATIVE NEWS
・UP TO WORKS
・仲畑広告大賞
・EDITORS CHECK
・エディターズブックセレクト
・業界ニュース
・CREATIVE NAVI