フリーランス3年目のジョヴァンナです。こんにちは!
このたび、ワードプレスでホームページを開設しました。どちらかと言えばブログよりも固定ページに重きをおいた集客用のWebサイトです。
「よし、作るぞ!」って準備を始めてから仕事が忙しくなって中断してしまい、再開するまでに約1年かかりました。長かった……。実質の制作日数は40日。仕事の合間に少しずつ作業を進めました。
今日は、自己満足のため制作過程を報告していきまーす。なお個人情報保護のためリンクは控えさせていただきます。
[目次]
まずは構想を練った
参考にしたサイト
まず初めに、同業者のWebサイトをチェックしました。
テーマはこちらのサイトで調べました。What WordPress Theme Is That?
8〜10社チェックして、最も参考にしたのが3社です。内情が聞こえており、制作費も大体の検討がつくところばかりでした。
- E社:制作費が最も多額で、デザインが新しい。スマホ版は別表示。
- S社:制作費10〜15万円、レスポンシブデザイン。ブログに手間をかけている。
- Y社:制作費を抑え、無料テンプレートを使用。営業テクニックに優れたプロの手による。
これらを隅々までチェックして、良いところは真似して作りました。
参考書も多数読みました。参考になったものだけを記事の末尾にご紹介しておきます。
どんなデザインにしたいか?
主にE社を参考に、スマホ表示にこだわりました。
- レスポンシブデザイン。
- 1ページが長くなり過ぎないように情報はコンパクトにまとめ、かつ、ページ遷移は数回で用が足りるようにする。
- ハンバーガーを開かなくても、重要な情報がどこにあるのかトップページから見渡せる。
- 「問い合わせボタン」はヘッダーとグローバルフッター両方に表示する。
- 迷子になった時のためにサイトマップを一番下に用意しておく。
掲載するコンテンツ
コンテンツはS社、Y社の作り方を真似しました。
- 事例紹介や「顧客の声」はブログに投稿する。
- ブログはカテゴリ別に見やすく分類する。
- 顧客アンケートを目立つところに掲載する。
- 「よくある質問」形式に頼らず、あたりまえの基本的な情報は本文に載せる。
- めんどくさい顧客対応をしなくて済むように「お断りするケース」を注意書きとして載せる。
実際の制作手順
最初に決めておくこと
「屋号(サイト名)」と「ドメイン」
これがなかなか決められず、しばらく仮の屋号で営業していました。長く使うものなので中途半端にはしたくはなかった。
同業者のサイト巡りをしているときに「ある単語」が目に止まり、そこからの連想でふと思いつきました。ブレインストーミングでもやればもっと早く決まったかもしれません。でも、開業後2年、ちょうど良かった。屋号が決まってから独自ドメインを取得しました。
サーバー、テーマ選び
『いちばんやさしいWordPressの教本』を参考に進めようとしましたが、途中でつまづいてしまい路線変更しました。『サルワカ』にはSSL設定まで細く書いてあるので、こっちの方が私にはわかりやすかった。(基本的なところは参考になる本ですがサーバーやテーマ選びは本を鵜呑みにせず、事前に検討した方がいいです。)
私のホームページは固定ページがメイン。自分の業種・業態に合ったテンプレートの中から、事前に考えていたレイアウトがハマりそうなものを選びました。かかった経費は下記の通り。
- テンプレート購入:12,000円
- エックスサーバー:14,580円(初期費用+年間使用料、割引あり)
- エックスドメイン:1,274円
合計:28,000円
初期設定
『サルワカ』を参考に、エックスサーバーにて初期設定を行いました。独自SSLの設定がめんどくさいと思っていたので、ここに書いてある手順通りにやれば簡単に済んでしまうのはラクチンでした。
エックスサーバーでWordPressを始める8ステップ(初心者向け)
【WordPress】サイトマップ作成からSearch Console登録までの全手順
初期設定で注意すべきこと
- パーマリンクの形式:後でブログのカテゴリを変更をするときに大変なのでカテゴリは入れない方がいい。
- ページの URL末尾:日本語が自動変換されると長すぎるし意味不明になる。英字かローマ字で設定しておく。
いざ、制作
ダッシュボードにログインするところまで『サルワカ』で解説されていました。その後は購入したテンプレートをダウンロードし、マニュアルに従って固定ページを作っていきました。
このとき、テキストは既設のサイト(Ameba)からコピーして作りましたが、写真だけは困った。
AmebaオウンドではiPhoneで撮った写真をそのまま貼るだけでそれなりに見栄えがしました。ところが、私が購入したワードプレステーマは写真の見せ方がおしゃれな分、めんどくさかった。
結局ほぼ全ての写真を規格に合うよう撮影し直し、Macのプレビュー機能で切り抜き加工しました。そもそもの構図が良くないと台無しなので焦った! なるべくいろんな角度からタテヨコ両方の図を撮るよう心がけました。
配色パターンは、テンプレートを購入したサイトから抽出して「いいな」と思った同系色のグラデーションに設定しています。スマホで見ると色味が薄くて視認性が良くないので、いずれ変更するつもり。未だ仮の状態です。
画像は1点だけプロに発注しました。今後もイラストなどをココナラで数点頼む予定です。外注できるところは外注していこう!
終わりに
私の営業用Webサイトは、広告収入を主目的としたブログと根本的に違います。作り方もたぶん違うと思う。「問い合わせ」と「サービス注文」を得ることが最終目的のブログです。
これまでは外部から強力な被リンクを得ており仕事には困らなかったのですが、今後は、自力集客できるようブログにも力を入れていくつもり。
SEO対策はこれから勉強します。キーワードで狙って作り込むようなジャンルじゃないと思うけど、まずは勉強してみよう。
私が参考にした書籍
いちばんやさしいWordPressの教本 第3版 人気講師が教える本格Webサイトの作り方 「いちばんやさしい教本」シリーズ
- 作者: 石川栄和,大串肇,星野邦敏
- 出版社/メーカー: インプレス
- 発売日: 2017/02/24
- メディア: Kindle版
- この商品を含むブログを見る
知識ゼロの人にはこの本がいいと言われている。制作のハウツー本。
しかし、さくらサーバーを薦めておきながらSSL設定の仕方が書いていないので困りました。テンプレートにお金をかけたくない人にはいいかもしれない。
企業のホームページ担当者向けに「運用」や「制作会社との賢い付き合い方」を書いた本。知識ゼロから自力で制作・運用しようとする私には有益な情報がたくさんあった。基本中の基本を押さえるという意味で、頼りになる本。(再読しよう……。)
会社のホームページはどんどん変えなさい ―――この本のやり方で売上が1年で6億増えた
- 作者: 石嶋洋平
- 出版社/メーカー: あさ出版
- 発売日: 2016/12/23
- メディア: Kindle版
- この商品を含むブログを見る
自分のページの「キラーコンテンツ=圧倒的に魅力を持った情報」は何なのか考え抜くこと。また「キラーコンテンツは一番目立つところに置くべき」という当たり前のことを、初心者に教えてくれる。
この本に載っていた「顧客アンケート」がそのまま同業Y社のメインページに導入されているのを見て「ハハーン」となった。よくある手法だが真似しない手はありません。
(この本も再読しよう。)
だから、そのデザインはダメなんだ。 WebサイトのUI設計・情報デザイン 良い・悪いが比べてわかる
- 作者: 香西睦
- 出版社/メーカー: エムディエヌコーポレーション(MdN)
- 発売日: 2016/04/22
- メディア: Kindle版
- この商品を含むブログを見る
一部しか読んでいないがスマホ表示を考える上で参考になった。
最もためになったのは「『よくある質問』には例外的・特定条件下のケースを載せ、必要な人だけが確実に読むように注意喚起する」「あたりまえの基本的な情報は『よくある質問』ではなく本文に載せるべき」というところ。
小手先ではないSEOの本質を書いている(らしい)。コンパクトで読みやすくすぐに読み終わった。
「検索する人がサイトを訪れるのは1回きりではない」と書いてあったことに着目してデータを見ると、確かに顧客は問い合わせをくれる前に何度もサイト内を回遊しているのがわかった。見出しの付け方などもこの本を参考にして見直した。