前回までのあらすじ

このワークショップの目的

ディレクターの職域がわかりにくい。 だから企業は誰をとったらいいのか分からない。 だからなんだか不遇な目に合うよね だから育てにくいんだよね。 なので、それをなんとかするべく「ディレクターの仕事」の重要性を広く広めるために始まった。

ディレクションて結局なんなの？ Webサービスをユーザーに届ける。その目的達成のための根幹を作る人。 「お神輿の上の人」と例えてお伝えしました。

サイトコンセプトってとっても大事 コンセプトが無いってのは「目的が無い」ってのと一緒。クライアントがWebにおいて何をやりたいのか？を把握し、それを叶えるために何をするべきか？を素早くチームやクライアントと共有するためにコンセプトシートを作ろう。

・・・たしかこんな感じだったと思う。

前回までのあらすじ

んん？でもちょっとまって。 そもそもコンセプトって ディレクターが決めるものなの？

前回までのあらすじ

はい。サイトのコンセプトは ディレクターが決めるべきです。

前回までのあらすじ（補足）

理想

クライアント

しっかりとした コンセプト提示

発注

ディレクター

コンセプトを元に サイトを設計

クライアント

コンセプトが曖昧 もしくは無い

発注

ディレクター

え？と？何がしたいん？

クライアント

ビジネスの目的 （理念や目標）を提示

発注

ディレクター

サイトコンセプトを提示 した上でその了承を取って 設計をスタートさせる。

なぜディレクターがコンセプトを作るのか

よくあるケース だからこうやる

前回までのあらすじ（補足）

だってさぁ・・・

・物流のリーディングパートナーとしてふさわしいサイト ・たくさんモノが売れるサイト ・初音ミクのグッズを売るサイト

とか言われて、デザイナーやプログラマーが（本当の意味で）クライアントのやりたいこと理解できる？ これを「チームにとってもクライアントにとっても共通の言葉で目指すべきコンセプトにする」ってことを誰かがやらないとプロジェクトは途中で何やってんだかわかんなくなる。

だから、その共通の言語を知っているディレクターがやるべきなんです。

前回までのあらすじ

話を戻しましょう

前回までのあらすじ

コンセプトの重要性を知っていただいた上で中村式のコンセプトシート作成方法を伝え、実際に作っていただきました。

要素A 要素B

つまり〇〇ならいいんじゃね？

てことは「〇〇」ってことだよね。

今日やること

というわけで本題です。

次回やること ・UI設計の考え方を聞いて ・各種マッピングの方法を聞いて ・でワイヤーの作り方を知る ・実際にディレクトリマップ（案）とコンテンツマップ（案） およびワイヤー（案）を作る ・作ったものでプレゼンする ※多分全員は無理だから独断と偏見でエコヒイ…ｹﾞﾌｹﾞﾌﾝ…選抜します。

今日やること

