一年ちょいって雑かよ！とも思ったんですが、振り返りたい時に振り返っておきます。
目次
ブログを始めた理由
- WordPress素人だったので、自分のサイトで好きに弄って試したかった。
- Adsenseやアナリティクスなど、自分のサイトで好きに弄って試したかった。
- 文章力や人に伝える構成力など、書いて鍛えたかった。
- 自分の作品を発表するサイトの場合、発表する作品が特に無い。
WEB制作のスキルを積みたいときに、仕事時クライアントのサイトでぶっつけ本番で試すなんてできないじゃないですか。それでも大きい制作会社なら作業マニュアルが用意され教える体制も整っているため不慣れでも作業できます。しかし、小さい制作会社の場合、「実績が無い」→「スキルが無い」と除外されて終わりです。
経験を積む・触れてみるなら、自分のサイトを立ち上げてそこでやるのが手っ取り早いですよね。
各サービスのバージョンアップ時の把握も素早くできます。
文章力や人に伝える構成力なども、何もしないとどんどん劣化してしまいます。
実際に書いて公開して人目に触れて、「説明不足かな」と思う箇所を修正したり、どう図版を作ると伝わりやすいのか考えたりなど、トライ&エラーで勉強しています。
クリエイターのサイトといえば、素敵な作品・実績が並んでます。
しかし、私はイラストも描いてるとはいえイラストのみで食えてるわけでもないレベル。発表するほどの作品が無いという切実な理由もありました。
ストックイラストの紹介記事も書いてますが、売り上げには影響してないようです（苦笑）。
でも、このブログ全体が、自分のコーディングスキル、文章力、図版作成のスキルを表しているので、作品帳と捉えることもできるかもしれません。
運用の実績としても、自分のサイトなら守秘義務も無いし、堂々と出せるのはいいですね。
ブログの方向性
ご覧の通り、「自分の勉強・経験をまとめていく」技術サイトとなっております。
そのため結果だけでなく途中の試行錯誤も載せています。自由研究みたいなノリですね。
ブログのデザインに関しては正直noteを参考にしています。
記事ページは1カラム、広告も区切り程度の配置に抑えて、閲覧者が記事の内容に集中できるよう配慮しました。
Adsenseで広告を貼っていますがレンタルサーバー代分稼ぐ程度を目標としています。「月○万円アフィで稼ぎました〜！」なことは目指していません。
ここまでで3,500円程度です。ブログを始めた最初の数ヶ月は月1円稼げるかどうかでしたが、アクセスが増えるにつれ、じわじわとページのインプレッション単価が上がってきました。
技術ブログはクリックされる率が低いようなので、あまり欲を出さずにやっていこうと思います。
（クリックされるのは大体夜間なのが面白いですね。真面目だから就業時間内は広告をクリックしないのか、夜は眠くなってうっかりクリックしちゃっているのか）
TwitterなどでハイレベルなTips情報がバンバン投稿されていますが、すごい内容はすごい人達に任せて、自分は自分のレベルとペースで更新中です。
アクセスの推移
技術サイトあるあるなのか、訪問者は9割近くがオーガニック検索で飛んできています。
記事公開時にTwitterで呟きますがそれ以外に特に宣伝していません（宣伝やSNSでの交流を頑張る余力が正直無いので……）。
特にSEO対策に気合入れてなくても、WordpressでAll in one SEOを使用しているおかげでしょうか、検索に引っかかってくれているようです。
地道にアクセスが増えてきて、2020年9月くらいから平日の訪問ユーザー数が200人/日を超えるようになりました。このラインを落とさないよう記事を充実させていこうと思います。
アクセスといえば、コーディング系のアクセスとイラレ系のアクセスは訪問者のゾーンが別なのも、ちょっと面白いですね。
コーディング系はほぼオーガニック検索で、イラレ系の記事は影響力のある人のシェアによってアクセスされます。
（シェアしてもらったときは、「記事内容がお眼鏡にかなった！」とガッツポーズしてます😀 ）
ここまでのアクセス数上位TOP10
TOPページ以外、コーディング系の記事です！
1位：レスポンシブ対応！万能カルーセルスライダーjQueryプラグイン「slick.js」を研究してみる
皆が使うslick.js！ そりゃアクセス数が多いのも当然ですね。
現在19例を載せていますが、それでも案件によってデザイナーがさらに自由な発想のスライダー実装を求めてくるので、例をもっと蓄積していきたいと思っています。
2位：返せ、工数！コーダー泣かせの☓☓☓☓――IE11対応まとめ
皆が大嫌いなIE11！ 徐々にIE11が見切られているのか、アクセス数は控えめになってきています。真夜中にアクセスが伸びがち（お疲れ様です……）
3位：aタグを親要素のサイズに合わせるやり方と、aタグをbutton状にする調整法まとめ
aタグ周りをちゃんと理解してない自分のための記事だったんですが、結構人気を集めています。仲間よ！
じわじわとアクセスが伸びてきて、日によってはslick.jsの記事と一番争いをすることも有り。
初めは初歩的な内容でバカにされるかなと思っていましたが、初歩的だからこそ必要だったりすると認識を改めさせてくれた記事です。
4位：slick.jsでカルーセルスライダーを実装＆カスタマイズしてみるデモページ
slick.jsの記事のデモページです。1ページに全部のデモを置いているので、そりゃアクセス伸びますわね。
検索結果からこのページにランディングしちゃう人もいるので、ちゃんと記事ページに移行できてるか心配です。
（カードからリンクが貼れてないです。その1）
5位：topページ
皆が踏まないTOPページ。半分くらい自分のアクセスなんじゃないでしょうか。。
（カードからリンクが貼れてないです。その2）
6位：Animate.cssとWOW.jsを使って、簡単にスクロールエフェクトを実装してみる
記事内にデモも置いてますが、説明テキストの下でデモ要素がビヨンビヨンしてるため、分かりやすいかな？気が散らないいかな？と悩みつつ。
7位：jQuery DrawSVGを使ったSVGアニメーションのデモ
8位「IE対応のSVGアニメーション その① | jQuery DrawSVGを使って実装してみた」のデモページ。SVGの知識が浅いときに作ったのでそろそろ内容をブラシュアップしたいです。
（カードからリンクが貼れてないです。その3）
8位：IE対応のSVGアニメーション その① | jQuery DrawSVGを使って実装してみた
その①で止まってしまってますね。。上記デモページと合わせてブラシュアップしたいです。
9位：スクロールバーをCSS、あるいはfleXcroll.jsを使ってデザインカスタマイズする。
スマホ対応が面倒くさいからスクロールバーはカスタマイズしない方がいいですよ？とクライアントのディレクターに言うためにまとめた記事です。
10位：日本語WEB FONTは本当に遅いのか？ Google、Adobe、モリサワ(さくら)の各WEB FONTで表示スピードを検証してみた
検証記事の中でも一番自由研究っぽいかも。
弊社社長に見せるために作成したんですが、どこかで人気なようでリファラ流入だったり海外からの訪問の割合が高いです。（フリーフォントの紹介ページと勘違いされてる可能性有り）
まとめ
アクセスが伸びてくると、こちらも記事内容をちゃんと精査して皆さんにお出ししなければ……と責任を感じるようになってきました。
変なこと書いてないか、たまに職場や元職場のコーダー仲間やデザインチームのメンバーに記事内容を見てもらったりしています。
それもふまえてブログを始めた成果として、
記事を書くことで学びになる！
これが一番デカイです。
調べて確認・検証してアウトプットとして記事を書くことで、自分はどこまで理解していたのか、どこを理解していなかったのかが洗い出しされます。
記事を書いてなかったら曖昧なまま流されていったナレッジが整理されていつでも引き出せるののも、忘れっぽい自分にとって有益です。
aタグの記事のところでも触れましたが、初歩的な内容の記事もニーズがあるのが分かったのも嬉しかったですね。
教育学部出身のせいか（関係ないか）、学ぼうとしている人の手がかりになってると思うと充実感があります。
現在は仕事内容がコーディング寄りのため記事内容もコーディング系が多くなっていますが、イラレやPhotoshop、XDの勉強もし直す必要があるので、デザイン方面も記事を頑張りたいと思います（ロートルあるある：最近の機能に付いていけてない）。
「この記事にこういう例も追加して」「この記事のここ間違ってたよ」「この記事にこういう解説があったらいいな」など、ご要望むしろアドバイスがありましたら、お問合せフォームからお気軽にご連絡ください。