webサイト制作

「成功するwebサイト制作のポイント」(研修メモ)

web制作にかかわる人は、ビジネス、コンテンツ、デザイン、テクノロジ、ユーザビリティの知識が必要になる。日頃から多くのページを見て、知見を広めておく。

3つの視点
 ・Communication
 ・Logic
 ・Sense

期待:5W3H・・・何がしたいか
現状:知識と感性・・・何ができるか

ウェブサイトディレクション企画

■目的・目標
サイトの目的・目標(定量化)、ユーザ視点(要求)に応えるサイト企画

 背景、目的、目標、現状、他社

 物を買う、情報を調べる、→ユーザは目的を持ってきている。
 ★目的を明確に「だれが、だれに、何のために」
 目的にあったコンテンツをピックアップする。
   伝える情報 + 伝えやすい機能
 コンテンツに優先順位をつける。
 ターゲット、ビジネスモデル(収益モデル)、
 運用、サポート、プロモーション、集客

[ポイント] 検索エンジンからの訪問が8割

■デザインルールを決定・・・基調色やフォントを決める。
  イメージマトリックスの利用→日頃から多くのサイトを見て分類しておく

[ポイント] フォントは多くの種類を使わないこと。

■現状分析・・・5why

[ポイント] 
直帰率30%以上はサイトに問題有と疑う。

■SEOを意識したサイト制作
メインキーワード→サービスキーワード→関連キーワード(地域etc)からサイトを企画する。
ツール:キーワードアドバイスツールOvertureなど
■企画書作成
→ユーザと運営者の欲求に応える 実行計画、予算計画、対費用効果、システム・サイト構成など

ウェブサイトディレクション〔設計〕

■設計
サイトマップ&ナビゲーション設計
  コンテンツのゾーニングや視線の誘導

  ▼
  プロトタイプの作成

  ・ユーザは左上を見る癖がある。(過去の学習から)
  視線を誘導する方法
  1.構図により文字を目立たせる。
   密度のあるとこに目線が行く 視線を誘導する画像の使用
   エッジの向きや形状の流れ、素材の向き(顔の向き)など
  2.色の対色、強弱(明度)
  3.イメージの大小
  大きい画像の役割、コンテンツ全体のイメージ
  小さい画像の役割、コンテンツラインナップの量
  4.書体と色彩によるイメージ作り

■ ユーザビリティとアクセシビリティ 参考HP:富士通U-site
  Effectiveness有効さ
  Efficiency効率、
  Satisfaction満足度、
  Context of use利用状況

  ウェブは、情報と操作が混同している
  一瞬でコンテンツの内容が伝わるデザイン
  ユーザの環境(OS,Browser,version)を出来る限り取り込む
  完全なアクセシビリティを目指す必要はないが、配慮は必要はない

[ポイント] 画像には代替テキストを記述
正しい文章構造
フォントの大きさを固定しない
テーブルの利用は避け、cssを利用する

・外部設計:画面デザイン、ディレクトリ構成、機能リスト、画面遷移
・内部設計:表示項目、システム項目、スクリプト・プログラム項目、DB項目

サイトマップ、ガイドライン、プロトタイプの作成

■色彩設計
  スタイルガイド
  デザイン定義、制作ルール決め
  制作ツール、推奨システム
  サイト全体の役割、各サイトの役割
  サイト構成図、領域ガイド(サイズetc)
  色彩定義、HTML/CSSテンプレート
■ライティング技法
  表現方法、文章量、見出し、段落、ページ分割
  webの特性を考えた文章表現を心かける。
  チェックシート(sample[準備中])

HTML5