00:00
皆さま、こんにちは。ブログ運営の羅針盤、今回は第2回の深掘りとなります。
はい、よろしくお願いします。
今回、あなたと一緒に紐解いていくテーマなんですが、
matsusanのブログ運営のマテリアポロブログセーマカスタマイズ更新履歴についてです。
はい、ブログのテーマのカスタマイズですね。
そうなんです。さあ、これを早速紐解いていきましょう。
一見すると、ただのブログのアップデート報告とか、そういうふうに見えるかもしれないんですが。
単なる機能追加のメモかなと最初は思いますよね。
なんですけど、全然違うんですよ。今回のミッションは、この資料からサイト運営の極意を引っ張り出すことです。
まさに、執念の記録といっていい内容でしたね。
本当に、検索エンジンへのSEO対策、そして読者のためのUX向上、さらにですね、運営者の圧倒的な個性の爆発と、この3つが詰まっているんです。
そうですね。検索エンジンというシステム、読者という他社、そして運営者である自分、この3つの視点を全て満たしている点が本当に見事です。
あなたがもしウェブサイトを持っているなら、絶対に見逃せない情報発信のヒントになりますよね。
間違いありません。プラットフォームの制限を一切言い訳にしていないところが最大のポイントです。
では早速、その見えない土台を整える部分、検索エンジンとの対話、つまりSEO対策から入っていきましょうか。
はい。建物の基礎工事にあたる部分ですね。
まずですね、メタデータの整理をやっているんです。ヘッドタグの中とかの画面には見えない部分ですよね。
ええ、HTMLの裏側です。
記事の概要とかキーワードを絞り込んで、さらにツイッターカードとかOGPみたいなSNSシェア用のタグ、これの重複をバッサリ削除したとあります。
ここ非常に重要なんです。情報の品質向上に直結しますから。
素人考えだと見えない部分なんだから、キーワードとかタグとか、とにかくたくさん詰め込んだ方が検索に引っかかるんじゃないかって思っちゃうんですけど。
昔はそういう手法もありました。でも今の検索エンジンやSNSのロボットは非常に賢いんです。
じゃあ詰め込みは逆効果なんですね。
はい。ロボットに対してこの記事で一番重要な情報は何をノイズなしで正確に伝える必要があるんです。
タグが重複しているとロボットが混乱してしまいます。
どれが本当のタイトルなのみたいな。
その通りです。だから見えない部分の埃を徹底的に掃除して、ロボットが迷わない案内板を作ったわけです。
なるほど。検索エンジンに対するおもとなしですね。
そしてSAO関連で私が一番驚いたのが、H1構造の抜本的修正というやつです。
これはブロガーというプラットフォームのかなり厄介な弱点に立ち向かった部分ですね。
はい。資料を読んでびっくりしたんですけど、ブロガーの標準仕様って全ページでブログのタイトルがH1になっちゃうんですか?
ええ、そうなんです。現代のSEOにおいてはかなり致命的ですよね。
03:04
検索エンジンってH1をそのページの一番大事なテーマだと認識するじゃないですか。
はい。だから個別記事をどんなに頑張って書いても、その記事のタイトルはH2に格下げされてしまう状態だったんです。
それは悔しすぎますよ。検索エンジンからしたら、この記事のメインテーマはブログの名前なんだなって勘違いしちゃうってことですよね。
そういうことです。特定の情報を探している読者とマッチングしにくくなります。
でもこれシステムの根本的な仕様だから普通は諦めると思うんです。マスさんはどうやったんですか?
テンプレートのXMLを直接編集するという強行手段に立てます。
XMLを直接ですか?
A、B IFという条件分岐タグを使って、もし個別記事のページなら記事タイトルをH1に、トップページならブログ名をH1にするという処理を動的に行わせたんです。
資料のメモにも生々しい苦労が書いてありました。このコードだけじゃ全部に反映されないから該当箇所を探しながら修正したって。
ちらみつぶしに直していたわけですね。
ですよね。ここがさっきおっしゃっていたプラットフォームを言い訳にしないってことなんですね。
はい。何が一番重要かを正しく伝えるための構造是正はサイト運営の根幹です。この強靭な骨格が長期的な評価を支えるんです。
見えない土台、本当に大事ですね。さてここからは実際にブログを訪れた人間の読者、その見える部分への配慮、UXの向上施策について見ていきます。
読者への徹底的なおもてなしの部分ですね。
はい。まず読量メーターと読量時間の目安です。これAIの提案で実装したらしいんですが。
画面上部にブルーのグラデーションで進捗が出る機能ですね。
そうなんです。あとこの記事は末分で読めますって出るやつ。
これがあると読者はあとどれくらいで読み終わるのかが視覚的に分かるので心理的負担がすごく減るんです。
確かにスマホで長い記事をスクロールしていると今どこにいるかわからなくなりますもんね。
現在地を身にしなうと離脱の原因になりますから。
ここからがすごいこだわりなんですけど、この読量時間の計算からソースコードの部分を除外するように修正したそうなんです。
なるほど。技術系ブログならではの素晴らしい視点です。
最初は単純に全文字数で計算してたから不当に長く表示されちゃったみたいで。
コードの部分は読むというより見たりコピーしたりするものですからね。
そうですよね。だからわざわざ計算式からコードを省くって読者のことを本当に分かってないとできない配慮ですよ。
相手がどういうモチベーションで画面を見ているか、その解像度が非常に高い証拠です。
さらにですね、追従式目字も実装されています。スクロールしてもサイドバーについてくるやつですね。
はい。これも最初はタイムラグがあったようですね。
ページの画像とか全部読み終わるまで目字が固定されなくてフラフラ動いちゃってたのをすぐ固定されるように直したと。
レイアウトが容器せず動くのはユーザー体験を損ないますからすぐ修正したのはさすがです。
06:04
かゆいところに手が届いてますよね。
ただこんなにスムーズにやっているように見える松さんが一番難航したのがページネーションなんです。
記事一覧などの全ページで表示件数を7件に統一するカスタマイズですね。
はい。これ読んだだけで胃が痛くなりました。直せば別の箇所が壊れるルークに陥ったと。
2ページ目が1件足りないとかボタンが消えるとかプログラマーあるあるの無限ループですね。
そうなんです。なぜそこまでして7件にこだわったんでしょうか。
ページによって表示件数がバラバラだったりすると読者は無意識のうちに小さな違和感を覚えるんです。
あれって。
あーその小さなあれが積もり積もると。
はい。サイトへの信頼感や没入感がそかれてしまいます。
それを防ぐための非常に泥臭いUX改善作業なんです。
資料によると資料執筆のほんの数分前にようやく完成したそうです。
ギリギリまで戦っていたんですね。
リスナーのあなたもこういう誰も気づかないかもしれないけど自分の基準をクリアするまで諦められない経験あるんじゃないでしょうか。
その裏側の熱量は確実に使い勝手という形で読者に伝わりますよ。
本当にそうですね。さあ強固な土台と快適なUXが揃ったところでいよいよここからが本当に面白いところです。
個性の爆発ですね。
はい。高度な独自カスタマイズの世界です。
サイドバーのプロフィール欄、イヴァンジェリオンの3Dポスター風プロフィールなんです。
NARVのロゴが空中に浮いて回転しているように見えるやつですね。
ただの画像じゃないんですよ。
ブログのプロフィールに3Dってどうやってるんですかこれ。
CSSのアニメーション機能を特限まで使っています。
パースペクティブという奥行きのプロパティやロテートで要素を立体的に回転させているんです。
いや普通は丸いアイコンと自己紹介文で終わるじゃないですか。
そうですね。情報伝達だけなら全く必要ない機能です。
わざわざ8秒かけてゆっくり回転させて影まで落とすってブログの枠を超えてますよ。
でも全体像と結びつけると非常に意味があるんです。
これは単なるブログではなく自分だけの表現の城、デジタルガーデンなんですよ。
デジタルガーデン。
情報を並べるだけじゃなくて、自分の手で庭を育てていく感覚ですね。
ええ。だからこそ独自のいい目ボタンも自作しているわけです。
あ、そうそう。ネットのプラグインを使わずにスプレッドシートとGASとJavaScriptを組み合わせて作ったんですよね。
はい。AIを壁打ち相手にしてシステムの裏側からすべて構築しています。
AIに丸投げするんじゃなくて協作してるのがいいですよね。
それにSNSのホローボタンもすごいんです。
マウスを乗せると回転するボタンですね。
そうなんです。ホバーすると360度回転しながら四角から丸に変わるんですよ。意味もなく何回も触っちゃいました。
それこそがマイクロインタラクションの力です。ワクワクする、触りたくなるという感情を引き出しているんです。
確かに読みやすいだけの無機質なサイトじゃなくてこういう遊び心があると楽しくなります。
09:02
読者はその技術力と個性を見てコンテンツだけでなく運営者自身のファンになっていくんです。
なるほど。これで最初の3つの極意が全部繋がりましたね。
SEOという論理、UXという配慮、そして3Dポスターのような個性ですね。
システムへの論理的アプローチ、他社へのおもてなし、そして自分の表現欲求の爆発、どれが欠けてもダメなんですね。
論理がなければ見つけてもらえず、配慮がなければ定着せず、個性がなければ愛されませんから。
ブロガーの制限の中でもXMLをいじり、CSSで空間を作り、AIと協力して理想の空間を作れるんです。
システム上できないからってもう言えなくなっちゃいましたよ。
ツールはあくまで土台です。どう使いこなすかはあなた自身の熱量と想像力次第です。
執念と遊び心で理想の城は作れるんですね。濃密な時間でした。
では最後にあなたに1つの問いを投げかけたいと思います。
もしあなたが明日自分のブログやワークスペースをゼロからカスタマイズできるとしたら、
まずどこから手をつけますか?
検索エンジンが好む完璧な論理構造を作りますか?それとも他社が喜ぶ快適なおもてなしを優先しますか?
あるいは、
誰に何と言われようと3Dで回転する自分だけの遊び心を真っ先に実装しちゃいますか?
どれを選ぶかにあなたの表現者としてのスタンスが現れるはずです。ぜひ考えてみてください。
あなたのサイト運営がよりあなたらしい個性にあふれたものになりますように。
それではまた次回の深掘りでお会いしましょう。
