WEBサイト制作におけるコンテンツ制作
文章の構造化に従ったコンテンツ制作
- HTMLは、SGMLから派生したハイパーリンクの可能な文章構造であることが特徴であるため、大見出し、注見出し、小見出し、段落等を活用した文章に整理する必要があります。
- また、SEO対策上においてもこの文章構造を考慮したキーワードの抽出をしており、今後普及するXHTML,XML対応においても文章構造を前提とした内容となっていますので、文章の構造化は必要です。
画像・グラフィックスの特性
- WEBサイトで扱う画像・グラフィックスの個々の形式や表示色などの特徴を理解した選択が必要です。
| タイプ | GIF | JPEG | PNG | Flash | |
| 拡張子 | .gif | .jpg | .png | .swf | |
| 表示色 | 256色 | 1,677万色 | 256色/1,677万色/ 280兆色 |
1,677万色 | |
| 圧縮方式 | 可逆圧縮 | 非可逆圧縮 | 可逆圧縮 | - | |
| 透過処理 | 透過 | × | 透過 | 透過 | |
| オプション | インターレース | プログレッシィブ | インターレース αチャンネル |
- | |
| その他機能 | アニメーション | ガンマ補正 | アニメーション、ムービー | ||
| ファイル容量 (780x64 pxcel) |
40KB | 32KB | 24KB(8ビット) 356KB(16ビット) |
- | |
| 携帯電話対応 | DoCoMo | ○ | ○ | × | ○ (i-5.0以降) |
| AU | ○ | ○ | ○ | ○ (UP6.2以降) |
|
| Softbank | ○ (V1.0以降) |
○ | ○ | ○ (V1.0以降) |
|
- 画像・グラフィックスの使い分け
- 写真等の画像は、画像の透過性が必要ないので、「jpg」が最適であり、ロゴやグラッフィクス表現するものは、画像の抜け（透過性）が必要となる場合は、「gif」と「png」があるが、「png」がブラウザの対応でまだ限定があるため「gif」が最適といえる。
- 動画については、「アニメーションGIF」と「Flash」があり、ファイル容量の関係からサイズが小さく、画像のレイヤーが少ない場合は、「gif」を使用し、多い場合は、「flash」を使用する方がよい。
- 携帯電話の対応では、３社とも対応している「jpg」が無難であり、画像の抜けや動画対応で「Flash」がよいと思われます。
アイコン、ブュレット画像の活用
- 図柄やマーク・サイン・シンボルの持つ意味から、WEBサイトで扱うアイコン、ブュレット画像を統一して、CSSで指定することでWEBページをシンプルにでき、ナビゲーションをスムーズに分かり易くすることができます。
