DTPデザイナーからWebデザイナーへの転換講座

ウェブデザインを行うにあたり、ウェブサイトの土台であるHTMLとCSSがどのようなもので、どのような役割を果たしているのかを解説します。

HTMLとCSSがどのようなものなのか、それがブラウザで表示されると、どうなるのかについて見ていただき、デザインを行ううえで、裏でこのようなことが行われている、というのを理解していただくためのレクチャーです。

画像のフォーマットGIF, JPEG, PNG, WebP, SVGについて、その特徴を解説します。

ヘッダーのデザインについて解説します。特に、スマートフォン用のデザインで課題となるグローバルナビのデザイン、スマートフォンでの快適な閲覧のために行われている各種の施策について紹介します。

• パソコンでのヘッダーとスマートフォンでのヘッダー

• スマートフォンでのヘッダーの処理方法

• ハンバーガーメニューの問題と対策

• ボタンのデザイン

キービジュアルのレイアウトパターンとそれぞれの特徴を解説します。また、スライドショーを設置する際の注意点と、スライドショーに変わる表現手法について紹介します。

• キービジュアルの配置パターンとそれぞれの特徴

• スライドショーの抱える課題と対策、代替手段

ウェブページのメインコンテンツのデザインについて、以下の項目を解説します。

• 視線移動

• 長いページの課題と解決方法

• デザイン時に抜け落ちやすい要素

• スタイルガイドの作成

• レスポンシブデザイン対応の表のデザイン

サイドバーのレイアウトと、その挙動について検討すべき項目、フッターに配置されるパーツ類について説明します。

• サイドバーの配置、右と左で入れるコンテンツの違いなど、視線移動を含めた解説

• スマートフォン表示の際の扱い

• フッターに入れるパーツ

• 著作権表示の持つ意味について

アクセシビリティについて概要を把握してもらうため、次の項目についてお話しします

• アクセシビリティとは何か

• 対象としている障害の解説

• 障害とITの役割

• 関連する法律とJIS規格

• アクセシビリティの4原則

アクセシビリティに対応するためのガイドラインがあります。

そのガイドラインについて、4つの原則に沿って、グラフィックデザインが関係する事柄を中心に解説します。

• 動画や音声、画像への代替テキスト

• CAPTCHAとその現状について

• 色とコントラスト

• 文字と背景のコントラスト基準

• テキストブロックに関するガイドライン

• ユーザーによる操作

• 発作のガイドラインと、その背景について

• その他

カラーユニバーサルデザインとは、色盲や色弱といった色覚特性に対応したカラーデザインのことで、サイトの配色を決定する際に重要な知識となります。

• 人が色を認識するメカニズム

• 色盲・色弱のパターンと特徴

• 注意すべき色の組み合わせと、その体系的な理解

• その他

レスポンシブデザインの概要を解説します。

• レスポンシブデザインの3つの要素

• 利点と欠点

レスポンシブデザインを構成する要素の1つ目について解説します。

• リキッドレイアウト

• コンテンツの幅の上限の決定方法

• サイドバーの挙動について

• レイアウト切り替え時に発生しやすい問題とその解決策

レスポンシブデザインにおける、画像の処理とレスポンシブ画像について解説します。

• ディスプレイの解像度（画素密度）について

• スマートフォンにおける高精細ディスプレイの特徴とウェブで使う画像について

• レスポンシブ画像とは何か

• テキストの回り込みがある画像で発生する問題と解決策

ユーザビリティの観点からは、レスポンシブデザインだけでは足りません。レスポンシブデザインを補完するその他のデザインんの概念について解説します。

• 古いブラウザへの対応　グレイスフルデグラレーションとプログレッシブエンハンスメント

• アダプティブデザインの考え方

SEOについて、知っておくべき基本的な事柄について解説します。

• 検索エンジンとクローラー

• サイトの有益性について

• 外部リンク、キーワードと禁止事項

• 情報の独自性

• 快適な閲覧性

• リクエスト数の削減

コーダーはデザインを受け取った時、可能な限り画像に頼らず、HTMLとCSSでデザインを実現しようとします。

そのため、ウェブグラフィックデザイナーはどういうデザインがHTMLとCSSで実現できるのかを把握しておく必要があります。

• ブラウザ上でのテキストの合成

• CSSで可能な表現

• パーツを分離するのが困難なデザインの事例

• 小数点以下があるサイズ指定の問題

• 長体の問題

• フォントの選択について