フリーも社内も助かった!Web制作フローが「完璧」にわかる資料や流れのまとめ

受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。
エンジニア速報は Twitter の@commteで配信しています。
もくじ
オリエンテーション/受注前
サイト設計/受注後
デザイン基本設計
コーディング
CMS組み込み
動作検証・試験
+システム(通販サイト、Web サービスなどの場合)
納品
保守
オリエンテーション/受注前
1.書類テンプレート一式

オリエンテーションにおけるヒアリングでは、後に作成する提案・見積書に必要となる質問を用意しておきます。自社の説明をする時は、せっかちなクライアントさんもいるので、だらだら話さず、ポイントを抑えてわかりやすく説明します。ヒアリングした後は、議事録にメモし社内共有。必要な書類(ヒアリングシート/企画書/提案書/業務委託書/見積書/契約書)など一式まとめてますので、書類系のテンプレートは以下で。
2.見積もりの目安と計算方法

例えば項目を作るとき1.項目/2.内容/3.設計(人日)/4.製造(人日)/5.テスト(人日)/6.金額といった感じで作成したりしますが、もっとシンプルに記述してもよいと思います。人日は決めておくと計算しやすいですね(例:5人日*3.5=175,000円)。他に、制作会社ではどれくらいの目安で見積もりを作るのか参考になりそうなサイトをピックアップしました。
- WordPressサイトを構築するといくらかかる? 見積り勉強会で価格を出してみた | WordBench
- ウェブ制作の見積もりを金額付きで晒してやろうじゃないか! | WP-D
- 「Web制作のリアルな工数と見積もりの話」の話をしようじゃないか! - 乱れなよ、そして召されなよ
サイト設計/受注後
委託契約書などの取り交わしが終わったら(受注が確定した後)、制作にとりかかります。ここから、実際にウェブサイトを構築するときの一連の流れ、制作フローになります。
3.ディレクトリマップ

ディレクトリマップは、サイト全てのページのタイトル・ファイル名・階層をExcelにまとめた一覧表です。どのページでもトップから3クリックで到達できるのが理想なので階層はできれば3~4階層までにおさえます。ディレクトリマップを作る前にサイトマップを作成しておくと、スムーズにリスト化することができます。
4.ワイヤーフレーム

次は骨組み(ワイヤーフレーム)の作成。ナビゲーション・コンテンツ・サイドバーなどの共通部分を設計し、トップページ・カテゴリページ・詳細ページを作成。レスポンシブであれば、スマートフォン向け、タブレット向け、PC向けのパターン作成。その後クライアントやデザイナーに提出し、すり合わせをします。
- Webサイト設計図 – ワイヤーフレームの作り方 | Webクリエイターボックス
- [手書き] クライアント満足度がアップする7つのウェブデザインシート
- WEBディレクターなら参考にしたい手書きの画面設計書
5.ユーザビリティ/UX設計

ユーザビリティ(使いやすさ)・UX(心地よさ)を設計。例えば快適にスクロールできるか・上部に戻れるか、ラジオボタンのクリック領域を広げたり、テキスト入力を補助したり「ユーザーの労力を減らし、快適に使えるか」を考えます。企業サイトのブランドイメージを高めたり、通販サイトの購買数を増やすことになり、後の保守に繋がるのでとても大切な設計となります。
- Webデザインを「職種別」に基礎から勉強出来る総まとめ
- 優れたユーザビリティを実現する25の基本概念【btrax】 [in the looop]
- 【保存版】必ずおさえておきたいユーザービリティー チェックリスト | freshtrax | btrax スタッフブログ
デザイン基本設計
6.配色設定

