デザインマスター【３級】学習ノート / みっち

ＣＳＳの役割と書式
　　　　ＣＳＳとは・・・Ｗｅｂページの見栄えを指定し、視覚的な価値を与えるための言語

◎　ＣＳＳ（Cascading Style Sheets)の役割
　　本来の（Ｈ）ＨＴＭＬで制作されたＷｅｂページがどのように表現されるかは
　　デバイスやブラウザによるが、
　　ＣＳＳを利用することで見栄えをコントロールすることができる

◎　（Ｘ）ＨＴＭＬとＣＳＳの関係
　　マークアップ(構造）あってのスタイルシート（見栄え）であることが前提にくる
　　つまり、（Ｘ）ＨＴＭＬの役割をこなしてこそ、ＣＳＳの本領を発揮するということ

◎　ＣＳＳの書式
　　・セレクタ（selector)-スタイルの適用対象
　　・プロパティ（property)-スタイルの種類
　・値（value)-与える効果の具体的な種類や程度

　◇　p要素の色を赤に指定する場合
　　　「ｐ{ color: red; }」
　　この場合、pがセレクタ、colorがプロパティ、redが値である
　　そして、プロパティと値のセットを「宣言（declaration）」と呼ぶ

◎　ＣＳＳの適用方法
　　（Ｘ）ＨＴＭＬにＣＳＳを適用するには４つの方法がある
　　①　link要素で外部ファイルを参照
　　②　＠importルールで外部ファイルを参照
　　③　style要素でＣＳＳソースを指定
　　④　style属性でＣＳＳソースを指定

　　①②の方法が望ましい
　　③④はそのＷｅｂページでしか有効ではなく、メンテナンス性が低下するというデメリットもある

