■タイトル(仮称)
MOBILE SITE DESIGN SHOWCASE
「HTML+CSSで構築する、携帯サイトデザインテクニック」
■本書の概要
ドコモ2009年夏モデルにて、iモードが "iモードブラウザ2.0" へ進化した事により、携帯電話会社の主な3キャリア(ドコモ、ソフトバンク、au)
全てがCSSを使った携帯サイトを構築する事が可能となった事を受けて、3キャリアを対象とした本格的で実践的なCSSデザインのテクニック集。
■ターゲット層
・WEBサイト作成経験者
・携帯サイト作成経験者
・これから作ってみようという作成者予備軍(作ってみたいという欲求を促すような内容)
■留意点・他
・マークアップに関する事項は深くは触れない。(HTMLの知識書ではない)
・文書構造はXHTML1.0 Transitionalにてコーディング。(ドコモがXHTMLを使わなくてもCSSが反映できることは触れておく)
・後方互換は最低限においての考慮とする(これを実現するための複雑怪奇なマークアップはやらない)
[1] 携帯サイトをCSSでデザインする
1-1 携帯サイトに誤ったHTMLが氾濫したワケ
1-2 CSSレイアウトとは/CSSを使う事のメリット
1-3 CSSの書式
1-4 CSSの指定方法
1-5 後方互換の考慮
[2] 携帯サイトの基本形
2-1 レイアウトの基本
2-2 ユーザビリティを意識したページ作り
2-3 CSSを使ってキャリア/ブラウザによる差異を無くす
[3] ヘッダーのデザイン
3-1 サイトのイメージを決定付ける重要な部分
3-2 タイトルのデザイン
3-2-1 文字の大きさ
3-2-2 背景色を変えてみる
3-2-3 罫線を使ってみる
3-2-4 画像を使ってみる
3-2-5 タイトルそのものを画像に置き換える(*)
> *対応状況による
[4] メニューリストのデザイン
4-1 デザインの前にリンク先を分かりやすく
4-2 リストを使ったメニューの構築
4-2-1 リストマークの形を変える
4-2-2 リストマークを画像に置き換える
4-3 tableタグを使って横並びのメニュー(**)
4-4 画像とリンク先の説明分を入れたメニュー
>**auがリストのinline処理に対応していれば内容変更
[5] コンテンツのデザイン(テキストサイトにおけるデザインを中心とする)
5-1 文章を見やすくする一工夫
5-2 画像を効果的に配置する
5-3 ページ上部へ戻るアンカーを配置する
[6] フッターのデザイン
6-1 "Footer"「お洒落は足元」から
6-2 フッターに何を置くべきか
6-3 デザイン提案
[7] デザイン集 (3章から6章までの集合体となる部分/様々なレイアウトのデザインの紹介)
7-1 インデックスページ(***)
7-2 作成者の紹介ページ(***)
7-3 コンテンツページ(***)
7-4 リンク集ページ(***)
7-5 メール送信ページ(***)
>***いくつか例を紹介
[8] 付録
8-1 キャリアごとのCSS対応プロパティ一覧表