スマホメニューのSNSリンク｜文字からアイコン2つへ、ずれを測った

スマホのメニューでSNSのアイコンがずれて見えるときは、見た目の印象で終わらせず、ずれの大きさを数字で確かめます。

アイコンに文字が付いた版は、アイコンの横の位置が行ごとに約24px（画面上の長さの単位）ずれていました（行と行の差か、文字との差かは記録にない）。アイコンだけを2つ並べた版は、ずれがありませんでした。

2026年10月8日と9日、AKITOYOは自分のサイトのスマホで開くメニューに、XとThreadsへのリンクを置く作業を、AIのClaudeと進めました。

この記事に出てくる Threads は、2026年10月30日から使っていません。記事は、当時（10月8日・9日）の作業の記録です。

作業の中で、AKITOYOは、メニューの変な線、色の違い、アイコンのずれに気づき、そのたびにClaudeに伝えました。

最初の版は文字のリンクでした。10月9日の昼前の時点で公開ページ（誰でも見られる状態のページ）に出ていた版は、アイコンだけを2つ横に並べた形です。

同じサイトの直しのうち、帯の画像の話はAIが作った帯の画像が合わないに、続く記事はスマホの表示が遅いにあります。

自分のサイトをAIと直す話は、次の7本です。1〜3はサイトを持つ前の基礎、4〜7はスマホの見た目と速さを直した記録です。

1. ホームページとブログとLPの違い｜目的別の正しい使い分け方
2. 独自ドメインとは何か｜ホームページを持つべき理由をわかりやすく解説
3. ホームページ制作を依頼するときに知っておきたい制作側と依頼側の役割分担
4. AIが作った帯の画像が合わない｜作った理由を聞いて9枚作り直した
5. スマホで横スクロールが出ないか確かめる｜幅の範囲で行数を測った記録
6. スマホメニューのSNSリンク｜文字からアイコン2つへ、ずれを測った（この記事）
7. スマホの表示が遅い｜フォントを止めて比べ、公開ページで確認した記録

図1：本人の一言と、そのあとの作業を並べた流れです。「AI」と書いた作業は、記録の前後から読んだ編集部の読みです。

この記事は、2026年10月8日〜9日の出来事を、当時の記録をもとに2026年10月29日にまとめたものです。

スマホメニューのSNSリンク ― 置き場の決め方

XとThreadsのリンクの置き場は、Claudeがテーマの公式の説明を調べたうえで、スマホのメニューの下のウィジェットになりました。

なぜなら、調べた時点のテーマ（WordPressでサイトの見た目を決める仕組み）の「SNS 情報」では、Threadsを出せなかったからです。

10月8日の夕方、Claudeは、テーマの公式の説明で置き場を調べました。

記録では、「SNS 情報」には、Threadsの欄がありませんでした（公式の一覧は、Xを含む10種です）。

置き場は、ウィジェット「スマホ開閉メニュー下」に、カスタムHTMLを置く方法になりました。

見た目を整える追加の指定（CSS）は、この方法では要らない、と書かれています。

メニュー本体に足す案は、パソコンにも出るため、採用されませんでした。

編集部の見立てでは、先に公式の説明を調べたことが、置き場を選ぶ理由になっています。

調べた結果、スマホのメニューの下のウィジェットが、XとThreadsのリンクの置き場になりました。

メニューのボタン ― 変な線と色の違いを確かめる

AKITOYOの一言のあとに、線の原因が分かり、色の違いが測られ、対応が提案されています。

置き場を調べたあと、AKITOYOは次のように伝えました。

※当時の記録のままです。この記事の本人の台詞は、すべて原文のとおりです。

Claudeは、背景つきのボタンの版を作りました。

続けて、AKITOYOはこう伝えました。

線は、空のプロフィール部品（サイトの決まった場所に置く部品、ウィジェットの1つ）の枠線と分かりました。

この線の扱いについて、Claudeは案A（次の段落で説明します）をおすすめし、AKITOYOに進めてもらいました。

案Aは、空のプロフィール部品を、非アクティブなウィジェットへ移す案で、設定は残ります。非アクティブは、使っていない部品を置いておく場所のことです。

その次に、AKITOYOはこう伝えました。

Claudeは、公開ページの色を、読み取りで測りました。

読み取りとは、ページを書き換えずに調べることです。

テーマのメインカラー（サイトの基本の色）は緑がかったグレー青で、トップページの紺と青とは違っていました。

Claudeの提案は、紺と青の2色にそろえることでした。

記録には「決定は本人。」と書かれています。

そのあと、AKITOYOはこう続けました。

Claudeは、ボタンを紺にした版を作りました。

ボタンの色だけが、メインカラーと連動しない形で残りました。メインカラーとは別に、ボタンの色が決まっている形です。

編集部の見立てでは、線や色の違和感は、場所と値が分かると、提案に進めます。

線は原因が分かってから、色は値を測ってから、提案が出ています。

SNSアイコン2つ横並び ― ずれを測って比べる

ずれの指摘を受けて、文字つきの版とアイコン2つの版が、ずれの大きさで比べられました。

翌日の10月9日の午前、AKITOYOは次のように伝えました。

Claudeは、アイコンだけで背景が透明の、2つ横並びの版を作りました。

そのあと、AKITOYOはこう伝えました。

Claudeは、この言葉を受けて測りました。

文字つきの版は、アイコンの横の位置が行ごとに約24pxずれていました。文字つきの版とは、アイコンに文字が付いたボタンの版のことです。

アイコン2つの版は、ずれがありませんでした。左端が、メニューの下の見出し「Follow Me」の文字とそろっていました。

見た目の残りとして、次の3つが挙がっています。

• Threadsのアイコンが、縦長に見えること。
• 左寄せで、右が空くこと。
• 2つのアイコンの間が、約38pxあくこと。

