Little Springをリニューアルしました。

201612_renewal

今年に入ってから更新が完全に止まっていたのですが、年末に差し掛かったこのタイミングで、当ブログ「Little Spring(リトルスプリング)のリニューアルをしました。

リニューアルにあたり、実施した内容を紹介したいと思います。
(色々と見直しを図りましたよ!)




運営方針とサイトの方向性の見直し

まず始めに行ったのが運営方針とサイトの方向性の見直し。
更新頻度があまり上がらなくなってしまったので、この点をどうするか?から考えがスタートしました。

「おいおい…w」と思う人が多いと思いますが、実は当初は、Web制作に専門特化したテック系のブログを目指していました。
ですが、すでに途中から方向性が大きくぶれてしまい、アート・テクノロジーやプロダクト系のイベントレポートはともかく、お店のレポート記事なども書き出し、もはや専門特化とは言えない状態になっています。

数年間運営し、テック系ブログは僕には向いていないなというのは分かったので、「Webディレクターがあれこれ書いている…」ぐらいの位置づけで、書きたいと思ったことを気の向くままに書く方針に正式決定しました。

とは言っても、ある程度テーマを絞ることは必要なので、過去に書いた内容も鑑みて4つのカテゴリーに記事を整理しました。

WEB制作・IT
僕の仕事である、Webの制作に関する話や、IT・テクノロジーを中心としたテーマになります。ここは今まで通り継続して続けます。
PC・ガジェット
Apple、Microsoft、GoogleといったOSメーカーの製品やサービス、それに関するサードパーティの製品をテーマにしています。
もっと分かりやすく書くと、パソコンやスマートフォン、周辺機器についての話題です。
今後はここの比率を増やす予定です。
旅・写真
昔に個人で運営していた歴史系サイトの名残りで、主に史跡巡りをした際の記事や撮影した写真記事を中心に掲載します。旅行系のテーマも掲載する予定です。
ここも定期的にアップしていければと思います。
趣味など
他の3コンテンツに含まれなかった話題を掲載しています。
「◯◯のお店に行った」とか「◯◯の展示会に行った」系の記事が今のところは多いです。

サイト設計

方針が固まったところで、次はサイトの設計に取り掛かりました。
行った施策は以下3つになります。

なお、タスク管理やディレクトリマップの作成には、Excelは使用せず、Googleスプレッドシートを使用しました。(最近はGoogleのツールの進化が目覚ましいので、徐々に切り替えています)

不要記事の整理

主に対象となったのは、定期的にアップしていた「その月の注目ブックマークまとめ記事」です。

既に数年経った他ブログ記事へのリンクで、情報も古くリンク先のページが存在しないものもあったので、記事としての価値は薄いなと思い削除に踏み切りました。

他には、終了しているサービスの記事も対象にしました。

絶対数は少ないのでSEOに影響するかは未知数ですが、スリムアップを図っています。

カテゴリとパーマリンクの整理

1番大きく変えたのがこの点になります。

例えば「新選組のふるさと「日野」に行ってきました。」の記事だと、リニューアル前は
https://www.little-spring-web.com/shiseki/shinsengumi_hino/
のURLになっていましたが、

リニューアル後は
https://www.little-spring-web.com/?p=471
になりました。

また、上記の記事が紐付いているカテゴリー「旅・写真」の一覧ページは、
https://www.little-spring-web.com/?cat=5
になります。リニューアル前は、/shiseki/がカテゴリー一覧ページでした。

もう少し詳しく解説すると、WordPressのパーマリンク設定を「カスタム構造」から「基本」に変更し、各ページともドメイン直下のIDで管理をすることにしました。
今後運営するにあたり、カテゴリーやタグ付けに変更があった時でも、記事URLは変わらない様に柔軟性を持たせたためです。

専門用語で言うと、一般的なWebサイトの構造であるツリー型から、ECサイトの様なファセット型に変更した状態ですね。

ブログやメディアは、この形式が良いと思います。

URL変更関連の対応

上記2点を実施したのに合わせてSSLも導入したため、サイト内のURLが全て変更になっています。このままだと検索エンジンにインデックスしなくなるので、.htaccessで301のリダイレクト設定を行いました。

また、Google Search Console上でXMLサイトマップの再送信も行っています。

開発環境を再整備

サイトの設計が固まったところで、実際に制作に入りましたが、開発環境を再整備しました。

MAMPからVagrant+VCCWに移行

201612_renewal02

まずはローカルの開発環境を新しくしました。

以前はMAMPを使っていたのですが、リニューアルを機にVagrantとVCCWの環境に移行しています。
まだそこまで使いこなせていませんが、Macのターミナルからコマンドを叩き一発で起動 / シャットダウンが出来たり、機能拡張も出来たりと便利そうです。

エディタをBracketsに変更

201612_renewal03

当初このブログを立ち上げた時は、Mac用のエディタ「Coda」を使用していたのですが、今回はAdobeのオープンソースエディタ「Brackets」を使用しました。