UIってなんだ？ UI（ユーザインタフェース） ユーザインタフェース (User Interface) は、機械、特にコンピューターとその機械の利用者（通常は人間）の間での情報をやりとりするためのインタフェースである。ユーザインターフェイス、ユーザインターフェースと書かれることもある。ユーザインタフェースは以下の手段を提供する。システムを使う場合、ユーザはそのシステムを制御でき、システムの状態を知ることができる必要がある。例えば、自動車を運転する際、運転手はハンドルを操作して進行方向を制御し、アクセルとブレーキとシフトレバーで速度を制御する。運転手は窓を通して外界を見ることで自動車の位置を把握し、速度計で正確な速度を知ることができる。自動車のユーザインタフェースは以上のような機器群で構成されており、全体として自動車の運転に必要なものを全て提供している。ユーザインタフェースという用語は、コンピューターや電子機器でよく使われる。機械や自動車などのユーザインタフェースはヒューマンマシンインタフェース (HMI) あるいはマンマシンインタフェース (MMI) と呼ぶことがある。MMIやHMIは、操作する人間と操作させる機械を一種の階層構造として捉えている。サイエンス・フィクションでは、HMIやMMIはブレイン・マシン・インタフェースのようなものを指すことがある。また、同様の用法は医療の分野で義肢などの人工の器官（例えば人工内耳）を利用する際にもよく見られるようになってきている。システムは、ユーザーの種類によって異なるユーザインタフェースを提示するものもある。例えば、コンピュータ化された図書館データベースは、一般利用者向けの使いやすさを重視したユーザインタフェースと、館員のための効率を重視したユーザインタフェースを持つことがある。場合によっては、コンピューターはユーザの振る舞いを観察し、特定のコマンドを入力しなくても何らかの反応を返すことがある。肉体の各部分の動きを追う手段が必要とされ、頭部の位置を把握するセンサーや視線の方向を把握するセンサーが実験的に使われている。これらは没入型インタフェースと呼ばれるものと深く関係している。 ユーザインタフェースのデザインは、ユーザの入力に要する労力の量や出力を解釈するのに要する労力の量、さらには使い方の学習にかかる労力に深く関わっている。ユーザビリティとは、特定のユーザインタフェース設計でユーザーの心理学的側面や生理学的側面をどの程度考慮しているかを測り、またそれによってそのシステムを利用する際の効率/効果/満足度を測る尺度である。ユーザビリティは主にユーザインタフェースの特性だが、製品の機能そのものとも関係している。それは、ある製品が意図された目的に対して対象ユーザによってどの程度効率よく、効果的かつ満足して使われるかを示すと同時に、利用時の状況から生じる要求を考慮しているかどうかにも関係する。これらの機能や特徴は常にユーザインタフェースの一部とは限らないが、製品のユーザビリティの重要な要素である

wikipediaより抜粋

うはｗイミフｗｗ

今日やること

中村の認識の中でのUI設計の基本

サイトを訪れる80％のユーザーにとって 目的とする情報に

スムーズに行けるようにする動線設計

今日やること

前提として決めなきゃいけないこと ターゲットユーザーの設定

誰が、いつ、どんな気分で、何をしてからアクセスしてくるのか。

ユーザー心理の誘導先設定

そのサイトを使った（もしくは使ってる最中）に何を感じて欲しいのか。

これがないとUI設計は出来ないと思っています。 端的に言うと、「〇〇に■■と感じてもらうための設計」と言い切れないウチはレイアウトとか考えないほうがいい。ってことです。

今日やること

具体的にはどうするの？

1 コンテンツ案を洗い出して

2 優先度をつけて

3 想定したユーザーに○○と感じてもらいやすいように並べる

コンテンツ案の洗い出しと優先度づけ

例：SUPER GTの提案資料

サイトコンセプト例

イベントの目的 サイトとしての目的

つまり、 どうすればいい？

他会場がやってないことをやる。だからユーザーが知る。見る。共有する。そして、買う。

そのため、コンセプトは「当日まで観る価値のあるサイト」と提唱します。

GTの本体サイトにあるコンテンツだからもてぎには要らない。ではなく、一定期間だけでも

「本体サイトよりももてぎのサイトを見る」という状況を作れば目的は達成しやすくなる。

・より多くのチケットを販売し、来場者数を増やしたい。 ・単品より複数人（ファミリー）で来場して欲しい。 ・予選から決勝まで、できれば泊まり込みで来て欲しい。

・既に国内最高の観客動員数を誇るレースシリーズだけど、もてぎ での最終戦こそが最高に面白い！と認知を広める。 ・チームやドライバーの情報が見れる（もてぎ戦を見るかどうか を検討しているユーザーに他サイトへの移動を勧めるのはナンセ ンスなので） ・基本的なルール、楽しみ方をしっかり伝える。（辺にPOP路線を 狙う必要ななし。イベントのあり方がハードなのだから） ・チケットの販売数増加（前年比150％取りたい）

必要なのは・・・ チケットが買いやすいこと イベントやおトクなプランが分かりやすいこと 予選日の楽しさが伝わること

心理誘導動線例

1 2 3

広告などからサイトへランディング

料金と時間を確認

最終戦を生で観るかTVで観るか葛藤して…行きたくなる！

チケット購入

過去に観戦したことがある人（リピーター候補）

1 2

そういうレースがあるとは聞いている。

