web制作の運用と基本
https://scrapbox.io/files/6296d9af721a3c001d49daeb.png
あんまり知らない部分だけメモした
Chapter 1
Webサイトの開発の流れ
プロジェクト開始前
プロジェクトチーム発足
プロジェクトメンバー選定
事業課題,目的の確認
担当決め
企画検討
予算獲得
要件を細かく分析
開発ベンダー選定
↓
プロジェクト開始後
要件定義
方針の決定
スケジュールや工程などのチェック
設計
開発・テスト
UAT(ユーザー受け入れテスト)
発注会社による確認・テスト
フィードバックを受けて改善
公開・運用
ユーザビリティとは
ユーザーが「やりたいことができたか(有効性)」,「効率的にできたか(効率性)」,「満足したか(満足度)」の度合いのことを言うらしい.
権威のヤコブ・ニールセン博士はユーザビリティを以下のように分類する
学習のしやすさ:初めてでも簡単に使える
効率性:手間なく効率的に目的を達成できる
記憶のしやすさ:時間が経っても使い方をすぐ思い出す
エラー:エラーが発生しずらく,すぐ元の状態に戻れる
主観的満足度:ユーザーの主観的な満足度あい
セキュリティとプライバシー
アプリ,サーバー,ネットワークのセキュリティ
個人情報保護方針やプライバシーポリシーを策定する
取得する情報の種類や利用目的をユーザーに開示する.
個人情報を利用する場合はユーザーの許諾を明確に得る必要がある
運営する国によってはGDPRやCCPAなどの各国の法令を遵守する必要がある
Chapter 2
Webサイトを作り始める前に
発注する側の話
Web担当のチームを作って社内体制を整理
制作会社の選定をして,RFP(提案依頼書)を準備する
発注側と受注側で契約書を締結する
検討チーム
予算確保,要件定義,設計,開発などの各工程を主体的に推進する.
プロジェクトの目的を社内で統一しながら進行する.
経営層の承認を得るためにどれだけビジネスに貢献できるか数値で示す.
社内からの理解が得られるよう,IT部門,マーケティング部門,営業部門などと連携をとって進める.
制作会社の選定
選定方針の検討
提案依頼書を作成
提案依頼書を送付した後.制作会社と事前打ち合わせ
提案内容を制作会社からプレゼンしてもらう.チーム内で評価を行う.
RFP(提案依頼書)の書き方
RFPを作成しておくことで同じ条件を明確に提示できる
ヒアリングを十分にしなければ提案依頼書を作成した後でも追加の要望がくる.しっかりと社内の意見統一をしておく.
table: RFPへの記載内容と項目例
分類 内容 項目
プロジェクトの概要 社内の意思統率をするためにも明確に記載する必要あり プロジェクト名,コンセプト現状課題,納期,予算
会社概要 事業内容化ターゲットユーザー,競合情報 会社基本情報,事業内容,ターゲットユーザー
要件・要望 Webサイトの掲載内容や制作内容について 掲載コンテンツ,デザイン要望,サーバー環境
提案依頼内容 制作会社に依頼してほしい項目を記載する スケジュール,見積書,デザイン案,サイト構成
スケジュール 提案に関するスケジュールについて明示する 提案提出期限,選定予定日
準委任契約,請負契約について
発注側と受注側の間で必ず契約手続きが発生する.担当者は自社の法務部門と相談しながらリーガルチェックという契約書面の内容についての妥当性やリスクのチェックを行うことが一般的.
NDA(秘密保持契約)
企業の機密情報を保護する契約.RFPやヒアリング時の回答の内容や資料に外部に流出してはいけない情報が含まれる場合があるので情報開示前に締結する.
業務委託契約
よくわからん
準委任契約:要件定義,設計など各種作業を委託する場合にその都度締結する契約形態.作業プロセスを重視するため納品という考え方がない
請負契約:成果物に対して責任が発生する.開発作業を実施する場合に締結する契約形態.発注側がチェックして問題なければ完了するが,「契約不適合責任があり」問題がある場合は契約書で定めた期間内であれば無償で対応する責任がある.
著作権,知的財産権について
知的財産権は著作権も含む複数の権利を包括した総称
知的創造物
特許権:発明を保護
実用新案権:物品の形状等の考案を保護
意匠権:物品,建築物,画像のデザインを保護
著作権:文藝,学術,美術,音楽,コードなどの精神的作品を保護
回路配置利用権:半導体集積回路の回路配置の利用を保護
育成者権:植物の新品種を保護
営業秘密:ノウハウや顧客リストの登用など不正競争行為を保護
営業上の標識
商標権:商品名・サービスを利用するマークを保護
商号:商号を保護
商品等表示:著名な商標等の不正使用を保護
Chapter3 Webサイトの目的を考える
Webサイトの目的を整理する
1.ビジネスゴール・ミッションは?
2. ターゲットにすべきユーザーは?
3. そのユーザーとは具体的にどんな人?ペルソナを作成する.
4. そのユーザーの一連の行動は?ペルソナをもとにユーザーの一連の行動や感情を作成する
5. Webサイトに求められる役割は?
ペルソナとは
製品やサービスのターゲットユーザーを詳細化して,架空の人物に置き換えたもの.「30~40代あたりの会社員,年収400万〜600万円程度」などなど.
ターゲットユーザーの情報を集める.
インタビュー
ユーザーを知っている人から情報をもらう
アンケートなどで調べる
具体的なイメージにするために写真を使う
カスタマージャーニーマップを作る
ユーザーのゴールを考える
ユーザーがどのような行動をとり,なんのチャネルと接点をもつか考える
どんな感情でどんな課題を持っていたか考える.
ユーザーにどのようなコンテンツがあれば良いか考える.
Chapter4 開発方法を考える
Chapter5 ユーザーとの接点を考える
Chapter6 Webサイトの構造を考える
サイト構造の検討プロセス
コンテンツを分類して理解,体系化する.
ハイレベルサイトマップというツリー状の図を作成する
ナビゲーションの種類と特徴
グローバルナビゲーション:全てのページの決まった位置に常設するWebサイト全体を横串で移動できるナビゲーション.
https://scrapbox.io/files/6297322ca1d0ad001da4d58d.png
ローカルナビゲーション:グローバルナビゲーションの下位に当たる同一のカテゴリー内の移動を可能にするナビゲーション
https://scrapbox.io/files/629732521f7c8c001d04f8c6.png
パンくずリスト:表示しているページとそれまで経路を表示する
https://scrapbox.io/files/6297354bca5b2f00232e958f.png
ページネーション:複数ページで構成されるコンテンツを行き来するために使用するナビゲーション.
https://scrapbox.io/files/629735816e00c80023b28e2a.png
ステップナビゲーション:入力フォームなど一定の順序でいくつかのステップに分けて情報を入力するような画面で使用するナビゲーション
詳細サイトマップ
ページ単位で仕様や構成を詳細に定義する.
table: 定義例
定義名 内容説明
ページID 固有IDを設定すると管理しやすい
ページ名 ページのタイトル
ページ説明 SEOやSNS向けにメタ情報としてページの説明を記述する
キーワード SEO目的でメタ情報としてキーワードを記述する
カテゴリー ページのレイアウトパターンが定義されている場合はそのパターン名
ファイルパス ファイルパスやURL
レイアウトパターン ページのレイアウトパターンが定義されている場合はそのパターン名
旧URL リニューアルの場合は以前のURLなどを記載する
コンテンツ有無 特定コンテンツを表示するかどうか
ワイヤーフレーム
ワイヤーフレームとはWebページの骨格を定義するための成果物で画面設計する初期段階の画面イメージとして作成するもの.全体に共通認識を作るためのコミュニケーションを促進するために作成される.
ワイヤーフレームで最低限会s化すべき要素
エリア定義:要素を配置するエリアを定義する
コンテンツの重み付け:各コンテンツの重要度や優先順を位置やサイズで可視化する
コンテンツの種類:配置した要素がテキストなのか画像なのか,それらの量や配置占有する大きさなどを可視化.
Chapter7 Webサイトをつくる(デザイン編)
Webデザインの目的
短期的な目的は情報を正しく魅力的に伝えること.
長期的な目的は一回一回のサイト訪問におけるサービス面,デザイン面での体験の積み重ねがユーザーの中にWebサイトや企業・製品に対する共感や支持を芽生えさせる.直接購入行動は伴わなくてもブランドの認知が拡大したという効果が達成できる.
Chapter8 Webサイトをつくる(コーディング・開発系)
Chapter9 Webサイトを公開・運用・開発する