入門Webデザイン 2 Webデザイン

CG検定勉強メモ資格勉強

2-1 Webサイトのしくみ

2-2 コンセプトメイキング

  • コンセプトの構成要素

    • 目的
    • ターゲット
    • 内容
    • 手段
    • 予算
  • 【所感】PMBOKのプロジェクト憲章に似ている

    • プロジェクトの目的
    • プロジェクトのゴール(測定可能な成功基準)
    • プロジェクト概要、作業範囲
    • 前提条件・制約要件
    • ハイレベル要求事項
    • 予算(概算から本予算へ)
    • リスク
    • 要約マイルストーン
    • ステークホルダー(利害関係者)をリスト化
    • プロジェクトマネージャーの名前
  • 最重要

    • 目的がないと何をしてよいのか考えることができない
    • 統一性

2-3 情報の収集・分類・組織化

情報からコンテンツをつくっていく

収集

  • 資料収集

    • Webサイト
    • 書籍
    • etc.
  • 調査・取材・観察・フィールドワーク

    • 自分自身で調査・体験
  • アイデア・思考過程の記録

    • 企画書、記録等

分類と組織化

  • 位置

    • 例: 国別
  • 50音

    • 例: タグ一覧
  • 時間

    • 例: 月別記事一覧
  • カテゴリ

    • 例: ECサイトのカテゴリ別商品一覧
  • 連続量

    • 例: 歴代売上チャート

2-4 情報の構造化とアクセスルート

情報をどう提供する

構造化

  • ツリー型

    • 分類・組織化した情報をWebサイトの構造に反映した形
  • リニア構造型

    • 例: 会員登録の手順による構造化
  • ハイパーテキスト型

    • 例: 単語リンク等

混在して使われるのが普通

アクセスルート

「導線」とも

  • シーケンシャルアクセス

    • ツリー、リニア構造をなぞる場合など
  • ランダムアクセス

    • ハイパーテキスト型
    • ほか、ツリー/リニア構造におけるパンくず、グローバルナビ等
  • ダイレクトアクセス

    • サイト内キーワード検索等

2-5 さまざまな閲覧機器

PCとスマートフォンの違い

特徴 PC SP
情報処理能力 同程度 同程度
容量 同程度 同程度
画面
利用形態の自由度

両機器への対応の必要性と対応手法

  • 同等の情報を提供する必要がある

    • 2015時点で利用者数はほぼ同数
  • 画面の大きさが異なるので同じデザイン、同じレイアウトというわけにはいかない

主要な対応手法:

個別URL 動的な配信 レスポンシブ
URL 個別 共通 共通
資材 個別 個別 共通
利点 各機器に合わせて作り込める 各機器に合わせて作り込める HTMLやCSSが1セットで済む
URL間違わない URL間違わない
欠点 URL間違いうる HTMLやCSSが複数セット(CDNにより少しマシになる) 最大公約数的なデザイン
HTMLやCSSが複数セット データ重くなりがち
ユースケース 情報量少なめ、凝った仕掛け 情報量少なめ、凝った仕掛け 情報が多く、更新頻度が高く、PC/SPで同等のものを提供したい
キャンペーンサイト キャンペーンサイト コーポレートサイト

2-6 Webページの画面構成

前提: 視線は左から右、上から下。重要なものが先に目に入るように

PC

袖メニュー型 上部メニュー型 逆L字型
重要 (*) ナビゲーション 上部ナビゲーション、次は(*)
コンテンツ自由度 x o x
多くの選択肢可能 o x o

(*) 袖メニューを左右どちらに置くかはナビゲーション/コンテンツの重要度による

  • ナビゲーションが重要な場合は左袖メニュー
  • コンテンツが重要な場合は右袖メニュー

SP

前提: 画面が小さいのでコンテンツエリアとナビゲーションエリアを同時に画面上に置くのは困難

ドロップダウン(*) スライド タブ
柔軟なサイズ変更 o x x
多くの選択肢が可能 o o x
アクション数 x 多い x 多い o 少ない
ユースケース 階層構造 同格の選択肢 同格の選択肢

(*) 亜種: ドリルダウン

  • ドロップダウンにおいて、ナビゲーション要素を選択すると下位のナビゲーション要素で置き換わるもの

ナビゲーション手法

  • グローバルナビゲーション

    • 全てのページ上で同じ位置にレイアウトされるメニュー等
  • ローカルナビゲーション

    • 特定コンテンツ内のナビゲーション
    • 例: 子カテゴリ
  • 直接ナビゲーション

    • 階層構造と関係なく別のコンテンツに移動できるリンク
    • 例: お知らせ
  • リモートナビゲーション

    • どのページからでもアクセス可能なナビゲーション
    • 例: ログイン、サイトマップ、問い合わせ
    • 【疑問】グローバルナビとの違いは?メニューではないこと?
  • パンくずリスト(階層ナビゲーション)

    • 上位階層を表示することで現在位置を示す
  • Webサイト内検索機能