興味はあるので検索⇒もてぎでもやるのか。近いな。

単純にGTを知っている人（ライトユーザー） または、GTをまだ知らない人（ユーザー候補）

3 4 5

TVで観るつもりだったけど、知れば知るほど面白そう！ 子どもと行っても面白いかな？と考える

お得なチケットの存在を知り、奥さんに相談

チケット購入

6 もう行く気マンマンになってさらにコンテンツを読み込む

リピートユーザーには「情報とアオリ」を ただでさえ話題の豊富な今年、 リピートユーザーには「去年までのGTとどれだけ違うのか？」「もてぎではどの車がどれだけ行けそうなのか？」などのコアな情報を独断で提供し、とにかく行きたい欲と観たい欲を煽ることを前提とします。 中途半端なファンだと意外に分からないドライバーリストなども用意し、会場でスマホ片手にマシンとドライバーを確認しながらイベントスケジュールも確認できる。 そんな環境を提供します。

新規ライトユーザー（知ってるだけの人）に「興味」を ライトユーザーにとって重要なのは 「一回でいいから観てみて！本当にハマるから！」という“ちょっと知ってる他人からの後押し”と、 「行ったら面白いかもしれない」という期待感。 この二つです。 なので、玄人向けのコンテンツとは別に、「あの車が超スピードで走る？！」や、「世界初のハイブリットカー頂上決戦を制するのは？」などのビギナーが興味を持ちやすい見出しでの導線を別途用意し、かつ「テレビでも観れるけど、こんなにも多くの人が現地に見に来るのはなんでだろうね？」という問いかけで引っ張る。 一種読み物的なコンテンツをいくつか仕掛けていきたいと考えます。 おそらくライトユーザーの方はスペックやレギュレーションなどの細かな話より、自分の知っているあの車がすごいことになっている！というおおざっぱな話のほうが楽しめると思うのです。

コンテンツ案の例

SNSボタンの実装と展開 デザインとUI設計について

チケットコンテンツ イベントリストコンテンツ ニュースコンテンツ イベントはそこまで数は無いものの、日によって異なり、しかも場所が若干離れていたりするので、GPS地図情報と共にタイムライン的にイベントをリストアップ。 開催日でソートできるようにして、徹底的に「使えるイベントリスト」を作成する。 ■行く前に見る用 イベント一覧（詳細含む） 詳細な説明があり、GPS地図との連携を可能に ■現地で見る用 イベントのタイムスケジュール（MAPリンクあり）

ニュース ・リリース情報 ・レポートアップ ・変更点発生 ・そのほか 基本的なニュースを配信するためのコンテンツ群と基本的には変わりありません。 運用指針としては、ニュースの個別ページで概要を伝え、詳細ページへ誘導。というスタンス。 ページ数が多くなりがちですが、そっちのほうが共有しやすいと踏むためです。

基本的なGTのテイストはもちろん踏襲。S-RoadのカラーリングにKEIHINのブルーを差し色にするイメージです。 ■デザインキーワード スピード、シンプル、スタイリッシュ、先進的 ■カラーピック ホワイト＆ペールシルバー（ベース）、ブラック・レッド（差し色01）、ブルー（差し色02） ■UI設計について 基本の構造を遵守。あまり特殊なカラム構造だとレスポンシブ対応が難しくなるため。

現状、GTのファンへの浸透率は凄いのに、なぜかどのサイトもSNSとの連携をしていなかったので、毎度おなじみ中村の代行運営で行ければと思います。 #supergt #motegi の二つのハッシュタグを実装し、少しずつでも話題を作り出していけるよう、種まきしていきます。

チケット券売をより分かりやすくするため、これまでのGTサイトに無かった以下の要素を加えます。 ■ページを各シート毎に作成 自由、VIP、A、G/Z、5コーナー、おトク（ファミリー・学割他）、Pパス、ツアー（バス・宿泊パック他） ■一覧ページ、詳細に金額を明記 各シートの金額を明示し、「この金額なら行ってもいいかな？」を加速。

