Comments
Description
Transcript
Webデザイン・ディレクション 基礎講座
外注や専門スタッフと連携しWeb制作に関わる方のための Webデザイン・ディレクション 基礎講座 2017年3月9日 （木） 【1日集中】 PCで確認した時は イメージ通りだったのに、 スマホ・タブレットで確認したら レイアウトが崩れてしまっている 静止画のラフまではできるが、 データがどう処理されて 動きのあるデザインに なっていくのかが分からない 名古屋教室 ほとんど外注するにも かかわらず、 どのように指示を 出せばよいかが分からない 予算を超えてしまったり、 スケジュールに遅れが生じたりと グラフィックとは異なる進行業務に 手を焼いている 見た目と仕組みを何となく理解して済ませていませんか？ 日進月歩のWeb技術への 対応もさることながら、 そうした技術の登場に 左右されないセオリーが知りたい 「もっとWebっぽく」 というオーダーが グラフィックとどう違うのかが分からない グラフィックとの違いを押さえ、感覚に頼らず効果的な デザインに仕上げるためのセオリーを学ぶ 日進月歩の技術にも色褪せない Webデザインの原理・原則を学ぶ 目に見えない Webの裏側まで理解する Webはグラフィックのように、 目に見えるビジュアルがデザインの全てではありません。 グラフィックで培った経験やスキルを生かすには、携わるのがデ ザインだけであったとしても、構造やシステムなどWebの裏側まで理解していることが必要です。例えばスマホなどのマルチデバイスに対応した Webデザインをする時に、 構造やシステムを理解していないと、 PCサイトでは正常に表示されたのに、 スマホではレイアウトが崩れているといったこと にもなりかねません。加えてクライアントが発注する際には、細部まで踏み込めているかが一緒にプロジェクトを進めるパートナーを選ぶポイントに なっています。 それゆえにWebデザインは見た目だけでなく、 目に見えない裏側の構造やユーザーのデバイスのOSやWebサーバーの仕組みといっ た環境までを理解してデザインを進めていくことが必要となります。 ユーザー行動を逆手に取る デザインのルール そしてWebのデザインには一定のセオリーがあります。Webがインフラとなった今、 アクセスするユーザー側にも 「Webサイトはこういうもの」 という先 入観が存在しています。例えば「サイトの左上にはサイトのロゴが配置されている」、 「ページの上部やサイドにはナビゲーションがある」 といったこと です。 そうしたルールを押さえて制作することでユーザーは迷わずに目的ページに辿り着くことができます。 そのためWebデザインの特殊性は、 携わ るのがデザインだけであったとしても、 見た目だけでなく、 裏側の部分まで踏まえてデザインをする必要性に迫られることにあります。 本当の個性があ るサイトはこうしたルールのもとに成り立っています。 そこで宣伝会議では見た目と仕組みを何となく理解して済ませるのではなく、 グラフィックとの比 較からWebの特性を整理し、Webならではのデザインに仕上げるためのセオリーを学ぶ「Webデザイン・ディレクション基礎講座」 を開講します。 Webデザイン【基礎編】 発注の前に知っておくべきWebの基礎知識 STEP 1 STEP 2 Webならではの特性の把握 Webの特性 環 境 サイトの見 やすさや使 いやすさ Webの特性 2 仕組み 1 HTML、CSSなど特定の 技術がもたらす ビジュアルへの作用 チラシやパンフレットなど紙の制作 デバイスやブラ ウザ、Webサー バーの仕組み、 HTMLやCSS の仕組み ユーザビリティ Webの特性 スタッフやパートナーと 円滑に連携するための共通言語 STEP 3 物の進行に慣れてしまうと、 「もっ とWebっぽく」 という依頼をクライ アントから受けることがあります。 しかしWebは目に見えるものが全 3 てではないため、 たとえ実装は外 注するにしても、個々の具体的な 技術がWebの裏側でどのように Webサイトの 構造や進行作業 機能しているのかまで理解をして いないとディレクションすらできま 個々の技術やデザインする際のポイントを知る Webの案件を円滑に進めるためには、 クライアント目線から だけでは、Webデザインに対する悩みが根本 の要望とWeb制作の作業とを翻訳しながら進めることが せん。そのため本講座では上図 から解消されることはありません。見た目の裏 必要です。例えば「○○みたいなサイトにしたい」 という要 のような個々の技術が持つ特徴 とその活用法について学びます。 側にある特性を理解しておくことがWebならで 望があった際にそれはどんな技術を使っているのか、 それ はのデザインに仕上げる上で欠かせません。 そ を使うためにはどのくらい予算がかかるかを理解していな のため実装される際に使う個々のWebデザイ ければ、見積もりも提示できず、指示も出せません。 そこで ンの技術やテクニックを知る前に一度はしっか 本講座では左図のような、 発注や打合せをする際に、 最低 り学んでおきたいWebの3大特性を学びます。 限知っておきたいWebの共通言語について学びます。 Webデザイン【実践編】 Webならではのデザインに仕上げる5つのポイント Webサイト構築のタスクと プロセスの見える化 POINT 1 プロジェクトを管理するには専門知識や技術だけが必要な訳ではありません。 多くのタスクとプロセスを管理しながら進めることも同時に求められます。 その かじ取りを企業の担当者が行うことで、定められた期限の中で目的を達成す ることができます。 しかし慣れた印刷物と同じように進行していては、 想定外の 費用や時間が掛かる事態に陥りかねません。そこで本講座では限られた予 算・期間で目的を達成するプロジェクトマネジメントのノウハウを学びます。 座組・体制 リソース メンバーモチベーション など バジェット(全体予算) 外注費(個別予算) など ヒト コト モノ 企画 要件・仕様 品質 など POINT 3 カネ スケジュール ×発注時にレイアウトがされている ヘッダー ヘッダー プロジェクトの ゴール メイン メイン メイン ビジュアル ビジュアル ビジュアル ・ 製品スペック ・ 品名 ・ 値段 ・サイズ ・ 品名 工数 タスク 進捗 など ・ 値段 ・サイズ 使用者の声 ・ 使用者の声2点 フッター フッター ・ユーザはどんな人か? ・ユーザが求めているサービスは? ・ユーザに必要な情報や機能 （ニーズ） は? ・ユーザはどう使うか? ・機能、情報のプライオリティ など POINT 4 訴求内容がぶれない レイアウトのセオリー Webページはヘッダー領域、 ナビゲーション領域、 コンテンツ領域、 フッター領域の 4つの領域から成り立っています。 この領域ごとの特徴をおさえていないとデザイ ンをブラウザのウインドウ内へどう配置するかが決められず、 レイアウトができませ ん。 ユーザーに発信したい情報を載せるだけでなく、 見やすく、 使いやすくなけれ ば目的とする情報は伝わりません。 そこで本講座では、 ユーザーが見やすく、 使 いやすく、 そして伝えたい情報が伝わるレイアウト選びのセオリーを学びます。 Header Navigation 2カラムレイアウト Contents バランスと ウェイトに配慮 バックエンドに 関する要件や制約 POINT 5 企業の ビジネスやサービス に関する要件や制約 使用者の声 価格がおさえられるからと構成書を投げるのではなく、 要素を定義することによってプロの力を引き出す ユーザーの期待に応えることができなければ、 サイトはその目的を果たすことは できません。 そのためコンテンツは、 ユーザーのニーズと自社のビジネスゴールとの ギャップを埋めるためのユーザー体験を提供することが必要です。 そうするとデ ザインも、 サイト構造も自ずとターゲッ トとなるユーザー起点で設計することが求め られます。 そこで本講座ではコンバージョンを促すコンテンツとそれが伝わる構造 の作り方を学びます。 エンドユーザ視点 （HCD）による 施策・要件など ○要素が定義されている ・ 製品スペック 魅力・見やすさ・使いやすさを 兼備した企画のノウハウ ・バックエンドに備わっている機能 ・フレームワークとしての制約 ・環境 （インフラ） 的な制約 ・開発予算やスケジュール的な制約 など 多くの企業担当者がWeb制作会社とのやり取りがうまくいかないと悩んでい ます。 その多くは少しでも価格を押さえようと、 要素だけでなく構成まで踏み込 んで定義しようとしていることに共通点があります。何となく良いものが上がっ てきていると思う一方で、 それで本当に良いのかと疑問を感じているなら、 すぐ に発注の仕方を見直すべきです。 そこで本講座では発注までに知っておくべ きこと・準備すべきものについて学びます。 ・ 新製品メインビジュアル3点 先導役=プロジェクト マネージャー （PM） マネジメント （管理） 円滑な進行のために発注前に 知っておくべきこと・準備するもの POINT 2 ・KPI、 ゴール ・サービスの目的と 提供すべき機能 ・ビジネス的に取得が 必要なデータ ・他社サービスとの差別化 ・予算やスケジュール的な 制約 など Footer Webページを構成する4つの領域 3カラムレイアウト 目的・用途別のサイト構造14類型 階層カテゴリ型 の構造 ユーザーがストレスなく目的とする情報に辿り着ける構造は14 トップページ に分類できます。何を求めてわざわざアクセスしてくるのか。 ど んな順番で情報を伝えるとコンバージョンが一番高くなるのか。 それぞれのページで提供するユーザー体験を最大化し、 成果 へと導くのが構造の役割です。 そこで本講座では目的と用途に 全14類型の中で最も多く使われる王道のパターン 合わせた14類型の使い分けを学びます。 直線型 ＋ フラット型 ユーザー別分岐型 階層カテゴリ＋直線型 言語別分岐型 他カテゴリ参照型 スプラッシュ型 集約承認型 時系列アクセス型 時系列グリッド型 別サイト内包型 サーバレスポンス型 集束型 カリキュラム 時間 ※講師・カリキュラムは都合により一部変更となる可能性があります。 ご了承ください。 講師 ∼ 10：00 12：00 テーマ 講義内容 Webの裏側の仕組みを把握する Webページの構成／ページが表示される仕組み／サーバとクライアントがやって いること／Webページの大原則／HTML、 CSS、 JavaScriptの特徴 発注側として知っておきたい Webデザインの基礎知識 発注者、受注者のそれぞれの目線から見るワークフロー／静的なデザインと動的 なデザイン／マルチデバイスへの対応／実装する際の注意点／制作管理にお ける注意／今後のWebデザイン ユーザー起点のコンテンツと サイト構造の作り方 ユーザー体験の設計／コンセプトダイアグラムとは／カスタマージャーニーマップ とは／ユーザー起点の情報設計／Webサイトの構造モデル 与えられた条件で目的を達成する プロジェクトマネジメント プロジェクトマネジメントの基本／「誰に、何を頼めばいいのか？」 を把握する／具 体的なプロジェクトの進め方／見積の見方／制作ガイドライン／PCサイトの構 成要素とレイアウトパターン／グリッドシステムとレスポンシブデザイン／PCとス マートフォンのサイトの振り分け 森田 雄氏 ツルカメ ∼ 13：00 15：00 15：20 ∼ 阿部 淳也氏 ワンパク 18：00 講師紹介 森田 雄 氏 阿部 淳也 氏 株式会社ツルカメ UXディレクター 東芝EMI、 マイクロソフト、 ビジネス・アーキテクツな どを経て、現在はツルカメ代表取締役社長、 ネコメ シ代表取締役CEO、KDDIウェブコミュニケーショ ンズ顧問。IA/UXデザイン、 アクセシビリティ、ユー ザビリティのスペシャリスト。広告電通賞審議会選 考委員。米IA Institute会員。内閣総理大臣賞、 グッドデザイン賞、Web人賞など受賞多数。 株式会社ワンパク クリエイティブディレクター 1974年宮城県生まれ。自動車メーカーのUIエンジ ニアを経てIT部門でデザイナー、 テクニカルディレク ターを経験。都内の広告代理店系プロダクションで のクリエイティブディレクターとしてWeb・映像制作 に携わった後、2008年にクリエイティブプロダク ション"ワンパク"として独立。東京インタラクティブ・ アド・アワード入賞、 グッドデザイン賞受賞、Webクリ エーションアウォードWeb人受賞など。 ●開催日程：2016年3月9日 （木） ●講義時間：10:00∼18:00 ●受講定員：25名 ●講座会場：名古屋・栄 ●受講料金：39,000円（税別・申込金5千円含む） ●受講対象：企業のWeb担当者。広告制作会社、Web制作会社のディレクター、 デザイナー。SP会社、印刷会社のデザイナー。 講座 概要 お申込みはWebから またはこちらまで FAXにてお送りください 会社情報 申込者様 派遣責任者様 Webデザイン・ディレクション基礎講座 名古屋教室 お申込み者情報記載欄 TEL 会社名 住所 ０52−952−0312 〒 氏名 所属部署 役職 所属部署 役職 生年月日 19 年 月 日 Eメール 氏名 生年月日 19 年 月 日 Eメール 申込形態 ①企業申込（請求書を発行します） ②個人申込 お振込み先 宣伝会議からの情報 ①いる ②いらない ③ すでに届いている 三菱東京UFJ銀行 大津町支店 普通 1388456 口座名義：株式会社宣伝会議 ■お申込・お問合せ 株式会社宣伝会議 〒460-0005 愛知県名古屋市東区東桜1-13-3 NHK名古屋放送センタービル6F TEL：052-952-0311 E-mail：[email protected] www.sendenkaigi.com/class/ ※受講料について、開講前のご入金を原則とさせていただいております。入金が確認できませんと、 ご受講いただけませんのであらかじめご了承ください。※一旦納入された申込金・受講料は、受講前・受講途中にかかわらず、 いかなる理由であっても払い戻しや次期への振り替えはできません。※受講は申込者本人に限ります。他人に貸与・譲渡することはできません。企業派遣による申し込みの場合でも、受講者の変更は受け付けておりません。※ 天候不順によるアクシデントや講師の都合により、直前に日程変更になる場合がございます。 その際、交通費の保証はできかねますのでご了承ください。※弊社と発注者は互いに暴力団、及びその他の反社会的勢力に該当 しないことを表明・確約します。万が一、上記に反していることが判明した場合には、直ちに無条件で本契約を解除します。※弊社と同様の教育講座を開催している企業、人材紹介業、受講生への営業・勧誘等を目的とするご 受講等に関しましては、審査の上、 お申し込みをお断りする場合がございます。 また、 お申し込みから審査までの間に、 ご請求書類の発送など、決済処理の進行が行われる場合がございます。あらかじめご了承ください。※本申 込 書により㈱ 宣 伝 会 議が取 得した個 人 情 報は受 講 手 続きや各 種 連 絡 、講 座 運 営 、ダイレクトメールなどの方 法で出版 物や講 座 、イベントのご案 内 等をお送りするために利 用します。プライバシーポリシー （http://www.sendenkaigi.com/privacy/） をお読みいただき、同意の上、 お申し込みください。