サイト制作の流れ
サイト制作は、開始から完成まで五段階に分けております。 各段階の成果物に対して承認を頂いてから、次の段階の作業へ進み形にしております。
各段階毎に成果物チェックすることで、効率よく作業を進めることが出来ます。
それでは標準的な制作工程の流れと各段階の概要をご説明していきます。
標準的な制作工程の流れ
制作工程の流れも、案件の規模や要件、仕様および関わる人数により変化致します。ここでは標準的な制作フローにてご説明致します。

第1段階 企画作成
ご依頼者様の要望等をまとめ、企画書を作成します。
内容 | 詳細 | 備考(成果物など) |
---|---|---|
お問い合せ | まずは、お客さまからメールフォーム/お電話等からご依頼を受けます。 | 簡単な内容とミーティングの日程等を決めていきます。 |
ミーティング | 実際にお会いしたり、スカイプやお電話/メールなどを使いミーティン致します。 | お客さまの業種やご希望のデザインテイスト、システム要項、ご希望納期、概算のご予算などを確認させていただきます。 |
企画書作成 | 実際のユーザー層の調査/確認や現状の問題点に対する改善案などをまとめた企画書を作成いたします。 |
企画書内容はユーザー層の調査、ライバルサイトの調査、ヴィジュアルデザインの方向性、必要なシステム要項、サイト全体の構成の整理、トップの構成内容の整理、サイトマップ、概算お見積り、納期などとなります。 |
ご契約 | 上記の企画書にご納得いただけましたら、ご契約書を交わします。 |
契約書契約書を交わします。 この段階では、仮契約という形での対応可能もです。 |
第2段階 制作ガイドラインの作成
サイトを構築するための、基本的なガイドラインを作成していきます。サイト全体の設計図となり、この段階で作成した仕様書を元にデザインやシステムを作成していきます。
内容 | 詳細 | 備考(成果物など) |
---|---|---|
デザインガイドライン作成 | ウィンドウサイズやヴィジュアルデザインのテイスト、文字組に関する決まり、配色設定などを決めていきます。 |
制作ガイドラインデザインガイドラインとして、制作ガイドラインにまとめて記載致します。 |
システムガイドライン | プログラム言語、ASP、各API、CMSや必要なサーバー条件などを決めていきます。 |
制作ガイドラインシステムガイドラインとして制作ガイドラインにまとめて記載致します。 |
コンテンツリスト作成 | テキストや図版、写真などコンテンツに必要なものの一覧を作成していきます。この段階では全部のコンテンツが揃っている必要はありません。 |
制作ガイドラインコンテンツリストを制作ガイドラインにまとめて記載いたします。 |
サイト遷移図 | サイト構成がわかりやすいグルーピング化したサイトマップなどを作成いたします。 |
制作ガイドラインサイト遷移図として制作ガイドラインに記載致します。 |
ワイヤーフレーム作成 | ページ内にどのようにコンテンツを配置するのかを決めるガイドラインを作成します。 |
制作ガイドラインワイヤーフレームとして作成ガイドラインにまとめて記載及び、PSDファイルやAIファイルとして制作者間で共有する。 |
第3段階 デザイン作成
ビジュアルデザインとHTML/CSSコーディングを行っていきます。また、この段階でJavaScriptのコーディングも同時に行う場合もあります。
内容詳細備考(成果物など)
トップページデザイン | 制作ガイドラインに添ってトップページのビジュアルデザインを作成いたします。 |
トップページデザイン経験上、複数案からの選択よりも1案をたたき台にして修正する方がクオリティが上がるケースが多いです。 |
---|---|---|
セカンドページデザイン | 制作ガイドラインに添ってサイト共通のテンプレートと各ページ毎のデザインを作成します。 |
セカンドページデザインテンプレートを作成しましたら、各ページ毎のデザインは直接HTMLコーディングする場合もあります。 |
HTML / CSSコーディング | 制作ガイドラインに添ってページデザインの承認を頂いたものからHTMLに落とし込んでいきます。 |
HTML/CSSフィアルこの段階でJavascriptのコーディングも同時に行う場合もあります。また、この段階で各ブラウザの表示チェック作業も行います。 |
第4段階 システム制作/動作確認/納品
システム制作〜動作確認のチェック後、承認を得て納品となります。
内容 | 詳細 | 備考(成果物など) |
---|---|---|
システム制作 | 各プログラムを作成、設置していきます。Wordpressの様なCMSの場合HTMLファイルを元に、各テンプレートファイルに対応するように制作していきます。また、複数コンテンツがある場合はこの段階からデータの入力を行っていきます。 | 上の図ではシステム制作は1項目と簡単に記載しておりますが、規模や仕様により制作段階は増えていきます。 |
動作確認 | 仕様通りに動作するか、各ブラウザでの表示に問題がないかテストしていきます。 |
テスト環境にサイトアップテストは様々な環境に置いて行います。ご依頼者様にもご協力をお願いしております。 |
納品 | 本番環境にアップします。ご希望によりファイルのみの納品(DVDなど)にも対応しております。 |
本番環境にサイトアップ納品後1月以内に検収をお願い慰しております。また、検収後6ヶ月以内でしたら仕様と違う動きがある場合、無償にて修正いたします。 |
第5段階 運用
Webサイトは制作することがゴールではありません。運用・更新をしていき育てることでよりいっそうその効果が見込めます。
内容 | 詳細 | 備考(成果物など) |
---|---|---|
運用 | コンテンツの追加、お知らせやブログなどの更新作業などなど。 | 効果観測のため、アクセス解析やGoogleウェブマスターツールの利用をオススメいたします。アクセス解析レポート、更新作業などオプションで承っております。 |
提供しているサービスと料金表
Webサイト制作一括からロゴ、バナー、テキストなどの細かな制作まで、オプションを取りそろえてご提供。お客さまのご希望や状況に合わせて、様々なご提案を。クール系、ナチュラル系、和テイストなど様々なテイストでの作成が可能です。特に女性的なデザイン、イラストを得意としており、ガーリー系からナチュラルほっり系など。
デザイン・HTML・CSS・JavaScriptコーディング
内容 | 価格 | 備考 |
---|---|---|
トップページデザイン(1案) | ¥39,000〜 | クオリティ重視のため基本的に1〜2案作成いたします。それをたたき台として修正にて対応していきます。トップページはサイトの顔となりますので、デザインの方向性がここできまります。 |
セカンドページフォーマットデザイン | ¥29,000〜(1P) | 下層ページ共通のフォーマットデザインとなります。 |
各個別ページデザイン | ¥8,000〜(1P) | 各ページ独自部分のデザインとなります。 |
ランディングページデザイン | ¥60,000〜(1P) | rランディングページのデザインのみとなります。 |
トップページコーディング | ¥20,000 | head部分やその他の箇所にサイト共通で使う基本的なタグやCSSの設定を含みます。 |
セカントページフォーマットコーディング | ¥20,000 | 下層ページ共通のフォーマットデザインとなります。 head部分やその他の箇所にセカンドページ共有で使うタグの設定を含みます。 |
各ページ独自のHTMLコーディング | ¥8,000 | 各ページのコンテンツ部分のコーディングとなります。 |
ランディングページコーディング | ¥20,000〜(1P) | ランディングページのHTML/CSS/JavaScriptのコーディングのみとなります。フォームなどのプログラムは別途必要となります。 |
JavaScriptコーディング | ¥5,000〜 | jQueryプラグインの実装やカスタマイズからゼロからの作成など、ご希望の仕様により価格は変動いたします。 |
レスポンシグ対応デザイン/コーディング | それぞれの価格の1.5倍〜1.8倍。 | 希望する仕様などにより多少変動します。 |
対応ブラウザ、OSはIE8以降、Firefox最新、Chrome最新、Safari最新となります。
それ以外を対象ブラウザに含める場合は別途費用となります。また、あまり古いブラウザの場合、最新ブラウザ同様なコーディンが不可能な場合がありますのでご了承下さい。
デザインはPhotoshop形式やIllustrator形式でのファイルのお渡しの場合、別途追加料金が発生する場合があります。
WordPressサイト制作一括セットのパック割引
デザインからWordpressによるサイト作成をフルオーダープラン一括でご依頼頂いた場合、63,000円分のパック割引が適応されます。
現在セミオーダープランも準備中です。ご提供可能になり次第アナウンス致します。
内容 | 価格 | 備考 |
---|---|---|
制作・進行ディレクション | ¥35,000 | 制作進行管理、素材管理、ユーザー調査内容、ライバルサイトの調査、サイトマップ、ページ構成、概算お見積り、納期等記載の企画書などの作成 |
仕様書・マニュアル作成 | ¥45,000 | サイト運用に必要な作業手順やメンテナンス・リニューアル時にも必要になる仕様書のセットとなります。 |
WordPressの基礎構築 | ¥50,000 |
作業内容
基本的なWordpress(ブログタイプ)のみの設定料金となります。テーマは既存テンプレートでは¥0。 |
WordPressカスタマイズ | ¥150,000〜 |
作業内容
|
デザイン一式 | ¥91,000参考価格 |
構成内容オーソドックスなWebサイトを想定
合計 ¥91,000(参考価格)上記の様なWebサイトを想定した場合の参考価格となります。 |
パック割引 | -¥63,000 | 「企画・調査・提案」『仕様書・マニュアル作成」「Wordpresの基礎構築」「Wordpressカスタマイズ」「デザイン」すべてご依頼頂いた場合にのみ割引致します。 |
通常価格 ¥371,000–パック割引 ¥63,000 = ¥308,000 上記の様なオーソドックスなWebサイトの例での参考価格となります。 |
デザインはPhotoshop形式やIllustrator形式でのファイルのお渡しの場合、別途追加料金が発生する場合があります。
企画・調査・提案など
内容 | 価格 | 備考 |
---|---|---|
企画・調査・提案 | ¥35,000 | ターゲット調査内容、サイトマップ、ページ構成(ワイヤーフレーム)、コンテンツリストづくり等の企画書を提出致します。 |
管理・更新など
内容 | 価格 | 備考 |
---|---|---|
WordPressアップデート作業 | ¥15,000〜 1/回 |
内容
*1回分の作業料金となります。月額管理はの場合は応相談。 |
テキスト変更/更新 | ¥4,000 | はじめての場合、サーバーへのアクセス設定や使用しているタグ調査のため初期費¥15,000がかかる場合があります。内容の作成(コピーライティング)が必要な場合は別途文章作成費がかかります。 |
その他
内容 | 価格 | 備考 |
---|---|---|
図・イラスト作成 | ¥5,000〜 | ご要望の仕様やタイプにより変動いたします。 |
ロゴ制作 | ¥30,000 | ロゴの場合は複数案をご提案致しますので、その中から選らんで頂き修正などを加えていきます。 |
文章作成/コピーライティング | ¥5,000〜 | テーマや文字数などにより変動いたします。おおよそ400文字以下のWeb用の記事で5,000円から承っております。 |
制作実績 – Webサイトは魅力を伝えるツール
クライアントの特色にあわせた、『伝わるデザイン』、『心惹かれるデザイン』をこころがけ、世界にひとつだけの魅力的なWebサイトをご提案しております。
Webクリエーターが直接お話をお聞きするので、イメージをダイレクトに反映させる事ができ、お客さまから好評を得ています。
Webサイトページ

