ブログのUI改善、PC・モバイル両対応の難しさを実感

この記事には生成AIによって作られた文章が含まれています。その点を了承のうえでご覧ください。

---

私事ブログ変換、前からずっと気になっていた部分があって、ようやく重い腰を上げて手を入れてみました。具体的には以下の内容です。

コピーボタンの横にある「Markdown」ボタンと設定“Markdown形式でコピーを既定にする”の関係
現在選択している文体がパッと見わかりにくい問題
プリセット「さらっと投稿」投稿だと文体の特徴が出にくい問題

いずれも「なんかここ微妙だな」と思いつつ放置していたところを改善したので、個人的にはスッキリしました。

ただ、やってみて改めて感じたのが、PC版とモバイル版の両立の難しさです。PC版で確認してみると「よし、いい感じ」と思えるのに、スマホで見ると崩れている、というのが何度も繰り返されました。逆もしかりで、どちらかを直すともう一方が怪しくなる、という状態が続いてなかなか一筋縄ではいきませんでした。

単純に画面サイズが違うだけならまだシンプルなのですが、そういうわけでもないのが厄介なところで、見た目だけでなく操作感がそのものが違うので、同じ調整が両方に通用しないことも多いです。レスポンシブ対応のあるあるだとは思うのですが、いざ自分でやってみると想像以上に手間がかかりました。

今回はCSSの修正にAIを活用したのですが、こういう細かい調整はAIに丸投げしてもなかなか一発ではうまくいかないな、というのも正直な感想です。意図を伝えてコードを出してもらっても、実際に反映してみると「ちょっと違う」ということが多くて、今回はちょっと妥協しました。

それに、やっているうちに「ここはこうしたい」というこだわりみたいなものが出てきて、それをAIに言語化して伝えるのも意外と難しかったりします。自分の頭の中にあるイメージをうまく説明できないというか、「なんかこう…もう少し余白が欲しい」みたいな感覚的なものはとくに伝えにくいです。スクリーンショットに自分で書き込みをしてそれを入力するとある程度は汲んでくれるのですが、それでも完璧ではないです。

そう考えると、AIに頼りきりにするのではなく、自分でもある程度CSSを読み書きできるようにしておいたほうが結果的に早いのかもしれません。AIはあくまで補助として使いつつ、最終的な微調整は自力でできる状態が理想かな、と思い始めています。CSS、難しいんだよなぁ…。

#ブログ改善 #UI調整 #レスポンシブデザイン #Web制作 #モバイル対応 #デザイン #AI活用