私は2008年に独立して会社を設立したことをきっかけに、Webサイト制作をゼロから始めました。当時37歳で、すでにアラフォーでした。知識もゼロからのスタートで、HTMLもCSSも始めはよくわかりませんでした。ただし、PCは自作していたくらい好きで、仕事とゲーム、ネットなどで日常的に触れていました。
ネットで色々な情報を調べながら作っていくうちに、徐々にやりたいことができるようになり、2008年に最初のサイトを公開しました。5年後の2013年にはWordPressで制作したサイトを公開することができました。それからさらに少しづつアップデートを重ねて、現在は今ご覧になっているこの形になりました。また、最近ではブログでも少しですが収入を得ることができるようになりました。
マイペースでのんびりやってきたので、ここまでに10年ほど経ちましたが、私がこれまで身につけたきたことをお伝えできれば誰かの役に立つのではないかと考えています。そこでこの記事では、序章としてどんな経緯でここまで至ったかについてを書きたいと思います。
1.ホームページビルダーで制作するも友人の一言で一念発起
最初は独立する前に暇になったらやってみようと買ってあった、Web制作ソフトのホームページビルダーを使ってサイトを制作してみました。Wordのように文章を書いて枠などを配置するだけで、Webサイトの形になったので簡単でした。そこで、ドメインを取得して無料のサーバーにとりあえず公開してみました。
アップしたサイトをシステムエンジニアの友人が見てくれるというので、お願いしたところ「ゴミコードが混じっている」と言われてショックを受けました。頑張ってアップしてウキウキだった気分に水を差されて、頭に来たのを覚えています。
ものすごく悔しかったので、文句を言わせないものを作ってやる！ということで、Webサイトの制作をイチから調べて作ることになりました。この出来事なければ自分で学んで作るということをしなかったと思いますので、今では友人に感謝しかありません。
最初にアップしたサイトですが、下のスクリーンショットだけ残っていました。
ホームページビルダーのボタンパーツをそのまま使っていて、今見ると素人丸出しでダサいので死にそうなくらい恥ずかしいです。本文の枠も画像を文章に合わせて伸ばしているので、左サイドのメニューと比べるとおかしくなっています。今なら何がどうダメかすぐにわかると思いますが、当時は何も知らなかったのでかなり適当でした。無知って恐ろしいですね。
2.HTMLとCSSを駆使してサイトを制作
Webサイトの制作方法を調べていくうちに、HTMLとCSSというものを知ることになります。
Webページの文書構造や、スタイルの設定方法などについてわかってきたので、最初のサイトを手打ちのコードで再現してみました。ホームページビルダーでは、文章の長さによって枠の画像を変えていましたが、CSSで工夫することで文章の長さが変わっても枠が追従するように表現ですることができ、感動しました。ここでWebサイト制作の面白さにハマりました。
始めのサイトがダサすぎてヤバかったので、イチからデザインし直して作ったのが下のスクリーンショットです。2008年後半～2013年4月までこの形で運用していました。
当時はHTMLとCSSが書けるようになっただけで、デザインの作法などは全くわからなかったのでメニューの縦と横がどう考えても逆ですが、HTMLとCSSの構造は理解して思ったとおりに作れたので満足していました。フォームメーラーで初めてお問い合わせフォームを作ったのもいい思い出です。
CSSで見た目をいろいろ設定できるのが面白くなり、ページごとにテーマ色を変えるというデザイン的にどうなんだという試みもしました。
また、ブログはアメブロを使っていたので、Webサイトとデザインを統一するためにアメブロ側のCSSを解析してカスタマイズしましたが、自分で書いていないコードの解析は泣きそうなほど辛かったです。ただ、このカスタマイズのおかげで、CSSの理解は一気に深まりました。
3.WordPressを知ってテーマとサイトを制作
上の状態で4年ほど運用していましたが、ブログに多少アクセスはあるものの、お申し込みの数字はあまり芳しくなかったので、抜本的な対策が必要でした。
また、どのページにも書いてある同じ内容を、たとえばサイトの下にある「20XX © ~」の年が変わるなどしたときに1ページづつ該当箇所を全部書き換えるのが面倒になっていました。そこで、ページをブロックごとに分けて、ページごとに変わる内容(本文)だけ切り替えるような方法を探していました。そんなときに出会ったのがWordPressでした。
WordPressについては、よく目にしていたので名前は知っていましたが、ブログ用のツールという以外はどんなものか知りませんでした。調べていくうちに、プログラムで条件に応じて動的に表示を制御できることがわかりました。さらに、ブログに加えてWebサイトとしての機能を持たせることができることを知って、まさに求めていたものが見つかったので嬉しくなりました。
WordPressはテーマを変更することで見た目を変えることができますが、どうせやるならと、初心者なのに無謀にもテーマを自作してみました。とはいえ、ほとんどコピペでしたが、テンプレートタグなどのWordPressのお作法とPHPの基礎を学ぶことができたので以後のWordPressのカスタマイズにも役に立ちました。
2013年4月になんとか完成したので公開しました。WordPressを導入したことによって、管理が楽になったのと、徐々にアクセスが増え始めてお申し込みが頂けるようになりました。さらに、ブログの記事で少しだけ稼げるようになりました。
メニューや見出しなどの装飾をシンプルにした後期テーマが残っていたので、ローカルで再現したのが下のスクリーンショットです。
データベースが空なので、本文はエラーで表示されませんが、森の中にいるイメージでグリーンを基本カラーにしました。本文とサイドバーの境にあるツタ模様がオシャレポイントです。バナーは効果がなかったので、現在は撤去済みです。サイドバーにTwitterやFacebookを表示したり、メニューやトップに戻るなどの効果にJavaScriptを使ったりしています。
4.SEOに強いテーマ「Simplicity」に変更・SSL対応など
WordPressでの運用にも慣れてきたので、今度はブログで検索流入を増やそうということで、SEO(検索エンジン最適化)が重要だと知ることになります。キーワードはもちろんのこと、HTMLの記述なども文法に準拠している必要がありますが、自己流でかなり適当に記述したものを書き直すのが面倒だったという理由から、WordPressにも流用して使い続けていたので、こりゃイカンと思いました。
ここまでくると自力でテーマを作るのは技術的に厳しいと感じたので、カスタマイズ可能な無料テーマを探すことで、技術的な部分はアウトソースして、コンテンツ作成に集中できるようにしたほうが良いと考えました。
そこで、いろいろと調べてたどり着いたのが「Simplicity」というテーマでした。
Simplicityというだけあって、とにかくシンプルでカスタマイズがしやすいことと、テーマ自体がSEO対策済みでレスポンシブ(PC・スマホ両対応)なので、余計なことを考えずにコンテンツに集中する上で理想的なテーマです。しかも無料！
そのままだとシンプルすぎるので見出しやメニューなど若干のデザイン変更と、元々ブログ用なのでビジネスサイトとして使えるようにカスタマイズし、元々あったページや記事のHTMLの記述を直して2016年に公開しました。基本的なデザインは前のものを踏襲して、モバイル向けもほぼ同じデザインで統一しています。
この更新を行ってから、おかげ様で「コーチング 無料」「コーチング 低価格」などの検索ワードでトップに表示されるようになり、お申し込みが更新前の3倍以上に増えました。
また、HTMLの記述を直したことでブログを書くのがすごく楽になりました。以前はテキストエディタからマクロを組んでHTMLのコードに変換していましたが、その手間がなくなったのでサクサク書けるようになりました。
さらに2016年後半にはSSL化(https)を行い、それまで外部フォームを使っていましたが、新たにお問い合わせフォームを制作しました。電話の種別や、ご都合の良い曜日・時間を入力して頂くことで、よりスムーズに体験コーチングを受けて頂けるようになったのではないかと思います。
5.ブログで収益が出始める
上の改修で器としては完成形になってきて、コンテンツ制作にリソースを集中できる環境が整ったので、本業だけでなく、ブログでも収益を得ようと2016年から画策し始めました。実は、改修前に適当に書いた記事が少し稼いでいたので、調子に乗って色気を出した格好です。
調べて試していくうちに、どのように記事を書けば良いか少しづつわかってきました。そこで、2017年は稼げそうな内容で狙って書いてみたところ、記事のいくつかが一定のアクセスを生み、最初に稼いでいた記事を上回る収益が出るようになりました。
現在はGoogleAdSenseとAmazonアソシエイトで、このサイト+ブログの運営費(サーバーとドメインの使用料)と、趣味に使えるお小遣い程度を稼げるようになりました。下の記事にあるデジカメは、ブログの収益で買ったものです。
6.テーマを「Cocoon」に変更、ブログ機能強化やAMP対応など
2018年10月にテーマをSimplicityの作者、わいひらさんが作成した「Cocoon」に変更しました。
CocoonはSimplicityの後継版といった感じで、本文上にアイキャッチの自動挿入ができたり、カテゴリのラベル表示など、様々な機能がSimplicity以上に盛り込まれ、大幅にパワーアップしています。完全レスポンシブデザインでAMP対応も簡単です。
テーマ側でできることが非常に多いので、Simplicityのときに数ヶ月かかったカスタマイズを1週間程度で行うことができました。具体的には見出しを前と同じデザインにしたり、お申込みフォームの改修やSNSボタンの演出などを行いました。それが今ご覧になっている状態です。
効果は今の所わかりませんが、完全レスポンシブとAMP対応でモバイルフレンドリーになったので、ブログのアクセスがさらに向上することを期待しています。
身につけたことを伝えたい！
上でお伝えしたように、2008年から10年かけてここまで到達しました。まだいろいろと見直す点が多いですが、コツコツ改良を続けていきたいと思います。
ここからが本題ですが、今の時代Webサイトやブログの運営をせずにビジネスを行うことはあまり考えられません。したがって、Web関連の技術やノウハウを身につけることは人生逆転あるいは上昇の手段として、かなり有効だと私は考えています。そこで、私が身につけたやり方をお伝えすることによって、独立したい人はもちろん、現在行き詰まっている人や、人生で逆転を目指す人のお役に立てればと考えています。
私は必要に迫られて始めましたが、デザイナーでもプログラマーでもない、アラフォーのおっさんでもゼロからここまではできるようになったので、脳がフレッシュな若い方ならより短い期間で上手に身につけられるだろうと思っています。
また、ブログで収益を得ることも収入源の一つとして有望だと思います。さらに、文章を書くことやネットで発信するスキルがあれば、ライターや小説家など、いろいろな手段で収入を得られる可能性が高まります。ブログに関しては現在検証中かつ発展途上ですが、こちらもノウハウをお伝えできればと考えています。
今後お伝えしたいこと
お伝えしたいことの具体的な内容は下のとおりです。
- Webサイト制作をゼロから始める準備(PCや必要なソフト等)
- 学習方法(順序や参考サイト等)
- 用語解説(アレはなんて言うの？と私が困ったもの)
- 立ち上げ作業(サーバー契約・ドメイン取得・アップロード等)
- WordPressの各種カスタマイズ(新着情報欄・問い合わせフォーム・広告等)
- ブログで月1万円稼ぐ方法(書く内容と必要な作業)
このブログの記事として公開する予定ですので、興味のある方はぜひチェックしてください。
コメント