ホームページのかかりつけ|自営業者・小さななお店向けWordPressの作成・運営の相談室

ホームページのかかりつけ|自営業者・小さななお店向けWordPressの作成・運営の相談室

WordPressを使ったホームページの運営方法をWebデザイナー歴15年以上の私が惜しげもなく全部公開!

先日、とあるキャンプ場の

予約をしようと思って、

スマホでホームページを見ていました。

 

 

すると、予約カレンダーが

表示されているのですが…

 

 

以下、スマホのスクショです。

 

 

全部「休み」やん!

と言うツッコミは

今回の本質とは関係ないのでスルーで笑

 

(冬季お休みされているキャンプ場です。)

 

 

改めまして、、、

お分かりいただけるだろうか?

 

 

月曜日から木曜日までは見えるのに、

金土日が表示されていない。

 

 

「え?」

と思ってよく見ると、

どうやら右側にはみ出している様子。

 

 

 

これ、実はスマホ版ホームページで

よくあるトラブルです。

 

 

おすすめ関連記事

右矢印ホームページもブログも「スマホ前提」で作るのが大事

 

 

表(テーブル)をそのまま使っていると、

画面幅に収まらず、

右側が見切れてしまうことがあります。

 

 

パソコンでは問題なく見えているので、

作った側は気づきにくいんですよね。

 

 

 

では、見る側としてはどうするか。

 

丸レッドパソコンで開く
丸レッドスマホを横向きにする

 

といった方法で正常に見ることができます。

 

 

ただ、ここが問題で…

 

 

そもそもパソコンを持っていない方も多いですし、
「横向きにすれば見える」ということ自体、

知らない方も意外と多いです。

(縦でロックしている人多いでしょ?)

 

 

つまり、そこで諦めてしまう人もいる

可能性があるということ。

 

 

今回のケースで言えば、
「週末の予約ができないキャンプ場」と

勘違いされてもおかしくありません。

 

 

そんなキャンプ場あるんかwはてなマーク

 

 

 

ちなみに今回の話題になっているキャンプに行った時の記事

花見キャンプに行ってきた結果・・・・!!

 

 

 

これはちょっと怖いですよね。

 

 

だからこそ、この問題は見る側ではなく、

作る側が対策しておくべきです。

 

 

例えばカレンダーや料金表などは、

 

OK横スクロールできるようにする
OKスマホでも収まるレイアウトに調整する

 

といった工夫をしておくのが無難です。

 

 

特に、昔に作ったホームページは要注意。

 

 

当時はスマホ対応が

そこまで重視されていなかったため、
今見ると「表がはみ出ている」という

ケースも珍しくありません。

 

 

 

 

もしホームページに


丸レッド予約カレンダー
丸レッド料金表
丸レッドメニュー一覧

 

などを載せている場合は、

一度スマホでチェックしてみてください。

 

 

スマホでチェックする方法はこちら

右矢印【QR生成】ホームページやアメブロのスマホ表示を確認する方法を解説!

 

 

 

「ちゃんと全部見えているか?」

「はみ出てないのか?」

ここ、意外と盲点です。

 

 

さらに言えば、

スマホの機種によって画面サイズが異なるため、

「私のスマホではOKだけど、

 彼ぴっぴのスマホでははみ出てる」

みたいなことも普通に起きます。

 

 

 

んで、ここで

「そんなん言われても、やり方分からんし・・・!」

っていう人が多いと思います。

 

 

はい。

これはcss(スタイルシート)を使うので

比較的難しいです。

 

 

てことで、

ちょっとしたホームページのお悩みも、

以下でご相談に乗ります。

 

 

右矢印ホームページの更新・管理承ります|やり方が分からず更新が止まっている方へ

 

 

お気軽にお問い合わせください。

 

 

 

キーボード入力って

皆さん得意ですか?

 

 

アメブロユーザーさんだと

文章を書く機会が多いので

キーボード入力が得意な方も

多いかも知れませんね。

 

 

私もパソコン使い慣れている方なので、

ブラインドタッチもできますが、

打ち間違いが多いんですよ。

 

 

これは、

母親DNAを引き継いだ結果、

とんでもない指の太さに

生まれてしまったのが原因。

 

 

 

これに関しては、

今でも母を

恨んでいます笑

 

 

なので、できるだけ

キーボード入力する

頻度を下げたい。

 

 

そこで便利なのが

「ユーザー辞書ツール」

です。

 

 

よく使う文章や決まった言い回し、

住所・メールアドレスなどの情報を

あらかじめ登録。

 

 

以後は

短い単語を入力するだけで

一瞬で呼び出せます。

 

 

隠れた裏技でもないですが、

案外使ってない人が多いみたいなので、

今回は使い方をご紹介!

 

 

