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[準備中])