小金井にあるWEB制作会社の備忘録

生成AIの利用で多くの事が実現できるようになってきました。弊社でも部分的に利用していることがあるのですが、中でもコンテンツ生成（運営サイトでの特集記事作成）の部分での利用に興味を持たれたことがあったので弊社なりの利用方法をメモ。 ChatGPTを使用したコンテンツ生成方法 ChatGPTは、対話形式でAIが人間の質問に回答する生成系AIのひとつ。アカウントを作成すると無料で利用（一部制限有）できるため、2022年11月にリリースされて以降、多くの方に利用されているサービスです。今回はこちらを利用したコンテンツ生成の流れを紹介していきます。 テーマの決定 まずは、テーマの決定です。書きたい事柄が決まっている場合は良いのですが、そうでない場合はいくつかのアイデアを出してもらい、その中から選択しています。 ○○がコンテンツSEOを行う場合に関心の強いコンテンツを列挙してください ○○の特集記事のテーマを探しています。日本人になじみのあるものをいくつか考えてください キーワードの選定 上記のアイデアを基にテーマが決定したら、次はテーマに即したキーワードを選定していきます。ターゲットや目的を具体的に指定する方がより効果的に思えます。 初心者に向けて「○○」に関しての記事を作成したと考えています。コンテンツマーケターとして検索ボリュームが多く、難易度は低いキーワードをいくつか提案してください ○○になるための通信講座の募集記事を作成したいと考えています。コンテンツマーケターとして検索ボリュームが多く、難易度は低いキーワードをいくつか提案してください タイトルの決定 上記キーワードを基に、記事タイトルを決定します。選択肢を増やしたいので具体的に数字を入れて指示をします。 上記キーワードを考慮したタイトル案を20案考えてください 気に入ったものがない場合は更に20点追加で提案してもらい、納得のいくまで行います。 記事の構成を決定 タイトルを選定したら、次に記事の構成を提案してもらいます。 ブログライターとして「○○」というタイトルで記事を作成する場合の構成を考えてください 構成案を確認し、満足がいかない場合は方向性を具体的に指示したり、入れたい内容を追加で指示したりして納得のいくまで行います。 ○○に関心をもってもらえる内容で考えてください 「○○」に関する内容を追加して考えてください 修正を行う中で、当初の目的や流れからずれてきたと感じた時は、追加で修正指示を出すのではなく、ずれる直前の指示内容を書き換えて、スレッドの流れを変える方がうまくいくように思います。直前の指示をキャンセルするのは説明が大変です。 記事の作成 構成が決まったら、実際の記事を作成します。具体的に数字を記載することで希望のボリュームに合わせた記事を作成してもらえます。 ブログライターとして上記の構成にならって、2000文字程度で文章を作成してください 記事を確認し、満足がいかない場合は気になる部分を具体的に指示していきます。 ○○　の文章を　△△　に関する内容の文章に差し替えてください ○○　の文章のボリュームを増やしてください 修正のキーワードとなる部分はスペースを設けたり括弧でくくるとAIも判別しやすいように思います。 最終確認 最後は文章に間違いがないか、言い方や書き方が統一されているか等の確認を行います。一般論的な内容であれば問題ない部分も多いですが、固有名詞や具体的な数字、技術等が記載されている場合には注意が必要。誤情報の可能性もありますので検索エンジンを使用して事実確認を行っていきます。 まとめ：生成AIで文章作成を効率化しよう 内容にオリジナリティを求めるのは難しいようですが、効率よく文章は作成できるので雛形作りには十分役に立つように思います。 尚、毎回、新規にスレッドを作成するよりも、用途（ライティング、マーケティング、翻訳、コーディング等）に合わせたスレッドを用意して、同じスレッドを使い続ける方が、過去の指示を引き継げることもあって精度が上がるようです。この辺りは同じ人に依頼した方が、意図をくみ取りやすくなってくれるのと似ています。