あ、ちなみにwindows向けです。

 

 

 

 

windowsパソコンの画面右下に

IMEツールで「A」もしくは「あ」と

表示されているところがありますので

右クリック。

 

 

 

以下のように選択肢が表示されますので

「単語の追加」を選択。

 

 

 

 

 

単語の登録画面が出てきます。

 

「単語」には、

実際に表示したい文章を入力します。

 

 

「よみ」には、

その文章を呼び出すための

短い略語を入力します。

 

 

登録以後、

「よみ」に入力した

文字を入力して変換。

 

 

変換候補として

入力された「単語」を

表示してくれます。

 

 

 

使用例としては、

こんな感じ。

 

 

・「パス」→「GX3dMaBE」

・「ぶろぐ」→「https://ameblo.jp/netshop999/」
・「よろ」→「よろしくお願いいたします。」
・「あり」→「ありがとうございます。」
・「じゅうしょ」→「〒123-4567 東京都○○区○○町1-2-3」
・「メール」→「example@gmail.com」
・「でんわ」→「090-1234-5678」
・「みつもり」→「お見積もりをご希望の方は、お問い合わせフォームよりご連絡ください。」
・「えいぎょう」→「営業時間:10:00〜18:00(不定休)」
・「にゅうきん」→「ご入金確認後、作業を開始いたします。」
・「おことわり」→「現在多忙のため、新規受付を一時停止しております。」

 

 

便利なツールですが、

呼び出したくない時にも

変換候補で表示されるので

それだけはちょっとウザイです笑

 

 

上手く使うと

キーボード入力を

時短できますので、

是非!

ChatGPTというと、

文章を入力して質問するサービス

というイメージを持っている方も多いと思います。

 

 

しかし、ChatGPTには文章だけでなく、

写真やスクリーンショットなどの画像を添付して

質問できる機能もあります。

 

 

例えば、

「この画面から先に進めなくなった!!!」

という場合、文章だけで説明するのは難しいですよね。

 

 

そんなときは、

実際の画面をスクリーンショットで撮影して

ChatGPTに見せることができます。

 

 

今回は、ホームページ作りに絞って、

ChatGPTの画像添付機能の活用方法を

10個ご紹介します。

 

 

 

 ホームページ作りにおける
ChatGPTの画像添付機能活用法10選

 

 

 

1.操作方法が分からない画面を見せる

WordPressやレンタルサーバーを操作していると、

「次にどこを押せばよいのか分からない」

ということがあります。

 

 

そんなときは、

操作中の画面をスクリーンショットで撮影して、

ChatGPTに添付してみましょう。

 

 

「この画面から画像を変更するには、どこを押せばよいですか?」

などと質問すれば、

画像を確認しながら操作方法を説明してもらえます。

 

 

画面の名称や設定項目の名前が分からなくても、

画像を使えば状況を伝えやすくなります。

 

 

 

2.エラー画面の意味を確認する

WordPressやレンタルサーバーで、

突然エラーや警告が表示されることもあります。

 

 

英語のエラーメッセージが表示されると、

それだけで不安になってしまいますよね。

 

 

そのような場合も、

エラー画面をスクリーンショットで撮影して、

ChatGPTに添付できます。

 

 

「これはどのようなエラーですか?」

「最初に何を確認すればよいですか?」

と質問すれば、原因を調べるための手掛かりを得られます。

 

 

ただし、画像だけで原因を特定できない場合もあるため、

必ず解決できるとは限りません。

 

 

 

3.ホームページの改善点を見てもらう

現在公開しているホームページの画面を添付して、

改善点を尋ねることもできます。

 

例えば、

「初めて見た人に何のお店か伝わりますか?」

「お問い合わせボタンは見つけやすいですか?」

「文字が読みにくいところはありませんか?」

といった質問ができます。

 

自分で作ったホームページは、

何度も見ているうちに問題点に気付きにくくなります。

 

第三者の視点を得る方法のひとつとして、

ChatGPTに確認してもらうのもよいでしょう。

 

 

 

4.スマートフォン表示を確認してもらう

パソコンではきれいに表示されていても、

スマートフォンで見ると、

文字や画像が見づらくなっていることがあります。

 

 

スマートフォンで表示した画面を添付すれば、

「文字が小さすぎないか」

「画像が画面からはみ出していないか」

「ボタンが押しにくくなっていないか」

などを相談できます。

 

パソコン版とスマートフォン版の両方を添付して、

違いを確認してもらう方法もあります。

 

 

 

5.チラシやパンフレットをホームページ用に整理する

すでに使用しているチラシやパンフレットを撮影して、

ChatGPTに添付する方法もあります。

 

 

例えば、

「このチラシの内容を、ホームページのサービス紹介文にしてください」

と依頼できます。

 

ほかにも、

丸レッド料金表

