D2 06 レポート 【Webデザイン×ディレクション 両輪で仕上げるWebサイト構築術】 | デザインってオモシロイ -MdN Design Interactive-

D2 06 レポート 【Webデザイン×ディレクション 両輪で仕上げるWebサイト構築術】

2024.4.19 FRI

【サイトリニューアル!】新サイトはこちらMdNについて
会場風景
Designer meets Designers 06 レポート

Webデザイン×ディレクション
両輪で仕上げるWebサイト構築術





開催第6回目となるDesigner meets Designers(D2)は、WebデザインとWebディレクションの連携がテーマ。デザインや技術に偏りがちなWeb制作をいかにしてディレクションと融合させるかについて、そのノウハウがたっぷりと披露された。業界の最前線で活躍するトップクリエイターたちが語る「デザイン×ディレクション」の秘密とは!?
※本コンテンツ中の社名表記や肩書きなどは、イベント開催当時のまま表記されています。あらかじめご了承ください。

毎回多くのWebクリエイターたちが集うDesigner meets Designers(D2)。第6回目の開催となる今回は「Webデザイン×ディレクション 両輪で仕上げるWebサイト構築術」をテーマに、業界の最前線で活躍する著名クリエイターたちが、そのノウハウを披露した。

構築ノウハウではなく ディレクションで勝負する時代に 毎回多くのWebクリエイターたちが集うDesigner meets Designers(D2)。
第6回目の開催となる今回は「Webデザイン×ディレクション 両輪で仕上げるWebサイト構築術」をテーマに、業界の最前線で活躍する著名クリエイターたちが、そのノウハウを披露した。

講義風景 講義 編集長挨拶

SESSION 1
デザイン&ディレクション
連立がもたらすWebの効果


トップバッターとしてSESSION 1に登壇したのは、インテリジェントネット(株)COO/WebSig24/7代表の和田嘉弘氏。
戦略・技術・マーケティングの3方向からWebサイトを構築し、多くの企業サイトを成功に導いてきたことで知られている。

そんな和田氏が弊誌編集部から今回のテーマを聞いて、まず考えたのが「2009年の今、なぜWebデザインとディレクションの連携を考えなければならないのだろう?」という疑問だった。

「『デザインとディレクションをうまく連携させなければ、Webサイトの制作は成功しない』というのは、昔からいわれてきたことですよね。そこで私は、なぜ今改めて『デザインとディレクションの連携を見つめ直さなければならないのか?』というところから考え始めました。そのために、インターネットの歴史から調査し、インターネットがどのように普及し、変化してきたかを整理してみました」

こう切り出すと、さまざまな調査結果を解説。「平成10(1998)年〜20(2008)年の間でインターネットの利用者数が約6倍、人口普及率が7割になったこと」、その背景には「携帯電話やポータブルゲーム機など、インターネットに接続できる端末が増えたという事実があること」、そして「家庭ではなく個人がインターネットにつながったこと」などをていねいに説明していった。

「これらの変遷を踏まえ、私なりにWebサイトの役割を分析したところ、『Webサイトは、第1世代から第4世代の4つのセグメントに切り分けられる』ということに気づきました。
インターネットの黎明期である第1世代のWebサイトは、単なるパンフレット。第2世代は情報発信ツール。第3世代は自社メディア。そして第4世代である現在は、Webサイトがコミュニケーションメディアへと変化しているんですよね」 このように述べ、同時にWebサイトの構築現場がどのように変化してきたのかについても説明した。
そして、「第1世代〜第3世代は、ユーザビリティやWeb標準、CMSなどの構築ノウハウで対応できる部分が多かった。しかし、第4世代に入った今は、ブランディングやユーザーとの関係性が重視される時代。構築ノウハウだけでは対応できないからこそ、デザインとディレクションの連携が重要だといえる」と結論づけた。

