Webデザイン [改訂第五版]-コンセプトメイキングから運用まで-
はじめに
最近は、パーソナルコンピュータ(PC)などの設備と、インターネットへの接続環境をするだけで、Webサイトを容易に制作できるようになっている。そのため、企業、団体、政府などの組織の情報発信から、個人やグループなどのパーソナルな情報発信まで、Webサイトがさまざまな目的で利用されている。また、特定少数の対象に向けた情報から、不特定多数の対象に向けた情報まで、さまざまなタイプの情報を発信することもできる。このようにWebサイトは、もはやなくてはならないメディアの1つとなっている。
–
最近注目を集めている、プログやSNS(ソーシャルネットワーキングサービス)に代表されるCGM(消費者発信型サイト)は、個人的な経験や考えを、共通の趣味や興味をもつ人たちに向けて、短い文章か写真による日記のようなかたちで発信するもので、新たなコミュニケーション環境を生み出している。また、数十文字程度の短文による情報発信を行う、twitterのようなマイクロブログの普及によって、情報伝播の速度と規模がさらに拡大している。さらにWebサイトを閲覧する環境はPCだけでなく、スマートフォンやタブレットなどさまざまな機器が利用されている。これらのコミュニケーション環境は、テレビ放送、新聞、雑誌、ラジオ放送のような不特定多数の受信者を対象としたマスメディアや、従来のWebサイトによる情報発信とは、まったく異なる次元にあるといえる。
また、プログラムによるWebサーバ上でのデータ処理などによって、インタラクティブなデータのやりとりや、条件に応じて内容が書き変わるデータの提供などの、さまざまな機能も実現している。これらを利用することによって、従来のメディアでは実現できなかった、個々のユーザに対応したサービスが、リアルタイムに行えるようになった。その結果、新たなネットビジネスの起業や展開が急速に進められている。
Webサイトは、さまざまな目的のために企画、運用されており、その目的により、求められる機能やデザインが異なる。また、ターゲットとなるユーザの年齢や性別、利用環境などを考慮した情報表現が求められる。ユーザビリティやアクセシビリティに配慮した、広い視野に立ったコミュニケーションデザインへのアプローチが必要である。
このようなコミュニケーションデザインが重視される社会状況から、公益財団法人画像情報教育振興協会(CG-ARTS協会)では、画像・映像情報に関する教育の社会的な重要性に注目し、1992年の設立以来、CG、画像処理、マルチメディア、Web分野の教育関係者や研究者、専門家らとともに、実践的な教育方法についての具体的な検討を行ってきた。
本書は、Webサイト制作について関連する業務も含めトータルな視点から解説した、Webデザインの教科書である。合わせて、当協会が実施している検定試験「Webデザイナー検定」の、主としてエキスパートを受験しようとする学習者のための教材でもある。Webデザイナー検定エキスパートは、業務としてWebデザインを行うために必要な知識の理解度と、知識の応用力を測る試験である。読者の皆様に、本書の学習と検定試験の受験を通じて、自分自身の知識や技能の習得度を把握し、学習や進学・就職活動に活かしていただくことが、本書の目的である。
本書では、豊富な知識と経験をもつ、第一線で活躍中の専門家の方々にWebサイトの企画から、制作、運用、そして評価にいたるまでのプロセスを、解説していただいており、より実践的な視点から、Webサイト制作におけるデザイン手法や技術について解説している。Webサイトの複雑化、高機能化は日々進展しており、インタラクティブ性の高いインタフェースや、大量の情報をリアルタイムに処理できるバックエンドシステムへの需要が増大している。
単純にWebサイトの制作技法を理解するだけでは、クリエイティブなコンテンツをつくることはできない。Webデザインでは、美的感性を磨くとともに、コンピュータやネットワークの技術、プログラミングなどの論理的な思考を基盤とした技術の学習も不可欠である。さらに、各種制作物に関連した著作権などの権利の保全や、情報化社会に対する理解や倫理も求められる。本書では、これらの関連知識についても解説している。
また、Webデザインに関する基礎的な知識や技術については、入門用教科書として位置付けられる『入門Webデザイン[改訂第三版]』で詳しく解説している。合わせて学習することで、知識や技術の体系的な習得が可能となり、本書で解説している実践的な内容を、より効果的に活かすことができる構成となっている。
2016年3月
『Webデザイン』編集委員会
編集委員長 若林尚樹
contents
1 Webデザインへのアプローチ
1-1 本書の構成
1-1-1 Webサイト制作の流
1-1-2 本書の構成と内容
1-2 Webサイト制作業界の人材像
1-2-1 Webサイト制作に必要な職掌と役割
1-2-2 各職掌の役割と求められる能力
1-3 Webサイト制作のプロセス
1-3-1 一般的な制作プロセス
1-3-2 制作時に発生しうる問題点
Keywords
2 コンセプトメイキング
Overview
2-1 コンセプトの設定
2-1-1 コンセプトメイキングの手法
2-1-2 コンセプトの具体化
2-2 Webサイトの種類とコンセプト
2-2-1 Webサイトの種類
2-2-2 コンセプトメイキングで考慮すべき外的要素
2-3 さまざまな閲覧機器
2-3-1 PCとスマートフォンの違い
2-3-2 各機器への対応の必要性とその手
2-4 ほかのメディアとの関係
2-4-1 各メディアの特徴
2-4-2 インターネットとほかのメディアとの連携
Keywords
3 情報の構造
Overview
3-1 情報の収集と分類
3-1-1 スケジュールとコスト管理の重要性
3-1-2 情報の収集と分類
3-2 情報の組織化
3-2-1 情報の組織化
3-2-2 ラベリング
3-3 Webサイト構造への展開
3-3-1 Webサイト構造の構築
3-3-2 ユーザ導線
3-3-3 ユーザ導線の具体例
Keywords
4 インタフェースとナビゲーション
Overview
4-1 ユーザインタフェース
4-1-1 Webサイトとユーザインタフェース
4-1-2 使いやすいユーザインタフェースの要素
4-1-3 ユーザインタフェースの種類と役割
4-2 ナビゲーション
4-2-1 ナビゲーションの目的と構成要素
4-2-2 PCにおけるページレイアウト
4-2-3 スマートフォンにおけるページレイアウト
4-2-4 ナビゲーションとWebサイト構造
4-2-5 ナビゲーションの設計
4-3 ナビゲーションデザインの手法
4-3-1 Webコンテンツにおけるナビゲーションデザイン
4-3-2 JavaScriptとスタイルシート
4-3-3 DHTMLによるナビゲーション機能の例
4-3-4 Flashによるインタフェース
Keywords
5 動きと音の効果
Overview
5-1 動きの技法と表現
5-1-1 Webサイトに動きを導入する目的
5-1-2 基本的な動きの種類
5-1-3 動きの技法
5-1-4 動きの技術
5-2 動きを導入する際の注意点
5-2-1 動きの導入時の注意
5-3 動画像コンテンツ
5-3-1 動画像コンテンツを導入する目的
5-3-2 動画像コンテンツを導入する際の注意点
5-3-3 動画像コンテンツの技術
5-3-4 動画像コンテンツ技術の詳細
5-3-5 動画像コンテンツにおけるディジタル著作権管理技術
5-4 音の演出
5-4-1 音の種類と用途
5-4-2 音を使用する際の注意点
5-4-3 データフォーマット
Keywords
6 Webサイトを実現する技術
Overview
6-1 Webサイトを実現する技術の基礎
6-1-1 さまざまな技術
6-1-2 Webサイトの基本構成
6-1-3 静的コンテンツと動的コンテンツ
6-1-4 フロントエンド側の処理とバックエンド側の処理
6-1-5 技術を超えて考えるべきこと
6-2 Webサイト上の機能
6-2-1 ビジュアライゼーション機能
6-2-2 インタラクティブ機能
6-2-3 データハンドリング機能
6-3 Webサイト制作に用いられる言語
6-3-1 言語のもつ役割
6-3-2 HTML
6-3-3 CSS
6-3-4 JavaScript
6-3-5 DHTML
6-3-6 Ajax
6-3-7 Web標準
6-4 バックエンドで活用する技術
6-4-1 バックエンドとは
6-4-2 バックエンドの一般的な構成
6-4-3 バックエンド選定時に考えるべきこと
6-4-4 Webサーバを構成するソフトウェア
6-4-5 Webサーバにおける処理の例
6-4-6 セキュリティー
Keywords
7 Webサイトのテストと運用
Overview
7-1 Webサイトのテスト
7-1-1 テストの意義とテスト計画
7-1-2 テストの時期とテスト環境
7-1-3 テスト項目
7-1-4 ユーザビリティテスト
7-2 Web解析
7-2-1 Web解析の意義
7-2-2 Web解析
7-2-3 Web解析の一般的な内容
7-3 Webサイトの運用
7-3-1 運用の概要
7-3-2 運用体制
7-3-3 更新作業
7-3-4 情報のメンテナンス
7-3-5 CMS
7-3-6 Webサイトの評価
7-3-7 Webサイトの調整
7-4 Webサイトのリニューアル
7-4-1 Webサイトのリニューアルとは
7-4-2 Webサイトをリニューアルする理由
7-4-3 リニューアルにあたっての現状把握
7-4-4 リニューアルの準備
7-4-5 SEO/SEMの導入
Keywords
appendix
a-1 知的財産権
a-1-1 知的財産権
a-1-2 知的財産権に関する具体例
参考図書
index
