名刺代わりにホームぺージを作るときの予算制作の流れを紹介します。

現在は町の飲食店もIT系企業もホームぺージはほぼ必須です。

問い合わせを貰ったり、店の場所を伝えたり、商品を買ってもらったり、ホームぺージのポテンシャルは高いです。当サイトもお問い合わせやスクール生の募集をホームぺージで行っています。

(※WEB制作に関するコンテンツ記事も書いているので名刺型ではなくオウンドメディア型になります)

早速、この記事のポイントをまとめます。

・ここでいう“名刺型WEBサイト”は10ページ以内のサイトのこと

・予算は5万円、10万円の2つくらいで考えておくと◎

・製作期間は2週間~1ヶ月程度

それではそれぞれ理由詳細を説明していきましょう!

“名刺型WEBサイト”ってなに?

一般的な定義がある言葉ではないのでここでは10ページ以内のWEBサイトとしましたが、名刺型WEBサイトの目的は以下の2つです。

「何をやっている会社なのか」ということを伝える

会社の基本情報を載せて、お問い合わせをしてもらう

つまり作るページとしては以下のような構成が一般的です。

基本4ページ構成

■TOPページ
└代表の挨拶や企業理念、会社概要とアクセスなど全体的にまとめます

■サービス紹介
└TOPに書ききれないサービスの使い方や詳細を書きます

■お問い合わせ
└お問い合わせフォームと会社概要をここに書きます

■プライバシーポリシー
└プライバシーポリシー・サイトポリシー・利用規約などここにすべてまとめます

以上、4ページで会社の基本情報からサービス紹介まで行うことが出来る最小構成です。

ただし、法人登記用の最低限のWEBサイトです。

まずは最小構成で作ったとしても、後から採用ぺージや商品ページやECサイトへと拡張していくことになるでしょう。

4ページから対応する企業は少ない印象なので制作を依頼するならフリーランスの方に受注することになります。フリーランスへの依頼であれば費用も抑えることが出来ます。

大まかにこの構成の予算は5万円程度(+サーバーとドメイン取得代)

製作期間はデザインから合わせて2週間程度です。

基本7ページ構成

■サービス詳細LP
└サービスをWEBサイトから買って(問い合わせて)もらうためには図解などを使って使い方を紹介するLP(ランディングページ)が必要となります

■メンバー紹介
└会社のリクルートにもよく使われる社員の紹介ページです。社長あいさつなどをこちらに移しても良いですね

■インタビューページ
└リクルートのためにより個人にフォーカスを当てたインタビューページや、実際に商品を使った人のレビュー記事などを書いておくと信頼感がグッと上がります

■会社基本情報
└最小4ページ構成ではTOPにまとめていましたが、別ページに分ければアクセス情報などの図を充実させることが出来ます

以上、7ページ程度あれば企業情報やメンバー紹介と1~2本のLPまで制作することが出来ます。

ちなみにフリーランスで受注することがもっとも多いコーポレートの基本構成です。ざっと予算は10万円程度を見積もっておくといいでしょう。

製作期間はデザインから合わせて1ヶ月程度です。

では、次にWEBサイトをどのような流れで作っていくか説明しましょう!

WEBサイト制作の流れ

私がこれまでに作ってきたサイト制作の流れから依頼者側が準備する順番を図にしました。基本的に制作者側が絡んでくるのはヒアリング~です。

しかし、重要なのは作りたいサイトイメージを固め(当然そのサイトの雰囲気を選んだ理由やどの部分を取り入れたいかも含めて)、参考サイト載せたいテキストを準備することです。

この準備の善し悪しでサイトのクオリティと進みやすさが全然違うので制作者に丸投げするのではなくしっかり固めておいた方がいいです。

フリーランスも含めて色々な方と仕事をしてきましたが、WEB制作者は何でも出来るスーパーマンではないので、会社のサービス紹介や代表の挨拶などは多少下手でも依頼者側で作ったほうがココロのこもった良いものが出来上がります。

ヒアリングからは制作者の仕事が増えますが、サイトのクオリティは使っている画像の質といっても過言ではありません!

