VIETNAM MARKET‎ > ‎IT OUTSOURCING‎ > ‎

安く自社のウェブサイトを作るためには

安く自社のウェブサイトを作るためには


会社のホームページを作るには大体どのぐらい費用がかかる?

弊社は日本のホームページ制作費用を調べました。簡単なホームページ(10~15ページ程度)の製作費用は以下です。
  • 本格的なウェブ制作:25~30万円程度(高いところは50万円~)
  • 格安ウェブ制作:15~20万円
注意していただきたいのは、上記は「ウェブ製作費用」のみです。後日の内容修正、ページ追加、写真追加などは別の費用がかかります。または、ウェブサイトを管理する(内容添削、内容修正、追加など)には、ウェブ製作会社に依頼するか、ウェブサイト管理システム(CMS)を導入する必要があります。このCMSは15万円程度かかります。CMSを導入しない限りはホームページの管理・運営するのがほぼ不可能です。
月額制のウェブ制作会社では、初期の製作費用が小さいですが(ウェブ制作費用は10万円以下)毎月課金を払わなければならないから実は高いです。ウェブサイトレンタルのような形ですので、月額制のホームページ製作を避けたほうが良いかもしれません。解約した後はウェブサイトが使えなくなるのもそのひとつの理由です。

ホームページ作りはベトナムへアウトソーシング
ITに費用がかからないようにベトナムへホームページ作りなどのお仕事を委託するのが良い方法でしょう。ウェブサイト製作費用は大幅に削減できます。
  • ベトナムでウェブ製作:4~10万円
ただ、ベトナムのウェブ製作会社を見極める必要があります。ベトナムのウェブ業界が若く、ほとんど日本のデザイン感覚を持っていません。まだまだベトナム人はウェブデザインに注目していません。したがって、ベトナムの大手会社でもウェブサイトがとても醜く機能が乏しいことも珍しくありません。さあ、どうして良いわかりやすいデザインとなっていないでしょうか?
ベトナムのIT会社ではウェブ製作はITプログラマーに任せられているからです。日本ではデザイナー(ウェブの設計)とプログラマー(機能を作る)に分かれていますが、ベトナムのIT会社はデザイン性を重視していないため、すべての作業をプログラマーへ丸投げしています。ほとんどのベトナムプログラマーはIT知識ばかりを身に着けているため、デザインが苦手と言われています。
ベトナムの企業はウェブサイトの重要性を気づいていないのは、
  • まだEコマースが発展していないことや、
  • ベトナムの企業が長いビジョンを持っておらず、ブランドの力を理解していないことでしょう。
SAIGON AROMA x KYLOBYTES®のウェブ製作
私たちは日本に長年IT業界にお仕事していましたため、ウェブサイトのデザインの重要性がわかります。そのため、デザインはプロのデザイナー(デザインを専門とするスタッフ)へ任せています。完全にベトナムローカルですので、リーズナブルのウェブ製作を提供しております。私たちは日本で下記のお仕事しておりました。
  • SNS(ソーシャルネットワーク)の開発・運営・保持
  • メール配信システム(大量メール配信)
  • モバイルゲーム開発
  • オークションシステム開発
  • 各種CMS(ウェブサイト管理ツール)の開発
  • 電子取引サイトの開発


費用がかからない自社のウェブサイトを作るためには?

費用がかからない自社のウェブサイトを作る方法を紹介いたします。

ウェブ製作の流れ
ウェブ製作の会社では、
  • ウェブページ作成ソフトウェア(たとえばFrontPage、ezHtml)でウェブページを作成
  • Adobe Photoshopなどで写真加工
  • Adobe Illustratorなどでロゴ、バナー、画像を作る
  • Adobe DreamweaverなどでFlashを作る
  • ドメインネーム(ウェブサイトのURL)とサーバーホスティング(サーバーにおけるウェブサイトのそれぞれ必要なファイルの置く場所)を取得し作成したウェブサイトをアップロードする
のが一般的なウェブ製作の流れです。