URL:http://www.kogumahome.com/style_tax/natural/

URL:http://www.osco.co.jp/products/products-tax/artnium/
スクリーンショット : [1]
URL : http://www.osco.co.jp/
スクリーンショット : [1]
スクリーンショット : [1]
URL : http://www.kogumahome.co.jp
スクリーンショット : [1] [2] [3]
住宅と同じ様な手作り感のある自然派を売りにしている店舗なで、デザインも手作り&自然派テイスト満載に!
スクリーンショット : [1]
URL : http://www.kogumahome.co.jp/bakery-cafe/
スクリーンショット : [1]
URL : http://www.mitsumatomoko.com
スクリーンショット : [1]
URL : http://www.sajyu.net
スクリーンショット : [1]
URL : http://www.itoko-design.net
スクリーンショット : [1]
スクリーンショット : [1]
次世代Web標準準拠を採用
次世代Web標準とは?HTML5やCSS3 、JavaScriptで出来ることって?
Electric fruitsでは、次世代Web標準(HTML5 + CSS3)をいち早く取り入れ、最新の技術をお客様に提供していきます。
次世代Web標準とは?
今までのWeb標準のHTMLの役割は、文章をシンプルに表現することに留まり、主に見た目は主にCSSで定義するという方法という定義になっていました。
しかし、Web制作の現場から複雑なサービスや高度なユーザーインターフェースの要求が高まり、新たに策定された「HTML」では高度な構造をシンプルな記述で表現する事ができるようになりました。
フォームの作成に必要なinput要素のtype属性が増えたり、videoやaudioなどというマルチメディア的な要素を扱うタグも新たに設置。
そして、JavaScriptから図を描写刷る事が出来るcanvasタグにより、Flashの様な表現も獲得しつつあります。
次世代としてCSS
また、見た目を担うCSSも、次世代としてCSSが策定されています。
より柔軟で、意図的なレイアウトが可能となり、今まで画像ファイルで表現されていたものの一部をCSSでの表現に置き換える事が可能(角丸やドロップシャドウなど)となったりして、表現方法も格段とアップしています。
そして、次世代Web標準では、JavaScriptの可能性がとても広がってきています。
HTMLのcanvasタグとの連携による図(グラフなど)の活用や自由なユーザーインターフェースの設計や位置情報の取得など、様々な機能の追加により、より自由なでインタラクティブなデザインへの可能性が広がってきています。
次世代の情報デバイスの中心はスマートフォンに移行しつつあります。
そして、スマートフォン用のWebサイトでは上記のHTML5 + CSS3 + JavaScriptでの作成が必須となっています。
Electric fruitsでは、次世代Web標準をいち早く取り入れ、最新の技術をお客様に提供していきます。
SEOと強力なコンテンツ
SEOに関しては、クライアント様のご協力がなくては成り立ちません。
まずは、価値のあるコンテンツづくりが必要です。
そのためには、クライアント様のこだわりや強み、個性をどんどん語って下さい。
それをどんどんホームページに反映させていきます。
生きたコンテンツをご依頼者様が更新出来るような仕組
ご依頼者様が更新出来るような仕組みをお作りいたします。
インターネットでは、個性的でこだわりのある人やモノがより高い評価をされる傾向にあります。
ニッチな商品や情報を探しているユーザーは数は全体では少数派でも、ネットにアクセスするユーザー数を考えるとそこそこの数となり、口コミなどを含めて長期的にアクセス数を伸はす傾向にあります。
そして最近のGoogleの最近の評価方法では、アクセス数の多いサイトに加点がつく様な点が数多くみられます。
更新をマメにすることも効果あり
サイトの更新頻度が高いと、クローラー(巡回ロボット)がサイトにくる頻度が高くなります。
そのため対策の変更を施した場合に、反映される時間が短くなります。
また検索エンジンは、更新頻度の高いサイトを評価すると言われています。
これはブログがSEOに強いと言われる根拠です。定期的な更新が難しい場合、ブログの導入も有効です。
Electric FruitsではSEO対策のお手伝いを。
Electric fruitsでは基本的な内部対策を考慮しながら、サイト制作を行っていきます。また、Googleに評価されやすいコンテンツ作成のコツ、例えば文章の書き方や画像の配置の仕方などを更新担当者さまにレクチャーすることも行っております。
そして、外部対策に関しては実績のあるSEO専門の会社様のサービスをご提案致しております。
「パンダアップデート」「ペンギンアップデート」
「パンダアップデート」「ペンギンアップデート」など、Googleの検索エンジンのアルゴリズムの変更により、「順位が下がった」「なかなか順位が上がらない」という声を良く聞きます。
今までの検索エンジン対策(SEO)、特に外部対策に関しては質よりも量という感じで数が多い方が有利と言われていました。
しかし上記の「パンダアップデート」や「ペンギンアップデート」というアルゴリズムの変更によりその状況ががらっと変わりました。
量よりもコンテンツなどの質が問われるようになり、今まで数量の多さのみ対策していたサイトが軒並み順位を下げているそうです。
また、Facebookやtwitter、アメーバブログやライブドアブログなど外部サービスとの連携により訪問数を増やすことはGoogleの評価に若干のプラスとなります。
「内部対策とは?」
内部対策とは自サイトのHTML構造やリンク構造、コンテンツの内容などの対策となります。
大まかには「titleタグにキーワードを含める」、「metaタグにキーワードを含める」、「hxタグにキーワードを含める」、「ページ内キーワード率の調整」、「サイト内リンクを増やす(サイトマップの作成)」、「ページ数を増やす」などがあります。
「外部対策とは?」
外部対策とは、他のサイトからリンクをもらうことを指す場合が多いです。
質のいいサイトから関連語句でリンクをもらうと、Googleなどの検索エンジンからの評価が上がります。
質のいいサイトというのは、他のところからリンクをいっぱいもらっているところや、アクセスの非常に多いサイト、古くから運営しているサイトなどとなります。
これは、逆に質の悪いサイトからのリンクでは、効果が期待出来ないという事となります。
Electric fruitsでは、基本に忠実な内部対策と信頼のおけるSEO専門会社との連携で、よりよい効果の高いSEOを提案しております。
Webサイトの目的と機能
ご依頼者様からの要望だけではなく、サイトを利用するユーザー層(顧客層)を把握/調査し、ユーザー層がどのようなことを求めてホームページに訪問するのかを分析します。
その分析結果に対して、サイトに必要な機能を選別していき、ご依頼者様及びユーザー層に有益なサイト構成を提案していきます。
ご要望の把握と業種にあった機能の提案
「お客様からの要望がダイレクトに聞きたい!」というご要望では、お問い合せやアンケートのフォームの設置を、会社(業務)の内容をより多くのユーザーに親しみをもって届けたいという場合は、SNS(FacebookやTwitter、YouTube)との連携をなど。また、顧客からの予約が必要な業種(美容院やエステ系など)のサイトなどには予約機能を追加など、業種にあった機能を選別していきます。
ユーザー層(顧客層)を把握と有効な機能
またご依頼者様からの要望だけではなく、サイトを利用するユーザー層(顧客層)を把握/調査し、ユーザー層がどのようなことを求めてホームページに訪問するのかを分析します。
その分析結果に対して、サイトに必要な機能を選別していき、ご依頼者様及びユーザー層に有益なサイト構成を提案していきます。
ビジュアルの効果的なバランス
どういった配色/色調がターゲットのユーザー層に効果的にアピールするのか?写真/画像はどういった雰囲気/印象のものがいいのか?基本文字サイズはどれくらいが効果的か?
説明文を補足するための図や表、グラフなどはどのようなデザインが効果的?文章だけでは伝わりづらいものも、図や写真グラフなどを使って効果的に!
依頼者様のこだわりや個性がストレートに伝わるデザイン
またユーザーは、複数のホームページを見比べます。その際に、あまりに没個性なデザイン/コンテンツでは印象に残らず、再訪問されない場合もあります。
そこは依頼者様のこだわりや個性がストレートに伝わるデザイン/コンテンツが必要となります。
ユーザー層に合わせた魅力的なビジュアル
どういった配色/色調がターゲットのユーザー層に効果的にアピールするのか?
写真/画像はどういった雰囲気/印象のものがいいのか?
基本文字サイズはどれくらいが効果的か?
説明文を補足するための図や表、グラフなどはどのようなデザインが効果的?
文章だけでは伝わりづらいものも、図や写真グラフなど効果的に使う事ことで、ユーザーを惹きつけることが可能です。
。
様々な課題や問題、疑問を解決するためのお手伝い
様々な課題や問題、疑問を解決するために、配色や文字サイズ、 わかりやすいリンクや好印象を与える画像/グラフィック処理、ご依頼者様のの強み、個性やこだわりを伝える為に効果的デザイン、目的のための最も効果的で高品質なデザインを提案いたします。
人にやさしいWebサイトは高感度が倍増!
Webサイトの滞在時間やリピート率が大きいほど購買率が上がる 最近の商業施設は、お客様に心地よい空間を作り出し、なるべく長い滞在してもらうような設計になっています。時間をかけてゆっくり見てもらう作りにすると、購買率が上がるからです。
Webサイトの滞在時間やリピート率が大きいほど購買率が上がる
最近の商業施設は、お客様に心地よい空間を作り出し、なるべく長い滞在してもらうような設計になっています。時間をかけてゆっくり見てもらう作りにすると、購買率が上がるからです。Webサイトでも同様で、滞在時間が長くリピート率が高いと比例的に効果が大きくなります。
Webサイトが『好感が持てる』『雰囲気(空間)が好き』と感じてもらうにはビジュアルデザインだけではなく、使い勝手がよく、ストレスをあまり感じさせない作りにすることも大変重要なことです。
その答えを探る方法のノウハウを。
ではどうしたらいいのでしょうか?
これが正解というものは、存在しません。なぜならクライアントさまや顧客ユーザーの方向性によって千差万別だからです。
しかし、私たちWebクリエーターはその答えを探る方法を経験上いくつかのノウハウを持っております。
使い勝手・使い心地は、ユーザー個人個人のタイプによって違っています。
年齢、性別、所属、嗜好、地域など、Webサイトに訪れるユーザー層を調査し、そのユーザー層が使い易いく好感を持つ、文字の大きさ、リンクナビゲーション、文字色/背景色、使用画像などサイトの基本設定を決めていきます。
ホームページを閲覧する時の視線の動きにはある程度決まり事があることがわかってきています。
その視線の動きを考慮したレイアウトを採用することで、ユーザーの負担を軽減する事ができます。
またリンクなどは、他のテキストや画像との表現の違いを明確にし、ユーザーが迷わないデザインにすることで、使う人のよりとってやさしいサイトとなります。
文章も、文字サイズや行間の調整やイメージ画像の効果的な使用でユーザーは読みやすくなり、長文でもストレスを軽減させることが可能となります。
モバイル環境でもストレス無く。
モバイル環境での使用増加にともない、読込み速度の遅いサイトは嫌われる傾向にあります。
想定するユーザーが使用するデバイス(パソコン、スマートフォンなど)の傾向により、Webサイトの軽量化、高速なサーバーの使用なども重要な対策のひとつとなります。
また、画面の大きさの違いによる使い勝手、文字や画像の大きさも違ってきます。
そういった事柄をチェックしながら、サイト作成を進めていきます