サイト制作で一番時間がかかるのは適切な画像を選ぶこととそれを編集し統一感を出すことです。

準備した画像がどれ一つ使えないそうにない場合、新しく画像を探すところから始まるので(テキストは準備しておいた方がいいですが)画像に関してはどうしても使ってほしい画像以外はヒアリング時に話し合ってから使うものを決めた方がいいでしょう。

画像編集がすべて終わってからコーディングに移り、各種デバイスで表示ズレを調整後、納品(WordPressの場合はユーザー追加出来るのでHTMLのコピーまでしてもらいます)

まとめ|参考サイトを必ず準備

以上が、10ページ以内の名刺型ウェブサイトにかかる予算と制作の流れです!

WEB制作はHP制作会社に頼めば100万~200万円にもなるものです。

フリーランスに受注してもどれだけ少なく見積もっても5~10万円ほどかかるので、(実績の少ないフリーランスの方にはなおさら)参考サイトを準備して同じクオリティで完成させてくれるのかしっかり見極めることが重要です。

それでは、また。

■参考リンク

サイト制作費の目安:

WordPressで自社サイトを作る方法を図説します。

当サイトも契約しているレンタルサーバ「JET BOY」の契約方法~ドメインの取得をご紹介します。

当サイトがJET BOYで契約している理由は、安さとサイト高速表示のコスパが業界最高だからです。

企業の基本情報・サービス・新着情報・メンバー紹介・採用案内・お問い合わせページなど10ページ程度で名刺代わりに企業のサイトを持ちたい方にはJET BOY以上のコスパのサーバーはありません。

それでは、参りましょう。

レンタルサーバを契約する

まずは、サーバを契約します。

サーバを契約することでホームぺージを置く場所が手に入ります。

当サイトも利用しているJETBOYというところでレンタルする方法です。

全20ページ程度のホームぺージならミニSSDプランで十分です。(年額3980円)

全100ページ程度のブログコンテンツ型ホームぺージならファーストSSDプランがおすすめ。(年額7710円)

後からアップグレードも可能

サイトの表示速度が遅くなってきたり、同時アクセスが増えてダウンすることがあれば後から上位プランにアップグレードすることも可能です。

※上位プランから下位プランへのダウングレードは出来ません。

レンタルサーバの契約が終われば次に独自ドメインを契約します。

独自ドメインを取得する

独自ドメインを契約することでホームぺージへのリンクが手に入ります。

※サーバとドメインは2つで一つなので両方契約します。

独自ドメインとは

http://xxxxxx.comとか http://xxxxxx.netとか xxxxxxのところに好きな文字列を入れた自分だけのドメインのことです。早い者勝ちなので、思いつきやすい単語は使えないことが多いです。

サブドメインとはどう違う?

http://zzz.xxxxxx.comとか http://zzz.xxxxxx.netとか xxxxxxの前にzzzを入れたドメインのことをサブドメインと呼びます。

一つ独自ドメインを取れば、サブドメインはいくらでも作ることが出来ます。

JETBOYでサーバを借りると、http://zzz.jetboy.jpというサブドメインがいくらでも手に入りますが、企業のホームぺージを他所のサービス名が入ったドメインのサブドメインで運用することは普通しません。

信頼性に欠けますし、ダサいからです。

独自ドメインの契約方法

当サイトも利用している「ムームードメイン」で契約する方法をご紹介します。

ドメインはどこで借りても値段は同じです。管理画面の使いやすさで選びました。

欲しいドメイン名があるか、確認する

「欲しいドメインを入力」と書いてあるところに好きな英数字を入れます。

※http://xxxxxx.com のxxxxxxの部分だけで構いません。

.com.net.jpなど自動検索してくれる

xxxxxxを入力したら、 xxxxxx.com や xxxxxx.net や xxxxxx.jp などを一気に探してくれます。

xxxxxx.com はもう使われてしまっているけれど xxxxxx.net なら残っている場合があるので残っている方かまた別の文字列を選んで契約してください。

.com.net.jpに違いはない

今はドメインの最後の文字列に深い意味はありません。

