calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

Web_production_flow

受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。

エンジニア速報は Twitter の@commteで 1 日 5 回配信しています。

Sponsored Link

もくじ

オリエンテーション／受注前

サイト設計／受注後

デザイン基本設計

コーディング

CMS組み込み

動作検証・試験

＋システム（通販サイト、Web サービスなどの場合）

納品

保守

オリエンテーション／受注前

１．書類テンプレート一式

document_template_production

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

２．見積もりの目安と計算方法

measure_estimate_production

例えば項目を作るとき１．項目／２．内容／３．設計(人日)／４．製造(人日)／５．テスト(人日)／６．金額といった感じで作成したりしますが、もっとシンプルに記述してもよいと思います。人日は決めておくと計算しやすいですね（例：5人日*3.5=175,000円）。他に、制作会社ではどれくらいの目安で見積もりを作るのか参考になりそうなサイトをピックアップしました。

サイト設計／受注後

委託契約書などの取り交わしが終わったら（受注が確定した後）、制作にとりかかります。ここから、実際にウェブサイトを構築するときの一連の流れ、制作フローになります。

３．ディレクトリマップ

directorymap_production

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

４．ワイヤーフレーム

wireframe_production

次は骨組み（ワイヤーフレーム）の作成。ナビゲーション・コンテンツ・サイドバーなどの共通部分を設計し、トップページ・カテゴリページ・詳細ページを作成。レスポンシブであれば、スマートフォン向け、タブレット向け、PC向けのパターン作成。その後クライアントやデザイナーに提出し、すり合わせをします。

５．ユーザビリティ／UX設計

usability_production

ユーザビリティ（使いやすさ）・UX（心地よさ）を設計。例えば快適にスクロールできるか・上部に戻れるか、ラジオボタンのクリック領域を広げたり、テキスト入力を補助したり「ユーザーの労力を減らし、快適に使えるか」を考えます。企業サイトのブランドイメージを高めたり、通販サイトの購買数を増やすことになり、後の保守に繋がるのでとても大切な設計となります。

デザイン基本設計

６．配色設定

colorsetting_production

デザイナーは提案内容に応じて、トーン＆マナー（世界観や雰囲気）を統一しつつ、配色・タイポグラフィ・アイコンなど詳細を決定していきます。静かで落ち着いた印象を与えたければ色相やトーンを揃え、大胆でインパクトを与えたければ明度や彩度が大きく離れた色を組み合わせたりと心理作用も考慮します。

色には年代・性別を感じさせることもできます。寒色は男性、暖色は女性、明るい色は子供、落ち着いた色は高齢者など。

７．フォント設計

fontdesign_production

サイトのコンセプトや製品イメージを訴求したり、精読率（最後まで読まれるか）を上げれるように、フォントサイズ・文字間・行間などをチェックします。またサブタイトル(h1/h2/h3)、文字と画像のベースラインが揃っているか、フォントは統一されているか、可読性を上げるような余白を使っているかなど、ユーザーが読みやすいように配慮し設計します。

８．※デザイニングインブラウザー

designing_in_browser_production

今までは、ディレクターがワイヤーフレームを完成させた後は、ADかデザイナーがカンプを作成するという流れが一般的でした。

しかし、レスポンシブWebデザインでは、様々なスクリーンサイズがあるので、サイズに対応するデザインカンプを作成していては数が無限になり時間と手間がかかりすぎます。（参考：レスポンシブWebデザインのウェブサイト案件を制作してみて思ったこと）

そこでデザインカンプを作成しない、HTMLとCSSをコーディングしながらブラウザー上で直接デザインする方法「Designing in Browser（デザイニングインブラウザー）」という方法があります。以下、表示確認しながら作成しHTML, CSSをダウンロードできるレスポンシブ用モックアップツールとデザイニングインブラウザーのフローです。

９．デザインカンプ

designcomps_production

とはいっても、まだまだデザインカンプを使うことが多いと思います。デザインカンプは「完成見本」のことで、企画をどのようにデザインに落とし込んだのか、クライアントへ伝えることが目的となります。

１０．画像パーツ作成

image_parts_production

ボタンなどのパーツを画像で作成しなければならないとき、CSS3を使わないときに見ておきたいサイト。

コーディング

１１．制作仕様書

production_specifications_production

制作仕様書はサイト制作における技術的要件やルールを記載した資料です。クオリティを一定以上に保つためにも必要です。コーディング・デザインガイドラインなどの規約一覧。制作前に一度目を通します。以下、規約やルール一覧。

１２．コーディング補助

coding_aids_production

効率的にコーディングを進めるためのツールや知識をおさらい。

