mojigumi Webサイト作成の全工程をここにまとめています。ドメイン決定からWordPress設定、運用まで複雑な工程を、ざっとですが一目でわかるよう、わかりやすく表にしました。
起業内容のヒアリング
当然だが、顧客サービスの詳細をヒアリングし、今後のWebデザイン制作やイメージ作りの参考にする。
ヒアリングの要点
- 社名
- サービス内容
- 会社概要
- 営業対象
- 販売対象
- 理念
- イメージカラー
提案書とお見積り
ヒアリングに基づいて、全体的なイメージを図にした提案書を作成し、お見積もりと共にお客様に提案する。
提案書の要点
- ドメインご提案
- サイト構成図
- ページ内容テキスト
- 日程表
- お見積り
- オプションの料金表（追加ページ、追加作業、SNS、その他報酬制など）
ロゴデザイン
ロゴを作るかどうかは顧客によるが、起業されるお客さんにはロゴも含めてデザインすることもある。先の起業内容の聞き取りでどんなサービスかを理解しロゴとして形にしていき、おおよそ次のような工程になる。
ロゴデザインの要点
- 社名と英語スペル確認
- サービス内容を理解
- ロゴスケッチ
- いくつかのスケッチに絞り込みトレース作業
- 提案資料作成
- 修正
- 決定
- 白黒用、単色用、等の各種イラレデータとPNG（SNS用、icon用として600pxサイズ以上）に書き出し
- ロゴガイドラインの作成
ドメインを決定
- 店名やサービス名をシンプルに表す文字列でドメインを決める
- メルアドにした場合の見た目も考慮
- 取得可能な空きドメインかを確かめ一覧化
サーバーとドメイン契約
サーバーとドメイン同時契約するかは場合によるが、今後の管理分業や移管等を考慮して、同時契約を基本とする。
レンタルサーバーへの新規契約
- ドメインを取得し、プラン選択、サーバー契約を済ませる
- 認証メールのアカウント情報を元に、サーバーログイン、初期設定
- ドメインとサーバーの関連付け（ゾーン設定）
- SSL化設定
- FTP確認
- WP入れるならついでにDBを新規作成、pw控えておく
WP前提のDB新規作成
- データベース名、パスワード、を任意入力し情報を控えておく
- 文字コード：UTF-8utf8mb4（絵文字使用できるUTF8なので）
- 後のWordpressインストールの章で情報控えを準備
メール設定
要点
- info@メールの作成
- メール設定資料PDFを作成しお客様へ送信（パスワードPDF）
- postmaster@でメール受信確認
- 必要に応じて、メール転送設定
準備中サイト
認知とSEOのため、できるだけ早くHTMLを上げておく。
要点
- 準備中HTMLを作り、title、H1、discription等入力し、FTPに転送
- GoolgeAnalyticsやサーチコンソール登録を済ませ、コードをheadに
- ロゴマークあれば挿入しfavicon、icon化
- 必要に応じてe-mailのエンティティ化
faviconとApple touch icon生成
要点
- まずは、ロゴデザインを済ませておく
- favicon生成サイトで画像保存
- コードをhead内にペーストし表示テスト
- サーバーに転送
参考リンク
faviconとiconの自動生成についての詳細は下記リンク先に詳細があります。
GoogleAnalyticsとサチコ
各サービスに、新規Webサイトプロパティを登録し、コードを埋め込む作業。
GoogleAnalytics
- GAサイトに、新アカウントと新プロパティー作成。既存のアカウントがある場合、新プロパティーを作りURLを登録
- 埋め込みコードを取得
- タグをHTMLのheadタグ内にペースト。（WP使用の場合、googleanalytics.php等でhead.phpにインポートしてもよい）
Googleサーチコンソール
サチコとも呼ばれているツール。かつては「Googleウェブマスターツール」と呼ばれていたが2018年ごろ改称された。
要点
- サチコで、新規プロパティー作成
- プロパティーは、シンプルなURLタイプに（ドメインタイプは要DNS設定）
- サイトマップ送信（Webサイト完成時に）
- リンク否認（スパムリンクに困っている場合、任意で）
GAを先に登録すませておけばサチコ新規プロパティー追加時に自動同期（関連付け）される。
UA（ユニバーサルプロパティ）でないと関連付けできない？（2021年のGAアカウント+プロパティー追加では、プロパティー設定にサチコ連携ボタンがなぜか表示されない）
ラフスケッチ〜ドラフト画像
サイト構成（サイトマップ）、ページ内容、discriptin（概要文）、などの書類を作り顧客と意見とサイトデザインを共有する。
| 内容 | 使用アプリ | |
|---|---|---|
| サイト構成 | 簡単なページ構成で、大まかな内容をつかむ | Illustrator |
| ページ内容テキスト | ページ内容をテキスト化し、より具体的な言葉を出し画像や写真のイメージにつなげる | Pages, Word |
| ラフスケッチ | サイト構成をより具体化させたスケッチ | 紙、Procreate、Fresco |
| ドラフト画像 | 実際の写真や画像でページデザインしていき、スライス画像を得る。この時にはWordPressテーマが決定しており各画像サイズがわかっているように | Photoshop |
ドラフト画像をスライスし、これでWordPressに配置する画像類は全て整うことになる
WordPress
ここからは定番CMSであるWordPress（WP）について解説します。WPを入れないほうが向いているお客様サイトも多くありますが、もしブログやオウンドメディアを導入したい顧客様にはWP導入をお薦めしています。
インストール
概要
- WP公式から最新版をDL
- FTP転送（wpフォルダ等に）
- ブラウザで「URL/wp/wp-admin」に接続
- 表示に従いDB情報を入力（DB名、pw等、ホスト名=サーバー名）
- 「wp」をURLから除外する作業
- 表示に従い、サイト名などWP初期設定
www.mojigumi.comthemes
WPインストールに成功したら引き続きthemeを入れる
概要
- themeデータを「wp/wp-content/themes」に転送
- 必要なら小テーマを用意し転送（themeによるので説明書参照を）
- WPテーマメニューで有効化ボタン
小テーマはPHP変更時のみ
最近の有料テーマはカスタマイズ性が進み、小テーマ作成がほぼ不要なほど細かい改変ができる。JIN:Rの説明書にもあるとおり、PHP、Java等のコードの改変がなく、CSS程度のものなら小テーマは不要と考える。
plug-in
GoogleMapsAPI登録と埋め込み
SNSマーケティング
SNSとSEOについては下記リンク先に詳細があります。