そのあとは、デザインとディレクションを連携させるために役立つ、具体的なテクニックをレクチャー。そのほか、デザインとディレクションの連携に欠かせないプロジェクト計画書と、「裏プロジェクト計画書」のつくり方、ミーティングや反省会のコツなども披露され、参加者たちもすっかり引き込まれた様子。 インターネットの歴史を振り返り、デザインとディレクションが連携することの必要性を再確認し、さらにすぐに使えるTipsまで学べる、充実した一時間となった。

ワークフロー図 講義の様子


SESSION 2
デザインプロジェクトにおける
最適なコンセプトワーク


SESSION 2のテーマは、「デザインプロジェクトにおける最適なコンセプトワーク」。
Webデザインだけでなく、プロダクトデザインや空間デザインまで手がけるtakram design engineeringの田川欣哉氏が登壇し、さまざまな事例を挙げながら、コンセプトワークの重要性についてレクチャーしていった。

中でも印象的だったのが、2007年10月に六本木ヒルズで開催された「water」展。グラフィックデザイナー佐藤 卓氏がディレクションを手がけたことで知られ、「水を体験できる展覧会」としても話題になった。takram design engineeringは、この展覧会にアーティストとして参加。超撥水加工を施した紙皿の上に水滴を落とし、水を躍らせて遊ぶというユニークな作品、「ふるまい」を発表した。
「僕たちに与えられたテーマは『水』のひとことだけだったので、最初はちょっと悩みました。でもすぐに『とりあえずやってみるか』と。何でもいいから、とにかく自分たちでつくり、試してみて、その中からいいものだけを残していくように進めました」

こう語るように、制作は試行錯誤の連続。超撥水加工を施した紙とふつうのフィルム を交互につないでストライプ状の帯をつくり、そこに水を垂らしてみたり、水を皿に落としてみたりと、プロジェクトチームのメンバー全員で実験を繰り返したという。 「そうこうしているうちに、超撥水加工をした紙皿にいくつか突起をつけて、そこに水滴を落とすと、おもしろい動きをすることがわかってきました。さらに、紙皿の下にステンレス製の細いバーをつけて、揺らして遊べるように。

こうして作品が出来上がっていきました」 制作時の記録映像がスクリーンに表示されると、参加者たちの視線は一気に前方へ。楽しそうに実験を繰り返す様子や活発に意見交換がなされる様子が映し出され、多くの参加者が試すことの重要性を感じているようだった。

「体験をつくるときは、体験しながらつくるのがいちばんいい。自分自身が体験することで、体験の本質であるインタラクションの重要性や、どういったインタラクションが気持ちよいかに気づいていくんです。もちろん、テーマの裏にある歴史・知識・技術をつぶさに調べることも重要ですね。調査、試作、話し合い、そしてていねいなものづくりが、コンセプトワークにつながるんじゃないかと、僕は考えています」

そのほかにも、「あかり」をテーマに、電球と水、LEDなどを使って制作されたインスタレーション展示「Overture」や、「骨」をコンセプトに制作された六足歩行ロボット「Phasma」など、多くの事例を紹介。参加者の中でも、特にWebデザイナーが刺激を受けている様子だった。

ふるまい 聴衆 聴衆


SESSION3
サイト制作を成功に導く
制作側とクライアントとの関係づくり


続くSESSION 3に登壇したのは、(株)デスクトップワークス代表取締役の田口真行氏。弊誌連載「思考するWebディレクション」でもおなじみの気鋭のWebプロデューサーだ。

田口氏が担当したSESSIONのテーマは「サイト制作を成功に導く制作側とクライアン トの関係づくり」。参加者にQRコードが掲載された資料を配布し、リアルタイムで投票、集計ができるシテスムなどを使いつつ、参加型の講演が展開された。

「いきなりですが、そもそもWebサイトとはだれのためにつくるものだと思いますか?
『1. クライアントのため、2 .Webクリエイターのため、3. Webディレクターのため、4. ユーザーのため』。
さあ、携帯でお手元の資料に掲載されているQRコードを読み取り、投票してください!」