自分でウェブページを作成しドメインネームとホスティングを取得してウェブサイトを立ち上げるのも費用がかからない方法ですが、デザイン、IT知識も必要ですからお勧めしません。その面倒くささは下記です。
  • デザインが苦手なら、大変な仕事になり効率が良くない
  • ソフトウェアの使い方を学ばなければならない
  • ページを一つ一つ作る必要がある
  • ドメイン名の仕組み、ドメイン名の設定を理解する必要がある
  • パソコンにあるファイルをホスティングサーバーへ転送する方法
  • 修正がある場合、ページを一つずつ修正しサーバーへ再アップロードする必要がある。これは本当に面倒くさいです。
それで弊社が利用している無料でIT知識が要らないウェブ製作サービスBloggerとGoogle Sites(両方ともGoogle社)をご紹介します。まず下記の作成例をご覧ください(すべては弊社所有です。)

BloggerとGoogle Sitesのメリット
  • 価格:無料
  • ウェブサイト管理システム:完備(デザイン変更、レイアウト変更、ページ追加などは簡単)
  • Googleがほぼ全部やってくれるため、内部SEO、サイト最適化など手を加えなくて良い
  • アクセス解析Google Analyticsを追加するのは簡単
BloggerとGoogle Sitesの違い
Bloggerはブログサービスですから、記事、情報などを発信するのに便利です。逆に、Google Sitesはデザイン可能性が広いため、オンライン・ショップ、商品紹介、会社ホームページなどに適しています。


 Bloggerで無料ウェブサイト制作 

ステップ1:Google Accountを無料登録
(すでにお持ちならスキップ)
Google Accountの無料登録:http://www.blogger.com, "SIGN UP"をクリック(GMAILアカウントを作る)

ステップ2:ブログを作る
ログイン:http://www.blogger.comへログイン。
「新しいブログ」をクリック。サイトのタイトル(たとえば「My First Website」)とインターネット住所(たとえばmyfirstwebsite2012.blogspot.com)を入れる。テンプレートは「Simple」を選ぶ(簡単なほど後はデザイン追加容易)。それで「ブログ作成」をクリックし、ブログ作成完了。

ステップ3:ブログのレイアウトを変更
作成したブログはまだ何もデザインを入れていないから「ダサい」設計となっている。このステップでプロのようなウェブサイトへ変貌させる。
まず、一番シンプルデザインにする。「マイブログ」→「テンプレート」→「カスタマイズ」ボタン(「HTMLの編集」ボタンの左)
上を「シンプル」、下を「バックグラウンドの白い」テンプレートに選択 → 「ブログに適用」→「Bloggerに戻る」
追記:後日気づいたのですが、「バックグラウンドが水色」のテンプレート(下の一覧の最初テンプレート)を選ぶとカスタマイズしやすいです。シンプルの白いバックグラウンドのテンプレートを選ぶとウェブページの区分を区切る線を消せません(テンプレートの個性です)。

レイアウト編集
ブログ管理画面→レイアウト→「テンプレートデザイナー」(最初の行にある)
(「ブログのガジェットを追加、削除、編集します。ガジェットの場所を変更するには、クリックしてドラッグします。列や幅を変更するには、テンプレート デザイナーを使用します。 」とある)
「テンプレートデザイナー」→レイアウト選択(たとえば、上はヘッド部分、左はコンテンツ、右はコラム;フッターのレイアウトをも)

ウェブサイトの幅とフォント、テキスト色を変える
「幅を調整」:ページの幅、コラムの幅を調整
「アドバンス」:フォント、テキスト色などを選択

「自己紹介」を削除
ブログ→レイアウト→「自己紹介の編集」→「削除」をクリック

NavBarを隠す
NavBarとはナビゲーションバーであり各blogspotのナビに使われるページの一番上にあるバーのこと。
ブログ管理画面→「テンプレート」→「HTMLの編集」→(続行)→「ウィジェットのテンプレートを展開」にチェックを入れる
次の行を検索する:
]]>
その行の直前に以下を追加。
#navbar { display: none; }
または:
#navbar-iframe { display: none !important; }