なのでどれを契約してもOKです。

.jpは若干高いので、.comか.netがおすすめです。(年額1000円程度)

.me.xyz.siteはオススメしません

.meや.xyzなどあまり見ないものは安いですが、企業の信頼性がなんとなく落ちる気がするので使わない方がいいです。使っている企業はほとんどありません。

ムームードメインではドメインだけ契約すればOK

ムームードメイン含め、ドメインレンタル業者は一緒にサーバーやメーリングサービスも行っていることが多いですが、サーバーはJETBOYでレンタルしているのでオプションは付けずにドメインだけ借りればOKです。

独自ドメインの契約が終われば最後に「サーバーとドメインをリンクさせる」という作業に移りましょう。

サーバーとドメインをリンクさせる

今、別々のところでサーバーとドメインを契約したので、これを紐づけます。

まずはJETBOY側でドメイン登録

JETBOYにログインして「ドメイン設定」を行います。

新規ドメイン追加>ムームードメインで契約したドメインを追加します。

次にネームサーバを控えておく

ダッシュボードに戻り「サーバー情報」からネームサーバの欄をコピーする。

※2つとも使います。

最後にムームードメインでネームサーバを登録する

ムームードメインにログインし、ネームサーバ設定変更を行います。

ここでGMOペポバ以外のネームサーバを使用するにチェックを入れ、ネームサーバ①と②にJETBOYのネームサーバを入れて設定を変更します。

お疲れ様でした。以上で独自ドメインとレンタルサーバの契約が完了です。

JETBOYに独自ドメインの登録が完了していることを確認してください。

それでは、参りましょう。

PHPバージョンを7.xに変えます

PHPバージョンはサイトの表示速度に影響を与えるので最新バージョンに変更しておきます。

現段階では7.4が最新です。(2020.1)

7.4を選択後、Set as current を押して完了です。

WordPressの自動インストールの手順

JETBOY のダッシュボードに戻り、「WordPress自動インストール」へ進みます。

右下にあるWordPress新規インストールへ進みます。

①先に追加しておいた独自ドメインを選択する。

②詳細設定を行うため、クリックする。

上図のように詳細を設定すればOKです。

これでWordPressを独自ドメインに新規インストールすることが出来ます。

WordPressに追加できる特徴的な機能として、カスタム投稿タイプというオリジナルの投稿機能を追加することができる機能があります。

企業のホームぺージに必要な「NEWS(お知らせ)」だけを通常の「投稿」とは分けて「お知らせ」にまとめて書いておけば管理がしやすいです。

しかも、TOPページには「NEWS(お知らせ)」を載せることが多いので、PHPで「NEWS(お知らせ)」 を自動取得して新着お知らせを数件順番に表示するととても便利。

プラグインを使わずにこれをショートコードにしてどこでも簡単に使える方法を紹介します。

では、参りましょう。

カスタム投稿タイプを作る

まずは、カスタム投稿タイプで「お知らせ」と表示されるものを作ります。

functions.phpに追記

function add_custom_post() {
    register_post_type(
    'infopage', // 他のカスタム投稿タイプと識別するID
    array(
      'label' => 'お知らせ', // 管理画面に表示されるテキスト
      'public' => true,
      'has_archive' => true,
      'menu_position' => 5, // 管理画面に表示する順番
      'supports' => array( // 投稿画面で表示される項目
                      'title', // タイトル
                      'editor', // 内容の編集
                      'thumbnail', // サムネイル
                      'revisions', // リビジョンを保存する
                      'excerpt', // 抜粋テキスト
                      'custom-fields', // カスタムフィールド
                      )
    )
  );
}
add_action('init', 'add_custom_post');

コメントを入れていますが、補足で説明します。

add_action('init', 'add_custom_post');

でフックします。

register_post_type( 'id名', array() );

この一文でカスタム投稿タイプを設定できます。

今回は「お知らせ」というカスタム投稿タイプだけ作りますが、いくつも作りたい場合はid名が被らないようにすれば複数作れます。

配列array()の中身は 「ワードプレスCodexの関数リファレンス」が参考になります。