丸レッド商品メニュー

丸レッド会社案内

丸レッド名刺

丸レッド店内に掲示している案内

などをホームページ用に整理することができます。

 

 

掲載したい情報は揃っているものの、

ホームページ用の文章を一から考えるのが難しい方に

便利な使い方です。

 

 

 

6.手書きの構成案をホームページの形にする

ホームページの完成イメージを

言葉だけで説明するのは難しいものです。

 

 

そんなときは、

紙に大まかなレイアウトを書いて

撮影した画像を添付してみましょう。

 

 

例えば、

丸レッド「上にロゴとメニューを置く」

丸レッド「その下に大きな写真を表示する」

丸レッド「次にサービス内容を紹介する」

という簡単な手書きでも構いません。

 

その画像をもとに、

必要な項目やページ構成を

整理してもらうことができます。

 

 

 

7.ホームページに使う写真を選んでもらう

ホームページに使いたい写真が複数ある場合は、

候補を添付して相談できます。

 

「トップページには、どの写真が向いていますか?」

「お店の雰囲気が伝わりやすいのはどれですか?」

などと質問してみましょう。

 

写真の明るさや構図だけでなく、

横長に切り取りやすいか、

文字を重ねるための余白があるかなど、

ホームページでの使いやすさを確認してもらえます。

 

 

 

8.写真に合った文章を考えてもらう

商品や店舗の写真を添付して、

その写真に合った文章を考えてもらうこともできます。

 

例えば、

丸レッド商品紹介文

丸レッド写真の下に掲載する説明文

丸レッドバナーに入れる短い言葉

丸レッドブログやSNSの投稿文

丸レッド画像の代替テキスト案

などです。

 

ただし、写真を見ただけでは、

商品の価格、材質、効果などまでは正確に分かりません。

 

間違った情報が入らないように、

商品の詳細は文章でも伝えるようにしましょう。

 

 

 

9.既存の画像を修正してもらう

 

添付した画像をもとに、

画像の修正を依頼することもできます。

 

例えば、

丸レッド背景を変更する

丸レッド不要な物を取り除く

丸レッド横長の画像に作り直す

丸レッド文字を入れるための余白を作る

丸レッド全体の色合いを変更する

といった使い方があります。

 

ただし、商品写真を大きく加工すると、

実物とは異なる印象を与えてしまう可能性があります。

 

実際の商品や店舗を紹介する画像は、

誤解を招かない範囲で加工しましょう。

 

 

 

10.参考画像からオリジナル画像を作ってもらう

「このような雰囲気の画像を作りたい」

という参考画像を添付して、

オリジナル画像の作成を依頼することもできます。

 

文章だけで、

「明るくて親しみやすいイラストにしてください」

と伝えるよりも、

参考画像があった方が希望する雰囲気を伝えやすくなります。

 

ホームページのメイン画像や、

ブログのアイキャッチ画像を作る際にも活用できます。

 

ただし、参考画像とまったく同じものを

複製するための機能ではありません。

 

他社のロゴやキャラクター、

他人が作成した画像などを

そのまま真似するような依頼は避けましょう。

 

 

 

 画像を添付するときの注意点

ChatGPTに画像を添付する前に、

個人情報や重要な情報が

写っていないか確認しましょう。

 

特に管理画面のスクリーンショットには、

丸レッド氏名

丸レッドメールアドレス

丸レッド顧客情報

丸レッドパスワード

丸レッドAPIキー

丸レッド注文情報

などが表示されている場合があります。

 

必要に応じて画像を切り取ったり、

該当部分を隠したりしてから添付してください。

 

また、ChatGPTが画像の内容を

必ず正確に読み取れるとは限りません。

 

 

小さな文字や不鮮明な画像は

誤って認識されることもあるため、

重要な内容は自分でも確認する必要があります。

 

 

 

 画像を使えば
質問のハードルを下げられる

ホームページ作りで困ったとき、

現在の状況を文章だけで説明するのは

意外と難しいものです。

 

しかし、画像を添付すれば、

画面の名称や専門用語が分からなくても

状況を伝えやすくなります。

 

また、操作方法を質問するだけでなく、

ホームページの改善、写真選び、文章作成、

画像の編集や作成にも活用できます。

 

「どう質問すればよいか分からない」

という場合は、

まず現在の画面や参考にしたい画像を添付して、

「この画像について相談したいです」

と伝えるところから始めてみてはいかがでしょうか。

 

 

 まとめ

今回は、

ホームページ作りに役立つ!

ChatGPTの画像添付機能活用法10選

というテーマでお送りしました。

 

 

今回は、それぞれのChatGPTの使い方は

サクッと済ませていますが、

今後、詳細の解説を記事にしていきたいと思いますので、

気になる方はお楽しみに♪