「登録: 投稿 (Atom)」を削除
(Remove "Subscribe to: Posts (Atom)")
(1) ブログ管理画面→「テンプレート」→「HTMLの編集」→(続行)→「ウィジェットのテンプレートを展開」にチェックを入れる
(2) 下記のコードまで探す。
<b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>
(3) 下記の行を削除。
Remove this line:
<b:include data='feedLinks' name='feedLinksBody'/>
それで「Posts (Atom)」が消されるはず。

「Powered by Blogger」を削除
(1) ブログ管理画面→「テンプレート」→「カスタマイズ」→「アドバンス」→右のコラムに「CSSを追加」にクリックし、以下の行をCSSに追加。

#Attribution1 {display: none;}

下記のように見える。
#navbar { display: none; }
#Attribution1 {display: none;}
(2) 「ブログへ適応」をクリック。

ポストの日付、ポストの時間、シェアボタン、投稿者(Posted by)、コメントを消す
ブログ管理画面→レイアウト→ブログの投稿:編集

「ブログ アーカイブ」というタイトルを変更
たとえば、「記事一覧」にする:
ブログ管理画面→レイアウト→ブログの投稿:編集→タイトルを「ブログ アーカイブ」から「記事一覧」に。

ステップ4:ブログにデザインを追加
ステップ3ではブログのレイアウトの調整が終わりました。このステップ4にデザイン・設計をブログに追加します。

デザインに使う無料ソフトウェア:
写真編集:PhotoScape(写真編集、画面キャプチャーなど)

ブログのバックグラウンドの追加
(1) Inkscapeでバックグラウンドのイメージを作成。たとえば以下のイメージ。
バックグラウンド・イメージの例
(2) ブログ管理画面→「テンプレート」→「カスタマイズ」→「背景」→写真をクリックし既存の背景を選択するか「写真をアップロード」をクリックし作成したイメージをアップロードして使用。

ウェブサイトのアイコンを追加
ファビコン:ブラウザーアイコンのことです。ブラウザー(Google Chrome, Firefox, IEなど)でウェブサイトを開くとき、ブラウザーに現れるアイコンです。英語:Favicon (Favorite Icon).
(1) Inkscapeでアイコンのイメージを用意。たとえば下記のイメージ。

(2) オンラインコンバートのウェブサイトでイメージファイルをFaviconアイコンにする。たとえば下記のウェブサイトで変換しましょう。
Online Image To Icon Converter: http://www.rw-designer.com/image-to-icon
(「Fav-icon or toolbar icon」を選択)
イメージファイルをアップロードし、アイコンをダウンロードする。(サイズ16×16)
(3) ブログ管理画面→レイアウト→「ファビコン:編集」をクリック→新ウィンドウズに新しいアイコンをアップロード→「保存」ウィンドウズが消える→「設置を保存」
注意:確認するため別のブラウザーでウェブサイトを見ましょう。同じブラウザーだとブラウザーの記憶がありきちんとファビコンが現れない可能性があります。ブラウザーの履歴を消せば良いかもしれません。

ブログのヘーダー(Header)イラスト、ブログの説明を追加
(1) ヘーダーイラストをInkscapeなどで作ります。たとえば、以下のイメージ。
(2) ブログ管理画面→レイアウト→「Header:編集」→パソコンからイメージをアップロード。「説明を画像の後ろに表示する」を選択。
(3) ブログの説明を追加:たとえば「Example for making a blogger's blog.」を「ブログの説明」に入れて保存。


ステップ5:ブログに機能を追加

ページと水平ナビゲーションバーを追加
たとえば、「会社紹介」「商品紹介」「実績」「お問い合わせ」のページを追加しましょう。
(1) ページ追加:ブログ管理画面→ページ→「新しいページ」
水平ナビゲーションバーを追加:ブログ管理画面→レイアウト→上のガジェットに「ガジェットを追加」→「ページ」を選択(すでに追加済みの場合あり)
ページ追加のページで:「ページの表示形式」を「上のタブ」にする。
(2) ブログ管理画面→「テンプレート」→「カスタマイズ」で水平ナビゲーションバーのデザインを変更。

問い合わせフォームを追加

