内容紹介
一流のWebデザイナーがHTML+CSSデザインのワークフローを提示する本書(原書タイトル「Transcending CSS: The Fine Art of Web Design」)は、「Discovery 発見」「Process プロセス」「Inspiration インスピレーション」「Transcendence 卓越」の4部構成になっています。
Chapter1「Discovery」の章では、ワークフローの改善方法の発見について探ります。マークアップやブラウザ対応の方法など、「当たり前」のように考え行動している中にも改善の要素はあるのではないか?
Chapter2「Process」では、インタラクティブ・プロトタイプを使用したデザインワークフローを解説します。今までのワイヤーフレーム手法にあった問題点が、これで解決できます。この章では考え方だけでなく、実践例を通して、この新しい手法について解説していきます。
Chapter3「Inspiration」では、デザインのインスピレーションを得る方法を紹介します。Webのデザインであっても、インスピレーションの素となるものはWebの中だけにとどまりません。風景、雑誌、新聞、様々なものがWebのデザインへと応用可能です。この章では、具体的な手法を解説しつつ、自分のWebデザインの創造性をアップさせる技を紹介します。
最後の章となるChapter4「Transcendence」では、本書で紹介したワークフローを活用した実践テクニックを解説します。実際の作例制作を通して、このワークフローを仕事に活かす方法が習得できます。CSS3など先進的な技術を取り入れることで、仕事のスキルがあがるだけでなく、成果物のクオリティも格段に上がるでしょう。
クリエイティビティを刺激し、最大化する、HTML+CSSデザインへのアプローチを解説した、自分の「スキル」と「デザイン」をバージョンアップしたいWebクリエイターのためのバイブルです!
書誌情報
- 著者: Andy Clarke, 今里了次（訳）, 株式会社ミツエーリンクス（監訳）, 木達一仁（監訳）
- ページ数: 378ページ(PDF版換算)
- 対応フォーマット: PDF
- 出版社: マイナビ出版
対象読者
著者について
Andy Clarke
イギリスを拠点とするビジュアルWebデザイナー。Web業界歴約10年。1998年にデザインコンサルティング会社「 Stuff and Nonsense」を設立。 リードデザイナーやクリエイティブディレクターとして、企業だけでなく、チャリティ団体・政府機関など幅広いクライアントのプロジェクトを手掛ける。たとえば、 British Heart Foundation、ディズニーストアUK、Save the Children、WWF UKなど。 また、Web Standards Projectのメンバーであり、2006年には同サイトのリニューアルを担当。さらには、Webデザイナーやデベロッパーの代表として、W3CのCSSワーキンググループに招聘専門家として参画。Webデザイナーの育成にも積極的に取り組んでおり、Web標準を使った実用的でクリエイティブな手法、美しくアクセシブルなWebサイトの制作手法などの分野において、世界中のワークショップやカンファレンスでも講演を行っている。
今里了次
鹿児島で細々と活動しているフリーの編集者。『Web Designing』、Adobe Developer Connection、Adobe the edge newsletterなどに関わる。翻訳書として『DHTML&AJAXアイデア見本帖 ワンランク上のWebインターフェイスを実現する』（翔泳社）がある。
株式会社ミツエーリンクス
IT分野の黎明期から、デジタルコンテンツを中心としたサービスを供給、多数の実績を持つ「インフォメーション・インテグレータ」。コンサルティング、マーケティング、分析、プランニング、デザイン、制作、アプリケーション開発、およびサイトの運用・保守にいたる包括的なサービスを提供。
木達一仁
宇宙開発関連組織でWebマスターとしての経験を積んだ後、IT業界へ。以後、Webコンテンツの実装工程に多数従事。2004年2月より、株式会社ミツエーリンクスに参加。現在は同社取締役、R&D本部長を務める傍ら、Web標準の普及・啓発活動を展開している。Web Standards Project（WaSP）メンバー。今までの監訳書に『Designing with Web Standards』『スタイルシート スキルアップ・デザインブック I』『スタイルシート スキルアップ・デザインブック II』『Web標準デザインテクニック即戦ワークブック』『CSS Zen Garden Book』『マイクロフォーマット』（いずれも毎日コミュニケーションズ）がある。
目次
Chapter1 Discovery 発見
1. Transcendent CSS（卓越したCSS）とは？
- 1-1. 何かツールが必要か？
- 1-2. Transcendent CSSが必要となる理由
- 1-3. CSSがクリエイティブの可能性を広げる
- 1-4. アクセシビリティはセールスポイントではなく、デザインの一部
- 1-5. Transcendent CSSへ向けて
2. Transcendent CSSの原則
- 2-1. すべてのWebブラウザが同じデザインを表示できるわけではない
- 2-2. 利用できるCSSセレクタはすべて使用する
- 2-3. 未来に目を向けてCSS3を使用する
- 2-4. CSS未対応部分はJavaScriptやDOMで補う
- 2-5. ハックやフィルタは使用しない
- 2-6. 意味的な命名規則やマイクロフォーマットを使用する
- 2-7. みんなとアイデアを共有し協力し合う
3. 整ってきたTranscendent CSSへの環境
- 3-1. 予期せぬCSSの広がり
- 3-2. 段階的なブラウザサポート
- 3-3. 発見、プロセス、インスピレーション、そして卓越（トランスデンス）
4. まずコンテンツの中身からデザインする
- 4-1. コンテンツありきのアプローチ
- 4-2. 最適化されていないCSSレイアウトの典型例
- 4-3. スタイルシートの有無に関わらず最適化されたコンテンツ
5. セマンティクスとは“意味付けする”こと
- 5-1. CSS Naked Day
- 5-2.“意味”を“マークアップ”に訳す
- 5-3. コンテンツの伝えること
- 5-4. 意味付けを意識する
6. 世界をマークアップしよう
- 6-1. 世界全体がリスト：すべてのモノがリストの構成パーツ
- 6-2. 視野に入るものをリストにする
- 6-3. サンフランシスコから届くカード
- 6-4. 身近にあるものを意味付けしていく
- 6-5. マークアップは“中身”から考えていく
7. 学んだことを実践する
Chapter2 Process プロセス
1. 完璧なワークフローを探し求めて
- 1-1. より良い手法を求めて
- 1-2. コンテンツを基盤としたプロセス
2. コンテンツの収集
3. ワイヤーフレームを使った作業
- 3-1. 従来のワイヤーフレームの問題点
- 3-2. ワイヤーフレームにコストをかける価値はあるか？
- 3-3. 従来のワイヤーフレームとインタラクション
4. グレーボックス手法を使ってワイヤーフレームを改善
- 4-1. 詳細を説明するためのビジュアル素材
5. 静的なデザインの作成
- 5-1. ワークフローをより速く進める
- 5-2. 静的なデザインにマークアップガイドを追加
6. インタラクティブ・プロトタイプを活用する
- 6-1. インタラクティブ・プロトタイプはリアリティをもたらす
- 6-2. 再利用できるコードを用意しておく
- 6-3. ワイヤーフレームとプロトタイプのお手本
- 6-4. WYSIWYG……目先のことだけ見てませんか？
7. インタラクティブ・プロトタイプのベストプラクティス
- 7-1. 開発時に利用するWebブラウザ
- 7-2. Webブラウザの拡張機能を活用する
- 7-3. div要素の使用は最小限に
- 7-4. マークアップが妥当かどうかを随時検証
- 7-5. floatではなくpositionプロパティでレイアウトを行う
- 7-6. CSSを整理する
8. プロセスを実践する
- 8-1. 材料のチェック
- 8-2. コンテンツありきの考え方によるマークアップ
- 8-3. CSSで静的なデザインを実装する
- 8-4. レイアウトの構築
- 8-5. body要素から作業を開始する
- 8-6. 自分で続けるか、他のスタッフに引き継ぐか
- 8-7. カラーの基本スタイル
- 8-8. ブランディングエリア
- 8-9. ロゴの追加
- 8-10. ナビゲーションのスタイル
- 8-11. フッタのスタイル付け
- 8-12. タイポグラフィのスタイル
9. まとめ
Chapter3 Inspiration インスピレーション
1. グリッドベースデザイン
- 1-1. デザイナーとグリッド
- 1-2. 黄金比と3分割の法則
- 1-3. 完全にフレキシブルなレイアウト
- 1-4. 合理的なグリッドデザイン
2. 最新のWebデザインに見るグリッド
- 2-1. Subtraction
- 2-2. Airbag Industries
- 2-3. Jeff Croft
- 2-4. Veerle's Blog
3. Webデザイン以外でのグリッド
- 3-1. 新聞から学ぶ
- 3-2. 伝統的な8カラムデザイン
- 3-3. 現代の6カラムデザイン
- 3-4. その他のカラムデザイン
4. 新たなグリッドをWebデザインへ
- 4-1. ニュースサイトのリデザイン
- 4-2. 垂直方向のカラムと水平方向のベースライン
- 4-3. デザインの細部にはマイクログリッドを使う
- 4-4. ベースライングリッドを使った水平方向の配置
- 4-5. 写真をフレキシブルにする
5. 予想外の場所で見つかるインスピレーション
- 5-1. ホームページの模様替え
- 5-2. ムードボードのススメ
- 5-3. デザインのスクラップブックを作ろう
- 5-4. 雑誌からインターフェイスのインスピレーションを得る
- 5-5. タイポグラフィのインスピレーション
- 5-6. Flashデザインの再検討
- 5-7. 画像や写真からインスピレーションを得る
6. より素晴らしいデザインを生み出すための活動
- 6-1. 魅力的なビジュアルを作るだけがデザインではない
- 6-2. 技術だけに目を向けない
- 6-3. ムードを高める
- 6-4. 今までとは異なる視点を持つ
- 6-5. 目的を持ってスクラップブックを作る
7. Webデザインを芸術へと高めるために
- 7-1. デザイナーにはまだすべきことがある
Chapter4 Transcendence 卓越
1. Transcendent CSS
- 1-1. 絶対配置
- 1-2. 相対配置
- 1-3. floatを使ったクリエイティビティ
- 1-4. サイドバーを作る
- 1-5. テクニックを組み合わせる
2. CSS3（3度目の正直）
- 2-1. CSS3のモジュール
- 2-2. 新しい標準策定に携わる
- 2-3. バック・トゥ・ザ・フューチャー
- 2-4. CSS3のセレクタモジュールを用いたデザイン
- 2-5. 縞模様で読みやすさを改善
- 2-6. 背景＆ボーダーモジュールを使う
- 2-7. 複数背景画像でデザインする
- 2-8. マルチカラムのレイアウト
- 2-9. マルチカラムレイアウトモジュールでデザインする
3. アドバンストレイアウト
- 3-1. グリッドへの回帰
- 3-2. アドバンストレイアウトモジュールを使ってデザインする