試験公開中

このエントリーをはてなブックマークに追加

Webデザイン プロフェッショナルワークフロー・バイブル

マイナビ出版

2,880円+税

一流WebデザイナーのHTML+CSSデザインワークフローと、実践テクニックを解説しています。

内容紹介

一流の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, 今里了次(訳), 株式会社ミツエーリンクス(監訳), 木達一仁(監訳)
  • 発行日: (紙書籍版発行日: 2009-02-24)
  • 最終更新日: 2014-01-28
  • バージョン: 1.0.0
  • ページ数: 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. アドバンストレイアウトモジュールを使ってデザインする

4. 最後に

Home 書籍一覧 Webデザイン プロフェッショナルワークフロー・バイブル ▲ ページトップへ戻る