Webデザイン・ディレクション基礎講座（オンデマンド配信）

講座について

デザイン性に優れたサイトでも、デザインへのこだわりが強すぎて、どこに何が載っているのか見づらかったり、ナビゲーションがわかりくくて目的のコンテンツまでたどりつけなかったという経験はありませんか？

Webのデザインは、デザイン性だけでなく、ユーザーの使いやすさを最大限考慮し、時には最新のトレンドを取り入れることが大切です。

また、Webサイトの仕組みや構造を幅広く理解して、制作過程で起こりがちなトラブルを事前に回避することも大事なポイントです。この講座では、Webデザインの基礎知識からサイト構造、プロジェクトマネジメントまで幅広く学習することができます。

開講の背景

日進月歩の技術にも色褪せないWebデザインの原理・原則を学ぶ

Webはグラフィックのように、目に見えるビジュアルがデザインの全てではありません。紙の制作物で培った経験を生かすには、携わるのがデザインの部分だけであったとしても、構造やシステムなどWebの裏側まで理解していることが必要です。その裏側まで理解して進めることによって、予算オーバーや納期まで想定以上の時間が掛かる事態を未然に予防する第一歩になります。

そしてWebのデザインには一定のセオリーがあります。Webがインフラとなった今、アクセスするユーザー側にも「Webサイトはこういうもの」という先入観が存在しています。例えばサイトの左上にはサイトのロゴが配置されている、ページの上部やサイドにはナビゲーションがあるといったことです。そうしたルールを押さえて制作することでユーザーは迷わずに目的ページに辿り着くことが出来ます。そのためWebデザインの特殊性は、携わるのがデザインだけであったとしても、見た目のデザインだけでない裏側の部分まで踏まえてデザインをする必要性に迫られることにあります。

本当の個性があるサイトはそのルールのもとに成り立っています。そこで宣伝会議では見た目と仕組みを何となく理解して済ませるのではなく、グラフィックとの比較からWebの特性を整理し、Webならではのデザインに仕上げるためのセオリーを学ぶ「Webデザイン・ディレクション基礎講座」を開講します。

Webサイトができるまで

1つのWebサイトを公開するまでには、いくつかの工程があります。サイトが完成するまでのプロセスを見ながら、それぞれの工程を解説します。

企画

・目的の明確化
Webサイトの制作は、クライアントの要望や課題・目的などをヒアリングすることから始まります。目的は「ブランド力をアップしたい」「売り上げをアップさせたい」など、クライアントによってさまざまです。そのため、クライアントがどのような目的でサイトを作り、どんな人に見てもらおうとしているのかをヒアリングの段階で明確にします。

・コンセプト、タイトルの設定
ヒアリング情報をもとにコンセプトやタイトルを決めます。複数でサイト制作に関わる場合は、さまざまなアイデアが提案されることで方向性にばらつきが出がちですが、コンセプトを決めると意思統一がなされ、アイデアの取捨選択がしやすくなります。また、コンセプトを意識したタイトルを付けることで、コンテンツの拡散やシェアなどのソーシャルシグナルにも影響を与えることができます。

・コンテンツの作成
「どんなユーザーにサイトを訪問してほしいのか？」「ユーザーの知りたい情報は何か？」など、いろいろな視点でユーザーニーズを調査し、コンテンツを作成します。競合他社の情報やキーワードをリサーチすることも重要です。ヒアリングやリサーチの情報をもとにクライアントとコミュニケーションを図り、完成イメージを深めていきます。

デザイン

Webサイトのデザインは、Photoshopなどのグラフィックソフトを使って作成されます。サイトコンセプトに合った世界観を表現するだけでなく、クライアントが届けたいメッセージや情報を適切にターゲットに伝えたり、ユーザーを目的のページに迷わず誘導するのがデザインの重要な役割です。

最初にいくつかの案を出した上で、その中からクライアントの意向を尊重しつつ、ユーザー目線をよく考慮した最適なレイアウトを選びます。
最近ではスマートフォンの普及でモバイルユーザーが急増しているため、マルチデバイスに対応したモバイルフレンドリーなレイアウトや構造にすることが求められています。それらは主に、WebデザイナーやWebディレクターと呼ばれる人が行います。

コーディング

デザイン案や仕様書をもとにHTMLやCSSなどでコーディングします。
制作会社によっては、プログラミング言語の書き方をルール化したコーディングガイドラインを作成しているところがありますので、その場合はガイドラインや仕様書に沿って制作します。コーディングができたら、動作や表示に問題がないかをWebブラウザで確認します。サイトの動作チェックや制作スケジュールの管理もWebデザイナーやWebディレクターの大切な仕事です。

