カリキュラム
10:00
∼
12:00
時 間
講 師
テーマ
講義内容
Webの裏側の仕組みを把握する
森田 雄
氏 ツルカメ阿部 淳也
氏 ワンパク13:00
∼
15:00
発注側として知っておきたい
Webデザインの基礎知識
発注者、受注者のそれぞれの目線から見るワークフロー／静的なデザインと動的なデザイン／マルチデバイスへの対応／実装する際の注意点／制作管理における注意／今後のWebデザイン ユーザー体験の設計／コンセプトダイアグラムとは／カスタマージャーニーマップとは／ユーザー起点の情報設計 ／Webサイトの構造モデル プロジェクトマネジメントの基本／「誰に、何を頼めばいいのか？」を把握する／具体的なプロジェクトの進め方／ 見積の見方／制作ガイドライン／PCサイトの構成要素とレイアウトパターン／グリッドシステムとレスポンシブデ ザイン／PCとスマートフォンのサイトの振り分け Webページの構成／ページが表示される仕組み／サーバとクライアントがやっていること／Webページの大原則 ／HTML、CSS、JavaScriptの特徴15:20
∼
18:00
ユーザー起点のコンテンツと
サイト構造の作り方
与えられた条件で目的を達成する
プロジェクトマネジメント
講師紹介
阿部 淳也
氏
株式会社ワンパク クリエイティブディレクター 1974年宮城県生まれ。自動車メーカーのUIエンジニアを経てIT部門でデザイナー、テ クニカルディレクターを経験。都内の広告代理店系プロダクションでのクリエイティブ ディレクターとしてWeb・映像制作に携わった後、2008年にクリエイティブプロダクショ ン"ワンパク"として独立。東京インタラクティブ・アド・アワード入賞、グッドデザイン賞受 賞、WebクリエーションアウォードWeb人受賞など。森田 雄
氏
株式会社ツルカメ UXディレクター 東芝EMIやマイクロソフトなどを経て、2000年にビジネス・アーキテクツの設立に参画し 05年より取締役、09年退職。10年、ツルカメを設立し代表取締役社長に就任。IA/UX デザイン、フロントエンド技術、アクセシビリティ、ユーザビリティのスペシャリスト。 CG-ARTS協会委員。広告電通賞審議会選考委員。米IA Institute会員。内閣総理大 臣賞、グッドデザイン賞など受賞多数。ネコメシ代表取締役CEO。KDDIウェブコミュニケ ーションズ クリエイティブ顧問。 発注者側ですが、今までWebの知識的なものがない 状態でしたので、その知識と受注者側のフローを知る ことができてよかったです。 ディレクションのプロセスにおける一般的な事例やコストがかかる 要素、気をつけるべきポイントがわかり、勉強になりました。講座概要
●
●
講義時間 ： 10:00∼18:00
講座会場 ： 東京・表参道周辺
●
●
受講定員 ： 60名
受講料金 ： 38,000円（税別）
●
受講対象 ： 企業のWeb担当者。広告制作会社、Web制作会社のディレクター、デザイナー。SP会社、印刷会社のデザイナー。
自社Webサイトのリニューアルに向け、RFP の具体的な作成方法、またプロジェクト管理 法を知ることができました。実践的、具体的 で大変役立つと感じています。受講生の声
いつのまにかレイアウト定義書としてワイヤーフレームを作成していました。そのため今回 の講義で、はっとさせられました。今後のディレクションについて見直そうと考えています。PCで確認した時は
イメージ通りだったのに、
スマホ・タブレットで確認したら
レイアウトが崩れてしまっている
「もっとWebっぽく」というオーダーが
グラフィックとどう違うのかが分からない
予算を超えてしまったり、
スケジュールに遅れが生じたりと
グラフィックとは異なる進行業務に
手を焼いている
ほとんど外注するにも
かかわらず、
どのように指示を
出せばよいかが分からない
日進月歩のWeb技術への
対応もさることながら、
そうした技術の登場に
左右されないセオリーが知りたい
静止画のラフまではできるが、
データがどう処理されて
動きのあるデザインに
なっていくのかが分からない
外注や専門スタッフと連携しWeb制作に関わる方のための
Webデザイン・ディレクション
基礎講座
グラフィックとの違いを押さえ、感覚に頼らず効果的なデザインに仕上げるためのセオリーを学ぶ
見た目と仕組みを何となく理解して済ませていませんか？
▶Web制作の発注をする企業のWeb担当者の方
▶連携してWebを制作するデザイナーの方
▶Web制作を外注する営業、プロデューサーの方
にオススメ
【東京教室】
サイトの見やす さや使いやすさ デバイスやブラウザ、 Webサーバーの仕組 み、HTMLやCSSの 仕組み Webサイトの 構造や進行作業 Webの特性 仕 組 み3 Webの特性 環 境 1 Webはグラフィックのように、目に見えるビジュアルがデザインの全てではありません。グラフィッ クで培った経験やスキルを生かすには、携わるのがデザインだけであったとしても、構造やシス テムなどWebの裏側まで理解していることが必要です。例えばスマホなどのマルチデバイスに 対応したWebデザインをする時に、構造やシステムを理解していないと、PCサイトでは正常に 表示されたのに、スマホではレイアウトが崩れているといったことにもなりかねません。加えてク ライアントが発注する際には、細部まで踏み込めているかが一緒にプロジェクトを進めるパート ナーを選ぶポイントになっています。それゆえにWebデザインは見た目だけでなく、目に見えな い裏側の構造やユーザーのデバイスのOSやWebサーバーの仕組みといった環境までを理解 してデザインを進めていくことが必要となります。
日進月歩の技術にも色褪せない
Webデザインの
原理・原則を学ぶ
目に見えない
Webの裏側まで理解する
ユーザー行動を逆手に取る
デザインのルール
そしてWebのデザインには一定のセオリーがあります。Webがインフラとなった今、アクセスす るユーザー側にも「Webサイトはこういうもの」という先入観が存在しています。例えば「サイト の左上にはサイトのロゴが配置されている」、「ページの上部やサイドにはナビゲーションがあ る」といったことです。そうしたルールを押さえて制作することでユーザーは迷わずに目的ペー ジに辿り着くことができます。そのためWebデザインの特殊性は、携わるのがデザインだけで あったとしても、見た目だけでなく、裏側の部分まで踏まえてデザインをする必要性に迫られる ことにあります。本当の個性があるサイトはこうしたルールのもとに成り立っています。そこで宣 伝会議では見た目と仕組みを何となく理解して済ませるのではなく、グラフィックとの比較から Webの特性を整理し、Webならではのデザインに仕上げるためのセオリーを学ぶ「Webデ ザイン・ディレクション基礎講座」を開講します。Webデザイン基礎編：
発注の前に知っておくべきWebの基礎知識
POINT
1
Webサイト構築のタスクとプロセスの見える化
プロジェクトを管理するには専門知識や技術だけが必要な訳ではありません。多くのタスクとプロセスを管理しな がら進めることも同時に求められます。そのかじ取りを企業の担当者が行うことで、定められた期限の中で目的を 達成することができます。しかし慣れた印刷物と同じように進行していては、想定外の費用や時間が掛かる事態 に陥りかねません。そこで本講座では限られた予算・期間で目的を達成するプロジェクトマネジメントのノウハウを 学びます。POINT
1
Webならではの特性の把握
個々の技術やデザインする際のポイントを知 るだけでは、Webデザインに対する悩みが根 本から解消されることはありません。見た目の 裏側にある特性を理解しておくことがWebな らではのデザインに仕上げる上で欠かせませ ん。そのため実装される際に使う個々のWeb デザインの技術やテクニックを知る前に一度 はしっかり学んでおきたいWebの3大特性を 学びます。POINT
2
円滑な進行のために発注前に
知っておくべきこと・準備するもの
多くの企業担当者がWeb制作会社 とのやり取りがうまくいかないと悩ん でいます。その多くは少しでも価格を 押さえようと、要素だけでなく構成ま で踏み込んで定義しようとしているこ とに共通点があります。何となく良い ものが上がってきていると思う一方 で、それで本当に良いのかと疑問を 感じているなら、すぐに発注の仕方を 見直すべきです。そこで本講座では 発注までに知っておくべきこと・準備 すべきものについて学びます。Webデザイン実践編：
Webならではのデザインに仕上げる5つのポイント
POINT
3
魅力・見やすさ・使いやすさを兼備した企画のノウハウ
ユーザーの期待に応えることができなけれ ば、サイトはその目的を果たすことはできま せん。そのためコンテンツは、ユーザーの ニーズと自社のビジネスゴールとのギャップ を埋めるためのユーザー体験を提供する ことが必要です。そうするとデザインも、サイ ト構造も自ずとターゲットとなるユーザー起 点で設計することが求められます。そこで 本講座ではコンバージョンを促すコンテンツ とそれが伝わる構造の作り方を学びます。POINT
2
スタッフやパートナーと
円滑に連携するための共通言語
Webの案件を円滑に進めるためには、クライ アント目線からの要望とWeb制作の作業とを 翻訳しながら進めることが必要です。例えば 「○○みたいなサイトにしたい」という要望が あった際にそれはどんな技術を使っているの か、それを使うためにはどのくらい予算がか かるかを理解していなければ、見積もりも提 示できず、指示も出せません。そこで本講座 では左図のような、発注や打合せをする際 に、最低限知っておきたいWebの共通言語に ついて学びます。POINT
3
ビジュアルへの作用
HTML、CSSなど特定の技術がもたらす
チラシやパンフレットなど紙の制作物の進行に慣れてしまうと、「もっとWebっぽく」という依頼をクライアントか ら受けることがあります。しかしWebは目に見えるものが全てではないため、たとえ実装は外注するにしても、 個々の具体的な技術がWebの裏側でどのように機能しているのかまで理解をしていないとディレクションす らできません。そのため本講座では上図のような個々の技術が持つ特徴とその活用法について学びます。 価格がおさえられるからと構成書を投げるのではなく、 要素を定義することによってプロの力を引き出す ・ 新製品メインビジュアル3点 ・ 製品スペック ・ 品名 ・ 値段 ・ サイズ ・ 使用者の声2点 ○要素が定義されている ヘッダー ヘッダー フッター フッター ×発注時にレイアウトがされている メイン ビジュアル ビジュアルメイン ビジュアルメイン ・ 製品スペック ・ 品名 ・ 値段 ・ サイズ 使用者の声 使用者の声POINT
4
訴求内容がぶれないレイアウトのセオリー
Webページはヘッダー領域、ナビゲーション領域、コン テンツ領域、フッター領域の4つの領域から成り立って います。この領域ごとの特徴をおさえていないとデザイ ンをブラウザのウインドウ内へどう配置するかが決めら れず、レイアウトができません。ユーザーに発信したい 情報を載せるだけでなく、見やすく、使いやすくなけれ ば目的とする情報は伝わりません。そこで本講座では、 ユーザーが見やすく、使いやすく、そして伝えたい情 報が伝わるレイアウト選びのセオリーを学びます。 Webの特性 ユーザビリティ2POINT
5
目的・用途別のサイト構造14類型
ユーザーがストレスなく目的とする情報に 辿り着ける構造は14に分類できます。何を 求めてわざわざアクセスしてくるのか。どん な順番で情報を伝えるとコンバージョンが 一番高くなるのか。それぞれのページで 提供するユーザー体験を最大化し、成果 へと導くのが構造の役割です。そこで本 講座では目的と用途に合わせた14類系の 使い分けを学びます。の構造
階層カテゴリ型 全14類型の中で最も多く使われる王道のパターン トップページ＋
直線型 フラット型 階層カテゴリ＋直線型 サーバレスポンス型 ユーザー別分岐型 時系列アクセス型 言語別分岐型 他カテゴリ参照型 時系列グリッド型 別サイト内包型 スプラッシュ型 集約承認型 集束型 Header Webページを構成する4つの領域 2カラムレイアウト Navigation Contents Footer 3カラムレイアウト ・ユーザはどんな人か? ・ユーザが求めているサービスは? ・ユーザに必要な情報や機能 （ニーズ）は? ・ユーザはどう使うか? ・機能、情報のプライオリティ など エンドユーザ視点 （HCD）による 施策・要件など 企業の ビジネスやサービス に関する要件や制約 バックエンドに 関する要件や制約 ・バックエンドに備わっている機能 ・フレームワークとしての制約 ・環境（インフラ）的な制約 ・開発予算やスケジュール的な制約 など ・KPI、ゴール ・サービスの目的と 提供すべき機能 ・ビジネス的に取得が 必要なデータ ・他社サービスとの差別化 ・予算やスケジュール的な 制約 など バランスと ウェイトに配慮 工数 タスク 進捗 など 企画 要件・仕様 品質 など プロジェクトの ゴール 先導役=プロジェクト マネージャー （PM） ヒト スケジュール コト モノ マネジメント（管理） カネ 座組・体制 リソース メンバーモチベーション など バジェット(全体予算) 外注費(個別予算) などサイトの見やす さや使いやすさ デバイスやブラウザ、 Webサーバーの仕組 み、HTMLやCSSの 仕組み Webサイトの 構造や進行作業 Webの特性 仕 組 み3 Webの特性 環 境 1 Webはグラフィックのように、目に見えるビジュアルがデザインの全てではありません。グラフィッ クで培った経験やスキルを生かすには、携わるのがデザインだけであったとしても、構造やシス テムなどWebの裏側まで理解していることが必要です。例えばスマホなどのマルチデバイスに 対応したWebデザインをする時に、構造やシステムを理解していないと、PCサイトでは正常に 表示されたのに、スマホではレイアウトが崩れているといったことにもなりかねません。加えてク ライアントが発注する際には、細部まで踏み込めているかが一緒にプロジェクトを進めるパート ナーを選ぶポイントになっています。それゆえにWebデザインは見た目だけでなく、目に見えな い裏側の構造やユーザーのデバイスのOSやWebサーバーの仕組みといった環境までを理解 してデザインを進めていくことが必要となります。
