Hatena::ブログ(Diary)

Webデザインの勉強 3月22日開講クラス フェリカテクニカルアカデミー

フェリカテクニカルアカデミーWebサイト制作科05月19日開講クラス募集中!


◎求職者支援訓練 Webデザインの勉強 | フェリカTA受講生作品紹介◎

◎Webデザインの勉強 Webサイト制作科用授業解説と演習問題◎


2016-08-02

ヒアリングと要件定義書

ヒアリングでお訊ねする基本的なこと

Webサーバー環境/URL
  • Webサーバーの環境は? (自前・レンタル・プロバイダーのサービスサーバー?)
  • URL(ドメイン名)はどうしますか?

Webサイトの役割
  • Webの役割は?(企業宣伝/特化した商品の告知/情報提供/販売/…)
  • Webでアピールしたいことは?
  • 競合他社と差別化できることは?
  • Web上では言わずにおきたいことは?(ex.価格)
  • ターゲットユーザーは?

インプレッション
  • ターゲットに印象づけたいイメージはありますか?
  • 気に入っている他のWebサイト
  • 競合他社のWebサイト

Webに掲載したい内容等
  • 掲載したい記事や事柄
  • 取入れたい機能やアイデア
  • その他の要件・与件
  • Webサイト全体のボリュームは?

コンテンツ素材
  • 準備できるコンテンツ素材は?(印刷物・写真・テキスト・各種資料 等)
  • 新に制作しなくてはならないと思われるコンテンツ

担当者
  • 制作(窓口)担当者
  • 決定権者

スケジュール/予算・費用
  • 公開希望予定日
  • 予算・費用
  • コンペですか?

Webリニューアルの場合(既にWebを公開している場合)
  • リメイク or 増改築 or スクラップ&ビルド ?
  • 既存Webサイトの評判・効果
  • 既存Webサイトから採用・利用したい機能・内容(採用したくない機能・内容)
  • 新規に取入れたい事項・機能・アイデア
  • 既存Webサイトから流用可能な素材…等々。

保守/監理
  • 保守運用担当者(Web制作のスキル)
  • 定期的な更新があるWebコンテンツは?
  • 追加予定のあるコンテンツ?(新製品、新企画等)
  • コンサルティングやサポートが必要ですか?


要件定義書


  1. サイトのゴールと目標(具体的数値目標も設定)
  2. 事前調査(市場調査、競合調査、自社分析など)
  3. サイト要件(ページ構成要件、デザイン要件、コンテンツ要件、機能要件、インフラ要件など)
  4. ターゲットユーザー像
  5. ターゲットブラウザ
  6. ユーザビリティ/アクセシビリティ指針
  7. プロジェクトスケジュールとロードマップ
  8. プロジェクトにおける作業分担と体制
  9. 運用開始後の体制
  10. 継続検討課題の整理

要件定義/ 基本計画
  • 「何を誰にどう伝えるか。」
  • 打ち合せを重ねながら、Webサイトの目的とゴールをはっきりさせます
  • Webサイトコンセプトの策定
  • コンテンツ概要プラン
  • Webサイト構成概要プラン
  • レビューコンテ

制作ワークフロー

Webサイト設計
  • 「伝えたいことが伝えたい人にきっちり伝わる」よう、Webサイト全体のデザイン設計をします。また、コンテンツに必要な素材の洗い出しをします
  • Webサイト構成詳細プラン
  • ワイヤーフレーム
  • ナビゲーションプラン
  • コンテンツ編集プラン

ビジュアルデザイン
  • Webサイトの目的に相応しいユーザーインターフェースを検討・デザインするステップです
  • プロトタイプでナビゲーションの基本的な確認をします
  • インターフェースデザイン
  • 各種パーツデザイン
  • 基本レイアウトデザイン
  • プロトタイプ制作

コンテンツ編集/制作
  • 上記「ビジュアルデザイン」と平行しての作業となります
  • 既存素材(テキスト・画像等)を準備していただき、それをWeb用に加工します
  • 取材 ・原稿ライティング
  • コピーライティング
  • スキャニング画像取込み
  • 画像処理・写真撮影
  • 挿し絵(静止画イラスト)
  • PDFファイル制作
  • 動画撮影制作編集 ...etc

Webページ制作
  • テキスト・画像等をHTML化します
  • Web標準に準拠したファイルを作成
  • ページレイアウト
  • テキスト入力
  • HTMLコーディング

テスト/校正
  • 完成したファイルデータを当方のWebサーバーにアップロードします
  • ご確認・承認後、ファイルデータを納品します(場合によっては指定Webサーバーにアップロードします)
  • ナビゲーションテスト
  • 不具合チェック
  • 文字校正

サイト公開

サイトプロモーション

保守/監理
  • Webサイトの目的が達成されているかどうかを評価しながら、コンテンツの適切な更新/追加をする
  • 目的の達成度評価
  • SEOキーワードの適正化(Googleアナリスティックのコードも加えます)



《仕様書例》

ver/指定値 注釈(記述例)
html規格 HTML HTML 5
JQuery規格 ビルボードで使用予定
css規格 css2,css3 Progressive Enhancement 起用
文字code UTF-8
改行code LF
拡張子 .html
対応OS windows

Mac

vista 7 8.1

MacOS 10.4以上

検証ブラウザ
IE,

chrome,

safari,

firefox

IE(6.0〜),

Chrome(19.0〜),

Safari(5.1〜),

Firefox(12〜),
iOS7,

Android3.4~4.4

文書型宣言 <!DOCTYPE html>
記述全般 すべて小文字表記、終了タグ必須
head meta,title,link,scriptの順で記述 
meta keywords keywords案
meta description description案
title title案
link 外部CSSファイルの読み込み
script 外部scriptファイルの読み込み
body
font Hiragino Kaku Gothic ProN,

Meiryo,

sans-serif;

font-size 16px
color #333
background #FFF
line-height 1.6
h1 各ページともh1から出現
h2 任意
h3 任意
h4 任意
container div id="container"で固定 960px
wrap div id="wrapper"で固定
header div id="header"で固定
nav div id="nav"で固定
content div id="container"で固定
sidebar div id="sidebar"で固定
footer div id="footer"で固定
class
命名ルール
ページ内で複数回使用する場合に使用。div class="(pagename)_(任意の名前)"で使用。(例)div class="top_logo"
cssファイル名 common.css, style.css
css記述ルール 各ページにcommon.cssを読み込み、各ページにそのファイル専用のstyle.cssを用意する
印刷対応 なし
htmlファイル名 (pagename).htmlとする。ただし、トップページのみindex.htmlとする。
画像形式 写真の画像やグラデーション画像は、jpgとし、それ以外はpngとする。
画像ファイル名
(任意の名前).jpg
(任意の名前).png
server直下 pcサイト用html, imgフォルダ, cssフォルダ, jsフォルダを配置
imgフォルダ
使用する画像は、imgフォルダ直下に格納
→html記述例:src="img/〜.jpg" src="img/〜.gif"
cssフォルダ cssファイルをcssフォルダに格納
jsフォルダ JQueryファイルを格納