1. TOPTOP
  2. Web学習法

0からのWebディレクション講座@関西:第一弾「設計編」(前半)

|

さて。

本日ご紹介する勉強会は、
0からのWebディレクション講座@関西:第一弾「設計編」です。

Webアプリケーションフレームワークを学習していると、
「フレームワークよりも上流にある『設計』をしていないと、そもそも何もできひんちゃうか~?」という思いが立ち、参加してみました。

そこで今回のブログは、のちのち振り返って確認ができるよう書いたものです。当日の個人的なメモ書きをまとめたものなので、若干抜け落ちていることがあるかもしれません。そこらへんのところは、ご容赦を…。

約4時間半の長丁場だったので、記事はセミナー部分の前半と、ワークショップ部分の後半に分けています。

pen_tablet

セミナー(前半)

前半は、日本ディレクション協会の高瀬康次さんによるセミナーです。箇条書きにまとめるとこんな感じです。

Webディレクターとは何者なのか?

  • 要件と人員と工期を統括し進行管理する人→「何を」・「いつ」・「だれ」がやるのか決める人
  • Webディレクションの流れ→ 1.設計・2.構築・3.運用

Webにおける設計とは何なのか?

  • クライアントに対し、成果物を示すために行う。
  • 情報設計(戦略の設計)
  • 仕様設計(戦術の設計)

設計の目的

  • ユーザーが感動する、WEBサイトを実現すること
  • ユーザーが何かを「感」じて、何かの行「動」すること

情報設計とは

  • 「コンテンツ」・「ユーザー」・「ゴール」を決める
  • 成果の定義を行う
  • 感動を設計する前に知るべき「顧客」・「競合」・「自社」の3者を知り、目指すポジションを設計する
  • ペルソナを知り感動を設計する(ユーザーの定義)
  • KPIとKGIを設計する(ゴールの定義)
  • 合言葉を設計する(コンセプトの定義)

仕様設計

  • 仕様設計において重視すべきこと。「サービス」・「ユーザー」・「ゴール」
  • 1秒でも早く早く実現する。META設計とOGP設計
  • 1秒でサイトの役割を伝える(Googleやfacebookの活用)
  • ファーストビューの設計(タグライン→メリット、キービジュアル→近い将来、ナビゲーション、→サイトの機能)

ナビゲーションの設計

  • 1秒で進路を設計する(適切なグル―ピング)
  • 1秒でも速く目的地へ導く

対象環境の確認(エンジニア向け)

トーン&マナー(デザイン)

設計の具体例

  • ミリタリーウォッチのECサイト
  • オンライン特化型ユーザビリティテストサービス
  • 経済専門オンラインメディア

後半につづく

【追記】

5月3日に当日のセミナースライドがUPされたので、追記しておきます。