田口氏がこう呼びかけると、参加者が次々とQRコードを撮影。
「おっ、投票の結果が集まってきましたね」、「なるほど、そうきますか〜」とつぶやく田口氏の様子に、会場は一気に和やかな雰囲気になった。

「ユーザーのため、クライアントのため、と考えている人が多いようですが、正解は『全部』です! 偏るのがいちばんマズイ! …… とはいえ、僕らはクライアントからお金をいただいて実務を行なっているわけですから、なかなか『Webクリエイターやディレクターのためにもサイトをつくっています』とは言いにくいですよね。結局、発注者と下けという関係が前提として存在し、これはどうやっても変えられない。だったら、発注者であるクライアントと下請けである僕らの関係を良くする努力をしようよ、というのが僕のセッションのテーマです」

こう話すと、クライアントとの関係を良くするための対策をレクチャー。
クライア ントとの信頼関係を築くポイントや、クライアントに喜びや感動を与えるコツを説明 していった。

「クライアントと信頼関係を築くには、喜びや感動を与えなければいけません。では、どうやって喜び、感動を与えればいいのでしょうか? ……実は、『クライアントに感動を仕掛けるポイント』というものが存在するんです。
まずは企画の提案時とデザイの提案時。さらにサイト公開時と、コンバージョン達成時。この4つのタイミングを 意識して、クライアントに感動を仕掛けていきましょう」 続けて、各タイミングでどのような提案やアクションをすればいいか、どんな心構 えでクライアントと向き合うべきかを解説。
田口氏自らが経験した成功エピソードなども交えつつ、惜しげもなくそのノウハウを披露した。

そして最後に、「クライアントを満足させるマーケティングセンス」にも言及。同じような品物を販売するリアル店舗とWebショップを比較しながら、「マーケティングの ヒントはリアル店舗にある」と説明した。

「リアル店舗とWebショップの決定的な違いは、人の動きが目に見えるか見えないかというところです。Webには人がいないので、消費者の動きや心理状態が把握しにくい。ところがリアル店舗だと、どういった年代の人が何に関心を持って、どんなふうに移動するかが見ただけでわかるんです。リアル店舗は、タダで配布されている教材みたいなもの。マーケティングセンスを磨きたいなら、ぜひ外に出て積極的にお店をのぞいてみるようにしてみましょう」

このように語り、楽しい工夫や情報が盛りだくさんのSESSION 3が締めくくられた。

授業風景 授業風景 授業風景


SESSION4
デザイン認識の
ズレを防ぐチームのつくり方


SESSION 4の登壇者は、エモーショナルな広告を数多く生み出しているクリエイティブプロダクション、(株)eredie2の熊野森人氏。

プランナー、クリエイティブディレクターとして活躍し、同時に京都精華大学や京都 造形大学で非常勤講師も務めている。そんな熊野氏が語るテーマは「デザイン認識のズレを防ぐチームのつくり方」。ゆったりとした語り口で参加者に問いかけるようにしながら、第6回目のD2、最後のセッシ ョンが進められていった。

「最初に、認識のズレはどうやって起こるのかを考えてみましょう。クライアントからのオーダーは、たとえば『カッコイイ感じで』とか『女性のシズルを大切にして』とか『アホ全開で』とか、非常に抽象的なケースが多いですよね。これが、まずもっ てわからない。『カッコイイって、どうカッコイイのよ』、『女性のシズルってなんやねん!』、アホ全開にいたっては『もう、わけがわからん』っちゅう話です。
要は求められているニュアンスがわからない。大抵ここから、認識のズレが起こります。そのほかにも、『クライアントが目指す方向が見えない』とか、『そもそも相手の頭がおかしいんちゃうかと感じる』とか。相手の言っていることが理解できなかったという経験は、おそらく皆さんもお持ちなんじゃないかと思います」

