見る人に優しいホームページ作 り NTCommittee2 関東勉強会 ブルーミング 花井貴久子 2002 年 11 月 30 日.

Presentation on theme: "見る人に優しいホームページ作 り NTCommittee2 関東勉強会 ブルーミング 花井貴久子 2002 年 11 月 30 日."— Presentation transcript:

1 見る人に優しいホームページ作 り NTCommittee2 関東勉強会 ブルーミング 花井貴久子 hanai@blm.jp 2002 年 11 月 30 日

2 2 NTCommittee2 関東勉強会 はじめに 見る人に優しいホームページって？ 軽い 見やすい 使いやすい 目的の情報を探しやすい どんなことを考慮して作って行けば良い？

3 2002 年 11 月 30 日 3 NTCommittee2 関東勉強会 1. ホームページ作成の現場 いろいろな問題点 ワークフローを作る 制作に入る前に決めること デザイン・レイアウトでの注意点 カラーマネジメント HTML/ 画像作成時の注意点

4 2002 年 11 月 30 日 4 NTCommittee2 関東勉強会 2. いろいろな問題点 プランニング中に生じる問題 制作者側の抱える問題 スケジュール 予算

5 2002 年 11 月 30 日 5 NTCommittee2 関東勉強会 3. ワークフロー（ 1 ） 企画 対象者と目的と方法 やりたいこと（目的）を どのように伝えるか（方法）を企画・検討する。 ヒアリング → コンセプトメイキング → マーケ ティング → これまでのプロセスをまとめる

6 2002 年 11 月 30 日 6 NTCommittee2 関東勉強会 3. ワークフロー（ 2 ） 設計・デザイン 情報デザイン・システム設計 サイトマップの作成 インターフェースデザイン・ ビジュアルデザ イン 運用開始後のメンテナンス方法も考慮

7 2002 年 11 月 30 日 7 NTCommittee2 関東勉強会 3. ワークフロー サイトマップ 作成例

8 2002 年 11 月 30 日 8 NTCommittee2 関東勉強会 3. ワークフロー（ 3 ） 各コンテンツの準備・製作 Web 用の文章・コピー Web 用の編集 ページ製作 HTML 作成 画像・アニメーション作成

9 2002 年 11 月 30 日 9 NTCommittee2 関東勉強会 3. ワークフロー（ 4 ） メンテナンス 誰がどれくらいの頻度でどのように行うのか 運用と問題発生時の対応

10 2002 年 11 月 30 日 10 NTCommittee2 関東勉強会 4. 制作に入る前に決めること 画面サイズの決定 ブラウザの決定 HTML のバージョン プラグインの有無 ツールは何を使うか？ その他

11 2002 年 11 月 30 日 11 NTCommittee2 関東勉強会 4-1. 画面サイズの決定 800×600 ピクセルが主流 その他のサイズ 640×480 ピクセル 1024×768 ピクセル 印刷に対応するか、しないか 幅は固定にするか、可変にするか 左寄せにするか、中央揃えにするか

12 2002 年 11 月 30 日 12 NTCommittee2 関東勉強会 4-2. バージョンの選択 ブラウザの決定 ターゲットユーザーが最も使用していると思わ れるブラウザを選択する。 HTML のバージョンの決定 ブラウザに合わせた HTML のバージョンを選ぶ

13 2002 年 11 月 30 日 13 NTCommittee2 関東勉強会 4-3. プラグインの有無 対処方法はあらかじめ決めておく プラグインのバージョンが古い場合 プラグインがインストールされていない場合

14 2002 年 11 月 30 日 14 NTCommittee2 関東勉強会 4-4. ツールは何を使うか 複数人数で作業を行う場合には統一してお くと後々便利。 HTML 作成・画像加工など。 文字コードの統一

15 2002 年 11 月 30 日 15 NTCommittee2 関東勉強会 4-5. その他 共通項目について決めておくとメンテナン スの際役に立ちます。 使用色について タグの記述方法（大文字・小文字・インデン ト） フォルダ名・ファイル名 チェック項目を決めておく

16 2002 年 11 月 30 日 16 NTCommittee2 関東勉強会 5-1. デザイン・レイアウトの注 意点 デザインのラフ作成は必須 最適なレイアウトとナビゲーション サイトの目的や内容の量を想定 コンテンツが増えた時の対応方法 更新しやすいサイトを作る

17 2002 年 11 月 30 日 17 NTCommittee2 関東勉強会 5-2. レイアウトパターン（ 1 ） 横分割パターン（メニュー 左） 縦分割パターン（メニュー 上）

18 2002 年 11 月 30 日 18 NTCommittee2 関東勉強会 5-2. レイアウトパターン（ 2 ） 横分割パターン（メニュー 右） 縦分割パターン（メニュー 下）

19 2002 年 11 月 30 日 19 NTCommittee2 関東勉強会 6. カラーマネジメント メインカラー（ベースカラー）、サブカ ラー、アクセントカラーの決定 Web カラー以外の色の扱い 見やすい色、見にくい色の把握 薄い色は液晶で判別できない

20 2002 年 11 月 30 日 20 NTCommittee2 関東勉強会 7. HTML ／画像作成時の注意点 （ 1 ） タグのチェックは念入りに。 ツールを使って HTML を組む場合、 CSS のクラ ス指定など、共通の属性が重複してしまう場合 があるので注意。 テーブルタグの扱いに注意 テーブルを入れ子にしすぎないように、適度な 分割が必要。

21 2002 年 11 月 30 日 21 NTCommittee2 関東勉強会 7. HTML ／画像作成時の注意点 （ 2 ） 文字の大きさ・詰めに注意 Macintosh と Windows ではディスプレイの解像 度が異なる場合があるので注意が必要です. 適度な余白を作る

22 2002 年 11 月 30 日 22 NTCommittee2 関東勉強会 8. カラーコーディネート（ 1 ） 色選びに困った時は PCCS （ Practical Color Co-ordinate System ） を使う （財）日本色彩研究所が 1964 年に発表した色 彩調和を主な目的としたカラーシステム。この システムでは、明度と彩度、トーンという概念 から、色相とトーンの 2 系列で色彩調和の色彩 列を表示します。

23 2002 年 11 月 30 日 23 NTCommittee2 関東勉強会 8. カラーコーディネート（ 2 ） 明度、彩度、トーンのバランスで色を選ぶ 明度 色みをもたない無彩色 で作成した明るさの基 準。これと同じ明るさ の有彩色を同じ明るさ とする。 彩度 色の明るさの度合い。 色みの強さの度合い。

24 2002 年 11 月 30 日 24 NTCommittee2 関東勉強会 8. カラーコーディネート（ 3 ） トーン 明度と彩度が複合された色の 表し方

25 2002 年 11 月 30 日 25 NTCommittee2 関東勉強会 8. カラーコーディネート（ 4 ） 共通（類似）／対照の法則を使って配色す る 色みについて考える トーンについて考える 色の持つイメージを把握する