デザイナーは提案内容に応じて、トーン&マナー(世界観や雰囲気)を統一しつつ、配色・タイポグラフィ・アイコンなど詳細を決定していきます。静かで落ち着いた印象を与えたければ色相やトーンを揃え、大胆でインパクトを与えたければ明度や彩度が大きく離れた色を組み合わせたりと心理作用も考慮します。
色には年代・性別を感じさせることもできます。寒色は男性、暖色は女性、明るい色は子供、落ち着いた色は高齢者など。
- 私がWebサイトの配色を決める時の流れ │ Design Spice
- Webサイト制作において、私なりの色選定の考え方 | Arch
- 効果的なカラーデザインが出来るようになる4つの工程 / Maka-Veli .com
7.フォント設計

サイトのコンセプトや製品イメージを訴求したり、精読率(最後まで読まれるか)を上げれるように、フォントサイズ・文字間・行間などをチェックします。またサブタイトル(h1/h2/h3)、文字と画像のベースラインが揃っているか、フォントは統一されているか、可読性を上げるような余白を使っているかなど、ユーザーが読みやすいように配慮し設計します。
- デザインを勉強したことがない人でもデザインできる…4つの基本原則
- CSSでbodyに設定しておくと便利な5つのポイント | DesignWalker
- ホワイトスペースを使ったウェブデザインの考え方 | バニデザノート
- CSSのfont-family指定はこれで決まり!(2013春) - 遠近法ノート
- 標準の日本語フォント / もうパンツはかない
- タイポグラフィの基礎 – 文字の扱いで印象が変わる - - EC studio
8.※デザイニングインブラウザー

今までは、ディレクターがワイヤーフレームを完成させた後は、ADかデザイナーがカンプを作成するという流れが一般的でした。
しかし、レスポンシブWebデザインでは、様々なスクリーンサイズがあるので、サイズに対応するデザインカンプを作成していては数が無限になり時間と手間がかかりすぎます。(参考:レスポンシブWebデザインのウェブサイト案件を制作してみて思ったこと)
そこでデザインカンプを作成しない、HTMLとCSSをコーディングしながらブラウザー上で直接デザインする方法「Designing in Browser(デザイニングインブラウザー)」という方法があります。以下、表示確認しながら作成しHTML, CSSをダウンロードできるレスポンシブ用モックアップツールとデザイニングインブラウザーのフローです。
- レスポンシブデザインのモックアップツール(ドラッグ&ドロップ)
- 「FROONT」の使い方*二十歳街道まっしぐら
- ASCII.jp:レスポンシブWebデザインのワークフローと画面設計
- インブラウザ デザイン | CSS Radar
9.デザインカンプ

とはいっても、まだまだデザインカンプを使うことが多いと思います。デザインカンプは「完成見本」のことで、企画をどのようにデザインに落とし込んだのか、クライアントへ伝えることが目的となります。
- コーダーに喜ばれるデザインの作りかた | Webamb | ウェブアンブ
- 私がwebサイトのラフデザインを制作する時の流れ │ Design Spice
- PhotoshopでWEBサイトのラフデザインを作る
10.画像パーツ作成

ボタンなどのパーツを画像で作成しなければならないとき、CSS3を使わないときに見ておきたいサイト。
- Webデザインの1pxを作るためのPhotoshopのレイヤースタイルいろいろ
- Webデザインにおける、1pxへのこだわり « Parkn' Park
- 素人っぽいデザインから脱却するための12のデザイン | webox blog
コーディング
11.制作仕様書

制作仕様書はサイト制作における技術的要件やルールを記載した資料です。クオリティを一定以上に保つためにも必要です。コーディング・デザインガイドラインなどの規約一覧。制作前に一度目を通します。以下、規約やルール一覧。
- JavaScript/コーディング規約 JavaScript編
- HTML5版/コーディングガイドライン(HTML5)ver1.0
- HTML+CSS/Google HTML/CSS Style Guide
- CSS/CSSガイドラインを翻訳してみた - 技術日記@kiwanami
- CSS/メンテナブルCSS | 株式会社サイバーエージェント
- WordPress/WordPress コーディング基準
- デザインガイドライン/アイコンなどのデザインガイドライン
- フロントエンド全般/フロントエンドチューニングの箇条殴り書き ::ハブろぐ
- スマートフォン・タブレット/UIガイドライン
- PHP/PHPのコーディング規約 | 9ensanのLifeHack
12.コーディング補助