カスタム投稿の記事だけを取得する

次に、カスタム投稿「お知らせ」の記事を新着で取り出します。

functions.phpに追記

<?php
/* 新着記事を読みこむショートコード[add_new_infopage] */
function add_new_infopage_func($atts){
    ob_start();
?>
<ul>
  <?php $args = array(
    'numberposts' => 5, // 表示する記事の数
    'post_type' => 'infopage' // 投稿タイプ名
    // 条件を追加する場合はここに追記
  );
  $customPosts = get_posts($args);
  if($customPosts) : foreach($customPosts as $post) : setup_postdata( $post );
  ?>
  <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>

  <?php endforeach; ?>

  <?php else : //記事が無い場合 ?>
    <p>表示する記事がありません。</p>
  <?php endif;
  wp_reset_postdata(); //クエリのリセット ?>
</ul>
<?php
    return ob_get_clean();
}
add_shortcode('add_new_infopage', 'add_new_infopage_func');

コメントを入れていますが、補足で説明します。

ショートコードというのは投稿のビジュアル編集に[ショートコード名]と書くだけでphpの関数を実行できる機能です。

今回は

    表示する記事がありません。

というショートコードを自作します。

add_shortcode('add_new_infopage', 'add_new_infopage_func');

ショートコードはこのようにフックすることで

    表示する記事がありません。

を書いたところでadd_new_infopage_func()が実行されます。

そこで以下のように関数を作っていきます。

function add_new_infopage_func($atts){
    ob_start();

ob_start(); は計算した結果をすぐに表示せずに、一旦別の場所に置いておこうというバッファリングをするための関数です。

この下でHTML構造を構築します。

今回は

<ul>
  <li><a href="記事URL">記事タイトル</a></li>
  …
  'numberposts'の設定数だけ<li>を繰り返します。
  …
</ul>

というシンプルなリストを出力するようにしています。

各ページごとに別々のCSSを適用する方法の一つに、 <body>にページごとに異なるidやclassを付与する方法があります。

WordPressには記事ごとにIDが振り当てられているのでphpでこれを取得すればページごとに異なるidやclassを付与出来ます。

では、参りましょう。

<body>タグに追記

page.php や single.php などの<body>タグに以下のように追記します。

<body id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

the_ID() は現在の投稿の ID を表示します。

カスタムCSSとは各記事一つひとつにCSSを適用させることの出来る機能です。

とても便利な機能なので、作っておきましょう。

では、参りましょう。

functions.phpに追記

//『カスタムCSS』入力フィールドを投稿画面に追加する
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
    add_meta_box('custom_css', 'カスタムCSS', 'custom_css_input', 'post', 'normal', 'high');
    add_meta_box('custom_css', 'カスタムCSS', 'custom_css_input', 'page', 'normal', 'high');
    add_meta_box('custom_css', __('カスタムCSS', 'custom_css_input'), 'custom_css_input', 'wp-plugin', 'normal', 'high');
}

function custom_css_input() {
    global $post;
    echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
    echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
    if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
    $custom_css = $_POST['custom_css'];
    update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
    if (is_page() || is_single()) {
        if (have_posts()) : while (have_posts()) : the_post();
            echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
        endwhile; endif;
        rewind_posts();
    }
}

たったこれだけで、各記事ページにカスタムCSSフィールドを追加することができます。

wordpress 4.2 から絵文字機能が追加され、全ページに自動で絵文字表示用の js と style 属性が記述されるようになりました。

<head>内に js と style が追加されてます。

このせいで、記事に埋め込んだ Twitter に絵文字が入っていたりすると編集画面がとてつもなく重くなります。

wordpress の絵文字を使わない方は、 remove_action() で消せます。

functions.phpに追記

/* 全ページに読み込まれていた絵文字表示用の js と style 属性を非表示にする */
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );

remove_action( ‘admin_print_scripts’, ‘print_emoji_detection_script’ );
remove_action( ‘admin_print_styles’, ‘print_emoji_styles’ );

上の2行は管理画面に適用される js と style 属性でも絵文字を非表示にできます。