ビジュアルデザインはコンテンツの「顔」ともいえるでしょう。それは、好ましさを左右するという側面以上に、コンテンツのわかりやすさや、使いやすさを大きく左右し、良いビジュアルなしでのコンテンツの成功はありません。
　本講座は、Webデザインのビジュアルデザインに関するスキルアップを目的としています。講座の流れは、まずデザインに関するセオリーを解説し、そのセオリーにしたがって実際にデザインを起こしていくというハンズオン形式で学習を進めます。
　全体を通してWebページのモックアップをステップバイステップ形式で作成し、最終的に成果物の講評を行います。
　また本講座は、PCの画面のみにとどまらず、需要の高まるスマートフォン (マルチスクリーン) を意識した画面設計についても学習します。

1. スマートフォン (マルチスクリーン) 対応を視野に入れた画面設計
   • レイアウトのベースになるワイヤーフレーム (ラフレイアウトレベル) を作成します。スマートフォンサイズに最適化できる作りを考慮して、最小モジュール幅を決定します。さらにモジュールの組み合わせで複数解像度に対応可能なレイアウトのバリエーションを作成する手順についても確認します。レイアウトのセオリーにあわせて、マルチスクリーンレイアウトの理解に必要な解像度やWebページの表示が可能な機器、その特性についても確認します。最終的にIllustrator上でワイヤーフレームを作成、モックアップの下地を作成します。
2. カラーリングの基礎
   • 最初に色の属性といった基礎を確認し、Webのカラーリングに必要なカラーセオリーを学習します。次に色相、明度、彩度の3属性をカラーリングに活用する色作りの方法をPhotoshopを題材に確認します。また、グラデーションや特定の色の組み合わせ、パターンなど、テクスチャによる色の印象の違いをデザインに活かす方法や、色による情報への重み付け、グループ化といった応用に付いても解説します。最後にモックアップ素材にカラーリングし、セオリーをテクニックとして活用できるよう練習します。最後に色表現に関連あるCSSコードを確認します。
3. テキストデザインの基礎
   • Webページにおけるテキスト利用の制限事項や、Webでできるテキスト表現のバリエーションなど技術面のポイントを確認します。つぎにCSSを活用したテキストの装飾方法を確認し、表現に取り入れます。また、CSSによる再現性を配慮したモックアップ作りを実践として行います。
4. デザインのブラッシュアップ
   • Photoshopのレイヤーエフェクトなどツールの機能を活用することでできるグラフィックのブラッシュアップ方式を身につけます。カラーリングに関するハマりどころのチェック方法や、バランスの悪い箇所の改善方法など最後の仕上げに必要なポイントを解説します。 レイヤーエフェクトとして保持したほうが作業効率が上がる部分 (例えばカラーオーバーレイやグラデーションオーバーレイなど) といった比較的細かいPhtoshopの使い方にもふれ、ツールを十分つかいこなすスキルも同時に身につけられます。

• カリキュラムの進度および内容は、受講者全員の理解度・習得度によって変更される場合があります。