無料問い合わせフォーム:http://kontactr.com/
上記のサイトのサービスを使うと、無料で問い合わせフォームをブログに追加できます。
問い合わせされると、登録Eメールへ問い合わせ内容が送られます。






ステップ6:ブログに内容を追加
「新しい投稿」をクリックし、編集画面は以下です。
(イメージにクリックし拡大)



Making Web with Google Sites
 Google Sitesで無料ウェブサイト制作 


ステップ0:ロゴ、バックグラウンドイメージ、FavIconを用意
Inkscape、PhotoScape、オンラインアイコン変換を使用。

ステップ1:Google Accountを取得
まだGoogle Accountを取得していない場合は、gmail.comでGoogleアカウントを作りましょう。

ステップ2:Google Sitesを作る
「作成」ボタン→空のテンプレート→サイトの名前(例:My First Website 2012)→「サイト作成」ボタン

ステップ3:サイトをカスタマイズ
Favicon:ファビコンのファイルを「Favicon.ico」という名前にし、「サイト管理」→「添付ファイル」でFavicon.icoをアップロード。注意:サイトのサブフォルダーにアップロードするとサイトのアイコンとならないため、必ずサイトのメインフォルダーにアップロードしましょう。

サイトの説明:「サイト管理」→「全般」→「サイトの説明」に「Learn how to make Google Sites 2012」などを入れる。「ページの上部にサイト名を表示する」のチェックを外す→「保存」

ロゴを追加:「サイト管理」→「サイトのレイアウト」→「ロゴの変更」:ロゴファイルをアップロード
「サイト管理」→「サイトのレイアウト」→「配置」:変更をクリック。「ヘッダー」のところに「ロゴのサイズに合わせる」をチェック。

水平ナビゲーションバーを追加:「サイト管理」→「サイトのレイアウト」→「サイトのレイアウトを変更」:「水平ナビゲーションバー」にチェックを入れる。

サイトのヘッダーにある検索ボックスを無効にする:「サイト管理」→「サイトのレイアウト」→「検索を設定」:「検索を有効にする」のチェックを外す。

テーマを変更:「サイト管理」→「テーマ」:「ボーダー:白 = Micro Lite」を選択(このテーマなら後でデザイン追加が簡単だから)

サイドバーの設定変更:「サイト管理」→「サイトのレイアウト」→サイドバー:ナビゲーション 編集:「自動的に整理する」と「サイトマップ」を外す。

フッターのリンクを削除:
(「ログイン」、「ページ印刷」など)「サイト管理」→「サイトのレイアウト」→「システム フッターのリンクをカスタマイズ」:すべてを非表示にする。

背景画像、色とフォントを変更:
「サイト管理」→「色とフォント」:背景画像を変える;各種フォントと色を好みに調整。

ステップ4:ページ追加、ページカスタマイズ
ページ追加:新しいページ追加ボタンでたとえば「会社紹介」「お問い合わせ」しましょう。

水平ナビゲーションバーにページを追加:「サイト管理」→「サイトのレイアウト」→「水平ナビゲーションのコンテンツを編集」→「ページを追加」:ページを追加する

ページ設定:それぞれのページにクリックし、「その他」→「ページ設定」:新しいウィンドウズが開くと「ページにタイトルを表示する」「サブページへのリンクを表示する」「添付ファイルを許可する」「コメントを許可する」、「このページをサイドバーに表示する」などをON/OFFする。

ステップ5:内容作成
編集画面どおりにすると簡単に内容を編集できるはずです。




 BLOGGERおよびGOOGLE SITESに独自ドメイン・独自Eメール 

たとえば、myfirstwebsite2012.blogspot.com, sites.google.com/site/my1stwebsite2012と覚えにくいURLではなく、myweb2012.comなどで、Eメールもmail@myweb2012.comのようにプロのウェブサイトのようにしておくと良いですね。実は簡単です!Google社のクラウドサービスを使えば簡単にドメイン取得・Gmailサーバー設定ができます(Emailの中身はGmailサーバーが動いていますが、外に見えるのは独自Eメールです)。



  1万円ウェブ制作  


Comments