ホームページの話をしていると「SNSやブログ、各種情報サイトへの掲載で集客できているからホームページは必要ない。」と言われることがあります。確かに、SNSやブログは低コストで始められ、手軽に情報発信ができる便利なツールですが、それでもホームページを持たれる企業は多いです。そこで、SNSやブログを活用していてもホームページを持つ理由を考えてみます。 意外と見落としがちな3つの重要ポイント 訪問者の信頼は『公式ホームページ』で決まる SNSやブログはリアルタイムの情報発信に優れていますが、それだけでは会社の公式情報を十分に伝えきれません。例えば、あなたの会社のサービスや商品情報、住所、連絡先がSNSの投稿やブログ記事の中に埋もれてしまっていると、訪問者は簡単に探すことができませんし、新規訪問者にとっては、そのアカウントが「正式なものなのか？」という疑念を抱かれる心配もあります。 利用者の多くは情報を調べる際に、ホームページを確認しますし、「この会社は信頼できるのか？」の判断基準のひとつが公式ホームページの有無です。公式サイトを持つことで、会社の信頼感を一段と高めることができます。 プラットフォームの変化に依存してしまう SNSやブログは便利ですが、その利用はプラットフォームに依存していることを忘れてはいけません。仕様や利用価格の変更、突然のサービスの終了など、会社の状況とは全く関係のないところで情報発信ができなくなってしまうリスクもあります。 ホームページはSNSやブログ、各種サービスと異なり、外部の都合に左右されることはありません。ホームページを「会社の資産」として持つことで、安心して情報発信ができるようになります。 集客の幅が制限されてしまう SNSは、既存のフォロワーやアカウントを持つ人との接点を強化するには効果的ですが、サービスに登録していない人はコンテンツを見ることができないケースもあります。 一方で、ホームページを見るのにアカウントは不要です。インターネットの使える環境であれば、誰でも見ることができますので、SNSを利用しない層へのアプローチも可能になります。 まとめ：SNSやブログとホームページの両立が鍵 SNSやブログだけでも十分便利ですが、それだけに依存するのはリスクが大きい時代です。ホームページを情報発信の「拠点」として持ちながら、SNSやブログと連携させて運用することが安心して運営を行える方法のように思えます。

紹介や指名でご依頼いただく場合を除き、商談や提案時に「御社の強みは何ですか？」と聞かれることがあります。ホームページ制作時にも「ファーストビューにはキャッチコピーを記載しましょう」と気軽に提案していましたが、改めて考えるとサービスの機能や専門用語を説明するよりも難しいことに気が付いたので考え方をメモ。 自社の強みを説明する「USP（Unique Selling Proposition）」 USPとは「Unique Selling Proposition（ユニーク・セリング・プロポジション）」の頭文字を取ったもので自社の商品やサービスの持つ、独自の強みのこと。マーケティングにおいては差別化戦略の土台を支える考え方の一つとして、様々な会社で利用されています。 効果的なUSPの見つけ方 USPでは、独自性や顧客への具体的な価値提供に焦点をあてて、明確なメッセージを構築することが重要です。下記の手順に沿って作成を進めると、魅力的で効果的なUSPを導き出すことができます。 ターゲット顧客を明確にする 商品やサービスが誰に向けて提供されるものかを明確にします。ターゲット顧客のニーズ、関心、課題、悩みなどを把握し、彼らが重視するポイントを見極めます。 競合分析を行い、自社の独自価値を定義する 競合他社の商品やサービスの特徴を調査、自社と比較し、どのように差別化できるかを検討します。ここでは、自分たちが「何を提供するのか」よりも「他社との違い」に焦点を当てることが重要です。 比較のポイント .blogpage .wrap .post_main table tr td:first-of-type { width: 25%; } 比較項目説明具体例数量選択肢の数や数量プランの種類、品揃え、大盛価格基本料金や大幅な割引まとめ買い、初回割引利便性面倒に感じることへの対応出張査定、出張買い取り品質商品の品質希少素材、生産地、受賞歴時間サービスの提供スピード翌日配送、見積り30秒リスクリバーサル商品購入に感じるリスクの削減返金保証、修理保証、成果保証特典プレゼントの提供無料券、ポイントカード シンプルで記憶に残るメッセージを作成する USPは短く、シンプルなメッセージで表現することが効果的。「顧客の課題解決」や「自社の独自の強み」をベースに、記憶に残るキャッチフレーズやスローガンとして作り、そのメッセージを読んだとき、「このサービスは自分に合っている」と感じられるように意識します。 USPをテストしてフィードバックを得る 作成したUSPが効果的に機能するか、ターゲット顧客からのフィードバックや反応を確認。もし反響が弱いと感じる場合は、さらに独自性を強調する表現や、顧客が感じる利点を見直して再調整します。 自社の「普通」は他社の「特別」 スマートフォン専用のホームページが珍しかった頃、「弊社にスマートフォン用のホームページをご依頼いただくと、ホームページから直接電話ができるようになります」と言われて契約したという話を聞き、衝撃を受けたことがあります。 電話番号のリンクはどのホームページでも既に実装されていたことですが、当たり前過ぎて誰もが強みと思わなかった（見落としていた）ことに、価値を再発見された良い例だと思います。 内側（業界や会社の中）にいると「普通」に思えることが、他の方には「特別」であることは意外とあるのかもしれません。