この間、SublimeTextやAtomも試しましたが、最終的にBracketsに行き着いています。
軽くて機能拡張も豊富で、見た目も良いので気に入っています。

Gitを使用

201612_renewal04

バージョン管理にGitを使用することにしました。クライアントツールはSourceTreeで、保存先はBitbucketを使っています。

僕しか触らない個人サイトで使う必要があるかな?とも思いましたが、やはり更新のバージョン管理とバックアップという点で重宝しています。

デザイン・HTMLコーディング・WordPress構築

201612_renewal06

今回のリニューアルでは、自分で全て作るというこだわりを捨てて、フリーのWordPressテンプレートをカスタマイズして利用させて頂きました。

以前の制作時は勉強も兼ねて自分で全て構築しましたが、今は実制作がメインでは無く、ディレクション中心の仕事なので、スピード重視でここは省く所だなという判断です。

このお陰で、デザイン・HTMLコーディング・WordPress構築の部分をショートカットし、制作期間を大幅に短縮できました。
(もちろん、Webデザイナーやフロントエンドエンジニアの人は、自分で手を動かしてWordPress構築までやらないとダメですよ)

WordPressテンプレートは、こちらのgraphyを利用させて頂きました。

以前の自作LittleSpringテンプレートは、「ノート上に記事が書かれている」というのをコンセプトにしたスキュアモーフィックデザインでしたが、graphyは極力装飾を排除したミニマルデザインで今風になっています。
画像もほぼ使用していないので、データもそこまで重くは無いと思います。

とは言っても、ちょっと寂しすぎるなとも思うので、バランスを見て手を入れていきます。

今後のブログの方向性として、手を動かして自分で作るよりは、運営の方に主軸を置いて行きたいと思います。

その他に導入したもの

以下3点のツールも導入しました。

Speaklyn

右下に「メッセージを入力してください」のタブがあると思いますが、これがSpeaklynです。
どういうものかというと、Facebookメッセンジャーと連動した無料のチャットサービスで、Facebookにログインした状態であれば、ここからメッセンジャーで僕に連絡をすることができます。

以前のLittleSpringには問い合わせフォームが無く、連絡手段がほぼありませんでしたが、リニューアルに合わせて用意してみました。とは言っても、フォームはもはや古い感じがしたのと、特にメールで連絡を受け取る必要も無いので、Speaklynを導入することにしました。

Facebookにチャットbotも設定しているので、僕が返信をし辛い時は自動でbotが返信します。

Ptengine

他には、ヒートマップ解析ツールのPtengineも導入しました。来訪者の行動をヒートマップで見える化して解析できるツールです。
今回は無料プランを入れており、実際に仕事で使えるかお試しの意味もあります。

SiTest

もう1つ、SiTestというツールを無料プランで入れています。
どういったツールかというと、アクセスなどの各種解析をAI(人工知能)が行い、自動でレポーティングしてくれるというツールです。

無料プランでは、AI(人工知能)のレポーティング機能は対象外ですが、他の機能はどういったもので、人工知能が何を収集しているのか等が気になったので、試しに入れてみました。

今後やろうと考えていること

という訳で、制作期間ほぼ1ヶ月という短期間で、無事にリニューアルが完了しました。
最後に今後実施しようと考えている内容をまとめました。

優先度MAX

記事の定期更新
説明するまでも無いですが、リニューアルを機にしっかりと更新していきたいです。
最低でも月1回は新記事を書きたいですね。

優先度大

Googleのツール関連
基本ですが、少ししたらSearchConsoleとGoogle Analytics、PageSpeedをチェックします。(色々不備が出てそう。。。)
A/Bテストツールの、Google Optimizeも使用してみたいですね。
titleタグとmeta情報
こちらも未設定なので対応します。SNSシェア画像と合わせて、WordPressのプラグイン「All In One SEO Pack」で実装する予定です。

優先度中

SNSシェアボタン周り
現在TwitterやFacebookのシェアボタンは標準の物を使用していますが、オリジナルボタンにカスタマイズしようと考えています。
また、LINEやSlackへ送るボタンの設置も検討中です。
SNSシェアの画像
Facebook OGPとTwitterカードの画像を設定します。
Serposcopeの使用
最近話題になったキーワードの検索順位チェックツールです。
キーワードチェックもしっかりやってみます。

今後やるかを検討中

AMP対応
検討中ですが、今のところ不要かもしれないですね。。。
WAI-ARIA対応
アクセシビリティを考慮。あと、今後のAI(人工知能)対応用に?
LINE@運用
使っていないだけで、実はアカウントあります(笑)
今のところFacebookページだけですが、運用開始を検討中です。記事内容によっては、違ったユーザー層にアプローチできるかも。
さくらVPSサーバに移行
サーバ設定となると、ちょっとハードルが高いですが、現状の共有サーバからの移行も考えています。なお、さくらの共有サーバなので、今回のSSL設定周りで結構トラブルが出ました。

ここまで読んで頂いてありがとうございます。
今後もよろしくお願いします。