◎　ＣＳＳの適用メディア(メディアタイプ）
　　link要素やstyle要素ではmedia属性で適用メディアを特定できるが、
　　対応しているかどうかは、各種デバイスやブラウザによる
　　「screen」- ＰＣスクリーン
　　「print」- プリンタなど印刷メディア
　　「handheld」-　携帯端末
　　「tv」-　テレビ
　　「projection」-　プロジェクター
　　「aural」-　音声出力　　　などがある

◎　スタイルの継承
　　ＣＳＳにはある要素に適用したスタイルは子孫要素に自動的に引き継がれるという特徴がある

◎　スタイルの優先順位
　　スタイルの適用対象が競合している場合、
　　「特殊性」- 一般的なスタイルよりも個別的なスタイルを優先する
　　「読み込み順序」- 後から読み込んだスタイルを優先する

　　という
２つのルールによって優先順位が決定される
　　また、値の後ろに「!important」をつけることで「スタイルの作り手」というルールによって
　　優先させることもできる

2010.01.18：dmmitchi：[メモ/□　　３　級　　　]

マークアップの種類

◎　head要素に含める内容
　・　title要素(ページタイトル）
　　　head要素のなかで必ず一度だけ指定する

　・　meta要素（メタ情報）
　　　そのwebページ自体の情報を定義する。

　・　link要素(文書間関係）
　　　そのwebページから見てほかのページがどのような役割かを定義する。

　・　style要素（スタイルシート）
　　　CSSのソースコードや外部ファイルを指定する。

　・　script要素（スクリプト）
　　　JavaScriptなどのソースコードや外部ファイルを指定する。

◎　body要素に含める内容
　body要素を構成するものには、大きく分けて「ブロックレベル要素」と、「インライン要素」の2種類がある

◎　代表的なブロックレベル要素
　・　h1-h6要素(見出しレベル１－６）
　　　見出しにはh1が大見出し～h3小見出しがあり、h4～は必要に応じてそれ以下の見出しに利用できる

　・　p要素(パラグラフ）
　　　パラグラフとは｢文章のひとかたまり」のことである

　・　blockquote要素(引用文）
　　　テキストをまとまった引用文として定義するために利用する　　　

　・　address要素（作成者情報）
　　　webページのフッター部分で作成者のい連絡先や著作権情報を指定するのに利用する

　・　ul要素（順不同リスト）
　　　項目を順不同で並列的に列挙するタイプのリスト

　・　ol要素（順序リスト）
　　　項目を順序や順番として定義するタイプのリスト

　・ dl要素（定義リスト）
　　　｢用語」と「内容」で構成するタイプのリストを定義リストという

　・　table要素（表）
　　　表の一つ一つの項目を「セル（cell）」、横方向のセルの並びを「行（row）」縦方向の並びを「列（column）」と表現する

　・ form要素(フォーム）
　　　ユーザーによる入力や選択が可能なフォーム

◎　代表的なインライン要素
　・　a要素(アンカー）
　　　アンカーを定義するための要素

　・　img要素（画像）
　　　画像を埋め込むための要素

　・　br要素（改行）
　　　文の途中で改行するための要素

　・　em要素、strong要素(強調）
　　　テキストを強調するための要素 em＞strong

　・　グループ化要素
　　　ブロックレベルでのグループ化にはdiv要素、インラインでのグループ化にはspan要素をそれぞれ利用する

◎　コメントと文字参照

　　（X）HTMLには任意のコメントを入れることができる
　　コメントはwebブラウザには表示されない内容であり製作者が目印やメモ書きとして利用する

2010.01.18：dmmitchi：[メモ/□　　３　級　　　]

Ｗｅｂ標準とページ制作

Ｗｅb標準と（Ｘ）ＨＴＭＬ+ＣＳＳ

　◇　Ｗｅｂ標準とは
　　　　Ｗｅｂで標準的に利用される技術の総称で、Ｗ３Ｃという国際団体が定めています

　◇　Ｗｅｂ標準に準拠されたサイト制作
　　　　ＳＥＯやアクセシビリティ、メンテナンス性、互換性など、Ｗｅｂサイトのポテンシャルを最大限に活かすためには、
Ｗ３Ｃの技術仕様やガイドラインに基づいて制作するのが不可欠だという認識が広がってきました

（Ｘ）ＨＴＭＬでページの構造→アクセシビリティをなるべく損なわないように工夫
ＣＳＳでＷｅｂページの見栄えを指定する→ＳＥＯやアクセシビリティのメリットに直結

テーブルレイアウトとフルＣＳＳレイアウト

これまでＷｅｂページのレイアウトはテーブル(表）で実現することが多かったが
現在ではＣＳＳでレイアウトするケースが増えてきている
テーブルレイアウトはソースコードの増大といったデメリットがありましたが
フルＣＳＳレイアウトでは比較的短く合理的なソースでのページ制作が可能

動作環境とＷｅｂオーサリングツール

さまざまな機能を使って作業を行うことに加えて、制作スキルを均一化するという目的があります
ＣＳＳレイアウトの再現力にも注意が必要で、ツールの中には編集画面上で崩れるものがあります

全てをツールまかせにするのではなく、ソースコードを見ただけで作業できるレベルになることが
より高い品質のＷｅｂページを制作するために不可欠です

クロスブラウザの課題

さまざまなＷｅｂブラウザがあり、あるＷｅｂブラウザは適切に表示されるが、
一方では崩れやズレが発生するといったことが多々あります

制作者はあらかじめきちんと表示され動作することをチェックする必要がありこれを「クロスブラウザ」と表現します

新	ＣＳＳサポートのよいＷｅｂブラウザ	ＦｉｒｅＦｏｘ１・２、Ｏｐｅｒａ８．９、Ｓａｆａｒｉ１．２、Ｎｅｔｓｃａｐｅ７
	ＣＳＳサポートにやや問題があるＷｅｂブラウザ	Ｗｉｎ　ＩＥ　７
	ＣＳＳサポートにそれなりに問題があるＷｅｂブラウザ	Ｗｉｎ　ＩＥ　６
	ＣＳＳサポートにかなり問題があるＷｅｂブラウザ	Ｗｉｎ　ＩＥ　５．５、Ｗｉｎ　ＩＥ　５、Ｍａｃ　ＩＥ　５
古	ＣＳＳの適用対象に含めないＷｅｂブラウザ	Ｗｉｎ　ＩＥ　４、Ｍａｃ　ＩＥ　４、ＮＮ　４

古いＷｅｂブラウザを含むターゲットにする場合はＣＳＳをきわめて限定的な使い方をし、テーブルレイアウトを採用するやり方が一般的です

※　オーサリングツールとは　※
Ａｄｏｂｅ　Ｄｒｅａｍｗｅａｖｅｒ、Ｍｉｃｒｏｓｏｆｔ　ＦｒｏｎｔＰａｇｅ、ＩＢＭホームページビルダー等
タグ入力支援、ＣＳＳコーディング支援に特化したツール

参考書ウェブの仕事力が上がる標準ガイドブック2 Webデザイン

2009.12.12：dmmitchi：[メモ/□　　３　級　　　]

音声素材

音声データの形式

　◇　ＭＩＤＩ形式(テキスト形式）→電子化した楽譜のようなもの
　◇　サウンドデータ形式（バイナリ形式）→録音済みのメディアをファイル化して流通させる

ＭＩＤＩ形式は再生に装置に内蔵したソフトウエア音源や、外部接続した音源が必要
再生する機器やソフトウエアの性能によって割り当てられる音源の質が変わる
　　→携帯電話の着信メロディや通信カラオケのファイル交換方式として活用

サウンドデータ形式は、人間の肉声も取り扱うことができる
どのサウンドプレイヤーで再生しても、聞こえる音声は同じである

つまり、
データ形式によっては環境で再生結果が変わることがある
と、いうことです

音声のデジタル化

　サンプリング
　　アナログ音声の周波数をデジタルのビットに割り当てること
　　単位をHz（ヘルツ）で表され、数字が多くなると音質が高いがファイルサイズが増大する

　Ｗｅｂコンテンツで主に用いられるサウンドデータ形式は

　◇　ＭＰ３（高圧縮の音声形式）
　◇　ＷＡＶ（非圧縮データ形式なので、オリジナルの音声保存に適している）
　◇　ＡＡＣ（高音質で圧縮率が高い）
　◇　ＲｅａｌＭｅｄｉａ（圧縮と再生の方式が１つのコンポーネントとして提供）
　◇　Ｗｉｎｄｏｗｓ　Ｍｅｄｉａ（RealMedia同様）

参考書ウェブの仕事力が上がる標準ガイドブック2 Webデザイン

2009.11.30：dmmitchi：[メモ/□　　３　級　　　]

写真素材

作業工程で異なるフォーマット

　デジタルカメラで撮影することが一般的になった昨今、ＲＡＷ形式による撮影が可能になりました

□□　ＲＡＷ形式とは
アナログ写真のフィルムに該当するファイル形式です。
ファイルサイズが大きいので処理にも時間がかかります。

ＲＡＷ形式はカメラに付属のアプリケーションや画像処理ソフトウエアで現像処理を行います。
印刷物とＷｅｂ素材両方に利用する場合、画質や色見の変更が自由なＲＡＷ形式が利用しやすいです

Ｗｅｂ上でのみの利用に限定した素材であれば互換性の高いＪＰＥG形式による撮影が望ましいのですが
上書き保存をするだけでも圧縮してしまうために、画質が劣化することから、
画質調整などは圧縮機能のない形式に置き換えて保存したうえで行うようにします

取り込み(撮影）時の注意点（デジタルカメラ）

　デジタルカメラでの撮影は
①　撮影モード
②　光量

この二つに注意すると良い。
ＲＡＷ形式以外の保存形式の場合、画質は設定した撮影モードの設定で大きく変わりますので
最初から劣化した状態で撮影をしてしまうと、補正が難しいので十分に気をつけます

取り込み時の注意点（スキャナー）

　雑誌やポスター等、印刷原稿から写真を取り込む場合、必ず出るのが網点です
　網点は使用原寸から拡大スキャンし、あとでピクセル寸法を縮小して目立たなくなるように工夫します

□□　網点とは
　　印刷物は色の濃淡で表現されたドットの集まりです
　このドットのことを網点（あみてん）と呼びます

参考書ウェブの仕事力が上がる標準ガイドブック2 Webデザイン

2009.11.18：dmmitchi：[メモ/□　　３　級　　　]

画像素材

Ｗｅｂコンテンツで使用する画像データ

　Webコンテンツで標準的に使用されているビットマップデータ形式はJPEG、GIF、PNGの３形式ですが
大抵、写真はJPEG、
ドット絵などの階調が少ないものはGIFといったように
この２種類でほぼ賄えるのが現状です

JPEGの特徴
　商品写真など豊富な色数を必要とする要素にはJPEG（Joint Photographic Experts Group）が適しています
　画像編集ツールで適切な圧縮画像を書き出すことができますが非可逆圧縮データであるというマイナス面も持ち合わせています
　一旦ファイルサイズを小さくすると画質が下がり元には戻らなくなってしまうのです

　こうしたことから製作現場では非可逆圧縮形式の画像をオリジナル素材とせず、汎用性のある形式で画像を保持することが望ましいとしています。
　しかしＴＩＦＦ形式で保存した画像は一般的にファイルサイズが大きいので、
　メール形式などで送受信するには
　画像を劣化させずにコンパクト化できるＰＮＧ形式が適しています

※JPEGの仲間でJPEG２０００というフォーマットが国際規格に制定されています
JPEG２０００は
　圧縮時のにじみを軽減し、JPEGよりも画像が良く圧縮率も向上しています
　著作権情報を個々の画像に添付することが可能です

写真画像などの複雑な情報にはJPEG、簡単なグラフィック、イラストにはGIFが適しています
　

ＧＩＦの特徴
　ＧＩＦ(Graphic Interchange Format)は情報通信向けに作られました
　８ビット画像で２５６色まで色数を保持できるますが、異なる表示環境では４０色について同じ色を表示することができません
よって、Webコンテンツで使用するＧＩＦは実質２１６色しか使えません。（この２１６色のことをＷｅｂセーフカラーと呼んでいます）
ＧＩＦは使用中の任意の色を透明色にすることができます。（これを透過処理、透過ＧＩＦと呼びます）
撮影時に写りこんだ背景を切り抜くテクニックに利用します

ＰＮＧの特徴
　ＰＮＧ(Ｐｏｒｔａｂｌｅ　Ｎｅｔｗｏｒｋ　Ｇｒａｐｈｉｃｓ）は、１９９６年にＷ３Ｃが、２００３年にＩＳＯが標準査定した配信用画像の保存形式です
最大２５６色の色を保持できる８ビットの形式と、フルカラーを保持できる２４ビット形式＋アルファチャンネルの２形式が利用されています

特に２４ビット形式＋アルファチャンネル形式は半透明のイメージを使えることから、表現力のあるＷｅｂコンテンツつくりに活用が見込まれています
ＰＮＧの書き出しには多くの画像編集ツールが対応しています今後、表示可能なＷｅｂブラウザのシェアがあがればＰＮＧ形式を積極的に使うことも検討したい

-----------------------------

読み込み速度を上げて
レスポンスを早める事が重要になるため、サイズが最も小さくなる種類を選択するよう努めます

参考書ウェブの仕事力が上がる標準ガイドブック2 Webデザイン

2009.11.17：dmmitchi：[メモ/□　　３　級　　　]

テキスト素材

魅力的でわかりやすいテキストが重要です

　Ｗｅｂコンテンツにおけるテキストの制作にはさまざまな担当者が関わります
　＜　執筆　＞
　○　コピーライティング
　　　見出しやキャッチコピーを書く作業であり、専門家に発注する場合もあります
　　　信頼感や安心感をアピールしたい場合や、お買い得感をアピールしたい時に、
　　　目的に合わせたのキーフレーズリストを用意しておくと良いでしょう。

　○　文章ライティング
　　　テーマに沿って構成や展開を工夫しながら文章を書く作業であり、短い文章から
　　　数ページにわたる長い文章までをコンテンツとして用意する場合もあります
　　　もちろん漢字や送り仮名、
　　　用語・表記ルールの知識はもちろん５Ｗ１Ｈなどのライティングスキルを必要とされます

　文章体裁の整備はサイト全体の信頼感につながるためきちんと用語・表記ルールを決めるのが望ましいです
　ＷｅｂコンテンツとしてのテキストにはＳＥＯや読み手のリテラシー(処理能力）を考えたライティングが求められます

　○　ＳＥＯライティング
　　　ＳＥＯを意識したコンテンツライティングのことですが
　　　検索エンジンが理解しやすいライティングということは、人も理解しやすいということなので、情報が伝わりやすい形式で文章を書くということがとても大事です
　　　

　＜　編集　＞
　テキストをコンテンツとしてまとめる作業のことです
　執筆者とは別の人間が携わる（制作会社など）ことが普通であり
　字数や段落を調整し、ほぼ完成した形のデモページとしてまとめます

　＜　校正　＞
　テキストの手直しなどを行う作業のことです
　一通り出来上がったテキストについて、誤字・脱字のチェックのような基本的な作業から
　テイストを崩したり前後文脈に齟齬（そご）がないか確認する作業を行います
　著作権への抵触などの最終確認が必要な場合もあります

テキストコンテンツの改善ポイント
　

段落、行間、１行辺りの文字数	ユーザーのストレスに繋がりやすいため横幅を適度に狭めたり、段組みなどのレイアウト改善を行います
フォントのサイズや種類	フォントのサイズや種類は読みやすさに直結します。固定にせずユーザーが自由に大きさを変更できるよう設定しても良いでしょう
文字色と背景のコントラスト	色のコントラストが保たれていないと文章が読みにくい
図表化、リスト化	文章での説明よりも図表やリストの方がわかりやすいこともあります。
見出しレベルの見栄え	６種類の見出しがありますが、大きさの要素の違いをわかるようにすることでユーザーの混乱を防ぐことができます

その他
　　取材・インタビュー・翻訳

　　コミュニケーションスキルなどを要し
　　取材をしたり、イベントに参加してレポートを書くことは高度な作業です
　　グローバルな展開をしている企業サイトでは日本語を外国語に翻訳することも求められます

参考書ウェブの仕事力が上がる標準ガイドブック2 Webデザイン

2009.11.16：dmmitchi：[メモ/□　　３　級　　　]

Ｗｅｂコンテンツを構成する素材

Ｗｅｂコンテンツはテキストや画像などの素材で構成されているので
同じ素材でも
「情報を伝達する要素」と「装飾的な要素」といったそれぞれの意味をもった使われ方をしています
適切に見分けることが重要になります

情報としての画像
　商品の画像
　社長近影
　社屋
　会社までの地図　など

画像素材は目で見る情報です。
文字では伝えきれない内容のものを画像表示することで
画像情報として扱われています
ユーザーはこれらの画像をコピーしたり友人と共有したりする可能性があることから
再利用しやすい状態であることが望ましいといえます

装飾としての画像
　背景画像
　飾り　など

コンテンツとして扱われないよう直接ＨＴＭＬに埋め込まずに
ＣＳＳで指定して背景として表示させる方法が妥当です

一方
視覚障害者など視覚的に情報を取得できないユーザーにはこれらの画像として提供することに何ら意味をなさないので
聴覚要素を配慮し、取り扱い方針を考えなければなりません

参考書ウェブの仕事力が上がる標準ガイドブック2 Webデザイン

2009.11.16：dmmitchi：[メモ/□　　３　級　　　]

コンテンツマッピング

コンテンツマッピングとは
　既存コンテンツの把握はサイト設計のもっとも基本的なプロセスです
　Ｗｅｂサイトの構成されているコンテンツを洗い出し、分類と整理を繰り返します
　これによってできた「表」をコンテンツマトリックスと呼びます

コンテンツマッピングで重要なのは
　プロセスと成果
時間をかけ、利用できる情報を分類していきます

コンテンツの整理を進める上で収集したコンテンツは
モニター上で読みやすい適切な長さ適切な表現になるように、編集する必要があります

コンテンツマトリックス
　コンテンツ公開にあたって、優先順位などを決定する必要があります
　①　制作時間
　②　ビジネス的なインパクト
　③　必要技術

以上３つの要因からコンテンツの優先度を決定します

容易にコンテンツ制作ができるが、ビジネス的に重要ではないものは優先順位が低く、逆に
ビジネス的なインパクトが大きく重要なコンテンツを含んでいるが、制作に時間がかかるものについては優先度を上げていく

このようにコンテンツマトリックスを利用することでコンテンツの優先順位付けを行えばサイト全体の計画も決定しやすい

参考書ウェブの仕事力が上がる標準ガイドブック2 Webデザイン

2009.11.16：dmmitchi：[メモ/□　　３　級　　　]

Ｗｅｂユーザビリティ

ソフトウェアをより簡単に操作、アクセスできることが優れたユーザビリティといえます
ユーザが目的に達成するまでに費やした時間や労力などもユーザビリティの指標となっています

ISO 9241-11　ユーザビリティの定義

有効さ	ユーザーが指定された目標を達成する上での正確さと完全さ
効率	ユーザーが指定された目標を達成する上での正確さと完全さ
満足度	不快さのないこと、および製品仕様に対しての肯定的な態度
利用状況	ユーザー、仕事、装置（ハードウェア、ソフトウェア及び資源）、そして製品が使用される物理的及び社会的な環境

Jakob Nielsenによるユーザビリティの定義

学習しやすさ	システムは、ユーザーがすぐ使い始められるよう、感単に学習できるようにしなければならない
効率性	一度学習すれば高い生産性を挙げられるよう、効率的に使用できるものでなければならない
記憶しやすさ	ユーザーがしばらく使わなくても、再度しようするときに覚え直す必要がないように覚えやすくしなければならない
低エラー発生率	エラーの発生率を低くし、エラーが発生しても簡単に回復できるようにし、また、致命的なエラーは起こってはならない
主観的満足度	ユーザーが個人的に満足できるよう、また好きになるよう、楽しく利用できなければならない

これら二つを合わせ
ユーザー本位の「効果」、「効率」、「満足度」を
共に実現するように設計することを重要としています。
インターネットが私たちの生活に浸透するにつれて、
Webサイトにおけるユーザビリティの重要性はますます高まっているので
サイトに訪問したユーザーごとに期待するものが異なり、
ユーザーの行動によって見え方、使い方がまったく異なるため
訪問したユーザーがどのような行動をするかということを
想定し計画的に設計する必要があります

ユーザーインターフェイスデザイン
効率よく達成できるようにデザインされているかという観点

ユーザーエクスペリエンス
「体験」「経験」
ユーザーにとって面白い、楽しい、という肯定的なプロセス重視の観点
→ユーザーエクスペリエンスデザインとは、
Ｗｅｂサイトを設計する際には、ユーザーがＷｅｂサイトを利用する過程を重視し、
何をどのように見て、読んで、その結果どのように感じて
次のアクションを起こすのかといった一連の経緯を考慮して設計することをいいます

ユーザーエクスペリエンスを豊かにするハニカム構造
　①　役に立つこと
　②　使いやすいこと
　③　望ましいこと
　④　探しやすいこと
　⑤　アクセスしやすいこと
　⑥　信頼に値すること
　⑦　価値を生みだせること

Ｗｅｂサイトの目標によって、何がより重要なのか、何が足りないのか、
技術的に見つけやすいことは、使いやすさよりも
重視すべきことなのか？
など、さまざまな視点から検討することができるようになりました。

最近のＷｅｂサイトはユーザーエクスペリエンスの概念をはき違えているものが多くなっています。
「派手」「かっこいい」「優れた実装力」
これらは表面ばかりを強調しており、実際にアクセスすると重い動画コンテンツであったり
機能がありすぎて操作が複雑だったり、ユーザー本位に立っていないサイトが多いのです

インターネットを日々活用する機会が増えてきているのは事実です。
今まで以上に「普通であって使いやすいもの」の重要性を考慮している必要性があります

参考書
ウェブの仕事力が上がる標準ガイドブック2 Webデザイン

2009.10.31：dmmitchi：[メモ/□　　３　級　　　]

ケータイサイト　問い合わせ　プロフィール