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