Web製作の流れ全体像を解説。
1.Webサイトの企画
もっとも大事なのは、サイトの目的をしっかりと定義することです。
資料請求を増やしたいのか？問合せを増やしたいのか？名刺がわりのページさえあればいいのか？
Webサイトの企画
制作するWebサイトを企画します。
使うもの
- 紙、ペン、エバーノート
決めること
- Webサイトの目的
- Webサイトのターゲット
Webサイトに必要な要素を書きだす
サイトに必要となりそうな要素を書き出します。
例えば、コーポレートサイトなら、「企業概要」、「問合せ」、「お知らせ等」、「サイトマップ」などです。
2.Webサイトの設計
サイトマップ作成
サイトマップとはサイト全体の構造を図解化してものです。
トップページを選定し組み込む要素を決定します。
あらかじめ用意テンプレートされているテンプレートを使えば効率的です。
- 使うツール：Cacoo、Illustrator、Excel、パワーポイントなど
ディレトリマップ作成
ディレクトリマップとは、Webサイトの全ページのタイトル・ファイル名・階層をまとめた一覧表です。
表計算ソフトを使い作成します。
- 使うツール：表計算ソフト（Excel、googleスプレッドシート、Numbers）
ワイヤーフレーム作成
ワイヤフレームとは、Webサイトの骨組みです。ページにどこに何をを配置するのか、図を作成します。
ワイヤフレームの制作で現在最もよく使われているツールはSketchです。
使うツール：Sketch、Illustrator、Wireframe.cc、Cacooなど
参考：ワイヤーフレーム作成ツール比較18選
3.デザイン設計
モックアップ作成
レスポンシブなウェブサイトを簡単に作成できるサービスFROONT
サイトのカラーの決定
Googleマテリアルデザインのカラーパレット：Color – Style – Material design guidelines
4.コーディング
HTMLで文書を書き（マークアップ）、CSSでサイト見た目を整えます。
使うツール：テキストエディターを使ってコーディングしていきます。
参考：Web制作に使えるエディタ一覧 Atom、Sublime Text、Brackets、Coda
ローカル開発環境の準備
画像のスライス
デザインをパーツごとに画像をスライス（分割）します。
マークアップ（HTML）
マークアップとは文書構造をコンピューターが識別できるよう、「見出し」、「タグ」などの設定を行う作業のことです。
レイアウト（CSS）
CSSとはCascading Style Sheetsの略で、Webサイトのスタイル、要素の配置やカラーを設定するものです。
フレームワーク、Bootstrapを使うとルールにしたがってコーディングすることで、整ってレイアウトを作成できます。
Bootstrapはレスポンシブにも対応しています。
動作確認
使用するブラウザによって、レイアウトが崩れてしまう等も問題がおきる場合があります。
どのブラウザでも正常に表示できるか確認します。
HTML+CSS／HTML5 & CSS3 Web Design
7.Webサイト公開
サーバー設定
Webサイト公開するためにはサーバーが必要です。
ドメイン取得
ドメインとはサイトの示す住所のようなものです。
参考：レンタルサーバーMixhostで独自ドメインを設定する方法
SSL化
SSLとはサイトのセキュリティの設定です。
通信を暗号化することで、利用者の情報を安全に保護します。
参考：レンタルサーバーMixHostでWordPressをSSL対応（HTTPS化）する方法
ファイルのアップロード
ローカルパソコン上のファイルをサーバーにアップロードします。
使うツール：FTPソフト(サイバーダック、FileZilla)
Webサイトの確認
Webサイトが正常に表示できているか、レイアウトが崩れているところはないかなどチェックします。
参考：MacのSafariでInternet Explorer を使う方法
8.SEO
SEOとは「Search Engine Optimization」の略で、検索エンジンの上位を獲得するための取り組みです。
検索結果の上位に表示させることで、認知度アップ、資料請求を増やす、お問い合わせ数を増やす、売上を増やす、などサイト目的を達成を目指します。
参考：SEO入門（外部サイト）
9.広告運営
Webサイト作成直後は、なかなすぐにアクセスを集めることはできません。
Webサイト作成直後でも多くのアクセスを呼び込むためには、広告が有効です。
検索結果連動型の広告や、ソーシャルメディアに出稿できる広告があります。
- Googleアドワーズ （参考：Googleアドワーズ入門）
- ヤフープロモーション広告
- フェイスブック広告
- インスタグラム広告
