Part III：基本技術

『標準 ウェブユーザビリティ辞典』（ソシオメディア編著，インプレス発行）の後半「プロセス編」では，ユーザビリティが高いサイトを作る上で欠かせない工程を，定義フェイズ，構造フェイズ，実装フェイズ，評価フェイズに分けて詳しく説明しています．以下，この本の後半を簡単にまとめておきますが，詳細はこの本を参考にしてください．（残念ながら絶版になりましたが，Amazonなどで中古で買うことはできます．）

参考：2004年度の渡辺ゼミ3年次演習では，この本を元に「コミュニケーション学科サイト・リニューアル・プロジェクト」に取り組み，学科サイト（現在は2018年度版サイトに置き換わっています）を構築しました．

下記に書いたようなことを最終課題で全てこなすのは無理だろうと思います．でも，出来る範囲でよいから，下記のようなことを考えて，実践して，最終課題のサイトを構築してみてください．

• 何のサイトを作りたいですか？ 趣味を紹介するサイト？，サークルのサイト？，授業で学んだことを整理するサイト？
• そのサイトの目的は何ですか？ この授業の最終課題で採点されるサイトである以外に，目的を決めましょう．サークルの情報交換？宣伝？ 趣味に関する情報を整理したい？みんなに知って欲しい？ 授業の復習のため？
• そのサイトは誰が使うサイトでしょうか？（ターゲットユーザ）．サイトの目的がサークルの部員集めなら，ターゲットユーザは部員以外の学生です．サイトの目的がサークル内の情報交換なら，ターゲットユーザは現部員です．（今回の場合，ターゲットユーザはあなた自身かも．つまり，サイトを構築すること自体が目的かもしれません．）ターゲットユーザは何種類あっても構いません．あなたは，ターゲットユーザのためにサイトを作るのだということを忘れないでください．
• あなたのサイトのターゲットユーザは，サイトにどんな情報や機能を求めているでしょうか？（ユーザ要求）．ターゲットユーザを観察したりインタビューしたりアンケートをとったり，あるいはターゲットユーザを何名か集めて話し合ってみたり，色々な方法でユーザ要求を調べることができます．

• ターゲットユーザが求める情報が分かったら，その情報を揃えましょう．（KJ法を使うために）情報一点ごとに一枚のカード（付箋紙でもよいかも）を作ることをお薦めします．一枚のカードに複数の情報を書いてはいけません．サイトに何を載せればよいか分からなかったら，ブレインストーミングしてもよいと思います．時間をかけて，地道に情報（コンテンツ）を集めましょう．
• コンテンツには文字情報以外に，写真や図表もあるかもしれません．ウェブに適した大きさ（写真の縦横のサイズとファイル容量）の画像ファイルも用意しましょう．
• コンテンツが集まったら，コンテンツを分類しましょう．KJ法が役に立つと思います．仲間同士の情報を集め，グループ化します．小グループができたら，今度は中グループを考えます．最後に5グループくらいになるとよいと思います．どうしてもグループに入らない情報は仲間はずれのままで構いません．グループ化の過程で，そのグループを識別するラベルも自然と決まるはずです．
• コンテンツの中身に基づくグループ化と独立して，タスクに基づくコンテンツの分類をすることもできます．学科サイトなら，受験生が求める情報という視点で分類するわけです．あるいは，コンテンツの中身による分類をするときに，タスクによる分類という視点を混ぜてもよいかもしれません．
• ここまで来たら，サイトの大体の構造が自然と決まります．（トップページは別として）コンテンツをページごとに分類すれば，ページタイトルも自然と決まります．各ページ内のグループは，H2見出しやH3見出しの下に分類できるはずです．ここまで来たら，「コンテンツリスト」を作ってみましょう．しっくり来なかったら，分類からやり直しても良いし，足りない情報を集め直しても良いです．
• ターゲットユーザになったつもりで，欲しい情報に簡単にたどり着くことができるか，目的の情報が適切な分類の下にあるか．余分なパスを通らずにたどりつけるか，チェックしてください．
• 余力があったら，コンテンツ以外に，ページにナビゲーション機能を追加すると良いと思います．全てのページの左上に存在するロゴ（トップページ以外では，このロゴをクリックするとトップページに戻ることができる），全てのページの上部に存在する「グローバルナビゲーション」，パンくずリスト，目次，そういう部品を作ってみてください．（Googleを利用してサイト内検索の機能をつけることもできます．）
• コンテンツとは別に，どんなデザインのサイトにするかも考えてみましょう．サイトの色使いはどうしましょうか？ パステルカラー？ ピンク系？ 情報が密集した機能的なデザインがよいですか？ 楽しいデザインにしますか？ サイトのメインカラーと補助カラー(1-3色)を決めておいて，その色の範囲でサイトをデザインするようにするとサイトの統一感が生まれると思います．

