【Webデザイン】『Webデザインとコーディングのきほんのきほん』でお勉強②

Webデザインのお勉強第2弾。

前回の内容は下記のリンクからご参照ください！

＜前回の記事＞

【Webデザイン】『Webデザインとコーディングのきほんのきほん』でお勉強①（Part1-Chapter1・2）

今回の内容は、「Part1 デザインの基本」の「Chapter3 Webサイトデザインのセオリー」です。

 

Part1 デザインの基本

デザインとWebデザインに関して、その目的や基本的なセオリーなどを学びます。

Chapter3 Webサイトデザインのセオリー

Section1 Webサイトをデザインするとは

・Webサイトは複数のWebページが1つのまとまりとして公開されたもの

・メニュー＝各ページへのリンクをグループ化したエリア

• グローバルメニュー：カテゴリ分類の大きなメニュー
• ローカルメニュー：カテゴリ内での各ページへリンクする詳細メニュー

・多くのWebサイトではページ内が役割ごとにエリア分けされている→ヘッダー（上部）・フッター（下部）・コンテンツエリア（中央部）

・カラム：コンテンツエリアを構成する段組み

・Webページは印刷物に比べ全体の情報量や、見ているページがどのカテゴリに属しているのかなどがわかりづらいため、わかりやすいナビゲーションが必要→グローバルメニューの現在のカテゴリの色を変える、パンくずリストの表示など

• パンくずリスト：トップページから現在のページまでの階層表示

・どの領域・瞬間が見られているのか考慮が必要→媒体の画面サイズ分しか一度に見ることはできない、印刷物と違い動画やアニメーション等変化のあるコンテンツを使用できる

・デザイン時の表示がそのまま完全に再現されない場合もある

・Webサイトの場合「更新する」ことがデザインの前提となる→更新時の手間も考えてデザインする

 

Section2 「使う」ことを意識したデザイン

・webサイトはユーザーの操作が必要→スムーズに操作できるような構成が重要

・シンプル・統一性があることがスムーズな操作に必要な基本の要素

・役割ごとにエリアを分けてグルーピングする（グローバルメニュー、ローカルメニュー等それぞれひとかたまりに）

・「操作に反応するもの（ボタン等）」と「反応しないもの」を明確に差別化する

・ 様々な閲覧環境を想定する→レスポンシブデザイン等で対応

 

Section3 ユーザーの経験値を利用した構成

・既存のレイアウトパターン（I字型、二分割型、逆L字型など）に近付けることで、操作の理解しやすさが上がる

・既存のパーツのルールに則る（文字サイズ・リンク・ナビゲーションなど）

既存のパーツのルールの一例

• 文字サイズ→重要度の下降に比例して文字サイズも小さくなる
• リンク→マウスオーバーでの文字や背景色の変化、下線がある
• ナビゲーション→逆L字型の場合、上部がグローバルメニュー、サイドがローカルメニューが一般的/ロゴクリックでホームに戻る

・シグニファイアを利用する→リンクボタンは現実のボタンを想起させるように立体感を持たせる等

• シグニファイア：これまでの経験値から直感的に機能がわかるようにするデザインの概念

・流行のフラットデザインはシグニファイアを考えると「優しくない」→対象ユーザーの層を考えデザインのバランスをとる

 

Section4 操作するためのデザイン

・操作したことをわかりやすくする必要がある→操作に合わせて外観を変化させる

・マウスオーバー時に変化を持たせることでクリックできることがわかりやすくなる→スマホ・タブレット等では使えないので、タップ時の反応を考える

・スクロール時の動き：ヘッダーの固定や「トップへ戻る」ボタンの設置等使いやすさを考えたデザイン、パララックス効果（コンテンツと背景のスクロールスピードに差をつけ奥行き感を出す）やフェードイン・アウト等による演出効果

 

Section5 Webサイトの配色

・WebデザインではRGBカラーを使用

RGBカラーのルール

• RGBそれぞれの色の割合を0〜255の全256段階に分割・組み合わせて色を表現する（赤＝R255:G0:B0）
• RGBそれぞれの値を16進方表記で2桁の数字に置き換え全6桁の英数字として指定する方法もある（赤＝R255:G0:B0＝FF0000）

RGBカラーの特徴

• 白や黒に近い微妙な色合いや濃淡はその差異が見分けづらい場合が多い→差別化したい場合は色相を変えるなどの工夫が必要
• 黄色やオレンジ等の鮮やかな色の表現は得意→鮮やかすぎる場合もあり、疲れさせてしまうこともあるので注意

