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日集中講座ですので、忙しい社会人の方でも参加しやすくなっています。

カリキュラム

• 発注側として知っておきたいWebデザインの基礎知識
• ユーザー起点のコンテンツとサイト構造の作り方
• 与えられた条件で目的を達成するプロジェクトマネジメント

もっと詳しく »

講師紹介

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

阿部 淳也氏
株式会社ワンパク クリエイティブディレクター
1974年宮城県生まれ。自動車メーカーのUIエンジニアを経てIT部門でデザイナー、テクニカルディレクターを経験。都内の広告代理店系プロダクションでのクリエイティブディレクターとしてWeb・映像制作に携わった後、2008年にクリエイティブプロダクション“ワンパク”として独立。東京インタラクティブ・アド・アワード入賞、グッドデザイン賞受賞、WebクリエーションアウォードWeb人受賞など。

お申込み