• 最終課題のWebページを制作する前に，画用紙やパワーポイントでプロトタイプ（紙芝居のような試作品）を作ってみましょう．全てのページのプロトタイプを作って，デザインやナビゲーションを確認（テスト）すると良いと思います．
• いよいよサイトの作成です．適切なページタイトルや見出しをつけながら，用意したコンテンツをあなたのサイトに流し込んでいってください．見栄えはCSSで指定します．全てのページで同じCSSを使うことで，ページ間の統一性が生まれます．
• 完成したら，文法チェックや，自分を被験者としたユーザテストや，ユーザビリティのチェックをしてみてください．ターゲットユーザにテストしてもらうのも良いと思います．
• 最後に，サイトを公開しましょう．

この授業はHTML5で作成して欲しいのでこのセクションは古い情報になりますが，HTML5でも参考になることだけ書いておきます：

HTMLで文書の構造をマークアップするためには，文章に構造がある必要があります．章，節，項のようなセクション構造，箇条書きのようなリスト構造，そういう構造があって初めて，タグでマークアップすることができるわけです．ということは，ウェブで情報を公開するためには，まず情報の構造を見つけて，次にその構造をマークアップすることになります．この「構造を見つける」という作業がとても重要です．

最初に，文章の題目を考えましょう．それがtitleとh1見出しになるはずです．次に，文章を適切な単位に分けましょう．いくつかの大グループに分け，次に各大グループを中グループに分けていきましょう．そしてグループ毎に，そのグループの中身を適切に示す見出しを考えましょう．その見出しが，h2やh3になります．ulやolなどのリスト要素，テーブル要素なども適材適所で上手に使ってください．

また，ひとつのページが，本文以外に，ヘッダー（ロゴ，サイトイメージを示す画像やH1要素，サイト内検索などが含まれる），グローバルナビゲーション（サイト内の各カテゴリーにジャンプするメニューやパンくずリストなど），フッター（サイトポリシーや連絡先などが含まれる），左側や右側のカラム（メニューや広告やそのほかの機能などが含まれる）などの大きなブロックで構成されることが多いと思います．こうしたブロックはサイト内の全ページに共通したレイアウトで配置され，ウェブサイトに一貫したデザインと操作性を提供します．

HTML5が登場する前（つまり，HTML 4.01やHTML 1.0を使っていたとき）は，こうしたブロックをdiv要素で囲んでいました．機能ごとにまとめたdivブロックには，そのブロックの機能を表すid属性あるいはclass属性をつけていました．例：<div id="header">．．．</div>，<div id="h2section">．．．</div>

なお，ページ内で複数使われる機能のブロックにはclass属性を使い，1回しか使わない機能にはid属性を使います．（同じid属性が複数回出現するのは文法違反）

このようにdivブロックに分けておけば，id属性やclass属性をCSSで指定して．各ブロックごとのスタイルを作ることが容易になります．たとえば，class属性が"h2section"のブロックの見栄えは，CSSで".h2section"という規則を作って,そこで指定できます．id属性が"header"のブロックなら，CSSで"#header"という名前の規則を作って，そこで指定します．CSSの規則（セレクタ）名は，id属性ならシャープ（#）で始まり，class属性ならピリオド（.）で始まります．

自習課題にしているProgateのHTML&CSS初級編は，このdivブロックを組み合わせてページを作る方法を説明しています．「Progateで作成したサイトのソースコード（パスワード保護）」に完成版のソースコードをコピーしておいたので最終課題の参考にしてください．

HTML5では，単なるdiv要素ではなく，semanticな（つまり，意味を示す）以下の要素が導入されました．（参考：HTML5に関する情報）

<header>

ページ又はセクションのヘッダー領域（イントロダクションやナビゲーションの支援となるコンテンツ）を定義する．通常は，見出し要素がこの中に入る．

<footer>

ページ又はセクションのフッター領域（そのセクションに関する情報）を定義する．address要素などもこの中に入ることが期待される．

<nav>

ページ又はセクションのナビゲーション領域を定義する．他ページやページ内の他部分へリンクするナビゲーション・リンクを伴うセクションを示している．グローバルメニュー，目次，パンくずリストなどがこの中に入る．

<section>

ページの論理領域又はコンテンツグループを定義する．この要素で囲むことでページのコンテンツの主題をグループ化できる．各section要素の中に見出し要素があるであろう．

<article>

記事又は完全なコンテンツを定義する．「完全な」というところがsection要素との違い．完全という意味は，それだけを単独で配布したりできるような自己完結したコンテンツであると言うこと．

<aside>

二次的なコンテンツ又は関連コンテンツを定義する．その前後のコンテンツには関連しているけれども，やや本筋から離れたコンテンツが該当する．広告などもこれに該当する．

（これ以外に，メインコンテンツを表すmain要素もあります．）

つまり，HTML5以前のような<div id="header">のようなdivブロックを使わなくても，<header>要素としてヘッダー領域を指定できるようになったのです．（ProgateのHTML&CSS 中級編はこの要素を使っています．） 以下，この授業では，これらの要素を使って文書の構造を表します．

