こんにちは、リョウです。
先日、自分が運営しているWebサイトの記事をスマホで確認していたところ、ちょっとした表示崩れを見つけました。
記事下に設置していたCTA、つまり「無料相談はこちら」と案内するボタンです。
PCでは特に違和感がなかったのですが、スマホで見ると、ボタンの最後の1文字だけが次の行に折り返されている。
たったそれだけのことなのですが、実際に見るとかなり気になります。
しかもCTAは、読者に次の行動を取ってもらうための大切な場所です。
そこで今回あらためて感じたのが、
Webサイトは、作って終わりではない。
そしてもうひとつ、
AIがある今、Web運営のスピードは昔とはまったく違う。
ということでした。
今回は、実際に起きたスマホ表示のバグを例にしながら、ノマドや一人起業家にとっての「今のWeb運営」について書いてみます。
- 1 PCでは正常なのに、スマホだけボタンがおかしい
- 2 原因は「ボタンの中に、さらに余白を入れていたこと」
- 3 Webサイトは「実機で見る」までがセット
- 4 最新のスマホを持っておくのも、Web運営では意外と大事
- 5 昔は、こういう小さな修正でもデベロッパーに相談していた
- 6 AIがあると、「小さな問題」をその場で解決できる
- 7 AIは「デベロッパー不要」にするものではない
- 8 一人でWeb事業をやる人ほど、この変化は大きい
- 9 AI時代に重要なのは「コードを書く力」だけではない
- 10 AIが強くなっても、最後は「人間の確認」が必要
- 11 ノマドにとってAIは「小さな専門チーム」に近い
- 12 まとめ：Web運営は「確認」と「改善」の繰り返し
PCでは正常なのに、スマホだけボタンがおかしい
今回問題が起きていたのは、記事下に設置したCTAボタンでした。
PCでは普通に表示されているのに、スマホで確認すると、ボタンの文章が微妙に収まりません。
具体的には、
「30分無料相談で方向性を整理する」
という文章の最後の1文字だけが、次の行に落ちてしまっていました。
致命的なバグではありません。
リンクも押せます。
文章も読めます。
でも、なんとなく素人っぽく見えてしまう。
この「なんとなく」が、Webサイトでは意外と大事です。
読者はわざわざ、
「このサイト、ボタンが1文字だけ改行されているな」
とは考えません。
ただ無意識に、
「少し見づらい」
「なんとなく整っていない」
「ちょっと押しづらそう」
と感じる可能性があります。
特にCTAは、申し込みや問い合わせにつながる場所なので、こうした小さな違和感はできるだけ消しておきたいところです。
原因は「ボタンの中に、さらに余白を入れていたこと」
今回の原因は比較的シンプルでした。
WordPressテーマ側ですでにボタンのデザインや余白が設定されているにもかかわらず、その内側にさらにHTMLでpaddingを入れていたんです。
つまり、
テーマ側の余白＋自分で追加した余白
という二重構造になっていました。
PCでは画面が広いので問題にならなくても、スマホになると横幅が限られます。
その結果、文章が入りきらず、最後の1文字だけ折り返されていたわけです。
修正自体は簡単で、余計な装飾を外し、WordPressテーマに標準で用意されている立体的なボタンを使う形に変更しました。
すると、表示も自然になり、以前よりも「押せるボタン」らしいデザインになりました。
Webサイトは「実機で見る」までがセット
今回のことであらためて感じたのが、プレビューだけでは不十分ということです。
WordPressの編集画面で見る。
PCで確認する。
レスポンシブ表示に切り替えて見る。
ここまでやっても、実際のスマホで見ると違っていることがあります。
原因はいろいろあります。
テーマのCSS、ブラウザ、画面サイズ、文字サイズ、ショートコード、プラグインなどが複雑に絡むからです。
だから僕は、Webサイトを運営するうえで、
公開後に実際のスマホで確認すること
はかなり大切だと思っています。
特に確認したいのは、以下のような場所です。
- CTAボタン
- 問い合わせフォーム
- メニュー
- 表
- 画像
- 見出し
- 広告
- 料金表
- 申し込みページ
- 決済までの導線
記事本文が少し崩れるより、申し込みボタンが崩れるほうが影響は大きいです。
なので、全部を完璧に見るというより、
売上や問い合わせにつながる場所を優先して確認する
という考え方でもいいと思います。
最新のスマホを持っておくのも、Web運営では意外と大事
これは少し意外に思われるかもしれませんが、Web運営をしているなら、ある程度新しいスマホを使っておくことも意味があると思っています。
もちろん、毎年買い替える必要はありません。
ただ、自分のサイトを見るユーザーが比較的新しいiPhoneやAndroidを使っているなら、自分も近い環境を持っていたほうが違和感に気づきやすいです。
特にスマホは、
「昔の端末では普通だった表示が、最近の画面サイズでは少し不自然」
ということもあります。
また、iPhoneの場合はSafari特有の見え方もあります。
Web運営者にとってスマホは、単なる連絡手段ではなく、
自分のサイトをチェックするテスト端末
でもあるんですよね。
昔は、こういう小さな修正でもデベロッパーに相談していた
そして今回、一番「時代が変わったな」と感じたのがここです。
以前だったら、こういうスマホ表示の不具合が起きたとき、
「これ、なんで崩れてるんだろう？」
と思っても、自分ではなかなか原因がわかりませんでした。
そこでデベロッパーに、
「スマホだけボタンが変なんですが、見てもらえますか？」
と相談します。
スクリーンショットを送る。
該当ページを送る。
コードを確認してもらう。
返信を待つ。
修正してもらう。
再度こちらで確認する。
場合によっては、さらに修正をお願いする。
ちょっとした表示崩れなのに、半日〜数日かかることもありました。
もちろん、専門的な開発では今でもデベロッパーの力は必要です。
ただ、今はAIがあります。
AIがあると、「小さな問題」をその場で解決できる
今回も、スクリーンショットと該当コードをAIに見せました。
すると、
「このspan内のpaddingが原因になっている可能性が高い」
というところまで、かなり早く絞り込めます。
さらに、
「じゃあSTORK19の標準ボタンを使ったほうがいい？」
と聞けば、それに合わせたコード案も出してもらえます。
つまり、
問題発見 → 原因確認 → 修正案 → 実装
までを、その場で一気に進められるわけです。
これは本当に大きな変化です。
AIは「デベロッパー不要」にするものではない
ここは誤解されやすいところですが、僕はAIがあるからデベロッパーが不要になったとは思っていません。
むしろ、
デベロッパーに頼む必要のない仕事が増えた
という感覚です。
たとえば、
CSSの微調整。
ボタンの表示崩れ。
簡単なHTML。
WordPressのショートコード。
構造化データ。
軽いPHP修正。
フォームの見た目。
こういったものは、AIを使えばかなり自分で対応できます。
一方で、
大規模な機能開発。
サーバー障害。
データベース。
高度なセキュリティ。
複雑な不具合。
こうしたものは、やはり専門家に任せたほうが安全です。
つまりAIによって、
「自分でやる領域」と「専門家に頼む領域」の境界線が変わった
ということだと思います。
一人でWeb事業をやる人ほど、この変化は大きい
ノマド、一人起業家、個人事業主にとって、これはかなり大きな変化です。
なぜなら、Webサイトでは小さな改善が本当にたくさん発生するからです。
「このボタン、もう少し大きくしたい」
「スマホだけ余白を減らしたい」
「問い合わせフォームを少し見やすくしたい」
「記事下にCTAを追加したい」
「料金表を修正したい」
以前なら、そのたびに外注していたことでも、今は自分で対応できます。
すると当然、外注費も減ります。
でも、それ以上に大きいのは、スピードです。
思いついた改善を、その日のうちに試せる。
これはWebマーケティングではかなり強いです。
AI時代に重要なのは「コードを書く力」だけではない
これからのWeb運営では、
「プログラミングができるか」
だけが重要なのではないと思います。
それよりも、
違和感を見つける力
問題を具体的に説明する力
AIに正しく状況を伝える力
修正後に自分で確認する力
このあたりが、かなり重要になってくると思います。
AIは便利ですが、勝手にサイトを見回って、
「ここ、スマホで1文字だけ折り返されていますよ」
と必ず教えてくれるわけではありません。
まず、人間側が気づく必要があります。
今回もそうでした。
スマホで実際にサイトを見たからこそ、バグに気づけました。
AIが強くなっても、最後は「人間の確認」が必要
AIがどれだけ便利になっても、結局最後に必要なのは、
自分の目で確認すること
だと思います。
AIにコードを書いてもらった。
だからOK。
ではありません。
実際にスマホで見る。
ボタンを押す。
リンク先を確認する。
フォームを送ってみる。
ユーザーになったつもりで触る。
ここまでやって、はじめて本当に使える状態になります。
むしろAIで改善スピードが上がったからこそ、確認する回数も増やしやすくなったとも言えます。
ノマドにとってAIは「小さな専門チーム」に近い
海外ノマドとしてオンラインで仕事をしていると、基本的には一人で判断する場面が多くなります。
Web担当者。
SEO担当者。
ライター。
マーケター。
簡単なエンジニア。
時にはカスタマーサポート。
これらを一人で兼任することも珍しくありません。
以前は、それぞれの分野でわからないことが出るたびに、人を探して相談する必要がありました。
今はAIによって、そのハードルがかなり下がっています。
僕自身、AIを使うようになってから、
「わからないから止まる」時間が大幅に減りました。
これはノマドや一人起業家にとって、かなり大きなメリットです。
まとめ：Web運営は「確認」と「改善」の繰り返し
今回のスマホ表示のバグは、本当に小さなものでした。
でも、そこからWeb運営の本質をあらためて感じました。
Webサイトは、作って終わりではありません。
実際に見る。
違和感を見つける。
直す。
また確認する。
この繰り返しです。
そして今は、その改善作業をAIがかなり手伝ってくれます。
昔ならデベロッパーに相談して数日待っていたようなことでも、今ならその場で解決できるケースが増えました。
だからこそ、これから一人でWeb事業をやる人に必要なのは、
すべてを自分でできることではなく、AIを使いながら自分で改善を回せること。
これだと思っています。
ノマドや一人起業という働き方は、AIによって確実にやりやすくなっています。
そしてその差は、派手なところよりも、
「ちょっとした問題を、その場で自分で解決できる」
そんな日々の積み重ねに、一番表れている気がします。
The Remote Digital Hubをもっと見る
購読すると最新の投稿がメールで送信されます。
コメントを残す