同じ場面で、AKITOYOはもう1つ伝えました。

この言葉への対応は、決まっていない部分にあたるため、この記事では扱いません。

編集部の見立てでは、ずれの指摘を数字にしたので、2つの版の違いを、見た目の印象とは別に比べられます。

ずれの指摘は、文字つきの版の約24pxと、アイコン2つの版のずれなし、という2つの結果になりました。

公開ページの結果 ― 線が消え、アイコン2つが出た

記録の結果には、公開中の状態として、空の線が消え、XとThreadsのボタンが出たと書かれています。

結果の欄には、公開ページの状態が、次の3つに分けて書かれています。

• 空の線は消えました（プロフィール部品は、非アクティブへ移りました）。
• XとThreadsのボタンが、公開ページに出ました。
• 10月9日の昼前の時点で、アイコン2つの版が公開ページに出ていることを、Claudeが測って確かめました。

編集部の見立てでは、確かめた対象ごとに書き分けた記録は、どこまで確かめたかが読み取れます。

公開ページでは、線が消え、ボタンが出て、アイコン2つの版も出ていると、記録されています。

アイコンのずれの測り方 ― 見た目を数字にする5つの段

見た目のずれは、2つの端を決めて、ずれをpxの数字で出し、版を変えるたびに測り直します。

線も色もずれも、AKITOYOの一言のあとに、原因が分かったり、測った結果が出たりしています。

編集部が記録を整理すると、AKITOYOの3つの一言のあとの確かめ方は、3通りでした。

• 線：原因が分かりました。空のプロフィール部品の枠線でした。
• 色：値を測りました。メインカラーは、トップの紺・青と違っていました。
• ずれ：距離を測りました。文字つきの版はアイコンの横の位置が行ごとに約24px、アイコン2つの版はずれなしでした。

次の5つの段は、編集部が記録を読んで組んだものです。記録の作業の順番どおりではありません。

図2：ずれを数字にして確かめる5つの段です。

1. ずれて見える所で、そろえたい2つの端（たとえばアイコンの左端と文字の左端）を決め、ずれを数字で測ります。
2. 何を基準に、何で測ったかを、数字と一緒に書き残します。
3. 版を変えたら、同じ場所の同じ端を、もう一度測ります。
4. 前の数字と並べて、ずれの大きさを比べます。
5. 気になる見た目が残ったら、それも数字で書き出します。

それぞれの段が、記録のどこから来たかを示します。

• 端を決めて測る：ずれを指摘した本人の一言と、左端が「Follow Me」の文字とそろっていた記録です。
• 基準と道具を書く：編集部が足した段です。数字を読み返す人が、同じ測り方で比べるためです。
• 測り直す：文字つきの版とアイコン2つの版を、同じ場面で測った記録です。版を変えるたびに測る条件と、同じ端で測る条件は、編集部が足しました。
• 並べて比べる：文字つきの版の行ごとの約24pxと、アイコン2つの版のずれなしを、並べて書いた記録です。
• 残りも数字にする：見た目の残りに、2つのアイコンの間の約38pxという数字が付いている記録です。

編集部の見立てでは、感想のままのずれは、2つの端と数字に置き換えると、前と後を並べて比べられます。

まとめ：SNSアイコンのずれを数字で確かめた事実

スマホのメニューの見た目がずれていると感じたら、どれくらいずれているかを数字で測ります。

記録から確かめた事実を、次に並べます。

• 置き場：10月8日の調べでは、テーマの「SNS 情報」にThreadsの欄がなく、置き場はウィジェットになりました。
• 線：空のプロフィール部品の枠線でした。非アクティブへ移す案Aを、本人に進めてもらいました。
• 色：測ると、テーマのメインカラーは、トップの紺・青と違っていました。
• ボタンの色だけが、メインカラーと連動しない形で残りました。
• ずれ：文字つきの版はアイコンの横の位置が行ごとに約24px、アイコン2つの版はずれなしでした。
• 見た目の残り：Threadsが縦長に見えること、左寄せで右が空くこと、2つのアイコンの間が約38pxあくことです。
• 公開ページ：10月9日の昼前の時点で、アイコン2つの版が出ていることをClaudeが測って確かめました。
• 未確認：押したときの反応と、実機での見え方です。

編集部の見立てでは、ずれを数字にしておくと、版を変えるたびに、前の数字と並べて比べられます。

最後まで読んでいただき、ありがとうございました。

この記事について

本記事は、AKITOYOの記録や発言をもとに、aki7199.com 編集部が定点観測として構成・制作したものです。

ここまでの例は、出どころを次の4つに分けて書きました。

• 本人の実践：AKITOYOがClaudeに伝えた言葉と、頼んだ形です。
• Claudeの作業：置き場の調べと、公開ページの確認です。各版の作成、案Aのおすすめ、色とずれの測定は、編集部の読みで含めています。
• 公式の資料：置き場の調べでClaudeが見た、テーマの公式の説明です（記録に書かれた範囲）。
• 編集部の見立て：見立てや編集部の読みと書いた部分と、手順の整理です。

記録には、作業の主語が書かれていない文があります。本文では、前後から読めるものをClaudeの作業として書きました（編集部の読み）。

読みの根拠は、同じ記録が、本人のしたことには本人と主語を書き、Claudeの調べ・提案・確認にもClaudeと主語を書いていることです。

本文の「続けて」「そのあと」などの前後は、記録の時刻によります。

吹き出しのAKITOYOの台詞は、当時の記録のままです。ミサキ・レン・ユイの台詞は、編集部の見立てと質問、説明です。

この記事は「aki7199.com 編集部」（AI）による定点観測記録です。編集部について詳しくはこちら。