ホームページのリニューアル（改修）をお願いされる際に、現在ご利用中のサーバーを一緒に見直される方もいらっしゃいます。新規に使用されるサーバー（引っ越し先のサーバー）の登録時にドメインの登録を勧められて、一緒に新規で取得される方もいらっしゃますが、改修の際にサイト名（サービス）を変更する、合併等で社名が変わる、といった特殊な例を除いては、独自ドメインの新規取得は不要です。この機会にドメインとサーバーの関係を改めてメモ。 「ドメイン」と「サーバー」について 「ドメイン」と「サーバー」はホームページ制作や専用のメールアドレスを取得を作るうえで欠かせない要素。ホームページの制作時に一緒に説明をされることが多いので、同時契約が必要なものに思われる方も多いと思いますが、別会社が管理しており、それぞれに専用の管理ツールがあります。また、似たような用語に「IPアドレス」があります。 用語ウェブ上での役割地図上での例えドメインURLやメールアドレスの末尾に使用されるもの例）syu-u.com会社名や店名にあたるもの「表札」のようなものサーバーウェブ上でのデータ保管場所住所にあたるものIPアドレスウェブ上の位置情報のようなもの（数字で表記）サーバーに付与されています。緯度・経度にあたるもの（数字で表記） 事務所や店舗を移転される際に会社名や店舗名を変更される方は少ないと思いますが、同じようにサーバーを引っ越す際もドメインの新規取得（変更）は不要です。 サーバー移転の仕組み サーバーの引っ越しは、実際の引っ越しと異なり表面上には見えにくい裏側の処理になります。ドメインとサーバーは「DNS（ドメインネームサーバー）」というもので紐づけされていて、この設定を基にドメインへのアクセスを指定されたサーバーに繋げるようにしています。 そのため、サーバーの引越しは、必要な情報を移し替えた後で、ドメインの管理ツールからDNSの設定を変更するだけで完了。既存のドメイン（URL、メールアドレス）が変わらないので得意先やサイト会員等に引越しの連絡をする必要もありません。 独自ドメインを保有することは「URLを分かりやすくする」「メールアドレスを社用にする」以外にも、「引っ越しても連絡先が変わらない」という点でも便利です。 サーバー移転（DNS設定変更）の注意点 サーバーの切り替え操作は単純ですが、ドメインからのアクセスが完全に切り替わるまでに最大で72時間（3日間）程度かかると言われています。 その間は、新旧どちらかのサーバーに繋がる状態となっています。メールの受信がどちらのサーバーで行われても良いよう、両方のメールアカウントを併用して受信していく必要があります。また、マッチングサービスのあるホームページやショッピングサイト等、サイト内で顧客情報を保存する必要のあるサービスも注意が必要です。登録データの不足が起きないよう、常に登録データを同期させるか、IPアドレスでの転送処理等を使用して旧サーバーにアクセスが流れないようにすることが必要となります。

