Webサイト構築Chapter1_3稿0521.indd

Transcription

1 Chapter 1 仕 様 と 制 作 指 示

2 PREPARATION Chapter1 で 使 用 するフォルダー 本 講 座 で 使 用 するデータは 映 像 教 材 ページからダウンロードしてください ダウンロードしたデータは 展 開 し デスクトップに 用 意 してください

3 仕 様 と 制 作 指 示 Chapter 概 要 本 講 座 では 架 空 のデジタルコンテンツ 制 作 会 社 のウェブサイトを 制 作 します みなさんは そのサイトを 制 作 するプロジェクトメンバーの 一 員 という 位 置 づけで 制 作 をしていきます 近 年 では クライアントのニーズが 多 様 化 し また Web 制 作 に 必 要 な 技 術 も 広 く 深 く 求 められるようになって います そのため Web 創 始 期 において 一 人 または 少 人 数 で 制 作 していた Web サイトも 現 在 では 複 数 の 人 数 で 役 割 を 分 担 して 制 作 する 必 要 があります Web 制 作 の 主 な 役 割 として 営 業 Web プロデューサー Web ディレクター インフォメーションアーキテク チャー UX/UI デザイナー テクニカルディレクター Web デザイナー コーダー(マークアップエンジニア と 呼 ばれることもあります) 映 像 サウンド アニメーションなどの 各 メディアクリエイター プログラマー などがあります これらを 全 て 一 人 で 行 うことは 難 しいので ここでは Web デザイナーとして Web ページの グラフィックを 制 作 し マークアップエンジニアを 兼 務 する と 仮 定 します また 今 回 制 作 する 架 空 の 会 社 の 業 務 内 容 がデジタルコンテンツ 制 作 であることから 考 えると 自 社 で 制 作 でき ると 考 えられます 最 近 では 一 般 的 な 企 業 においても 制 作 会 社 に 依 頼 せずに 自 社 サイトを 社 内 で 制 作 すること が 多 く 見 られます 他 社 のサイトを 依 頼 される 場 合 と 自 社 サイトを 制 作 する 場 合 では 制 作 工 程 に 大 きな 違 いはあ りませんが どちらの 場 合 でも 好 き 勝 手 に 制 作 するわけではなく そこには Web サイトを 制 作 する 目 的 が あることに 注 意 しましょう 1-2 制 作 目 的 とコンバージョン それでは Web サイトを 制 作 する 目 的 とは 何 でしょうか? 営 業 Web プロデューサー Web ディレクターなどの 上 流 工 程 においては クライアントのニーズをヒアリン グし Web サイトを 制 作 する 目 的 を 確 認 します 大 手 企 業 やサービスの 場 合 既 に Web サイトを 持 っているこ とが 多 いので その 場 合 にはリニューアルとなります リニューアルの 場 合 には 既 存 サイトの 問 題 点 が 明 確 で ある 場 合 が 多 く その 問 題 点 を 克 服 することが 主 な 目 的 となります まだ Web サイトを 持 っていない 場 合 や 新 規 サービスの 場 合 には Web サイトを 持 つこと 自 体 が 目 的 となります しかし 内 容 は 何 でもいいわけではありません 商 用 目 的 の Web サイトがビジネスツールの1つである 以 上 は Web サイトを 持 ったことによる 何 らかの 成 果 が 確 認 できなくてはなりません コンバージョンとアクセス 数 Web サイトから 得 られる 成 果 を コンバージョン といいます わかりやすい 例 としては ショッピングサ イトにおける 商 品 の 購 入 件 数 であったり 情 報 ポータルサイトにおける 無 料 会 員 数 などです コンバージョ ンは Web サイトへの 施 策 を 具 体 的 な 数 値 として 把 握 するための 重 要 な 項 目 の1つです 今 回 作 成 する Web サイトは 新 規 サイト 制 作 案 件 とし Web サイトのコンバージョンを 各 サービスへのお 問 い 合 わせ 件 数 および 無 料 アプリのダウンロード 数 とします コンバージョンを 増 やすにはどうしたらよいでしょうか? そのための 策 として Web サイトを 制 作 する 際 に 加 えられることはあるでしょうか? コンバージョンが アクセス 数 に 比 例 することは 容 易 に 想 像 できます 例 えばショッピングサイトであれば Web サイトにアクセスする 人 が 増 えれば その 分 買 い 物 をする 人 の 数 が 増 える 可 能 性 が 高 まるためです そのため まずはアクセス 数 が 増 えるように 工 夫 する 必 要 があります 3

