Web サイト制作
Web サイト制作の行程は、このようになっています。
- 企画・設計
- ヒアリング
- Web サイト設計
- ビジュアル
- Web サイトデザイン
- 実装
- HTML+CSS, JavaScript
- CMS 実装
- 運用
- アクセス解析
- ウェブマーケティング
スケジュール管理
スケジュール管理は、綿密に常に最新に更新しておくこと。
ヒアリング
ヒアリングシートを作成し下記の内容を参考に、クライアントの話を聞き、記述しておく。
- 基本情報
- 会社名
- 代表者名
- 担当者名
- 電話番号
- メールアドレス
- ご都合の良い連絡方法
- 構築の目的
- 課題・目標（売上アップ、集客増加、ブランディングなど）
- 特にアピールしたいこと
- サイトのゴール（コンバージョン）
- 更新の必要性
- ターゲット
- 区分（会社 or 個人）
- 年代
- 性別
- 言語
- エリア指定
- コンテンツ
- 依頼内容
- 希望コンテンツ
- 希望システム
- 納品方法
- 公開日
- 現状のサイトの情報
- CMS
- アクセス解析データ
- デザイン仕様
- 主に使用したい色
- 他に使用したいアクセントカラー
- 希望するイメージ
- ロゴマークの有無
- 写真素材の有無
- コピー、テキスト素材の有無
- 指定フォントの有無
- デザインにまつわる決まり
- 参考サイト、既存のチラシなどの有無
- コーディング・システム仕様
- 対応デバイス
- 対応ブラウザ
- 上位検索表示させたいキーワード
- その他
- 先方の PC 環境（OS やブラウザの種類や画面サイズ）
- チェックバックの期間の希望
- CMS で更新できる方はいるのか？
コンテンツ案（コンテンツ設計）
Web サイトに掲載する情報（コンテンツ）を棚卸しし、階層構造化して整理することです。
Web サイトの目的を明確化するだけでなく、閲覧者が目的ページにスムーズにたどり着けるように配慮して設計することが重要です。
成果物
- コンテンツリスト：Web サイトに掲載するコンテンツ案をリストアップし、情報を整理します。
- サイトマップ：サイトマップとは、ウェブサイトのページ構成を階層化し、ツリー上に整理した設計図のことです。
ワイヤーフレーム
ワイヤーフレームとは Web ページの設計図のことです。
ワイヤーフレームをもとに Web ページのデザイン・システム開発が進められていくため、Web 制作ではとても重要な資料です。
ワイヤーフレームを持参して、打ち合わせをすることで、Web に関して知識が少ないクライントとも、前のめりで打ち合わせをすることができます。
ワイヤーフレームでコンテンツ・ページ構成がすり合わせできたら、ビジュアルデザインに入ります。
ビジュアルデザイン
まずは、素材を集めます。
- ロゴ
- 他媒体で利用している写真、雑誌
- ※著作権に注意しましょう。（例：食べログの写真は、食べログもしくは投稿者に権利があります。）
- 動画
XD もしくは、Photoshop, Figma でデザインデータを作っていきます。
主要な部分、使い回しの部分はダミーをひとつ作るなど、時間を省略し、実装に時間を割くことも考えながら進めます。
クライアントの承諾が必要なので、返事が返ってくるまでの時間でコーディングも進めます。
コーディング
html と CSS でコーディングする時に、今回の課題で取り組む目標などを明確にする。
業界の方は、必ずソースコードを見ます。
- セマンティックな html の使い方がされているか。
- 適切なコメントアウト
- class や id の命名規則に統一感があるか。
- インデントで美しいコード
効率良く、作業をするために、まずは、html と CSS をしっかりと構築。
- html で構造を作ってから CSS で装飾していきます。
- アニメーションさせる場合は、他で実験をしてから実装する。
- CodePen などで実験しておきましょう。
- JavaScript で悩む前に、html（構造化）＋ CSS