「ワードプレスを使えば好きなように投稿できます」と言われて投稿機能を使ってみたけど思ったような（制作会社に作ってもらったような）デザインはできなかった…。こういったお話を聞く機会があったのでワードプレスの投稿についてメモ。 多目的に使えるが、デザイン特化の機能が用意されているわけでない ワードプレスの投稿機能は自由に投稿できますが、利用者や利用時によって使われ方が変わるため、全てに対応して必要なパーツ（以降ブロック）が用意されているわけではありません。使用しているテーマによって違いはあるものの、業種に特化したテーマでない限りは「見出し、段落、画像、表、リスト」など必要最低限のデザインとブロックが用意されているのみとなるため、思い通りのデザインに仕上げるのはなかなか難しい。初心者の方であればマイクロソフトの「ワード」で作成したようなページになるのではないでしょうか。 思い通りのデザインに近づけるための方法 ワードプレスの投稿画面で希望のデザインにするには様々なテクニックが必要。弊社の考える方法をご紹介します。 デザインカテゴリーの「カラム（横並び）、区切り、スペーサー」を使用する。 難易度 ★☆☆☆☆ デザインカテゴリーにはページの配置に関するブロックが用意されています。これらを利用することで希望する配置に近づけることが可能です。 ブロック要素機能備考カラム（横並び）画像や文章等を横並びの配置にします。各ブロックをカラム内のカラムボックスに追加していく区切り文章の下に罫線を追加します線とドットがあり、色変更が可能スペーサー文章の下に余白を追加します。余白の単位は改行の回数分になるよう「rem」を推奨 「高度な設定」を利用する 各ブロックには「高度な設定」の項目が用意されており、「追加CSSクラス」に記入することで自由にデザインを付与できます。CSSクラスは「テーマに用意されていものから利用する」方法と、「新たに作成する」方法の2通りがあります。 用意されているCSSクラスを利用する 難易度 ★★☆☆☆ ホームページ内の使いたいデザインのCSSを流用します。制作者の方に該当するCSSのリストを用意してもらい、リストの内容に倣って記載します。 新たにCSSクラスを作成する 難易度 ★★★★☆ 新しくデザイン用のCSSクラスを作成します。テーマ本体のCSSを編集すると他のページにも影響が出てくるためウィジェットカテゴリーの「カスタムHTML」ブロックを使用してページ専用のCSSクラスをインライン形式で作成し記載。ホームページで使用されていないデザインを実装できますが、CSSクラスの作成には専門知識が必要となります。 全てHTMLで記載する 難易度 ★★★★★ 既存のブロックを使用せず、「カスタムHTML」ブロックを使用して全てHTMLタグを直書きします。完全に自由なデザインを実装可能ですが、ホームページ制作者と同じ手法になりますのでCSSの知識に加えてHTMLの専門知識が必要となります。 専用のブロックを追加で依頼して作成してもらう 難易度 ★☆☆☆☆ ワードプレスの投稿ブロックは追加が可能です。必要となる項目（構成）が決まっているのであれば、あらかじめ専用のブロックを用意しておくことも可能です。ブロックを制作するための費用は必要となりますが、他のブロックと同様に専門知識がなくても手軽に行えるようになります。 .blogpage .wrap .post_main div > .wp-block-group > * { margin: 0; } .blogpage .wrap .post_main div > .wp-block-group > p:first-of-type { background: #eee; padding: 5px 10px; font-size: 0.8rem; } .blogpage .wrap .post_main div > .wp-block-group > * + p { color: #ffd900; font-weight: bold; }

ホームページの作成時に、ワード（Word）やエクセル（Excel）、パワーポイント（PowerPoint）で資料をいただくことも多いのですが、その中でよくあるのが画像データがファイル内に添付された状態で送られてくること。基本的には再度、画像のみを再送いただくのですが、そんな時に一括で添付された画像データをフォルダに展開して保存できる方法があったのでメモ。 添付された画像を一括で展開・保存する方法 拡張子を「zip」に変更する まずは、画像が添付された状態のファイルを複製し、「名前の変更」から拡張子を「zip」に変更します。この時「拡張子を変更すると、ファイルが使えなくなる可能性があります。変更しますか？」と表示されますが、そのまま「はい」を選択して進みます。 例は「sample.docx」を複製して「sample - コピー.docx」を作成し、「sample - コピー.zip」に変更しています。 拡張子が表示されていない場合はエクスプローラー（フォルダ）上部の「表示」タブを開き「ファイル名拡張子」にチェックを入れます。 Windows10 - ファイルの拡張子を表示/非表示にする zipファイルを解凍 次に、上記で作成したzipファイルをクリックしてファイルを「解凍」します。解凍先はどちらでも大丈夫。解凍先に「ファイル名のフォルダ」が新規に作成されます。 フォルダを開いて画像を取り出す。 解凍されてできたフォルダを開くと中に複数のフォルダが作成されています。その中から「ファイル変更前のソフト名のフォルダ」（ワードの場合は「word」、エクセルなら「xl」、パワーポイントの場合は「ppt」を開きます。更に中に「media」というフォルダがあるので、こちらを開くと添付されていた画像データが保存されています。 画像が劣化して使用できない時もありますが、ワイヤーフレームや初校を提出する時などで、正式な画像に差し替えるまでの対応としては使えたりします。

ホームページ制作をしていると、競合会社のサービスを参考にして構築を考えたい場合や、依頼元（相談元）の制作環境を確認するために、使用しているサーバーを確認する機会があります。そんな時にURLを入力するだけで使用サーバーを確認できるサービス（サイト）があるのでメモ。 aguse.jp: ウェブ調査 「aguse」を使ったサーバーの確認方法 URLを入力 入力項目に「調べたいサイトのURL」を入力し、「調べる」ボタンをクリック。 結果画面で該当項目を確認 詳細情報の「運営組織」の部分（赤枠部分）にサーバー会社の名前が出てくるので、そちらの会社のサービスを確認する。 余談ですが、怪しいサイトかどうかのチェックにも使えるようなので、気になるサイトがあれば試してみるのも良いかもしれません。 そのリンクちょっと待った！！ページを訪れる前に安全性をチェックできるサイト『aguse.jp』

AWSなどのクラウドサーバーも一般的になってきたので、従来のレンタルサーバー(共有サーバー)は実際のところ、どの程度までの規模であれば有効なのかを再検証。 転送量を調べる 転送量とはサーバーがファイルやメールを送受信したときのデータ量。サーバーを選ぶ時に目安にされがちなのはサーバー容量ですが、これはサーバー内に保管できるファイルサイズのことで、実際のアクセス量は「転送量」で判断する。 転送量は「ファイル・メールのサイズ × アップロード・ダウンロードされた回数」で求められる。 「ユーザーがWEBサイトを閲覧する」ケースの例 1MBのwebサイトのページ(ファイルサイズ)に1000回のアクセスがあった場合は、転送量は以下のようになる。1MB × 1000アクセス ＝ 1,000MB(1GB) 衆のトップページの転送量は約3MB。 1日の転送量が100GBのサーバーだった場合100GB / 日　÷　3MB　＝　33,333アクセス / 日33,333　×　30日　＝　999,990アクセス / 月 およそ月間1,000,000PVまで耐えられる計算になる。 レンタルサーバー (共有サーバー) の比較 衆に依頼のあるクライアント様でよく使われているサーバーで比較(アクセス数は衆のトップページが基準) ロリポップサーバー プラン月額料金サーバー容量転送量アクセス数エコノミー100円10GB40GB / 日400,000PVライト250円 50GB60GB / 日600,000PVスタンダード500円120GB100GB / 日1,000,000PVハイスピード1,000円 200GB100GB / 日1,000,000PV エンタープライズ 2,000円400GB100GB / 日1,000,000PV エックスサーバー プラン月額料金サーバー容量転送量アクセス数X10900円200GB70GB / 日700,000PVX201,800円 300GB90GB / 日900,000PVX303,600円400GB100GB / 日1,000,000PV カゴヤ・ジャパン プラン月額料金サーバー容量転送量アクセス数S11800円100GB120GB / 日1,200,000PVS211,600円 200GB160GB / 日1,600,000PVS312,400円300GB200GB / 日2,000,000PV サクラインターネット プラン月額料金サーバー容量転送量アクセス数ライト131円10GB40GB / 日400,000PVスタンダード524円 100GB80GB / 日800,000PVプレミアム1571円200GB120GB / 日1,200,000PVビジネス2,619円 300GB160GB / 日1,600,000PV ビジネスプロ4,714円500GB200GB / 日2,000,000PV ロリポップ！レンタルサーバーエックスサーバーレンタルサーバーのカゴヤ・ジャパンさくらのレンタルサーバ