2-7 素材の制作

文字

  • ワープロ等と決定的に異なる点: 最終的な表示が閲覧者側のフォント環境に左右されること

    • 【補】確実に制作側想定のフォントで表示するために、CSSにフォントをdata-urlで埋め込んだりする
  • 行間等も環境依存
  • EMボックス

    • 【補】歴史的に、文字Mの幅から来ているらしい
    • CSSのfont-sizeで指定しているのはEMボックスの高さ
    • 個々の文字がEMボックスの中でどれだけの高さ/幅を占めるかはフォント次第
  • 行ボックス

    • 文字が行を構成するときに生成する仮想の四角
    • ベースラインに各文字の下端が揃う
    • CSSのline-heightで指定しているのは行ボックスの高さ

写真

補正

  • トリミング

    • 強調
    • ポートレート/ランドスケープ変換
  • 切り抜き

    • 背景消すやつ
  • トーンカーブによる補正

    • S字にして明るい部分をより明るく、暗い部分をより暗くしたりする
    • データが欠損するので多用禁物

      • ヒストグラム上の隙間として現れる
  • 彩度

    • 食品や花は高いほうが美味しそう/みずみずしく見えるとされる
  • レタッチ

    • 原義はあるものを消す/ないものを足すこと

      • シミを消す
      • 料理の湯気を増やす

保存形式

有名どころと頭文字の意味

  • GIF: Graphics Interchange Format
  • JPEG: Joint Photograhic Experts Group
  • PNG: Portale Network Graphics

ピクトグラムとダイヤグラム

  • ピクトグラム

    • 言葉の代わりとなって直感的・迅速に情報を伝える画像
    • Newアイコン、検索の虫眼鏡等
  • ダイヤグラム

    • 情報を視覚化したもの
    • 表、グラフ、地図等

アニメーションの利用

実現手法

  • GIFアニメーション
  • Flash
  • JavaScript
  • 【補】CSS3なら単体でアニメーションできる

基本的なもの

  • 2フレームアニメーション

    • 2枚の画像を切り替えるやつ
  • ループアニメーション

    • 複数枚で繰り返すやつ
  • プログレスバー
  • ロールオーバ

    • マウスオーバするとクリックできそうな感じを出すやつ
  • セレクトメニュー

    • select要素。押下すると全項目表示
  • ドロップダウンメニュー

    • 押下するとニュッと下りてくる

動画像の利用

配信方式

  • ストリーミング配信

    • ビデオオンデマンド
    • ライブオンデマンド(ライブストリーミング)
  • ダウンロード配信

技術

  • Windows Media

    • DRM: Digital Rights Management (ディジタル著作権管理)技術を備える
  • QuickTime

    • OS X用だがWinでも再生可能
  • Flash Video

    • 【補】もう終わり
  • MPEG

    • 策定

      • ISO: International Organization for Standardization
      • IEC: International Electrotechnical Commission(国際電気標準会議)
    • よく使われるのはMPEG-4
    • 【補】mp4にもDRMを掛けられるらしい。m4v, m4a。iTunes限定

音の利用

基本的なもの

  • サイン音

    • クリック音、警告音等
    • ジングル

      • ユーザの注意を引くための単純な音
    • ブリッジサウンド

      • 場面遷移などでBGMを自然に繋ぐために使われる音
  • 効果音

    • 現実音

      • 風、雨など
    • 非現実音

      • ニュータイプのアレなど
  • ナレーション
  • BGM

技術

  • WAVE

    • win用
  • AIFF

    • mac用
  • MP3

    • 1/10程度圧縮
  • RealAudio

    • ストリーミング用
  • WMA

    • Microsoft製ストリーミング用
    • DRM備える

2-8 テストと修正

テストと修正

  • リンクテスト
  • Webブラウザ別動作テスト
  • 環境ごとの動作テスト

    • OSまたいで確認
  • インタラクティブ要素などの動作テスト
  • パフォーマンステスト

    • Webサーバにアップロードし、想定の負荷をかけて応答速度等で評価

利用者への配慮

  • コンセプトメイキングや設計の段階で各種思想を盛り込んでおく

    • ユーザビリティ
    • ユーザーセンタードデザイン
    • アクセシビリティ
  • 怠ると最終段階でちゃぶ台がひっくり返りがち
  • テスト段階で実際に機能しているか評価する

2-9 評価とメンテナンス

評価

  • ヒット数

    • 参照された全ファイルカウント
  • ページビュー

    • 参照された全HTMLカウント
  • セッション数

    • 訪問者延べ人数
  • ユニークユーザ数

    • 訪問者ユニーク人数

更新とメンテナンス

  • 更新

    • コンテンツの追加削除、修正等
    • 最重要。更新計画をたてて定期的に
  • メンテナンス

    • リデザインとリニューアル
リデザイン リニューアル
コンテンツ大幅変更 x o
デザインやシステム面変更 o o