システム

システムが必要な場合は、クライアントの要望に合ったシステムをWebプログラマーやコーダーが構築します。Flashなどを使った動的ページやお問い合わせフォームの作成などで、システムの構築が必要になります。プログラムは完成後に動作検証を行い、正常に作動しない場合はデバッグ作業（プログラムミスを修正する作業）を行います。

公開

念入りな検証を重ねたあと、テストサーバーにサイトをアップします。この仮アップを「テストアップ」と呼び、デザイン性のチェックはもちろん、システムやプログラムが正常に作動するか、リンク切れがないかなどを確認し、問題があれば修正をします。クライアントのOKが出たら本番用サーバーへアップして、公開です。

こんな人におすすめ

Webについて学ぶのが初めての方や、実務経験はあるものの、あらためて基礎から学んでおきたいという方に向いている講座です。具体的には、次のような方におすすめします。

企業の広報、Web担当者

Webの知識があまりないのにWebサイトのディレクション担当になってしまった方でも、Webの仕組みからプロジェクトマネジメントまで体系立てて学ぶことができるので、すぐに業務に生かせます。

広告制作会社、Webデザイナー、ディレクター

Webデザインは、見た目だけでなくWebサイトの裏側まで理解することが大切です。この講座ではWebサイトの仕組みやデザインのトレンドまでを幅広く学ぶことができるので、スキルアップに役立ちます。

将来WebデザイナーやWebデザインの業界を志望している方

Webならではの特性や、クライアントとの案件の進め方などを学ぶことができ、Webデザイナーとしての将来像を具体的にイメージしていただけます。1日集中講座ですので、忙しい社会人の方でも参加しやすくなっています。

カリキュラム

時間	講義内容
第一部　約150分	発注側として知っておきたいWebの仕組みとデザインの基礎知識 ・ユーザー視点で考えるWebデザイン制作ノウハウ ・消費者とWebの接点 ・Webデザインの基本 ・Webサイトの構造設計 ・デザインのトレンド ・デバイスの選択 ・進行ノウハウ
第二部 約100分	ユーザー起点のコンテンツとサイト構造の作り方 ・ユーザーやニーズを知る ・ニーズを具体化する ・ユーザーが思わず動くコンテンツを企画／設計する ・画面設計とデザイン制作：ユーザーニーズと企業活動や訴求とのバランス
第三部 約90分	与えられた条件で目的を達成するプロジェクトマネジメント ・プロジェクトマネジメントの基本 ・プロジェクトの体制をつくる ・「誰に、何を頼めばいいのか？」を把握する ・具体的なプロジェクトの進め方 ・タスクの整理と見積もり ・PCサイトの構成要素とレイアウトパターン

講師紹介

佐藤 好彦氏
ウェブデザイナー／グラフィックデザイナー
ウェブなどのメディアのデザインやプランニング、コンサルティングとともに、デザイン関連の書籍や雑誌の執筆も手がけている。東京造形大学非常勤講師。主な書籍に『フラットデザインの基本ルール Webクリエイティブ＆アプリの新しい考え方。』（インプレス）『ビジネス教養としてのデザイン 資料作成で活きるシンプルデザインの考え方』（インプレス）『デザインの授業 目で見て学ぶデザインの構成術』（MdN）などがある。

市川 葵氏
面白法人カヤック アートディレクター
東京生まれ京都育ち。面白法人カヤック入社後、WEBを中心としたプロモーションの企画、デザイン、アートディレクションを担当。ユーザーを巻き込むコミュニケーションデザインを得意とし、メーカーをはじめとする数々のユーザー参加型コンテンツを手掛ける。Yahoo! JAPAN インターネットクリエイティブアワード企業の部 グランプリ、コードアワード 2015 ベスト・キャンペーン、New York Festivals デジタル＆インタラクティブ部門 ファイナリスト受賞など。

高田 一史氏
面白法人カヤック ディレクター
1989年、愛知県出身。愛知県立芸術大学美術学部デザイン／工芸科：デザイン専攻卒業。2013年に面白法人カヤックに入社。同社クライアント事業部にて7年に渡りWebを中心とした制作プロジェクトのディレクションや制作進行管理を担当。同事業部でプロジェクトマネジメントに関するナレッジ共有や育成も行っている。

お申込み