4 Chapter 1 仕 様 と 制 作 指 示 アクセス 数 を 増 やすためにはどうすればよいでしょうか? 一 般 的 に ユーザーは 検 索 結 果 からサイトに 訪 問 することが 多 いため 自 社 の Web サイトが 検 索 結 果 の 上 位 に 表 示 される ようにすればアクセス 数 が 増 えると 考 えられます そのためのコンテンツに 対 する 施 策 を SEO(Search Engine Optimization) といいます また 検 索 エンジンのキーワード 連 動 型 広 告 やリスティングサー ビスを 利 用 した SEM(Search Engine Marketing) と 呼 ばれる 手 法 もあります SEO のための 具 体 的 な 手 法 はここでは 取 り 上 げませんが 一 般 的 には クローラー と 呼 ばれる 検 索 サイト が 情 報 を 集 めるためのプログラムに 対 して 良 く 判 断 してもらえるように Web サイトのデータを 工 夫 すること になります そのノウハウは 複 雑 でかつ 日 々 進 化 しているため SEO を 専 門 的 に 行 なっている 企 業 でなければ 的 確 な 対 策 は 難 しいものです Web サイト 制 作 を 学 習 している 皆 さんは まずは コンテンツをわかりやす く 表 現 し コンテンツを 正 しくマークアップ して ユーザー 指 向 で 制 作 することを 心 がけましょう 良 質 な Web サイトを 制 作 することは 検 索 結 果 の 上 位 に 表 示 される 可 能 性 を 高 めることに 繋 がります 今 回 の 制 作 では サイト 全 体 で 丁 寧 に 作 ることはもちろんのこと ユーザーに サービスの 内 容 を 理 解 して もらい お 問 い 合 わせ ダウンロード へのわかりやすい 導 線 を 用 意 しておくことが 重 要 なポイントとなり ます Point: 近 年 Facebook Twitter ソーシャルゲームなどソーシャル 的 なコンテンツが 増 え そこからの サイト 訪 問 が 増 えています SEO を 施 して 上 位 に 表 示 されたとしても SEO だけではトップページ 以 外 のコンテンツを 見 ずに 他 のサイトへ 移 動 してしまう 離 脱 率 を 抑 えることが 難 しくなります 機 械 的 に 表 示 される 検 索 結 果 よりも Facebook などのソーシャルコンテンツにおいてリコメンド されたリンクからの 方 が より 興 味 が 高 いユーザーが 訪 問 する 可 能 性 が 高 く 離 脱 率 を 抑 えること が 期 待 できます SEO や SEM に 加 えて これらソーシャルメディアを 活 用 したマーケティング 手 法 が 注 目 されてい ます 詳 細 については Web プロデュース 講 座 などでご 紹 介 しています 離 脱 率 を 下 げないためには 訪 問 したユーザーに 興 味 を 持 ってもらうことも 重 要 な 要 素 の1つです そのためにも ユーザーにとって 魅 力 的 なコンテンツをわかりやすく 提 供 する 良 質 な Web サイト 作 りが 必 要 なのです 1-3 コンセプト クライアントへのヒアリングを 行 い 解 決 すべき 要 件 を 洗 い 出 し コンセプトを 決 定 します 本 講 座 では 新 規 Web サイト 制 作 のコンセプトを 以 下 のように 決 定 しました ターゲットにサービスを 広 く 認 知 してもらい デザイン 力 と 技 術 力 のトータルバランスが 優 れた 企 業 で あるブランドイメージの 確 立 4

5 仕 様 と 制 作 指 示 Chapter ターゲット ターゲット とは サイトを 利 用 するユーザー 層 のことです 今 回 の 例 では サイトの 性 格 が 企 業 同 士 の 取 引 である B to B(Business to Business)なので ターゲットはビジネスパートナーを 探 している 企 業 の 20 代 30 代 の 若 手 担 当 者 です ターゲットは 男 女 を 問 わず IT の 知 識 に 明 るくデザインコンシャス( 志 向 )である 可 能 性 が 高 いと 想 像 できます また 無 料 アプリはコンシューマー( 消 費 者 ) 向 けとなりますが サイトと 同 様 に 20 代 30 代 の 若 い 男 女 で 新 しいことに 興 味 があり アーリーアダプターとして 時 代 の 先 頭 に 立 っていたいと 思 うタイプである 可 能 性 が 高 いと 想 像 できます このように ターゲットユーザーを 想 定 することでターゲットユーザーの 趣 向 や 好 みに 合 うスタイルを 検 討 でき ます そのためには 類 似 のターゲットユーザーを 持 つ 他 の 既 存 サイトや 日 常 生 活 からトレンドをおさえ ヒン トを 探 すことが 有 効 です Point: 用 語 について 簡 単 にご 紹 介 します B to B 電 子 商 取 引 形 態 の1つで 企 業 と 企 業 の 間 の 取 引 のこと なお 企 業 と 個 人 の 間 の 電 子 商 取 引 を B to C(Business to Consumer) 個 人 と 個 人 の 間 での 電 子 商 取 引 を C to C (Consumer to Consumer) といいます B to C の 例 は Amazon や 楽 天 などのサービス C to C の 例 は ネットオークションなどが 挙 げ られます アーリーアダプター マーケティングに 関 する 用 語 で 新 たに 現 れたサービスやライフスタ イルなどを 比 較 的 早 期 に 受 け 入 れ 周 りに 大 きな 影 響 を 与 えるユーザー 層 のことです 1-5 既 存 サイトの 研 究 同 種 のサービスや 企 業 のサイト 同 様 のターゲットユーザーを 持 つ 既 存 サイトを 研 究 することはとても 重 要 です 特 に Web デザインを 学 習 している 皆 さんには 時 間 を 多 く 使 って 学 習 いただきたい 内 容 の1つです ここでは 既 存 サイトの 具 体 例 は 挙 げませんが 普 段 Web サイトを 閲 覧 するときから 各 自 で 注 意 して 観 察 する ように 心 がけましょう 既 存 サイトを 観 察 する 際 のポイントは 以 下 の 通 りです まずはこれらから 始 め 他 にも 各 自 の 視 点 でより 深 く 検 討 できるようになりましょう デザインフィールド 映 像 教 材 デザインフィールド をご 覧 ください サイトのサイズの 決 定 についての 考 察 です まず 縦 方 向 のスクロール 操 作 に 関 して ユーザーはおおむね 寛 容 です なぜなら PC ではマウスホイール スマートフォンなどのタッチユーザーインターフェースではフリッ クすれば 簡 単 にできるからです 一 方 で 横 のサイズに 注 目 してみると こちらはユーザーの 閲 覧 環 境 特 に 使 用 しているディスプレイのサイズが 大 きく 影 響 しますので 慎 重 に 決 定 する 必 要 があります 横 のサイズを 知 るためには 以 下 の 方 法 があります 5