観戦ガイドとスケジュール 観戦ガイドは、これまでの流れを断ち切ってサッパリとさせます。あまりコアな情報を流用するよりも、ザックリ概要+今年の見どころ＆注目マシン・チーム・ドバイバーに焦点をしぼったほうが、「もてぎ戦楽しそう！」となるハズだからです。 ※ここでGTそのもののすばらしさを改めて語ったところで、玄人は知っているし、もてぎに行くかどうかを迷っているライトユーザーは興味が無いのです。 ■観戦ガイド GT300（概要とチームリスト）、GT500（概要とチームリスト）、注目マシン紹介、レポート ■スケジュール

コンテンツマップ例

Important

TOP

TOPICS ・ニュース内容の個別記事 ・キャンペーンの後だしLP などなど、枠を設けないコンテンツ郡を格納

イベント（一覧と曜日ソート機能） ・土曜日のイベントリスト ・日曜日のイベントリスト ※各イベントの開催場所がGPS連動で探せる チケット（一覧と選び方紹介）

・自由席 ・VIPシート ・A席 ・G/Z席 ・5コーナー席 ・おトクチケット（ファミリー・学割他） ・パドックパス ・観戦ツアー（バス・宿泊パック他）

スケジュール（一覧なし） ・タイムスケジュール ・シリーズカレンダー

観戦ガイド（一覧と基本ルール紹介） ・GT300（見どころ概要とチームリスト） ・GT500（見どころ概要とチームリスト） ・注目マシン紹介 ・エントリーリスト ・優勝予想投票 ・レポート（もてぎ戦のみ掲載予定）

ディレクトリマップ例

トップページ index

会社について /about

沿革 /about/enkaku.php

理念 /about/rinen.php

実績 /jisseki/

問い合わせ /form/inquiry.php

中村の場合、この時点で大雑把にファイル名やディレクトリ名を決めてしまっています。 なぜなら原稿書くときにすげー便利だから。

さて、ようやくワイヤーです。

既に、以下が決まっているはずです。

・誰が、どんなときに来て ・何をするためのサイトか決まっていて ・どんなコンテンツが入るか決まっていて ・さらにその構造まで決まっている。 じゃあ、もうワイヤー（案）くらいチョロイチョロイ。

基本のやりかた

まず要素を全部出す

まずは、サイトの特長や企画特性に合わせて、各サイトの要素を洗い出します。コンテンツマップとは別に考える、いわゆる「パーツ」の部分も含まれるので、かなり量は膨大になりますが、しっかりやります。 んで、必ず「誰が読んでも一発でわかる一般用語で名称をつけます。」

・ロゴ ・電話番号 ・SSLについての注釈 ・利用ガイド ・検索窓

・買い物かご ・サジェストエリア ・商品画像 ・カテゴリーリスト ・TOPイメージ etc・・・

例1：ECサイトの場合

基本のやりかた

次に、パターン数分手で書きなぐって人に見せる

で、出てきた要素にさらに優先度を付け、手書きで書き殴ります。 手で四角く枠を書いてから要素を配置していくとやりやすいかと思います。

・トップページ ・一覧ページ ・詳細ページ01（メインコンテンツ） ・詳細ページ02（サブコンテンツ） etc・・・

例2：例えば

書き上がったものは人に見せて「自分自身がなぜそのレイアウトなのか？」を説明できるようになっていることを確認して、清書に入ります。 ※今回は清書（パワポとかに起こす作業）はカットし、手書きまでとします。

ワークの中身おさらい

1 コンテンツ案を洗い出して

2 優先度をつけて

3 想定したユーザーに○○と感じてもらいやすいように並べる

とにかく手書きでコンテンツに何を入れるか洗い出します。

コンテンツ優先度表を作って並べます。基準は「スマホで見たらどう並ぶと思う？」です。続けてディレクトリマップも作ります。

後は読んだまんま、その構想をワイヤーに起こします。

補足

中村が「清書」する際にやっていること

・ソフトはパワポを使用しています。

・まずは適当なワイヤーを書きます。

・清書の前にテキストエディタで草稿を書きます。

・それを修正しながらワイヤーに入れ込みます。

・さらに決まりきっている画像は全部入れ込みます。

・パスやら注意点やらを付記して完成。

ありがとうございました。