chapterchapter
1
2-1 Ｗ ｅ ｂ サ イ ト 制 作 業 界 の 人 材 像1-2-
1
Web サイト制作に必要な職掌と役割 ［1］制作の分業化 Web サイト制作の現場では，チームによる分業体制で作業が行われ ている場合が多い。かつては，1人のWebデザイナーが企画から制作ま でを請け負うことや，場合によっては，簡単なプログラミングまでこな すこともあった。しかし，Web サイト自体の規模の拡大，バックエン ドのシステムやデザインの複雑化で，個人がすべてを請け負うことは困 難である場合が多くなってきている。現在では，企画やデザイン，シス テム開発といった制作のための各機能による業務の分業体制が必須とな っている。 制作会社によっては分業化されたすべての制作機能を社内に確保し， 業務が発生するとその内容に合わせてチームを編成する体制をとる。一 方で，企画，デザイン，プログラミングなどの得意分野に特化した複数 の会社が協業して制作を行うことも多い。 ［2］職掌と役割 Webサイト制作は分業化が進み，さらに発信するWebサイトの種類 や目的によって機能を分化させている。Web サイト制作に必要な職掌＊1 は，目的や表現の手法によって多少の違いはあるものの，企画パート， 制作パート，システム開発パート，管理パートの 4つに分けることがで きる。 企画パートとしての職掌は，プランナ，情報アーキテクトなどがあ げられる。制作パートとしては，アートディレクタ，Webデザイナー， コーダ，システムエンジニア，プログラマ，ライタ・コピーライタがあ げられる。そして，管理パートとしては，制作全体を管理する Web デ ィレクタ，またクライアントに対応する窓口となり，予算やスケジュー ル管理までを行うWebプロデューサがあげられる。 クライアント側には，各部署の要望をまとめ制作会社との窓口となる Web マスタがいるのが一般的である。また場合によっては，カメラマ1-2
W e b サ イ ト 制 作 業 界 の 人 材 像
規模の拡大，複雑な機能の導入などにより，Webサイト制作は，数年前 に比べ個人の力だけでは難しくなっている。そのためWebサイト制作を 行うには，多くの役割を担う人材が必要となる。ここでは，Webサイト 制作を進めていく際に必要な人材像について解説する。 ＊ 1 一般に職掌と は，業務の内容をま と め た 単 位 の こ と で，担当する役目， 仕事のことである。chapterchapter
1
2-2 Ｗ ｅ ｂ サ イ ト 制 作 業 界 の 人 材 像 ン，映像撮影クルーなどが加わることもある。1-2-
2
各職掌の役割と求められる能力 Web サイト制作に必要な職掌と役割，求められる能力にはつぎのよ うなものがある。また，各職掌は図1.2のように役割を分担している。 ■図1.2 ─── Web サイト制作に関わる職掌と役割分担 要望 要望 企画に沿った 制作を指示 要望や企画に 基づいた情報 設計を指示 企画に沿った 原稿執筆を 指示 企画に沿った デザイン制作 を指示 企画に沿った システム開発 を指示 要望に あった企画 立案を指示 Web サイト構造／ ユーザ導線案 企画案 進捗報告／提案 コーダ 提案・調整 提案・調整 進捗報告／提案 進捗報告／提案 クライアント 企画パート 制作パート 原稿 キャッチコピー デザインチーム 開発チーム デザイン 管理パート 設計に 基づいた 開発を指示 コーダは開発 チームに属す ることもある 報告／ 提出 報告／提出 報告／提出 デザイン案 を基に Web サイト全体 のビジュア ル化を指示 デザイン のマーク アップ作 業を指示 社 内 Webマスタ Webプロデューサ 情報アーキテクト ライタ コピーライタ プランナ Webディレクタ アートディレクタ システムエンジニア Webデザイナー コーダ プログラマchapter
2
3-2 さ ま ざ ま な 閲 覧 機 器2-3-
2
各機器への対応の必要性とその手法 図 2.16 から，PC とスマートフォンの利用者数はほとんど拮抗してい ることがわかる。より多くの利用者に情報を提供するためには，どちら の機器に対しても同等の情報を提供する必要があるわけだが，PC とス マートフォンという画面の大きさが異なる機器に対して，同じデザイン， レイアウトを表示させるのは無理がある。そのため，画面サイズの異な る機器に，同等の情報を提供する手段を講ずる必要がある。現在，これ には以下の3つの手法がよく利用されている。 [1] 個別の URL＊22 PC用とスマートフォン用に別々のURLを用意しておき，それぞれの 機器に合ったURLにアクセスしてもらう手法である（図 2.17）。たとえ ばPC用は「www.cgarts.or.jp」スマートフォン用は「sp.cgarts.or.jp」 とし，各機器に合ったHTMLやCSS，画像などを用意しておく。 ［この手法の長所］ ・ HTML などを対象となる機器に特化して記述できるので，UI やデザ インなどを各機器の特性に合わせてつくり込むことができる。 ［この手法の短所］ ・ 1つのコンテンツにHTMLやCSSを2セット用意しなくてはならない ため，制作やメンテナンスの工数が増えてしまう。また，作業中に片 方だけ修正し忘れる，などといったトラブルが生じやすい。 ・ 異なる機器向けの URL にアクセスしてしまい，見づらい表示になる 可能性がある。ただし，Webサーバ側で，リダイレクト＊23を行えば，こ の問題を解決できる。 [2] 動的な配信＊24 URLは1つだけ用意しておき，アクセスしてきた機器の種類をサーバ 側で判別し，それぞれの機器に合った HTML や CSS を配信する手法で cgarts.or.jp sp.cgarts.or.jp PC スマートフォン PC用URL スマートフォン用 URL スマートフォン用 HTMLファイル PC用 HTMLファイル ■図2.17───個別の URL PCとスマートフォンは，それぞれ専用に用意されたURLにアクセスし，専用のHTMLや CSSをダウンロードする。 ＊ 23 ア ク セ ス し てきた機器の種類に 対 応 す る URL に 転 送する処理のこと。 ＊ 22 モ バ イ ル URL ともよばれる。 ＊ 24 ダ イ ナ ミ ッ クサービングともよ ばれる。chapter
2
3-2 さ ま ざ ま な 閲 覧 機 器 ある（図 2.18）。HTML と CSS は事前に完全なものを用意しておくか， 動的な配信に対応した CMS を用いる。CMS を用いる場合は，PC とス マートフォンで共通する部分をデータとして保持しておき，配信時に機 器ごとに異なる部分と合体させるなどの処理をCMSが行う。 ［この手法の長所］ ・ UIやデザインなどを各機器の特性に合わせてつくり込める。 ・ 誤ったURLへのアクセスという問題が発生しない。 ［この手法の短所］ ・ 動的な配信に対応したCMSを用いない場合，個別のURLと同様に制 作やメンテナンスの工数が増えるという問題が発生する。 [3] レスポンシブウェブデザイン すべての機器に対して，URLもHTMLも同じものを用いる手法であ る（図 2.19）。データを受信した機器の側で CSS3 や，場合によっては JavaScriptの機能を用いて要素の配置や大きさの変更，表示・非表示を 切り替え，その機器で見やすいように自動的にレイアウトを変える。そ の際，機器の種類ではなくWebブラウザのビューポート（表示領域）の 幅を基準にしてレイアウトを行う（図2.20）。 cgarts.or.jp PC スマートフォン 共通のURL 共通のURL スマートフォン用 HTMLファイル PC用 HTMLファイル ■図2.18───動的な配信 PC，スマートフォンとも共通のURLにアクセスするが，サーバ側で機器の種類を判別し， 専用のHTMLやCSSを配信する。 cgarts.or.jp PC スマートフォン 共通のURL 共通のURL 共通の HTMLファイル ■図2.19───レスポンシブウェブデザイン PC，スマートフォンのどちらも共通のURL，共通のHTMLやCSSを用いる。画面の大きさ に対する対応などは，それぞれの機器側で行う。chapterchapter
3
2-1 情 報 の 組 織 化3-2-
1
情報の組織化 ［1］分類と組織化の違い 情報の分類は，個別の情報のなかから共通な部分を見いだし，一定の ルールに従って情報を整理し，検索，閲覧，比較などを容易にするため に行う。一方，情報の組織化とは，分類した情報を使用する目的に従って 並べ替えたり，関連付けたりして編集することである（図3.10）。3-2
情 報 の 組 織 化
収集・分類した情報は，さらに組織化する必要がある。ここでは，情報を 組織化する手法と，ユーザに情報のイメージをすばやく把握させるための ラベリング＊3手法について解説する。 ■図3.10───情報の分類と組織化の違い ＊ 3 ラベリングに つ い て は，3-2-2 を 参照のこと。 あ 一眼レフカメラ うずまき式洗濯機 液晶テレビ オイルヒーター 温風式暖房機 か 紙パック式掃除機 コンパクトカメラ さ サイクロン式掃除機 自走式掃除機 ステレオコンポ スマートフォン た タブレット型コンピュータ DVD プレイヤー デスクトップパソコン 電熱式暖房機 トイカメラ ドラム式洗濯機 な ノート型パソコン は ハードディスクレコーダー ビデオカメラ プラズマテレビ ヘッドフォン ポータブルオーディオ ら 立体映像テレビ 立体映像テレビ ハードディスクレコーダー 自走式掃除機 ドラム式洗濯機 オイルヒーター ステレオコンポ 液晶テレビ 紙パック式掃除機 うずまき式洗濯機 電熱式暖房機 一眼レフカメラ コンパクトカメラ トイカメラ ビデオカメラ ポータブルオーディオ ステレオコンポ DVD プレイヤー ヘッドフォン ハードディスクレコーダー 液晶テレビ プラズマテレビ 立体映像テレビ ノート型パソコン デスクトップパソコン タブレット型コンピュータ スマートフォン 紙パック式掃除機 サイクロン式掃除機 自走式掃除機 うずまき式洗濯機 ドラム式洗濯機 電熱式暖房機 温風式暖房機 オイルヒーター トップページ ジャンル別家電 最新 AV 生活フェア 新型家電フェア 新生活応援フェア 開催中フェア カメラ AV機器 情報機器 生活家電 静止画像 動画像 オーディオ 録画機器 薄型テレビ パソコン 携帯情報端末 掃除機 洗濯機 暖房機器 ［a］分類の例 家電製品を50音順に分類 した場合 ［b］組織化の例 ECサイトなどを対象に，家電製品を製品のジャンルや開 催中のフェアによって組織化した例chapterchapter
3
2-1 情 報 の 組 織 化 情報の組織化を行う際には，情報の内容を中心に組織化していく方法 と，情報を利用するユーザが情報へ行き着くための方法を検討して組織 化していく方法とがある。ここでは，前者を「情報を中心とした組織化」 とよび，後者を「情報を利用するユーザを中心とした組織化」とよぶ。情 報を利用するユーザを中心とした組織化は，さらに情報のイメージを文 言にしていくラベリングと，ユーザの行動を中心に検討するナビゲー ションに分けられる。 ［2］組織化の手法 情報を中心とした組織化と情報を利用するユーザを中心とした組織化 では，組織化の目的が異なる。したがって，情報を組織化するにあたっ ては，組織化の目的を明確にする必要がある（図3.11）。 ①情報を中心とした組織化 情報を中心とした組織化での情報の最終形態は，ユーザが検索をした 結果として情報がどのように表示されるのかを設計することである。デー タベースを活用する場合などには，このような情報の組織化が有効にな る。たとえば，ECサイトの商品情報を紹介するWebページのデータベー スなどは，商品を中心に検索に必要な情報を抽出し，商品カテゴリや検 索キーワードとしてまとめあげていく。また，EC サイトなどにおいて は，検索結果表示を「発売日順（時間）」，「売れている順（連続量）」，「タ イトル順（50 音順）」などでソートできるような工夫も必要になる。この ように情報検索のしくみにおいては，検索結果がユーザにとって理解し やすい表示形態になっている必要がある。したがって，ユーザが情報を 扱うタスク＊4を予測検討し，その行動に合わせた検索結果を表示できるよ うに情報を組織化しておく必要がある。 情報を利用する ユーザを中心と した組織化 情報を中心とした 組織化 ラベリング ナビゲーション 検索結果の表示 顧客主観による情報の組織化 トピックによる情報の組織化 顧客主観による情報の組織化 トピックによる情報の組織化 タスクの予測による 情報の組織化 ■図3.11───情報の組織化の手法 ＊ 4 タスクについ ては，2-1-1［3］を参 照のこと。chapter
4
2-3 ナ ビ ゲ ー シ ョ ン4-2-
3
スマートフォンにおけるページレイアウト スマートフォンの画面構成を考える場合，画面が小さいということと， 操作は指で画面を直接タッチして行うという操作性の2点を考慮する必 要がある。 画面が小さいということは，コンテンツエリアとナビゲーションエリ アを同時に画面上に配置しておくことが難しいということである。そこ で，コンテンツ閲覧中はコンテンツエリアを主体に，ナビゲーション操 作中はナビゲーションエリアを主体に表示するようにし，それぞれの場 合に合わせて両者を切り替えながら利用してもらう，といった工夫が必 要となる。 また，指で画面を直接タッチして行うため，PC のように小さなパー ツを正確にタッチするのは難しく，個々のナビゲーションパーツは大き めに作成する必要がある。 こうしたことを考慮して，スマートフォン向けの画面構成の手法がい くつも考案されている。ここではそのなかでも代表的な4つの手法につ いて紹介する。 [1] ドロップダウン 画面上部に1つだけメニューボタンを設けておき，それ以外の画面す べてをコンテンツエリアとして使用する配置である（図 4.24［a］）。メニ ューボタンをタップすると，そこからナビゲーションエリアが下方に向 かって滑り込むように入ってきて表示される（図4.24［b］）。 ナビゲーション項目をタップするとナビゲーションエリアが下位のナ ビゲーション要素によって書き換わる，というかたちで階層構造をもっ たナビゲーションを実現することも可能である。これはドリルダウンな コンテンツエリア ローカル ナビゲー ション 付加的 ナビゲー ション グローバルナビゲーション ❶ ❷ ❸ ❹ 視線 ■図4.22───逆 L 字型を基にした門型の配 置図 コンテンツエリア 付加的ナビゲー ション2 付加的 ナビゲー ション1 ナビゲーションエリア ❶ ❷ ❸ ❹ 視線 ■図4.23───両袖型を基にした門型の配置 図chapter
4
2-3 ナ ビ ゲ ー シ ョ ン どとよばれている。ナビゲーション要素が多く，階層が深い場合など規 模の大きなサイトに適した手法である。 ［この手法の長所］ ・ 画面のほとんどをコンテンツエリアにすることができる。 ・ ナビゲーション項目の数に応じてナビゲーションエリアの高さを変更 するなど，Webサイトの情報構造に柔軟に対応できる。 ［この手法の短所］ ・ 後述のタブやスプリングボードに比べてコンテンツにたどり着くまで のアクション数が多い。 [2] スライド 画面上部にひとつだけメニューボタンを設けておき，それ以外の画面 すべてをコンテンツエリアとして使用する配置である（図 4.25［a］）。メ ニューボタンをタップするとたとえば画面の左側からナビゲーションエ リアが滑り込むように画面に入ってきて表示される（図4.25［b］）。この 手法は，ドロワーとよばれることもある。ドロップダウンと似た手法で あるが，階層化された情報ではなく，同格の選択肢をユーザに提示した い場合に適した手法といえる。 ［この手法の長所］ ・ 画面のほとんどをコンテンツエリアにすることができる。 ・ 画面の縦いっぱいにナビゲーションを表示できるため，多くの選択肢 を表示できる。 コンテンツエリア メニュー コンテンツエリア ナビゲーションエリア [a] 画面上部にメニューを配置し，残りをコ ンテンツエリアとして利用 [b] メニューをタップするとナビゲーション エリアが滑り込んでくる ■図4.24───ドロップダウンの配置図chapterchapter
5
1-1 動 き の 技 法 と 表 現5-1-
1
Web サイトに動きを導入する目的 Webサイトは，動きの要素がなくてもつくることができる。これは， Web サイトを制作する際には，まず最初に考慮すべき点である。その うえで動きを取り入れる場合は，明確な目的が存在しなければならない。 ここでは，Web サイトに動きという要素を導入する目的のなかでも重 要な点について解説する。 ［1］注意を促す，引き付ける Web サイトに動きの要素を取り入れる目的の多くは，ユーザに注意 を促したいものや，ユーザの視線を引き付けたい場所を示すことにあ る。これは，人間の目が動くものに強く反応することを利用した手法で ある。とくに読んでほしい場所，つぎに実行すべき操作などはアニメー ションによって強調することで，ユーザの視線を引き付けることができ る。また，バナー広告の多くがアニメーションを多用するのも，まった く同じ理由である。 ［2］進行度合いを見せる 同じ時間待たされる場合でも，待ち時間がどれくらいなのかがわかっ ている場合とそうでない場合とでは，人間の心理的状況は異なってくる。 データベース処理や内部検索処理，データのロードなど，ユーザの操作 を中断させ，待たせなければならない処理を行うときは，ユーザに進行 状況をある程度リアルタイムで伝えられるアニメーションを用いるのが 有効である。 ［3］ユーザの操作を補助する ナビゲーション＊1にしても，情報の入力にしても，動きの要素を取り入 れてユーザの操作を補助することが有効な場合がある。たとえば，ナビ ゲーション項目が多い場合などは，主要な項目だけを常時表示しておき， 必要に応じてそのほかの項目を表示するなど，ユーザを必要以上の情報 ＊ 1 ナビゲーショ ンについては 4-2 を 参照のこと。5-1
動 き の 技 法 と 表 現
Webサイトは，文字や写真，イラストのような静止したコンテンツとは 別に，動きのあるコンテンツも多用されている。どのような動きを用いる かは，伝えたい情報やWebサイトの目的によって変わってくるが，適切 な技法と表現を組み合わせることで，その伝達の度合いを大きく向上する ことができる。Chapter4では，ナビゲーションのための動きについて学 習したが，ここでは，コンテンツとしての動きについて解説する。chapter
6
4-3 バ ッ ク エ ン ド で 活 用 す る 技 術6-4
バ ッ ク エ ン ド で 活 用 す る 技 術
Webサイト制作を行うためには，6-3までで解説したフロントエンドの技 術だけではなく，バックエンドの技術に関する理解も必要である。ここで は，Webサイトのバックエンドがどのようなものであるのか，そこで使 われている技術にはどのようなものがあるのか，具体的にどのように構成 されているのか，などについて解説する。6-4-
1
バックエンドとは 一般的に，Web ブラウザ側でコンテンツを表示したり，リンクのク リックやフォームへの入力といったユーザの操作を受け付ける，といっ た処理をフロントエンドとよんでいる。 それに対して，フロントエンドからのリクエストに応えてコンテンツ データを送信するのがバックエンドである。その際，バックエンド側に 保存されているコンテンツをそのまま送信する場合もあるが，リクエス トに応じて，さまざまなプログラムによってデータを加工してコンテン ツを生成した後に送信する場合もある（図6.14）。6-4-
2
バックエンドの一般的な構成 Web サイト構築におけるバックエンドとは，Web サーバと回線であ る。Web サーバは，ハードウェアとしてのサーバマシンと，その上で 稼働する各種ソフトウェアによって構成されている。 サーバマシンとしてのハードウェアは，一般的な PC が利用されるこ ともあるが，サーバ用途向けに特化したハードウェアが用いられること も多い。これは，Webサーバが24時間365日の連続稼働を要求されるた めであり，とくに電源まわりや冷却系統が強化されたものが利用される。 Web サーバを構成するソフトウェアは，さまざまなものがあり，目 的に応じて構成が異なる。これについては6－4－4で詳しく解説する。6-4-
3
バックエンド選定時に考えるべきこと サーバマシンおよび回線を選定する場合，Web サイトにどれだけの アクセス数が見込まれるかを考慮する必要がある。サーバマシンの処理能力と回線の帯域の太さは，同時に処理できるアクセス数と個々のアク セスに対する転送速度に影響する。より多くのユーザからのアクセスに 対応するには，より処理能力が高いサーバマシンと帯域の太い回線が要 求される。 ただし，処理能力が高いほどサーバマシンの導入コストと維持コスト は上昇し，回線も帯域の太さに応じてコストが上昇するため，見込まれ るアクセス数に見合ったものを導入するべきである。 もう 1 つ考慮すべきことは，サーバを管理するための人件費である。 サーバマシンを自社で保有する場合は，それを管理するための人員も確 保しなくてはならなず，この人件費もバックエンドを維持するためのコ ストとなってしまう。 前述のコストを下げ，また事業の展開に応じて柔軟にバックエンドの 能力を増減するために，ホスティングサービスを利用するケースも多い。 ホスティングサービスは，数台から数百台以上のサーバマシンと太い帯 域を所有し，利用者に貸し出す専門業者である。基本的なサーバマシン のセットアップと管理も行ってくれる。 利用者は，見込まれるアクセス数に応じた最小限の処理能力と帯域で Web サイトを開設し，アクセス数の増加に応じて借り受けるサーバマ シンの処理能力と帯域を増強していく，といった運用が可能になる。最 近は，仮想化技術を利用し，サーバマシンの処理能力やディスク容量を＊12 より柔軟に変更できるサービスも提供されている。 ＊ 12 仮 想 化 技 術 とは，プログラムに よって仮想的なハー ドウェアを生成し， その上で OS などの ソフトウェアを稼働 させる技術であり， たとえば，OS X 上 で Windows を 稼 働 させる，といったこ とが可能になる。ホ スティングサービス においては，1 つの ハードウェア上に複 数の仮想ハードウェ アを生成し，貸し出 すといったことが行 われている。その際， 各仮想ハードウェア に 割 り 当 て る CPU パワーやメモリ，デ ィスク容量などをソ フトウェアで変更で きるため，利用者の 要求に応じた柔軟な 処理能力の増減が可 能になる。 chapter
6
4-3 バ ッ ク エ ン ド で 活 用 す る 技 術 フロントエンド バックエンド Webブラウザ プログラム DB DB DB フロントエンドの おもな役割 ・コンテンツの 表示 ・ユーザ操作の 受け付け ・ユーザからの 入力の受け付け バックエンドの おもな役割 ・保存されている コンテンツの送信 ・プログラムが生成した コンテンツの送信 ・データの加工 および保存 ・コンテンツの要求 ・ユーザが入力した 情報などの送信 Web ブラウザ からの情報 生成したコンテンツ コンテンツを 取得 コンテンツを保存した ディレクトリ データの 抽出と追加 ・コンテンツの送信 DBMS Webサーバ ソフトウェア ■図6.14───フロントエンドとバックエンドの処理chapterchapter
7
3-1 Ｗ ｅ ｂ サ イ ト の 運 用7-3-
1
運用の概要 Web サイトを運用するために必要な作業は多岐にわたる。そのなか でまず最初に行うべきことは，運用のための体制の確立である。つまり， 誰が，どのように Web サイトを運用するのか，という人員と方針の定 義である。こうした運用体制のもと，実際の作業が行われる。 Web サイトの運用において，重要な作業の 1 つが情報の更新である。 これには，日常的な情報の追加からコーナの新設といった大規模なもの まで含まれる。不要となった情報の削除も更新作業の一部になる。 この情報更新を効率的に行うためのツールとして，CMS（Contents ＊20 Management System）が利用されている。 また，Web サイトを効率的に運用していくためには，Web サイトに 対する評価と Web サイトの調整を絶え間なく行っていく必要がある。 その際，重要な手がかりを与えてくれるのが，前述のWeb解析である。7-3-
2
運用体制 Web サイトを確実に効率よく運用していくためには，運用に関わる 人員の設定や，各メンバの役割や権限の定義といった運用体制を明確 にしておく必要がある。ここでは，ほとんどのWebサイトに共通する， 最低限整えておくべき運用体制を中心に解説する。 ①運用担当者の設定 Web サイトの運用を，具体的に誰が行うのか設定する。規模の大き なWebサイトの場合，Webサイトの運用を専門に行う部署を運用チー ムとして設置し，専任の担当者を設定することもある。Web サイトの 規模，あるいは運用する企業の規模が小さい場合は，Web サイトの運 用担当者は設定するが，ほかの仕事と兼任であることが多い。どちらの 場合でも，Web サイトの運用に関わるのは誰なのか，各運用担当者が ＊ 20 CMS につい て は，7-3-5 を 参 照 のこと。7-3
W e b サ イ ト の 運 用
制作期間が終わりWebサイトが公開されると，この時点から運用のため のさまざまな作業がはじまる。ここでは，Webサイトの運用について， そこで行われるべき施策と注意点を解説する。chapterchapter