効率的にコーディングを進めるためのツールや知識をおさらい。
- Sass、そしてSassy CSS (SCSS)
- SassとDreamweaverのコードヒントでCSSをさらに効率的に
- 知らない人は遅れてる?新Zen-Coding Emmet | DECONCEPTER
- 意外と知らない!?CSSセレクタ20個のおさらい|Webpark
- デザインやCSSやJavaScriptなど、ウェブ制作に役立つ時短ツール| コリス
- ふつうのユーザが知らないHTML5コーディングツール10選
CMS組み込み
13.WordPressテーマ化

会社にもよりますが、実装方法はWordPressやEC-CUBEが多くなると思います。特徴としては、WordPressはコンテンツ管理・多言語・スマホサイト構築が容易、EC-CUBEは商品登録・カート・決済・顧客管理・paypalですね。
- はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました(サンプルダウンロード)
- WordPressではじめてテーマをカスタマイズ・自作するときありがちな10のつまずき | VIVID COLORS + BLOG -福岡で働くWebデザイナーのブログ-
14.EC-CUBE 組み込み

筆者の会社は通販サイトならEC-CUBEをカスタマイズしています。レスポンシブテーマなども出ているので、デザイン面の工数を減らすこともできます。
- EC-CUBEを使って学んで遊び倒すカスタマイズ「EC-CUBEの学校」
- FrontPage - EC-CUBE カスタマイズのまとめサイト|開発ノウハウwiki
- EC-CUBEをカスタマイズする | webデザイナーのちょっとしたメモ
動作検証・試験
15.ブラウザチェック

想定利用デバイス(PC・スマートフォンなど)を決めます。ブラウザごとのCSS3・JavaScript・HTML5の対応状況と解像度を確認できる一覧です。
- [ブラウザ] HTML+CSS/HTML5 & CSS3 Web Design
- [ブラウザ] JavaScript/Can I use... Support tables for HTML5, CSS3, etc
- [解像度] iOS/iOSデバイスの画面サイズ一覧 (iOS 6)
- [解像度] Android/スマートフォン・タブレット画面解像度
+システム(通販サイト、Web サービスなどの場合)
16.動的コンテンツ、DB

MySQLのインストールや設定等の初心者向けの説明。公開前に抑えておきたいApacheセキュリティ対策+PHPの基本設定。簡易的な防衛策の一つとして。
17.サーバー・ドメイン設定

データ量が多いサイトなら、自社サーバーか専用サーバー、VPSになると思います。クライアントさんにはバックアップをどうするか、データセンター管理、監視サービスが利用可能か明確にします。
- エンジニアならウェブサーバーのひとつでも自腹で立てて運用すべき理由と、サーバー環境の選び方 - akiyan.com
- さくらのVPS サーバ構築メモ | コムギドットネット
- myfinder's blog: さくらのVPSを借りたら真っ先にやるべきssh設定
- 僕が考えた最強のサーバ設定 - とあるプログラマの日記 @s025236
18.決済システム導入

ECサイト構築はオンライン決済の手段を選定し決済システムを導入しなければいけません。決済方法の違いや導入方法はクライアントさんに説明し、質問にも答えれるようにしておくべきです。以下はEC-CUBEのオーナーズストアで簡単に利用できる決済サービス比較表とイプシロン設定。もうひとつは開発者の利便性を向上させた決済サービスであるWebPay。
- EC-CUBE‐すぐに使える他社サービスのご紹介-決済サービス機能の比較
- 15) EC-CUBE イプシロン決済モジュールの設定 | アプリケーション
- WebPay: 開発者向けクレジットカード決済サービス
19.SSL導入

SSLはサーバーとユーザー間の通信を暗号化する機能です。会員制サイト、資料請求などクレジットカード情報の入力を伴う場合に利用します。ヒアリング時にクライアントさんから、どれが良いのか、価格は?と聞かれることもあります。
安く抑えるならRapid-SSL、国産ならグローバルサイン、携帯全機種対応なら日本ベリサイン。有効期限の終了1ヶ月前に契約更新のご案内を送りましょう。
納品
20.IP制限・公開