「6.2.1 文書の構造をレイアウトする」に掲載した，HTML5の要素を使ってワイヤーフレームを構成する例を下記に示します（CSSのfloatプロパティの代わりにflexboxプロパティも使っています．）．divブロックを使った図3-2のコードと比べてみてください．

「レイアウト例：画像の横にテキストを回り込ませる」にCSSのfloatプロパティやレイアウトテーブルを使ってコンテンツを横並びにレイアウトする例を書きましたが，ここでは，float属性をJSBinで説明すると共に，CSS3で利用できるようになったflexbox属性の使い方もJSBinで説明します．float属性ではなくてflexbox属性の使用を推奨します．

flexboxはfloatと異なり，横方向の他に縦方向にも配置することができます．その他にも便利な機能が満載です！

flexboxの詳しい説明：

• Webクリエータボックス：Flexboxチートシート
• Flexbox Playground
• Flexbox Patterns

いくつかのウェブページを調べて，どのような構造があるか見つけてください．見出し要素を使っていないサイトを取り上げるのが良いと思います．大きな構造（header，footer，nav，aside，main），その中にあるかもしれない中構造（見出し），もっと小さな構造（リストやテーブル）を見つけ出してください．それらの構造をどのようにマークアップするのが正しいかも考えてください．

デザイナは，文字のデザインや大きさ，画像と文字のバランスが変わることを嫌って，「画像文字」を使うことがあります．画像文字を使う場合，画像文字に絵で表現されている文字をalt属性で説明することが不可欠です．でも，本当に必要な場合にしか，画像文字を使わないでください．CSSを使いこなせば，そして最新のブラウザで表示すれば，画像文字を使わなくても，かなりのことができるのです．（BlueGriffonはWebフォントもサポートしているので，使いたいフォントを埋め込むことも可能です．）

初級編をマスターすると，上記のHTMLやCSSのソースをBlueGriffonに貼り付けたいときや，BlueGriffonのGUI画面でページ制作するのではなくソースを直接編集したいときがあると思います．

5.3.1.1 HTMLソースの編集

BlueGriffonの「ソース」ビューで編集することができますが，（編集した結果に）文法エラーがあると赤字で表示されます．また，正しいと思われるタグをサジェスチョンしてくれることもあります．（場合によっては，エラーを自力で解決するまで「プレビュー」ビューに戻ることができなくなるかもしれない．）

サンプルコードなどを貼り付けたいだけなら，（「プレビュー」ビューで）挿入したい箇所にカーソルを持って行き，「挿入」メニューの「HTML」を選び，表示されたウィンドウに直接HTMLコードを入力します．

「パネル」メニューの「DOM Explorer」を使うと，HTMLエレメント毎（正確に言うとDocument Object Modelの要素毎）に属性を追加削除したり変更したりすることもできます．間違って使ってしまったインラインスタイルを安全に消したいときは，DOM Explorerで対象要素を選び，その要素のインラインスタイルを消すことができます．（ページ内のインラインスタイル全部を削除したいときは，「書式」メニューの「すべての文字スタイルを削除」で一気に消せます．）

5.3.1.2 CSSソースの編集

BlueGriffonの「パネル」メニューから「スタイルシート」ダイアログを表示し，コードを挿入したいCSSファイルをダブルクリックするとCSSのソースが表示されます．そこにCSSの命令を書き込んだり他からコピーした命令を貼り付けたりして，「Commit Changes」とすれば，CSSに反映されます．

5.3.1.3 HTMLとCSSの連携

HTMLとCSSを別々に編集するときも，両者の連携に気をつけてください．HTMLとCSSのペアを結び付けるのは，HTMLの（divブロックなどの）class属性の値（例：LTheader）とCSSのスタイル規則の名前（例：.LTheader）です．両者が（HTMLのclass名に相当することを示しているCSSの「.」を除いて）一致していなければなりません．id属性の場合は，CSSスタイル規則は#で始まります（例：#TOC）．

5.3.1.4 JavaScriptの編集

HTMLページ内に埋め込んだJavaScriptは，「パネル」メニューの「Script Inspector」で編集することができます．

簡単です．エディタやオーサリングツールで，HTMLファイルやCSSファイルを開いて編集するだけです．情報処理教室ならBracketsを使用できます(「Bracketsの使い方」)．Windowsならメモ帳でも良いし，Notepad++というフリーなエディタ（日本語で使う場合は窓の杜にあるEUC-JP対応版が便利かも）でも良いと思います．

同じHTMLファイルをBlueGriffonと他のソフトで同時に編集することはできないことに注意されたし．必ずBlueGriffonを終了してから他のソフトで編集すること．

フォルダごとUSBメモリにコピーして，それをWindowsパソコンやMac OS XパソコンにインストールしたBlueGriffonやBracketsなどのソフトで編集し，完成したらフォルダごと情報処理教室にコピーし戻せばよいだけです．