・モニタの個体差によってユーザーが見る色は異なる→色の表現だけに頼ったデザインはNG

・環境による可読性の変化に注意（太陽光の影響等）

・複数の色の組み合わせが与える印象を考慮する

・配色は全体のメイン（ベース）カラー・サブカラー・アクセントカラーの3色を基本にすると統一感が出て、寂しくもならない

• メインカラー：全体のベースとなる色。サイトのイメージカラーやコーポレートカラー等最も印象付けたい色、最初に指定する
• サブカラー：メインカラーを強調する役割。背景等での使用が多いため明度の高い（淡い）色で、類似色やメインカラーと同じ暖色・寒色系の淡色、薄いグレー等が合う
• アクセントカラー：画面全体に変化を加える。メインカラーとは全く異なる色相や補色を選択することで画面を引き締めるカラー構成になる

・メインカラー:サブカラー:アクセントカラー＝70:25:5の割合がバランスが良い

 

Section6 フォントの実際

・Webサイトへの文章の掲載はHTML記載か画像表示の2つの方法がある

・フォントは設定がないとブラウザごとに異なる表示になる場合もあるため、文字に関する設定はWebデザインを行う上で不可欠

・文字に関する設定はCSS（カスケーディング・スタイルシート）で行う

・フォント指定は第三候補までを目安に行う（指定フォントがインストールされていない場合を考慮）

・出来るだけ一般的なフォントを指定する

• ゴシック体→ヒラギノ角ゴシック・游ゴシック・メイリオ等
• 明朝体→ヒラギノ明朝・游明朝等

・具体的なフォント名ではなく「ゴシック体」「明朝体」だけでの指定も可能

・特殊なフォントや装飾は画像で利用する→デザインの自由度が高く、閲覧環境による影響を受けないメリットがある一方、データ容量の増大や検索でヒットし辛くなるなどのデメリットがあるため、タイトルや大見出しなどの限られたパーツだけに留める

・デザイン性の高いフォントを使用するときは1ページ内で2種類程度まで（多すぎると安っぽい印象になる）

・フォントサイズ、字間・行間等の指定にはいくつかの単位がある

• px（ピクセル）：絶対的な数値での指定。IE・Chrome等の一般的なブラウザでは初期設定は16px＝16px四方の正方形内に収まるサイズ
• em・％：相対的な数値での指定。1文字分＝1em＝100％。HTML上のタグの相関を継承して表示される。複雑な入れ子（階層状）構成では分かりづらくなる場合もある。
• rem：相対的な数値での指定。階層状のタグ構成でも相対的な数値指定を継承しない＝常にhtml要素に対する相対値での設定となる。IE8以前のバージョンでは対応していないので注意

・Webフォント（ネット上にアップされているフォントデータ）を利用すると、閲覧環境にインストールされていないフォントも表示可能

 

Section7 操作環境の多様化に対応する

・端末・ブラウザ・OS・機種等の多様化に対応するため、柔軟に変化するようなWebサイトが求められている

・レスポンシブデザイン：共通の1つのHTMLファイルに対して複数のCSSを用意し、閲覧環境（画面サイズやブラウザ等）によって表示を切り替える

・通信速度も考慮が必要

・データの軽量化を行う→SVGデータ・アイコンフォント等の使用、PNG・JPGデータの圧縮

 

今回はここまで！

 

今回の学びと感想

前回はデザイン全般の基本的なことを色々と学習しましたが、今回はいよいよ「Webデザイン」という部分にフォーカスした内容となり、より具体的な知識を得ることができたと思います。

Webデザインと印刷物の決定的な違いとして度々繰り返されていたのが、「ユーザーの操作・体験があること」と「様々な環境で閲覧されること」。

これらへの意識から、Webデザインならではの基本的なルールや手法が生み出されており、自分が実際にデザインをする際にも、必ず念頭に置かなければならない基本中の基本であるとしっかり刷り込まれました。

 

今回でPart1は終了し、次回からはPart2に入ります。

Part2は「Webサイト制作の基本」ということで、一旦デザインから離れ、今度はWebサイトを実際に作っていく手順や方法などを学んでいくことになります。

こちらのPartもおそらく2回くらいにわけての掲載になると思います。

引き続き頑張ります！

Webデザインとコーディングのきほんのきほん