本番環境とは別にテスト環境を用意します。テスト環境に不特定多数の人がアクセスしなければならない場合、IPアドレスやベーシック認証でアクセス制限をかけて安全性を高めます。
21.運用マニュアル作成
僕が基本的に心がけていることは「画像や管理画面キャプチャ」を多く使い、文字を少なくすることです。理解しやすくすることで、問い合わせを減らします。印刷して読む人もいるので、アドレスに直接打ち込みやすいよう参考URLは短いものを記載。運用マニュアルはログイン方法、記事作成方法、写真登録、商品登録方法、アナリティクスの用語解説、メールクライアントの設定方法は書いておきたいですね。
保守
毎月の安定した収益源を確保するなら、ここからが重要となります。製作時、UXやIAに気を使うのは保守につなげてクライアントさんの利益も考えるため。保守レポートは現状を報告するのではなく「対策立案」することで価値が出ます。
22.解析レポート送付

アナリティクスをそのままPDFにして送付しても、クライアントさんは保守継続してくれません。例えば時間帯PVを見て12時が下降しているなら「前回は11時にアクセスが多くなり、12時に下降しているので主婦層の特徴だと想定しました。主婦向けに告知をしましたが、変化はありませんでした。次回は勤務をしているユーザーを対象にオフィス向けの告知を提案します」など「行動につながる」対策立案を加えます。
- アクセス解析を使ってサイトの課題を発見する12のステップ
- ウェブサイトの課題発見のために、筆者が普段から使っている「解析系ツールボックス」の中身を紹介! - リアルアクセス解析
- 「google アナリティクス」の得する設定と使い方
23.SEO保守

順位を上げるのが難しいようであれば、「先月は何をやったのか」を伝えることがポイントになります。何をやるのか思いつかなければ、ウェブマスターをチェックして、重複タイトル・ディスクリプションの修正をしたり、低品質ページの改善提案をしたり、ソースコードの修正などウェブ屋さんにしかできないことを見つけていくべきでしょう。
24.広告出稿代行
ヤフーリスティングとグーグルアドワーズをクライアントさんに提案します。見積書にはクライアントさんの広告予算と運用管理費を記載。広告出稿代行の場合は、月ごとにWeb広告レポートを送付します。レポートには「どのキーワードで、どれくらのCV数があったのか、費用対効果はどれくらいなのか」を明確に記載します。ここでも、来月の施策や立案を書き出します。
- 成功する広告の書き方 – 21の法則 | グーグル アドワーズ ラボ
- リスティング広告の売上げをあげるために絶対に読むべき記事まとめ | アドリス
- リスティング広告に関わる会社の社員教育でオススメ出来る5冊+1 | SEM-LABO
25.サーバー保守

正しいメンテナンス画面の出し方、Apacheの設定など。もう一つはサーバエンジニアの運用保守業務をイラストで可愛く解説してあります。
スポンサード リンク
関連記事
- プログラミング初心者やWeb制作に役立つ例文・資料・規約・早見表などのまとめ
- 納品前に助かった!今Web制作している人必見の品質・納品チェックシート
- 意外となかった!Web制作者が助かるヒアリングシートや問い合わせ返信に使えるテンプレート
- すごく助かった!Webサイト制作「受注前」に知っておきたい知識
- 簡単に分かった!UX・UI・IAやアクセシビリティの「専門知識」が増えるまとめ
- 知っておいて良かった!サイト制作後も助かる保守方法まとめ
- すごい役立った!Web制作に特化した「提案書」に入れておきたいこと、知識
- 意外と簡単!GoogleDriveで「解析、社内ツールや保守レポート、勤怠管理」などを作成できる総まとめ
- これだったら分かる!Webに関係する統計、資料、情報まとめ
Leave a Comment