CMS組み込み

１３．WordPressテーマ化

wordpress_themed_production

会社にもよりますが、実装方法はWordPressやEC-CUBEが多くなると思います。特徴としては、WordPressはコンテンツ管理・多言語・スマホサイト構築が容易、EC-CUBEは商品登録・カート・決済・顧客管理・paypalですね。

１４．EC-CUBE　組み込み

eccube_built_in_production

筆者の会社は通販サイトならEC-CUBEをカスタマイズしています。レスポンシブテーマなども出ているので、デザイン面の工数を減らすこともできます。

動作検証・試験

１５．ブラウザチェック

browser_check_production

想定利用デバイス（PC・スマートフォンなど）を決めます。ブラウザごとのCSS3・JavaScript・HTML5の対応状況と解像度を確認できる一覧です。

＋システム（通販サイト、Web サービスなどの場合）

１６．動的コンテンツ、DB

dynamic_db_production

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

１７．サーバー・ドメイン設定

server_domain_production

データ量が多いサイトなら、自社サーバーか専用サーバー、VPSになると思います。クライアントさんにはバックアップをどうするか、データセンター管理、監視サービスが利用可能か明確にします。

１８．決済システム導入

settlement_system_production

ECサイト構築はオンライン決済の手段を選定し決済システムを導入しなければいけません。決済方法の違いや導入方法はクライアントさんに説明し、質問にも答えれるようにしておくべきです。以下はEC-CUBEのオーナーズストアで簡単に利用できる決済サービス比較表とイプシロン設定。もうひとつは開発者の利便性を向上させた決済サービスであるWebPay。

１９．SSL導入

ssl_introduction_production

SSLはサーバーとユーザー間の通信を暗号化する機能です。会員制サイト、資料請求などクレジットカード情報の入力を伴う場合に利用します。ヒアリング時にクライアントさんから、どれが良いのか、価格は？と聞かれることもあります。

安く抑えるならRapid-SSL、国産ならグローバルサイン、携帯全機種対応なら日本ベリサイン。有効期限の終了１ヶ月前に契約更新のご案内を送りましょう。

納品

２０．IP制限・公開

ip_restrictions_production

本番環境とは別にテスト環境を用意します。テスト環境に不特定多数の人がアクセスしなければならない場合、IPアドレスやベーシック認証でアクセス制限をかけて安全性を高めます。

２１．運用マニュアル作成

僕が基本的に心がけていることは「画像や管理画面キャプチャ」を多く使い、文字を少なくすることです。理解しやすくすることで、問い合わせを減らします。印刷して読む人もいるので、アドレスに直接打ち込みやすいよう参考URLは短いものを記載。運用マニュアルはログイン方法、記事作成方法、写真登録、商品登録方法、アナリティクスの用語解説、メールクライアントの設定方法は書いておきたいですね。

保守

毎月の安定した収益源を確保するなら、ここからが重要となります。製作時、UXやIAに気を使うのは保守につなげてクライアントさんの利益も考えるため。保守レポートは現状を報告するのではなく「対策立案」することで価値が出ます。

２２．解析レポート送付

analysis_report_production

アナリティクスをそのままPDFにして送付しても、クライアントさんは保守継続してくれません。例えば時間帯PVを見て12時が下降しているなら「前回は11時にアクセスが多くなり、12時に下降しているので主婦層の特徴だと想定しました。主婦向けに告知をしましたが、変化はありませんでした。次回は勤務をしているユーザーを対象にオフィス向けの告知を提案します」など「行動につながる」対策立案を加えます。

２３．SEO保守

seo_maintenance_production

順位を上げるのが難しいようであれば、「先月は何をやったのか」を伝えることがポイントになります。何をやるのか思いつかなければ、ウェブマスターをチェックして、重複タイトル・ディスクリプションの修正をしたり、低品質ページの改善提案をしたり、ソースコードの修正などウェブ屋さんにしかできないことを見つけていくべきでしょう。

２４．広告出稿代行

ヤフーリスティングとグーグルアドワーズをクライアントさんに提案します。見積書にはクライアントさんの広告予算と運用管理費を記載。広告出稿代行の場合は、月ごとにWeb広告レポートを送付します。レポートには「どのキーワードで、どれくらのCV数があったのか、費用対効果はどれくらいなのか」を明確に記載します。ここでも、来月の施策や立案を書き出します。

２５．サーバー保守

server_maintenance_production

正しいメンテナンス画面の出し方、Apacheの設定など。もう一つはサーバエンジニアの運用保守業務をイラストで可愛く解説してあります。

スポンサード リンク

関連記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。