PROJECT 001 — MANIARUを作る。
SPECIAL S02 / SNS INTEGRATION
SPECIAL S01では、X、Instagram、TikTok、YouTube、note、GitHubにMANIARUの発信拠点を用意し、それぞれの基本的な役割を考えた。
次に行ったのは、作ったSNSをWordPressと相互につなぎ、どこでMANIARUを見ても同じブランドに見えるようにすることだった。
SNSを作っただけではMANIARUにつながらない
SNSアカウントは、それぞれ独立した場所にある。名前や画像が揃っていても、WordPressとの行き来ができなければ、MANIARU全体としてはつながりにくい。
そこで、SNSからMANIARUのサイトへ戻れることと、サイトから各SNSへ移動できることの両方を整えた。
中心に置くのはWordPressだ。SNSはそれぞれの特徴を試す場所とし、詳しい実験記録はmaniaru.comへ集める形にした。
SNSからWordPressへリンクする
各SNSのプロフィールから、https://maniaru.com/ へアクセスできるようにした。
短い投稿や画像、動画からMANIARUを知った人が、詳しい記事やPROJECTの記録へ進める入口になる。
SNSごとに別のゴールを作るのではなく、詳しい情報を読みたいときに戻れる共通の場所としてWordPressを使うことにした。
WordPressから各SNSへリンクする
WordPress側には、X、Instagram、TikTok、YouTube、note、GitHubへのリンクを設置した。
サイトを訪れた人が、文章以外の発信やコードにも移動できる。WordPressとSNSを一方向ではなく、相互に行き来できる状態にした。
サイト内部のページは同じタブで開き、SNSなどの外部サイトは新しいタブで開く考え方にした。外部リンクには、必要に応じて新しいタブで開く指定と適切なrel属性を使った。
アイコンとサービス名を組み合わせる
SNSリンクは、単純なURLや文字だけを並べるのではなく、各サービスのアイコンとサービス名を組み合わせた。
MANIARUの白、濃紺・黒、ブルーアクセントという配色を崩さず、サイトの中で目立ちすぎないシンプルな見せ方を優先した。
リンク先が視覚的にも文字でも分かるため、アイコンだけに意味を任せない形になった。
「X（Twitter）」とTikTokを追加する
Xは一文字だけでは、サービス名やリンクであることが伝わりにくい可能性があると考え、WordPress側では「X（Twitter）」と表示した。
また、最初にSNSリンクを実装したあとでTikTokも使うことにしたため、WordPress側のリンクにも追加した。
最初の設計を固定せず、実際に必要になったサービスを追加していく方が、MANIARUの進め方に合っていた。
スマートフォンでもリンクを確認する
SNSリンクを設置したあと、スマートフォン表示で改行とレイアウトの問題が見つかった。
PCでは一列に見えていても、画面幅が狭くなるとサービス名やアイコンの並び方が変わる。PC表示だけで完了とはせず、スマートフォンでも確認して調整した。
具体的なCSSの内容を推測して残すのではなく、スマートフォンで問題を見つけ、表示を確かめながら直した過程を記録しておく。
ロゴ、名前、プロフィールを一つに揃える
MANIARUでは、場所ごとに次の要素を使い分けた。
- 正式ロゴ：Mマーク＋MANIARU
- SNSプロフィール：Mマーク単体
- サイト名：MANIARU
- SNS表示名：マニアル｜MANIARU
- キャッチコピー：試したことを、誰かのマニュアルに。
すべてを同じ形にするのではなく、表示される大きさや場所に合わせて使い分けながら、同じMANIARUだと分かる状態を目指した。
ロゴ、名前、プロフィール、リンクがつながることで、SNSごとに別の活動に見えにくくなった。
OGPでシェア時の見え方も整える
SNSで記事が共有されたときの表示は、STEP 11 / SEO & OGPで設定した。
XにMANIARUのURLを貼った際、タイトルとdescriptionは表示された。一方、確認時点ではOGP画像はまだ表示されなかった。
SNS側のキャッシュや反映待ちの可能性もあるため、解決済みとはせず、時間を置いて再確認することにした。画像の反映を待つために、サイトやSNS基盤の公開を止めることはしなかった。
MANIARUのWebとSNSがつながる
SNSアカウントを作ること自体より、「どこで見ても同じMANIARUに見える」状態を作ることを重視した。
ロゴ、名前、プロフィール、リンク、WordPress、OGPまでを一つの流れとして整えたことで、各SNSを試しながらも、発信の中心を見失いにくくなった。
SPECIAL S02で、PROJECT 001の「サイト公開＋SNS基盤作り」は一区切りになる。
ただし、MANIARUの運営はここから始まる。記事を増やし、SEOを改善し、アクセスを分析し、SNSを実際に運用する。AIや自動化、収益化も、試した過程を記録していく。
サイトを作って終わりではない。実験する場所ができた。