ウェブビジュアルデザインについて
（重要問題は重複して記載しております）
ウェブビジュアルデザインとは
Webページの見た目をユーザーにとって見やすく分かりやすく美しく設計する事です
| 用語 | 読み | 解説 |
| UI | ユーザーインターフェース | 画面上でユーザーが操作する見た目の部分 |
| UX | ユーザーエクスペリエンス | Webサイトを使った時の満足度 |
| 視認性 | ブジビリィティー | 見つかりやすさ |
| 可読性 | リーダビリティ | 読みやすさ |
| アクセシビリティ | 障害者などにも使い易くする工夫 |
レイアウト
Webページ内の画像、文字、ボタンなどの配置やバランスを考える事
幅と高さの比率（アスペクト比）
| 項目 | 意味 |
| シングルカラム | 縦１列に情報を並べる事（スマホ等） |
| マルチカラム（2カラム、３カラム等） | 左にメニュー、中央に本文、右にバナーなど（パソコン等） |
| グリッドレイアウト | 要素を等間隔、正方形の様に並べる |
| レスポンシブ対応 | 画面サイズに応じてレイアウトを変える工夫 |
| フローレイアウト | ブロック要素が自動で縦に並ぶ配置方法 |
ディスプレイサイズ
可変レイアウト
幅を％で指定する画面サイズに合わせる
固定レイアウト
幅をpxで指定する、サイズに関係なく一定になる
| 単位 | 意味 |
| px | ピクセル、画面上の最小単位、固定サイズに使う |
| ％ | 親様相に対する割合、可変サイズに使う |
| vw | ビューポートの幅 |
| vh | ビューポートの高さ |
カラー
カラーとは
見た目の美しさや、印象、視認性、強調、イメージに使われる
| 用語 | 備考 | 意味 |
| 色相（Hue） | ヒュー | 赤、白などの色の種類 |
| 明度（Brightness） | ブライトネス | 明るさの度合い（白ほど数字が高い） |
| 彩度（Saturation） | サチュレーション | 色の鮮やかさ（数字が低いほどグレーに近い） |
| 補色（Complementary color） | コンプリメンタリー カラー | 反対の色（赤と緑など目出せたい時に使う） |
| トーン（Tone) | トーン | 色の雰囲気や印象（各色合いを組み合わせたもの） |
| １６進数カラー | #FF0000 | 頻繁に使われています、RBG値を２桁ずつ１６進数で表す |
| RGBカラー | rgb(255,0,0) | 赤、緑、青の光の強さで指定 |
| ＨＳＬカラー | hsl(0,100%,50%) | 色の種類を組み合わせて使う |
| 補色配色 | 反対色でコントラスト目立つ | 強調しあうので目出せたい時に使う |
HSLカラーで 0=赤、120=緑、240=青 （光の３原色）
加法混色とは
光の３原色を混ぜて、明るく白に近づけていく混色方法
| 組み合わせ | 結果色 |
| 赤＋緑 | 黄色 |
| マゼンタ（赤＋青） | 赤紫 |
| シアン（緑＋青） | 水色 |
| 赤＋緑＋青 | 白 |
減法混色
（絵具等）シアン、マゼンタ、イエロー、混ぜると黒に近づく
ウェブセーフカラー
モニターで正しく表示される２１６色
有彩色
赤、青、黄など色味の有る全ての色
無彩色
白やグレーなど色味のない色
画像
ビットマップ形式
画像を方眼紙の様に区切りピクセルの色の変化で表現する、滑らかな曲線も実際はギザギザして居ます（ジャギーと呼ばれる）
ピクセルの密度の細かさを解像度という（一般的には７２ppi）
解像度に依存して居るの意味
拡大するとぼやける事を言う
ベクター形式
点と点を線で結んで画像を表現する事を言う（拡大しても奇麗なまま）
ウェブ用の画像フォーマット
| 名前 | 読み | 拡張子 | 意味 |
| JPEG | ジェイペグ | .jpg | 写真用（軽いが画質劣化する）非可逆圧縮 |
| PNG | ピーエヌジー | .png | イラストなど、画質を保てる（可逆圧縮） |
| GIF | ジフ | .gif | アニメーション対応、２５６色画像用 |
| SVG | エスブイジ | .svg | ロゴ、アイコン用、劣化しない（ベクター形式） |
| WebP | ウェッピー | .webp | モダンブラウザ向け（高性能） |
| Flash | フラッシュ | プラグインが必要Adobe社が開発 | アニメやゲームなどの実行ファイル |
| SMIL | スマイル | 現在はあまり使われない（動画や音声用） | W3Cが提案した同期再生する為のマークアップ言語 |
| ベクター画像 | SVG | 劣化しない | 点と線の情報で描かれる |
| ラスター画像 | JPEG,PNGなど | 粗くなる | ピクセルの集まりで描かれる |
アルファチャンネル
光の３原色に加え、透け具合を表す４番目の要素（０が透明、１が不透明）
JPEGはアルファチャンネルを持たない（透過不可）、GIFは１色だけ透明に出来る半透明は出来ない
マルチメディア
マルチメディアとは
複数の情報を組み合わせて伝える技術
文字、映像、音声、アニメーションを組み合わせて使うコンテンツ
フォーマット一覧
| 略称 | 特徴 | 標準仕様 |
| GIF | ２５６色までのマニメーション可能アイコンに最適、１色のみ透過可能 | GIF89a |
| JPEG | 写真向き１６７７万色可能、非可逆圧縮（劣化あり） | ISO,JIS |
| PNG | 静止画専用、可逆圧縮（画質が落ちない）アルファチャンネル対応 | W3C |
| SVG | ベクター形式（劣化しない）XMLベース（編集も可能）UIに多用 | Ｗ３Ｃ |
| SMIL | 画像、映像を同期表示できるXMLベース記述形式 今は使われない | W3C |
| 印刷に向いた文章形式、レイアウトを保持、マルチプラットフォーム対応 | IOS |
休憩画像
練習問題
| 問題 | 回答 | 答え | 解説 |
| JPEGは失われたデータは元に戻す事の出来ない非可逆圧縮のフォーマットです | 〇 | 一度、劣化したファイルは元に戻せません | |
| PNGはＷ３Ｃで勧告されている | 〇 | 画像ファイルフォーマットです（GIFは２５６色、ウェブセーフカラーは２１６色） | |
| 色の３属性は色相、明度、彩度である | 〇 | ウェブビジュアルデザインでは出題される | |
| PDFはテキストデータ、ビジュアルデザインデータ、ベクターデータも扱える | 〇 | テキストデータは文字や記号だけで構成されている、ビジュアルデータは写真などの視覚情報、ベクターデータは図形や線など | |
| 色相環において補色とは、色相と１８０度の関係にある物をいう | 〇 | この組み合わせで、強い印象を残す | |
| 写真を軽く保存したい時に使わられる形式はJPEGで有る | 〇 | 圧縮率が高く写真に最適 | |
| 画像の一部を半透明にして背景を透かしたい場合の形式はPNGである | 〇 | アルファチャンネルに対応して居て透明や半透明が出来ます | |
| 拡大しても劣化しない形式は、SVGである | 〇 | 数式で図形を表現する為、拡大しても劣化しません | |
| マルチメディアで無いものは表計算ファイルである | 〇 | マルチメディアとは、画像、音声、静止画 | |
| アルファチャンネルが画像に付加する情報は透明度情報である | 〇 | PNG形式で使用され、０＝完全透明、１＝不透明です |
コメント