こう口火を切ると、すぐに「これらはすべて、言語の違いによるコミュニケーショ ンの失敗です」と断言。クライアントとの共通言語を持つことが大切だと解説した。

続けて、熊野氏が実際に体験した、コミュニケーションの失敗例を紹介。軽妙なトークで会場の笑いを誘いつつ、「ズレに直面したときに感じたこと」や「ズレが解決で きた瞬間」について説明を加えていった。

「いろいろな例を挙げましたが、この例でもおわかりの通り、人は年齢、経験、育った環境などの違いでまったく違う言語を持つものなのです。相手がどういう背景を持っていて、何が好きで、何がわからないのか。また、何のたとえであれば互いにブレのない理解ができるのか。そこをしっかり考えて、コミュニケーションの精度を上げていくことが重要です」

次に、相手を理解するための具体的な手法を解説。イメージを共有するための質問方法や、縦軸・横軸を引いたチャート上に競合の商品名や企業名を置き、自分たちのポジションを確認する方法などを披露していった。

最後に「ディレクションの基本は通訳です。アイデアを考えて、それをどれだけわかりやすい言語でチームや消費者と共有できるかが大切。また、いいチームとは、与えられた課題を全員が認識し、ゴールを共有できるチームだと思います」と締めくくると、会場の参加者たちも、納得したようにうなずいたり、満足そうな表情を見せていた。

Webサイト制作の基本だからこそ大切な、デザインとディレクションの関係性。そこ に潜む問題点や、課題の解決方法が提示され、今回のD2も盛りだくさんの内容で幕を閉じた。

講義風景 講義風景 講義風景


■ゲストプロフィール

和田嘉弘氏

和田嘉弘氏 (インテリジェントネット株式会社)
SESSION 1「デザイン&ディレクション連立がもたらすWebの効果」
インテリジェントネット(株)COO/WebSig24/7代表。1998年筑波大学日本語・日本文化学類修了。2000年インテリジェントネット(株)にボードメンバーとして参画。以来、大手企業をはじめとする、コミュニケーションデザイン、コンサルティングから制作まで携わる。2004年に業界団体WebSig24/7を立ち上げ、隔月で参加型の勉強会を開催。
www.ini.co.jp/、websig247.jp/


田川欣哉氏

田川欣哉氏 (takram design engineering)
SESSION 2「デザインプロジェクトにおける 最適なコンセプトワーク」
1999年東京大学工学部卒業。2001年英国ロイヤル・カレッジ・オブ・ アート修士課程修了。2001年に帰国し、リーディング・エッジ・デザインに参加。 2006年takram design engineeringを設立。 ソフトウエアからハードウエアまで幅広い製品を手掛ける。
www.takram.com/


田口真行氏

田口真行氏 (株式会社デスクトップワークス)
SESSION3 「サイト制作を成功に導く 制作側とクライアントとの関係づくり」
(株)デスクトップワークス代表取締役。 独学でWebデザインをはじめて1999年に独立。全国のデザイナー、プログラマーらと連携して企業サイトの企画制作プロデュースを行う。オリジナリティーあふれるWebディレクションテクニックは話題となり、セミナーはキャンセル待ちの人気になることも。本誌にて「思考するWebディレクション」連載中。
d-w.jp/


熊野森人氏

熊野森人(株式会社eredie2代表取締役)
SESSION4 「デザイン認識の ズレを防ぐチームのつくり方」
(株)eredie2代表取締役/クリエイティブディレクター。1978年生まれ、大阪府出身。2003年デザイン会社eredieの設立と同時にディレクター兼プランナーとして企業コンサルティング、広告プランニングを行う。2007年コミュニケーション・デザイン、ディレクション等を専門とする(株)eredie2の代表取締役に就任。仕事のテーマは、「オモシロいコミュニケーション」。
www.eredie2.jp/

 


文=秋山由香((株)Playce)
撮影=飯田昌之


twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在