東京都小金井市にあるWEB制作会社の備忘録

ホワイトペーパーのダウンロードを実装した際に、数が増え、単体で何回もフォームの入力操作を行ってもらうのも不便なので、複数のファイルを同時にダウンロードできるように実装した方法をメモ。 HTML <form action="download.php" method="post"> <input type="hidden" name="download__token" value="xxxxxxxxxx"> <dl> <dt>メールアドレス</dt> <dd><input type="text" name="email" placeholder="例）mail@example.com"></dd> <dt>希望ファイル</dt> <dd><?php FormCheckboxary($dlfiles, 'doc', $dt['doc'], 'label'); ?></dd> </dl> <div class="btnSubmit"><input type="submit" name="download" value="選択ファイルを圧縮してダウンロード"></div> </form> download.php(PHP) $dlfiles = array( 1=> array('label'=> '○○○○', 'name'=>'○○○○.pdf'), array('label'=> '△△△△', 'name'=>'△△△△.xlsx'), array('label'=> '□□□□', 'name'=>'□□□□.xlsx') ); if(!empty($_POST['download'])){ // フォームの取得 foreach($_POST as $key => $value){ if(!is_array($_POST[$key])){ $dt[$key] = $value; }else{ foreach($_POST[$key] as $innerkey => $value){ $dt[$key][$innerkey] = $value; } } } // エラー処理省略 // 圧縮対象のフォルダ $sourceDir = '../dlfiles/'; // ファイルが保存されているフォルダ $zipFileName = 'compressed_documents.zip'; // ZIPファイル名 $zipFilePath = __DIR__ .'/'.$zipFileName; // ZIPオブジェクトの作成 $zip = new ZipArchive(); if ($zip->open($zipFilePath, ZipArchive::CREATE | ZipArchive::OVERWRITE) !== true) { die('ZIPファイルを作成できませんでした。'); } // 指定フォルダ内の対象ファイルを取得 foreach($dt['doc'] as $val){ $filePath = $sourceDir.$dlfiles[$val]['name']; if(is_file($filePath)) { $zip->addFile($filePath, basename($filePath)); } } $zip->close(); // ZIPをダウンロードさせる header('Content-Type: application/zip'); header('Content-Disposition: attachment; filename="'.$zipFileName.'"'); header('Content-Length: '.filesize($zipFilePath)); readfile($zipFilePath); // 一時ZIPファイルを削除 unlink($zipFilePath); exit; } function FormCheckboxary($array, $name, $no, $id){ echo('<ul>'); foreach($array as $key => $value){ $str=explode("<>", $no); if(in_array($key, $str)){ echo('<li><input type="checkbox" name="'.$name.'[]" value="'.$key.'" checked="checked" id="checkbox'.$name.$key.'"><label for="checkbox'.$name.$key.'">'.$value[$id].'</label></li>'); }else{ echo('<li><input type="checkbox" name="'.$name.'[]" value="'.$key.'" id="checkbox'.$name.$key.'"><label for="checkbox'.$name.$key.'">'.$value[$id].'</label></li>'); } } echo("</ul>"); return; } 対象ファイルのリストを連想配列で作成し、チェックボックスで選択したもののみをZIP形式でダウンロードできるようにしています。

「ホームページを作りたいけれど、何をどう伝えたらいいかわからない…」そんな不安を抱えながら、制作会社へ相談を考えている方も多いのではないでしょうか。ホームページ制作は、依頼主と制作会社が一緒にゴールを目指す“共同作業”です。そのため、「伝えてほしいこと」や「事前に考えておいてほしいこと」がいくつかあります。これらを押さえておくことで、打ち合わせもスムーズになり、理想のホームページに一歩近づけます。この記事では、弊社の事例を参考にして制作会社が「最初に聞きたい5つのこと」をわかりやすくご紹介します。これから依頼を考えている方は、ぜひ参考にしてください。 ホームページの目的とターゲット まず最初に確認しておきたいのが、「何のためにホームページを作るのか？」という“目的”と、「誰に向けて発信するのか？」という“ターゲット”です。 制作目的の例 新規のお客様を増やしたい（集客目的） 会社や店舗の信頼性を高めたい（ブランディング） 採用活動のために情報を発信したい（求人目的） 既存顧客への情報提供をしやすくしたい（サポート目的） あわせて「どんな人に見てほしいのか」も考えておきましょう。たとえば30代の働く女性、近隣地域の飲食店経営者、WEBに不慣れな高齢者など、ターゲットが明確になると、デザイン・文字の大きさ・使いやすさまで最適化できます。 掲載したい主な情報・実装したい機能 基本的にはサイトの目的に合わせて、どのような構成が最適なのかは制作会社で調査を行い、ご提案しますので、すべて決まっていなくても大丈夫です。 しかしながら、「この情報は必ず載せたい」「こういう機能（例：予約フォーム、カレンダー、ブログなど）がほしい」といった明確なご希望がある場合は、ぜひ最初の段階でお知らせください。重要な情報を漏れなく盛り込むためにも、制作初期での共有がとても有効です。 また、既存サイトのリニューアル（改修）をご希望の場合は、「今のサイトで満足していない点」や「改善したいところ」もあわせて教えていただけると、より的確な改善提案が可能になります。 デザインのイメージや参考例 「イメージ通りのホームページにしたい」と思っていても、頭の中にある“ふんわりした印象”を言葉だけで伝えるのはなかなか難しいものです。 基本的に制作会社では、サイトの目的やターゲットに合わせて、全体のトーンや構成、デザインテーマをご提案しますので、「完全おまかせ」でもまったく問題ありません。 ただし、以下のような決まっている要素がある場合は、事前に共有していただけると、より理想に近い仕上がりにできます。 コーポレートカラーやブランドルール 社内ですでに決定している「こういう雰囲気にしたい」という希望 参考にしたいサイト例（2〜3サイトほど） たとえば「このサイトの色使いが好き」「レイアウトが見やすい」といった具体例を出していただくと、イメージ共有がしやすくなります。また、「シンプル・スタイリッシュ・親しみやすい」「女性向け・高級感・信頼感重視」など、キーワードベースでのご希望でも大丈夫です。 すでに用意している素材（ロゴ・写真・文章・ドメインなど） 制作の準備段階で、すでに用意されている素材があれば、制作の進行や見積もりがスムーズになります。まずは「何があるか・何が用意可能か」を共有いただきたいです。 素材例 ロゴデータ（ai、psd、png形式など） 写真素材（商品、店舗、スタッフなど） 既存の文章やパンフレットの原稿 これまで使っていたホームページやSNSの情報 ドメインの取得有無 サーバー契約の有無・契約中の会社名 中でもドメインとサーバーに関しては重要な基盤です。すでに取得・契約している場合は、その情報を共有していただけると、移行や設定がスムーズに行えます。 「ほとんど何もない…」という場合でもご安心ください。文章のライティングや写真・動画の撮影から、ドメインとサーバーの取得代行まで必要に応じてサポートが可能です。 ご予算と公開希望時期（納期） 最後に、「予算」と「公開時期」についても、できる範囲で伝えていただくことをおすすめします。ホームページ制作は、内容・ページ数・機能の有無などによって費用や納期が大きく変わります。 「なるべく安く抑えたい」「〇月中に公開したい」「イベントまでに間に合わせたい」などの希望がある場合は、遠慮なく伝えましょう。制作会社としても、それに合わせた提案やスケジュール調整がしやすくなります。 また、見積もり時点で無理のない範囲をすり合わせておくと、後からのトラブルや誤解も防げます。 ご予算目安弊社で出来ること期間目安10万円以下ランディングページ（1ページ構成のもの）を画像コーディングで行います。パソコン、スマートフォンの切り替え、メールフォームの設置等は難しいです1か月程度～50万円一般的なランディングページまたは、5ページ程度で構成された簡易的なホームページ2か月程度～100万円10ページ程度の一般的なホームページ3か月程度100万円以上10ページ以上の中規模程度のホームページご予算に応じて追加機能の開発や、各種ポータル系のサービスサイトの作成も可能ご相談 まとめ：5つを押さえて、理想のホームページをスムーズに 今回ご紹介した「制作会社が聞きたい5つのこと」はこちら ホームページの目的とターゲット 掲載したい主な情報 すでに用意している素材（ロゴ・写真・文章など） デザインのイメージや参考例 ご予算と公開希望時期（納期） これらをあらかじめ考えておくだけで、打ち合わせや見積もりがぐっとスムーズになり、完成後の満足度も高くなります。 とはいえ、「全部が決まっていないと依頼できない…」というわけではありません。不安なことや迷っている点は、ぜひ制作会社と一緒に相談しながら決めていきましょう。

ホームページやブログを運営していて「思ったよりアクセスが少ないな」「どんな人が見ているんだろう？」と感じたことはありませんか？そんなときに役立つのが「アクセス解析」。アクセス解析とは、あなたのホームページにどれくらい人が訪れ、どのページをどんな順番で見ているのかなどを“数値”で把握する仕組み。特に初心者の方は、ホームページを作っただけで満足してしまうことも少なくありません。しかし、本当に大切なのは「作った後の運用」です。アクセス解析をすることで、感覚に頼らず、数字で成果を確認し、改善につなげることができます。この記事では、弊社でも、Webサイトの改善提案や成果検証の際には活用している無料のアクセス解析ツール「Googleアナリティクス」について、初心者に最初に“やってもらいたいこと”を解説します。 Googleアナリティクスで「やってもらいたいこと」ベスト5 ここでは初心者の方に使ってもらいたい、Googleアナリティクスの主要な機能を5つに絞ってご紹介します。 スマホ？パソコン？アクセスしたデバイス（環境）を知る 「レポート→ユーザー→テクノロジー→ユーザー環境の詳細」からユーザーが「どの端末」「どのブラウザ」で見ているかを確認できます。 最近では、スマートフォンからのアクセスが過半数を占めることも珍しくありません。たとえばスマホからのアクセスが8割以上なのに、スマホ対応が不十分で読みづらいレイアウトだったら、ユーザーは離脱してしまいます。 このようなデバイス分析をもとに、「どの端末（ブラウザ）に対して最適化を行うのか」の判断がしやすくなります。 どこから訪問されたか（流入経路）を知る 「レポート→ライフサイクル→集客→ユーザー獲得（トラフィック獲得）」から訪問者が「どこから来たのか」も把握できます。 チャンネル名説明Organic Search検索エンジン（Google/Yahoo!など）からの自然検索Direct ブックマークや直接URLを打ち込んでの訪問Referral外部サイトからのリンクOrganic SocialSNS（Instagram、Xなど）からの流入 チャンネルを「参照元／メディア」に切り替えることで具体的なリンク元を知ることも可能。流入経路を知ることで、「集客に強い媒体」や「改善が必要なチャネル」が見えてきますので、広告出稿を考える際にもどういったところに注力すべきかの判断がしやすくなります。 アクセス数から人気ページやユーザー行動を知る 「レポート→ライフサイクル→エンゲージメント→ページとスクリーン」から自分のホームページが「何回見られているか（表示回数）」といったことから、どのページが多く読まれているか（人気ページ）や、訪問者が「どのページから来て、どこで離脱しているか」「ページごとの滞在時間」など、サイト内での行動がわかります。 たとえば、「よく読まれている記事にはどんな特徴があるのか」「多くの人が離脱しているのはなぜか」といったヒントが得られ、改善や強化の方針を立てる際に非常に役立ちます。 お問い合わせ（コンバージョン）に関与したページの経路を知る 「探索→経路データ探索」から終点のページを指定することで「お問い合わせページに至る前にどの情報ページが見られていたのか」「どの導線が効果的だったのか」などを視覚的に把握できます。 たとえば、「サービス紹介ページ → 実績紹介 → お問い合わせ」といった流れが多ければ、実績紹介ページがコンバージョンに大きく貢献していることが分かります。 弊社でも実際に、経路探索を活用することで「思わぬページが問い合わせに貢献していた」と気づき、導線の見直しに役立てています。 どんなキーワードで検索されたかを知る GoogleアナリティクスとGoogle Search Consoleを連携させると、「レポート→Search Console→クエリ」から、「どんな検索キーワードで自社サイトにアクセスされたか」を確認することも可能です。 自社では施策しているキーワードの効果を確認できたり、気がついていなかった潜在的なキーワードを発見できたりと、今後の検索流入を増やしたい場合のヒントにもなり、SEO対策にも直結します。 まとめ：数値から“気づき”を得て、改善につなげよう Googleアナリティクスは、自社サイトの現在地を知る“地図”のような存在です。アクセス数、人気ページ、訪問者の動きなど、数字に基づいた分析を行うことで、感覚に頼らず、具体的な改善アクションにつなげることができます。 まずは毎週、あるいは月に一度でもいいので、「何人来てるかな？」「どのページが読まれてるかな？」とGoogleアナリティクスを開いてみてください。数字を眺める習慣がつけば、次第に「ここを改善してみようかな」と考えられるようになります。あなたのホームページの改善の第一歩として、ぜひアクセス解析に触れてみてください！

ホームページへ動画を組み込む際に、動画が設置されているところまでスクロールして、表示された時に動画を再生したいとの要望を受けて実装した方法をメモ。 HTML <div class="video_wrap"> <video playsinline controls muted id="myvideo"> <source src="○○○○.mp4" type="video/mp4"> </video> </div> jQuery $(window).scroll(function(){ var offsetTop = $(window).scrollTop(); var sH = window.innerHeight * 7 / 10; if($('.video_wrap').length){ if(offsetTop > $('.video_wrap').offset().top - sH){ $('#myvideo').get(0).play(); }else{ $('#myvideo').get(0).pause(); $('#myvideo').get(0).currentTime = 0; } } }); トリガーの位置は「sH」の値を変えることで調整可能。 動画を音声有りにすると、ブラウザ制限により自動再生ができなくなるため、必ず「消音（muted）」を付与する必要があります

ホームページを作るのに欠かせないのが「ドメイン」と「サーバー」。中でもドメインはブランドの認知度やSEOを考慮する上で欠かせない重要な要素の一つで「独自ドメイン」「共有ドメイン」「サブドメイン」と呼ばれる種類があり、それぞれ特徴や用途が異なります。本記事では、これらの違いを初心者向けにわかりやすく解説していきます。 ドメインとは？基本の仕組み ドメインとは、インターネット上での「表札（会社名、店名）」のようなものです。例えば、このサイトのURLは「https://web.syu-u.com/blog/○○○○」となっていますが、この「syu-u.com」の部分がドメインにあたります。 本来、ホームページのURLは「123.456.1.1」のようなIPアドレス（座標のようなもの）で管理されていますが、数字の羅列では覚えにくいため、わかりやすい文字列（ドメイン名）に置き換えられています。 独自ドメイン・共有ドメイン・サブドメインの3つの種類のドメイン 独自ドメインとは？ 独自ドメインとは、ユーザー自身が独自に取得（作成）して使用するオリジナルのドメインで、日常的な会話やビジネスの文脈で「ドメイン」と言った場合、そのほとんどは独自ドメインを指します。 メリット ブランディングに有利（企業や個人のブランドを確立しやすい） SEOに有利（長期的に検索エンジンの評価を蓄積できる） メールアドレスとして利用可能（例：info@○○○○.com） デメリット 取得・更新に費用がかかる（年間1000円〜5000円） 設定が必要（レンタルサーバーとの接続など） サブドメインとは？ サブドメインは、独自ドメインを親として、その一部を利用して作られるドメインで、親となるドメインの下にある「枝」のようなものです。例えば、「shop.syu-u.com」や「blog.syu-u.com」のように「○○○○.独自ドメイン」の形になります。最も馴染みのあるサブドメインの表記と言えば「www.yahoo.co.jp」ではないでしょか。また、このサイトはサブドメインで運用されています。 メリット 独自ドメインを取得していれば無料で作成可能 同じ独自ドメイン内で複数作れる 異なるコンテンツを整理できる（企業サイトとブログを分けるなど） デメリット SEOの評価が独立することがある（サブドメインごとに検索エンジンの評価が変わる） 管理が複雑になる可能性（複数サイトの運用が必要） 共有ドメインとは？ 共有ドメインは、複数のユーザーが同じドメインを共用して使用する形式のドメインです。各種ホームページの作成サービスや、使用するサーバーに初めから用意されていることが多く、無料で使用できる代わりに、他のユーザーとドメイン部分が同じになります。 表記自体はサブドメインと変わりませんが、ユーザーにはドメインの所有権がないため、サブドメインではなく、共有ドメインと呼ばれています。（所有者にとってはサブドメインになります）例えば、Wixの無料プランでは「wixsite.com」の部分を共有して「○○○○.wixsite.com」、Studioの無料プランでは、「studio.site」の部分を共有して「○○○○.studio.site」となります。 メリット 無料で利用できる 設定不要 デメリット 独自のブランディングができない（ドメインに利用中のサービス名が入る） サービス終了のリスクがある（サービス終了時にドメインもなくなる） まとめ：ホームページの目的に応じて、適切なドメインを選びましょう！ 種類こんな人におすすめ独自ドメイン本格的にサイト運営したい人サブドメインすでに独自ドメインがあり、用途別にサイトを分けたい人共有ドメイン無料で手軽に試したい人 最終的にどの方法を選ぶかは、目的や運営方法、予算などによって決まります。お試しでホームページを立ち上げたい場合は「共有ドメイン」、長期的に安定した運営やブランドの確立を目指す場合は「独自ドメイン（サブドメイン）」を選ぶとよいでしょう。それぞれにメリットとデメリットがありますので、自身の目的に合った方法を選択することが重要です。

「これからホームページを作ろうと考えているが、何を基準に作ればいいかわからない…」「今あるホームページをリニューアルしたいけれど、どこを改善すべきかわからない…」このようなお悩みをお持ちの企業の方も多いのではないでしょうか？そこで今回は、ホームページ診断でよくチェックされる6つの重要なポイントを、弊社なりに解説します。 6つの診断ポイント ユーザーにとって分かりやすい設計になっているか 診断基準 サイトの目的がファーストインプレッションで伝わる メニューがわかりやすく、訪問者が迷わず目的のページにたどり着ける フォントの大きさや色使いが統一され、見やすいデザインになっている ボタンやリンクが適切に配置され、次のアクションが起こしやすい 解説 ホームページの「分かりやすさ」＝ ユーザーの満足度です。目的のページが見つからなかったり、操作が直感的でないと、ユーザーはすぐに離脱してしまいます。 特に、問い合わせや購入ボタンの位置は重要です。「どこをクリックすれば良いかわからない」「問い合わせが面倒」と思われると、せっかくのチャンスを逃してしまいます。 スマホ対応（モバイルフレンドリー）になっているか 診断基準 スマホで見たときに適切な文字サイズ・レイアウトになっている タップしやすいボタンやメニュー設計になっている 解説 現在、インターネット利用の約7割がスマホからと言われています。スマホ対応していないサイトは、それだけで訪問者の離脱率が高くなります。 また、Googleはモバイルファーストインデックス（MFI）を採用しており、スマホ対応していないサイトはSEO評価が下がる可能性があります。 ホームページの表示速度は速いか 診断基準 全てのページが3秒以内に表示されているか 解説 サイトが表示されるのに3秒以上かかる場合は訪問者の50%以上が離脱すると言われています。特に、スマホユーザーは回線環境が不安定な場合があるため、できるだけ軽量化することが重要です。 SEO（検索エンジン対策）ができているか 診断基準 タイトルタグやメタディスクリプションがページ毎に適切に設定されている 見出しタグ（h1, h2, h3）を適切に使用している パンくずリストが設置されている 解説 検索エンジン（Googleなど）に評価されるためには、SEOへの対策が不可欠です。広告やSNS等で告知を行っていない場合、ホームページのアクセスの大半は検索エンジン経由と言われており、SEOの最適化は集客に直結します。 特に、適切なキーワード選定と内部リンクの整理は基本中の基本。検索エンジンがページ内容を正しく認識できるように、適切なタグの設定が重要です。 ユーザーが安心して利用できるよう対策がされているか 診断基準 SSL（https化）が設定されている プライバシーポリシー（個人情報に関しての記載）の記載がある WordPressを使用している場合は、本体やプラグインを最新バージョンに更新している 解説 ホームページのセキュリティが甘いと、ハッキングや情報漏洩のリスクがあります。特に、SSL化（https対応）していないサイトは、Googleの警告が表示され、ほとんどの人が離脱をしてしまう可能性があります。 また、WordPressを利用している場合は、古いプラグインが脆弱性の原因となることがあるため、定期的な更新が必要です。 お問い合わせフォームが使いやすいか 診断基準 入力項目は最低限にし、ストレスなく送信できるか 必須項目やエラー表示がわかりやすいか 自動入力や入力例等のサポート機能が付与されているか 解説 ホームページの最終的な目的が「お問い合わせを増やすこと」である場合、お問い合わせフォームの設計が重要になります。フォームの使い勝手が悪いと、ユーザーが途中で離脱し、貴重な機会を逃してしまうことになります。住所の自動入力や半角・全角の切り替えなど簡略化できる部分は対応することが必要です。 補足：定期更新できるコンテンツ（新着情報・コラム）の有無 解説 新着情報やコラムは、ホームページの信頼性や集客力を高める有効な手段ですが、更新が長期間止まってしまうと、かえって「この会社は活動していないのでは？」という印象を与える可能性があります。定期的に更新できるかどうかを考慮して設置することが重要です。 まとめ：良いホームページは診断基準を満たしているかが鍵！ 良いホームページは、訪問者が快適に利用でき、目的を達成しやすいサイトのことです。これらを満たすことで、効果的なホームページ運用が可能になります。ぜひ、自社サイトをチェックし、改善点を見直してみましょう！

ホームページ制作時にパラメータを使用して詳細ページ等を表示する時がありますが、見た目がわかりにくく、スッキリさせたいとの要望でディレクトリ形式に変更した際の実装方法をメモ。 今回は「example.com/products/index.php?category=shoes&id=123」のページを「example.com/products/shoes/123/」に変更します。 .htaccess RewriteEngine on RewriteRule ^(.*)$ index.php [L] ディレクトリ形式に変更したいページと同階層に上記htaccessを設置。（今回の場合「products」内）アクセスを全て「index.php」に集約することで、存在しないディレクトリにアクセスしても「404」エラーが出ない状態にします。 index.php（PHP） $parse_url = parse_url($_SERVER["REQUEST_URI"]); $segments = explode('/', trim($parse_url['path'], '/')); $category= $segments[1]; $id = $segments[2]; if(!empty($category)){ $dt['category'] = preg_replace('/[^a-zA-Z0-9-]/', '', $category); //英数字とハイフンのみを有効化 } if(!empty($id)){ $dt['id'] = preg_replace('/[^0-9]/', '', $id); //数字のみを対象 } //以下パラメータ取得時と同様の処理を記載（省略） 「parse_url」を使用してURLの構成要素を取得したのち、「trim」を使用し文字列の先頭と末尾の「/（スラッシュ）」を取り除く。その後「explode」を使用してディレクトリごとに配列に収納。 配列に挿入した値は、必要な部分のみを変数に入れてパラメータ時と同様の処理を行います。

WordPress（ワードプレス）を導入する際に「投稿機能」を新着情報として利用される企業様が多いのですが、その際によくご依頼をいただくのが「外部リンク機能」の設定。自社で記事を書かない場合は、配布用資料やサイト内ページへの直リンクを好まれるので実装方法をメモ。 functions.php（PHP） //メディア機能との連携処理 function enqueue_mycustomfield_script($hook){ if('post.php' == $hook || 'post-new.php' == $hook){ wp_enqueue_media(); wp_enqueue_script('mypost_custom_script', get_template_directory_uri().'/js/mypost_custom.js', array('jquery'), null, true); } } add_action('admin_enqueue_scripts', 'enqueue_mycustomfield_script'); //カスタムフィールドの設定 function add_mycustomfield_post(){ add_meta_box('mypost_link', '外部リンクURL', 'create_mypost_link', 'post', 'normal'); add_meta_box('mypost_media', 'リンクメディア', 'create_mypost_image', 'post', 'normal'); } add_action('add_meta_boxes', 'add_mycustomfield_post'); function create_mypost_link($post){ $keyname = "mypost_link"; $get_value = get_post_meta($post->ID, $keyname, true ); if(!empty($get_value)){ echo('<input type="text" name="'.$keyname.'" value="'.$get_value.'">'); }else{ echo('<input type="text" name="'.$keyname.'">'); } wp_nonce_field('action-'.$keyname, 'nonce-'.$keyname); } function create_mypost_image($post){ $keyname = 'mypost_image'; $mypost_image = get_post_meta($post->ID, $keyname, true); if($mypost_image){ echo('<img src="'.esc_url($mypost_image).'" id="thmb_mypost_image">'); }else{ echo('<img src="" style="display: none;" id="thmb_mypost_image">'); } echo('<input type="hidden" name="'.$keyname.'" id="mypost_image" value="'.esc_attr($mypost_image).'" readonly="readonly"> <button type="button" class="button mypost_image_upload_button">メディアを選択</button> <button type="button" class="button mypost_image_delete_button">削除</button>'); wp_nonce_field('action-'.$keyname, 'nonce-'.$keyname); } //入力内容の保存処理 function save_custom_field_contents( $post_id ) { if(isset($_POST['mypost_image'])){ update_post_meta($post_id, 'mypost_image', esc_url($_POST['mypost_image'])); } $custom_fields = array('mypost_link'); foreach( $custom_fields as $d ) { if(isset($_POST['nonce-'.$d])){ if(wp_verify_nonce($_POST['nonce-'.$d], 'action-'.$d)){ if(current_user_can('edit_post', $post_id)){ if(get_post_meta($post_id, $d) == ""){ add_post_meta($post_id, $d, $_POST[$d], true); } elseif($_POST[$d] != get_post_meta($post_id, $d, true)){ update_post_meta($post_id, $d, $_POST[$d]); }elseif($_POST[$d] == ""){ delete_post_meta($post_id, $d, get_post_meta($post_id, $d, true)); } } } } } return $post_id; } add_action('save_post', 'save_custom_field_contents'); mypost_custom.is（jQuery） jQuery(document).ready(function($){ var frame; $('.mypost_image_upload_button').on('click', function(e){ e.preventDefault(); if(frame){ frame.open(); return; } frame = wp.media({ title: '画像を選択', button: { text: '選択' }, multiple: false }); frame.on('select', function(){ var attachment = frame.state().get('selection').first().toJSON(); $('#mypost_image').val(attachment.url); $('#thmb_mypost_image').attr('src', attachment.url).show(); }); frame.open(); }); $('.mypost_image_delete_button').on('click', function(){ $('#mypost_image').val(''); $('#thmb_mypost_image').attr('src', '').hide(); }); }); 「mypost_custom.js」はテーマディレクトリ直下に「js」ディレクトリを作成し、その中にアップロード index.php（PHP） <ul> <?php //出力処理 if (have_posts()) : while (have_posts()) : the_post(); if(get_post_meta($post->ID, 'mypost_link', true)){ $link = '<a href="'.esc_url(get_post_meta($post->ID, 'mypost_link', true )).'" target="_blank">'; }else if(get_post_meta($post->ID, 'mypost_image', true)){ $link = '<a href="'.esc_url(get_post_meta($post->ID, 'mypost_image', true )).'" target="_blank">'; }else{ $link = '<a href="'.get_the_permalink().'">'; } ?> <li> <time class="news__time"><?php the_time('Y.m.j') ?></time> <span><?php echo($link.get_the_title()); ?></a></span> </li> <?php endwhile; else: ?> <?php endif; ?> </ul> カスタムフィールドの実装は「プラグイン（カスタムフィールドアドバンス等）」でも可能です。プラグインでの実装はノーコードでできる良さと、テーマに依存しないことの利便性がありますが、開発元（運営会社）に依存するのと、バージョン未対応で使えなくなることがあるため、今回はテーマ適応時に自動反映できることでの流用のしやすさを考えてカスタマイズにしています。

対企業向けのマーケティングにおいて「ホワイトペーパー」を活用する企業が増えていますが、「ホワイトペーパーって何？」と疑問を持たれる方も多いのではないでしょうか。そこで、本記事では、自社での再確認も含め、ホワイトペーパーの説明や、ホワイトペーパーを活用したマーケティング方法についてメモ。 ホワイトペーパーとは？ ホワイトペーパーとは、企業が提供する無料の資料で、特定の課題や問題を解決するための情報を詳しく解説したものです。例えば、「業界の最新動向」「課題解決の方法」「導入事例」などをテーマにすることが多く、リード獲得（見込み客の情報収集）に効果的な手法として知られています。 ホワイトペーパーの具体的な特徴 専門的な知識をわかりやすく解説している 読者（見込み客）の課題解決をサポートする 企業の信頼性を高める ダウンロードと引き換えに見込み客の情報を得る ホワイトペーパーを活用するメリット ホワイトペーパーを活用すると、以下のようなメリットがあります。 リード獲得につながる ホワイトペーパーは、企業が「無料でダウンロードできる資料」として提供することで、見込み客の情報を取得する手段になります。フォームにメールアドレスや企業名を入力してもらうことで、将来的にアプローチできる貴重なリードを獲得できます。 企業の信頼性を向上できる 質の高いホワイトペーパーを提供することで、「この企業は業界の専門知識を持っている」と認識され、ブランドの信頼性が高まります。これは特に、競争が激しい業界において差別化のポイントとなります。 営業活動の効率化できる ホワイトペーパーは、営業ツールとしても活用できます。見込み客が事前に資料を読んでいるため、営業担当者が説明する手間が減り、スムーズに商談へ移行しやすくなります。 ホワイトペーパーの効果的な活用方法 ターゲットを明確にする ホワイトペーパーを作成する際、最も重要なのは「誰に向けた資料なのか」を明確にすることです。例えば、以下のようなターゲット設定が考えられます。 初心者向け：「はじめての〇〇」「基礎から学ぶ〇〇」 導入検討者向け：「〇〇の選び方」「導入前に知っておきたい〇〇」 比較検討者向け：「〇〇 vs 〇〇｜徹底比較」 ターゲットが明確でないと、読者のニーズに合わない内容になってしまい、ダウンロード率が低下する可能性があります。 魅力的なコンテンツを作成する ホワイトペーパーの内容は、読者にとって価値があるものでなければなりません。以下のポイントを意識すると、より魅力的なコンテンツになります。 課題を明確にする：「〇〇に困っていませんか？」と共感を生む内容にする 解決策を示す：具体的な方法や成功事例を紹介する 読みやすい構成：図表や箇条書きを活用し、分かりやすくする ダウンロードを促す仕組みを作る ホワイトペーパーを作っただけでは、効果は期待できません。ダウンロードを促す仕組みを整えることが重要です。 LP（ランディングページ）の設計：ダウンロードページを作り、ホワイトペーパーの魅力を伝える フォームの最適化：入力項目を減らし、ユーザーの負担を軽減する CTA（行動喚起）の工夫：「今すぐ無料ダウンロード」など、具体的な言葉を使う ホワイトペーパーの効果を最大化する運用ポイント ダウンロード後のフォローを徹底する ホワイトペーパーをダウンロードした方に対して、フォローを行わないと成果につながりません。 お礼メールの送信：「ダウンロードありがとうございます」と感謝の気持ちを伝える 関連コンテンツの紹介：他の記事や事例紹介を送ることで、興味を継続させる 営業チームとの連携：温度感の高いリードに適切なアプローチを行う 成果の分析と改善 ホワイトペーパーマーケティングを継続的に成功させるには、データを分析し、改善を重ねることが重要です。 ダウンロード数 コンバージョン率（CVR） 商談化率 これらのデータをもとに、コンテンツやプロモーションの改善を図りましょう。 当社でのホワイトペーパー活用事例 ホワイトペーパーは、ターゲットにとって価値のある情報を提供することが重要です。例えば、当社では導入時に質問の多い「ワードプレスでの投稿方法」をまとめた簡単な資料をホワイトペーパーとして提供しています。 このホワイトペーパーをダウンロードできるようにすることで、初心者の方がスムーズにワードプレスを使い始められるようサポートすると同時に、見込み客との接点を作ることもできています。 「ホワイトペーパーを活用してみたいけど、どこから始めればいいかわからない…」という方は、まずは自社の顧客がどんな課題を抱えているのかを分析し、それに応える形でシンプルな資料を作成すると良いでしょう。少しずつ改善を重ね、効果的なマーケティング施策に育てていきましょう！

WordPress（ワードプレス）での投稿時にハイフンを連続して記載する機会があったのですが、セキュリティーの観点から禁止されていたので解決方法をメモ。 「-」（ハイフン）を「&#45;」と置き換えて投稿 投稿画面でハイフンを文字コード「&#45;」に置き換えて記載。記載する際にはエディタモードを「コードエディタ」に切り替えて作業を行います。尚、コードブロック内では問題なく表記されます。

CSSのコーディング時に同じ色、同じフォント、同じ文字サイズなど、何度も同じ値を使用する際に個別にクラスを用意してマークアップを行っていくのでも良いのだけれど、THTMLへの追記なくCSSファイルのみで完結できる「カスタムプロパティ（変数）」が非常に便利だったのでメモ。 CSSのカスタムプロパティ（変数）とは CSSのカスタムプロパティは、CSSの値を事前に変数として登録しておくとこで、各セレクターでの指定時に再利用できる値のこと。具体的にはルートセレクター（:root）に設定することで全てに適応することが可能となります。 CSS :root { --maincolor: #4790bb; --accentcolor: #2a5772; --subcolor: #b0d7d5 --bigsize: 1.8rem; --middlesize: 1.4rem; --enfont: "Jost", serif; } .common__label { color: var(--accentcolor); font-family: var(--enfont); font-size: var(--bigsize); font-weight: 700; } .common__heading { margin: 1rem 0 4rem; font-size: var(--middlesize); } 設定時に「--○○○○」の形式で登録、実行時に「var(--○○○○)」の形式で記載。変更する際も「:root」の値を変更するだけで一括で変更できるほか、誤って「:root」の値を削除してしまった時のために「フォールバック値（代替値）」の設定も可能です。 CSS .common__heading { margin: 1rem 0 4rem; font-size: var(--middlesize, 20px); } 「var」の第二引数（カンマの後の値）に記載されたものが「フォールバック値」。カスタムプロパティが空の場合に代わりに適応されます。

ホームページにブログを設置すると、「記事を書けば収益を得ることができるようになりますか？」というお問い合わせをいただく事もあります。実際、自社ブログ（オウンドメディア）を収益化することは可能ですが、やみくもに記事を書いていても成果は出ません。この記事では、ブログで収益を得る仕組みと、初心者が副業で成功するための方法について解説します。 ブログで稼ぐ基本の仕組みを知る ブログで収益を得るためには、単に記事を書くだけでは不十分です。自社商品をお持ちの企業様で、そちらの広報用の記事で収益が出せるということでない限りは、読者を集め、マネタイズの仕組み（広告）を適用することで、初めて収益化が可能になります。 主な広告の種類 種類特長Googleアドセンスクリック報酬型広告。記事内に広告枠を設置するだけで自動で広告が配信されるので導入は比較的容易。単価が低く、アクセス数が少ないと稼げない。アフィリエイト（成果報酬型広告）特定の商品やサービスを自身で選択・紹介し、読者が購入・登録すると報酬が発生する。単価の高いものも多く、テーマに合えば成約率も高くなる。A8.net、もしもアフィリエイト、Amazonアソシエイトなどが有名。企業案件企業から依頼を受け、製品やサービスを紹介する広告や記事を設置する。ブログの認知度が高くなると企業側から連絡がくる。固定費（期間契約）が多い。 副業ブログの始め方：初心者向けのステップ ブログに掲載する広告（テーマ）を決める 副業ブログを始める方に、ご自身の好きな内容の記事を作成し、後で広告を設置される方が多いのですが、出稿時になって希望の価格や、テーマに添った広告が見つからないこともありますので、最初に広告を選択し、その広告に合わせたテーマで記事を書くことが望ましいです。 SEO（検索キーワード）を意識した記事作成でアクセスを集める テーマが決まったら次は実際に記事を書いていきますが、この際にSEO（検索キーワード）を意識して検索エンジンからの流入が期待できる内容を盛り込んで作成します。特に見出しは、検索結果にも表示されるため重要になります。 キーワードは「キーワードツール」を使うか、その時の「トレンド」から選定しながら、まずは30本の記事を作成することを目指します。 広告やアフィリエイトを導入する ある程度の記事が溜まってきたら、広告の申請を行い、広告の掲載を開始します。 アクセス解析を行い、改善を続ける 広告は掲載しているだけでは収益に繋がりません。アクセス解析ツールを使って集客状況を確認したり、SNSで投稿を拡散したりと、記事構成を見直しながら常に集客のできる記事に改善していきます。 まとめ：継続すればブログは副業として成功できる！ ブログは、正しい方法で継続すれば副業として稼げるようになります。最初は収益が出なくても、コツコツと記事を増やし、集客の仕組みを理解していくことが大切です。まずは小さな成功を積み重ねながら、長期的な視点でブログを育てていきましょう！

掲示板など不特定多数の方が利用できるサービスを作成する際に、不適切な書き込みができないよう禁止ワード（ＮＧワード）を設ける場合もあるため、実装方法をメモ。 PHP $ngWords = '/○○○○|○○○○|○○○○|○○○○|○○○○|○○○○|○○○○/u'; function checkNGWord($ngWords, $text) { if (preg_match($ngWords, $text)) { return true; } else { return false; } } // 使用例 $comment = "お前は○○○○"; if(checkNGWord($ngWords, $comment)){ //禁止ワードが含まれている際の処理を記載 } 禁止ワードが含まれる投稿を一切登録できなくする方法もありますが、その場合は対象の文字が含まれている普通の用語（例：禁止ワード「エロ」の場合の、投稿ワード「ピエロ」）も登録できなくなってしまうこともあるため、禁止ワードを過剰に設定しない、管理者に通知が届くにとどめて目視で削除する、または承認制にする等の運用方法を考える必要はありそうです。

フォーム投稿で画像をアップロードする際に、追従式のメールフォームを作成し、コンテンツの途中の段階で送信が送れる仕組みを作成していたのだけれど、PHPでそのまま実装すると再読み込みが発生してしまい、再度コンテンツを読んでいた位置まで進める必要が出てきたので、Ajaxと組み合わせ実装した際の方法をメモ HTML <form action="" method="post" enctype="multipart/form-data" id="entryform"> <textarea name="text"></textarea> <input type="file" name="newimage"> <button type="submit" id="submit">登録する</button> </form> <div id="result"></div> jQuery $(function(){ $('form').on('submit', function(event) { event.preventDefault(); // フォームのデフォルト送信を防止 var $form = $('#entryform'); var formData = new FormData($form.get(0)); $.ajax({ type: 'POST', url: 'save.php', data: formData, processData: false, contentType: false, dataType: "json", success: function(response) { if (response.status === "success") { $("#result").html("アップロード成功"); } else { $("#result").html("エラー: " + response.message); } }, error: function() { $("#result").html("エラーが発生しました。"); } }); }); }); save.php（PHP） if($_SERVER['REQUEST_METHOD'] === 'POST'){ $uploadDir = "uploads/"; $file = $_FILES["image"]; $fileName = basename($file["name"]); $targetFile = $uploadDir.$fileName; $text = filter_input(INPUT_POST, "text", FILTER_SANITIZE_STRING); if (!$text) { echo json_encode(["status" => "error", "message" => "テキストが無効です"]); exit; } if (isset($_FILES["newimage"])) { $finfo = new finfo(FILEINFO_MIME_TYPE); $mimeType = $finfo->file($file["tmp_name"]); $validMimeTypes = ["image/jpeg", "image/png", "image/gif"]; if (!in_array($mimeType, $validMimeTypes)) { echo json_encode(["status" => "error", "message" => "画像の種類が正しくありません"]); exit; } // 画像サイズの制限（2MB） if ($file["size"] > 2 * 1024 * 1024) { echo json_encode(["status" => "error", "message" => "画像サイズは2MB以下にしてください"]); exit; } // 画像を保存 move_uploaded_file($file["tmp_name"], $targetFile); } }

「自社のホームページを作りたい」と思ったとき、どの方法を選べばよいのか迷ったことはありませんか？ホームページ制作には、大きく分けて「ノーコード」「WordPress」「スクラッチ開発」という3つの方法があります。どの方法を選ぶかによって費用・時間・自由度が大きく変わるため、目的に合った手段を選ぶことが大切です。本記事では、それぞれの特徴を独自の表現で解説し、あなたに合ったホームページ制作の方法を見つけるお手伝いをします。 ノーコード（No Code）とは？ ノーコードとは、プログラミングの知識がなくても簡単にホームページを作成できる方法です。あらかじめデザインや機能が用意されているため、直感的な操作でテンプレートを選び、簡単なカスタマイズをするだけでホームページを作ることができます。 これを料理で例えると「インスタント食品や冷凍食品」に似ています。 特徴 誰でも簡単に早く作れる ある程度のバリエーションはあるが、完全にオリジナルにはできない デザインや機能を自分好みにカスタマイズするのは難しい ホームページのデータはノーコードのサービス事業者が所有 代表的なノーコードツールには、以下のようなものがあります。 Wix（ウィックス） Jimdo（ジンドゥー） STUDIO WordPress（ワードプレス）とは？ WordPressは、世界中で最も利用されているホームページツールです。カスタマイズには専門知識を必要とするものの、特別な知識がなくても、文章を書いたり写真を入れたりして、自分だけのサイトを作ることができるため、企業サイトやブログサイトなど、多くの用途で使われています。 ノーコードツールと異なり、自社のサーバーに導入して使用できるため、基本的な枠組みは用意されているものの、プラグイン（専用の追加オプション）を追加したり、デザインを調整したりすることで自由にカスタマイズもできます。 これを料理で例えると 「料理キット」のようなものです。 特徴 必要な機能が予め用意されている プラグイン（追加機能）を活用すれば、カスタマイズが可能 制作に時間はかかるが、ゼロから制作するほど大変ではない 独自ドメイン・サーバーを利用でき、運用の自由度が高い スクラッチ開発とは？ スクラッチ開発とは、HTML、CSS、JavaScript、PHP などのプログラミング言語を使い、ゼロからオリジナルのホームページを作る方法です。時間はかかるものの、完全オリジナルなデザインでサイトを作ることができ、機能も自由に決めることができます。 「ノーコード」や「ワードプレス」と比較されることも多いので、ホームページ制作の方法としてのみ捉えられがちですが「ノーコード」や「ワードプレス」をも作っている手法で、勤怠管理の仕組みや、お問い合わせ管理（顧客管理）のシステムの作成でも使用した経験があります。 これは、料理で例えると 「一からすべて手作りの創作料理を作る」 ことに似ています。 特徴 仕様変更や拡張が自由自在で、完全オリジナルのデザイン・機能を実装できる 開発コスト・時間がかかる プログラミングスキルが必要 ホームページに限らず、各種システムの作成も可能 まとめ：目的に合わせたホームページ制作を選ぼう！ ホームページ制作には、ノーコード・WordPress・スクラッチ開発 の3つの方法があり、それぞれ料理の作り方と似ています。 ノーコードワードプレススクラッチ開発料理例インスタント食品料理キット完全手作り料理専門性◎ 簡単○ ある程度の知識が必要× 専門知識が必要カスタマイズ性△ 限られる○ プラグインやカスタマイズ可能◎ 自由自在データ× 提供者が所有◎ 自社で保有◎ 自社で保有時間と手間◎ 最短○ 中程度× 長時間費用◎ 低価格○ 中程度× 高額目的すぐにホームページを作りたいある程度自由に作りたい完全オリジナルのサイトを作りたい どの方法を選ぶかは、目的・予算・必要な自由度 によります。まずは「どんなホームページを作りたいのか？」を明確にし、最適な方法を選択しましょう！

ワードプレスを使用する際に、新たにカスタム投稿を追加をせずに投稿を「新着情報」として使用することが多いですが、そのままの名前で運用すると分かりにくいとお声をいただいた際に対応したメニューの名称（ラベル）の変更方法をメモ。 functions.php（PHP） 「functions.php」に以下の内容を追記します。 function change_my_post_menu_label() { global $menu; global $submenu; $menu[5][0] = '新着情報'; $submenu['edit.php'][5][0] = '新着情報一覧'; $submenu['edit.php'][10][0] = '新着情報追加'; $submenu['edit.php'][15][0] = '新着情報カテゴリー'; //カテゴリを変更する場合は追記 $submenu['edit.php'][16][0] = '新着情報タグ'; //タグを変更する場合は追記 } function change_my_post_object_label() { global $wp_post_types; $labels = &$wp_post_types['post']->labels; $labels->name = '新着情報'; $labels->singular_name = '新着情報'; $labels->add_new = '新規追加'; $labels->add_new_item = '新着情報の新規追加'; $labels->edit_item = '新着情報の編集'; $labels->new_item = '新規新着情報'; $labels->view_item = '新着情報を表示'; $labels->search_items = '新着情報を検索'; $labels->not_found = '新着情報が見つかりませんでした'; $labels->not_found_in_trash = 'ゴミ箱に新着情報は見つかりませんでした'; } //カテゴリを変更する場合はこちらも追記 function change_my_category_object_label() { global $wp_taxonomies; $labels = $wp_taxonomies['category']->labels; $labels->name = '新着情報カテゴリー'; $labels->add_new_item = '新着情報カテゴリーを追加'; $labels->edit_item = '新着情報カテゴリーの編集'; $labels->all_items = '新着情報カテゴリー一覧'; $labels->search_items = '新着情報カテゴリーを検索'; $labels->not_found = '新着情報カテゴリーが見つかりませんでした'; } //タグを変更する場合はこちらも追記 function change_my_tags_object_label() { global $wp_taxonomies; $labels = $wp_taxonomies['post_tag']->labels; $labels->name = '新着情報タグ'; $labels->add_new_item = '新着情報タグを追加'; $labels->edit_item = '新着情報タグの編集'; $labels->all_items = '新着情報タグ一覧'; $labels->search_items = '新着情報タグを検索'; $labels->not_found = '新着情報タグが見つかりませんでした'; } add_action('init', 'change_my_post_object_label'); add_action('init', 'change_my_category_object_label'); add_action('init', 'change_my_tags_object_label'); add_action('admin_menu', 'change_my_post_menu_label');

以前、画像を使用したループスライダを紹介していましたが、今回は見出し等の表記文字をCSSで無限ループさせる場合の実装方法をメモ。 HTML <div class="loop__wrap"> <div class="loop__text"><span>CSSを使って無限ループさせる文字を記載</span></div> </div> CSS @keyframes textscroll { from { transform: translateX(0%); } to { transform: translateX(-100%); } } .loop__wrap { overflow: hidden; } .loop__text { display: flex; } .loop__text span { white-space: nowrap; animation: textscroll 10s infinite linear both; } jQuery if($('.loop__text').length){ var looptxtSize = $('.loop__text span').width() + 〇px; $('.loop__text span').css({'width':looptxtSize + 'px'}); $('.loop__text').css({'width':looptxtSize * 2 +'px'}); $('.loop__text').find('span').clone().appendTo('.loop__text'); } CSSセレクター「.loop__text span」の箇所で幅を直に設定することでもループスライダーの実装可能ですが、文字数や文字サイズが変わった場合でもそのまま使えることと、同じテキストを複数回記載する必要もなくなるようjQueryを使用しています。

弊社で作成したホームページや、依頼主の方が別で管理されていたりするホームページに関して、ご自身で更新されることもあるのですが、その際にご相談いただく事の多かった事例と解決方法をメモ。 ご相談事例 文字の頭に不要な余白が表示される。 HTMLの半角・全角スペースを見直す。 HTMLタグを記載される際に囲まれている範囲を分かりやすくするため、文字の字下げ（インデント）を行われる方に多いのですが、字下げの際に半角スペースに混じって「全角スペース」を打ち込まれていて余分なスペースが発生していることがあります。タグ間の頭の半角スペースは文字（余白）と認識しませんが、全角スペースは文字として認識されます。見た目では判断しにくいのですが、一文字づつ入力し直す事で解決できる事があります。 //問題のあるコード <p>私たちのホームページ制作会社には営業専門の担当者がおりません。<br> ＿_お打ち合わせの段階から制作の知識のあるものがお伺いし、ホームページの構成や仕様、コンテンツの内容、今後の更新に至るまで、様々な可能性を考慮したうえで、最適なホームページをご提案しています。</p> //改善後のコード <p>私たちのホームページ制作会社には営業専門の担当者がおりません。<br> ___お打ち合わせの段階から制作の知識のあるものがお伺いし、ホームページの構成や仕様、コンテンツの内容、今後の更新に至るまで、様々な可能性を考慮したうえで、最適なホームページをご提案しています。</p> 参考例では分かりやすくアンダーバー(_)を記載しています。 ボタンが見えているのにクリックできない CSSの「z-index」を使用して階層の順序を見直す。 CSSでネガティブマージン（マイナス方向への余白）や「position」プロパティを使用して配置されている場合に発生することが多いです。HTMLは下の行に書かれているものが上の階層として配置されます。背景色に透明なオブジェクトを使用している場合、分かりにくいのですが、ボタンの上に別の対象物が重なり、ボタンをクリックできない状態になっていることがあります。ボタンに「z-index」を付与して階層を上にすることで問題を解決できることがあります。 <div class="btnarea"> <a href="○○○○">ボタン</a> </div> <div class="lead"> <p>私たちのホームページ制作会社には営業専門の担当者がおりません。<br> お打ち合わせの段階から制作の知識のあるものがお伺いし、ホームページの構成や仕様、コンテンツの内容、今後の更新に至るまで、様々な可能性を考慮したうえで、最適なホームページをご提案しています。</p> </div> //問題のあるコード .btnarea { text-align: center; } .lead { padding: 1rem 0; position: relative; } .lead::before { content: ""; display: block; background: url(○○○○); width: 100%; height: 1rem; position: absolute; top: -1rem; } //改善後のコード .btnarea { text-align: center; position: relative; z-index: 1; } .lead { padding: 1rem 0; position: relative; } .lead::before { content: ""; display: block; background: url(○○○○); width: 100%; height: 1rem; position: absolute; top: -1rem; } CSSを設定しているのに色が正しく反映されない CSSの優先順位を見直す。 CSSの反映には「ID（id）　＞　クラス（class）　＞　要素（タグ）」の優先順位があり、更にその中でもCSSファイルの後の位置に書かれたものが有効となります。指定先の要素の色やサイズなどが競合した場合に優先順序を間違わなければ、希望通りに反映されることができるのですが、分かりにくいものとして「クラス内の要素　＞　クラス」が生じる場合もあります。この場合は対象のタグにIDを付与するか、または対象タグの親要素にクラスを指定した形で記載する事で解決できる場合があります。「!important」を用いて強制的に順位を高める方法もありますが、乱用すると制御が難しくなるのでお勧めはしません。 <div class="comment"> <p>私たちの<span>ホームページ</span>制作会社には<span class="style01">営業専門</span>の担当者がおりません。<br> お打ち合わせの段階から制作の知識のあるものがお伺いし、<span>ホームページ</span>の構成や仕様、コンテンツの内容、今後の更新に至るまで、様々な可能性を考慮したうえで、最適な<span>ホームページ</span>をご提案しています。</p> </div> //問題のあるコード .comment span { color: #00f; } .style01 { color: #f00; } //改善後のコード .comment span { color: #00f; } .comment .style01 { color: #f00; } まとめ：HTMLとCSSの課題をスムーズに解決するために HTMLとCSSに関する問題は、初心者から経験者まで誰もが直面するものです。弊社でも解決に向けてサポートしておりますが、より効率的なコーディングができるようになるために、この記事が課題解決に少しでもお役立てますと幸いです。

画像を使用する際に、曲線等の特殊な形で実装したい時があります。マスク済みの画像を用意する方法もありますが、動的に呼び出すコンテンツ等の場合は都度作成が難しい場合もあるため、CSSでマスキングする方法をメモ。 マスク用の画像を用意する マスクしたい形の画像（マスク用画像）をPNG形式やSVG形式で用意します。この時、画像を残したい（有効にしたい）方に色を付け、削る方を透明にします。 コードの実装 HTML <figure> <img src="画像のurl" class="image__mask"> </figure> CSS .image__mask { -webkit-mask-image: url(マスク用画像のURL); mask-image: url(マスク用画像のURL); mask-size: 100% auto; mask-position: bottom; mask-repeat: no-repeat; } サンプル .image__mask { -webkit-mask-image: url('https://web.syu-u.com/blog/wp-content/uploads/mv_mask.png'); mask-image: url('https://web.syu-u.com/blog/wp-content/uploads/mv_mask.png'); mask-size: 100% auto; mask-position: bottom; mask-repeat: no-repeat; } CSS マスキング mask-image の使い方

アクセス制限を設けるWEBページを作成する際に、ログイン機能を設けることは一般的ですが、更に同時にアクセスできる人数まで制限したい場合の実装方法をセッションIDを利用した方法でメモ。 同時アクセス人数制限の実装方法 実装したい内容を整理するとログイン処理時に、既にログインしていユーザーの人数をカウントして、上限数を超える場合はアクセスできなくする。といった処理になります。 参考例は、100人を最低1時間の利用で制限。データベースに「tbl_login 」というテーブルを作成し、そこに「ユーザーネーム（username）」「セッション情報（loginkey）」「セッションの生成時間（logindate）」のカラムを用意しています。 HTML <form action="login.php" method="post"> <dl> <dt>ユーザーネーム</dt> <dd><input type="text" name="username"></dd> <<dt>パスワード</dt> <dd><input type="password" name="password"></dd> </dl> <ul> <li><input type="submit" name="submit" value="ログイン"></li> </ul> </form> login.php（PHP） session_start(); $max = 100; //1時間よりも前に生成されたセッション情報を削除 $pastdata = date('Y-m-d H:i:s', strtotime('-1 hour')); $delsql = $db->pdo->prepare('DELETE FROM tbl_login WHERE logindate < :logindate'); $delsql->bindParam(':logindate', $pastdata, PDO::PARAM_STR); $delsql->execute(); //ログイン処理 if(!empty($_POST['submit'])){ foreach($_POST as $key => $value){ $dt[$key] = $value; } //入力エラー処理省略 if(empty($err_msg['error'])){ //パスワード照合処理省略 if($set_password != $dt['password']){ $err_msg['error']['login'] = error01; }else{ //ログインしている人数をカウント $count_list_sql = $db->pdo->query('SELECT * FROM tbl_login); $count = $count_list_sql->rowCount(); if($count <= $max){ session_regenerate_id(true); $user_key = session_id(); $login_date = date('Y-m-d H:i:s'); //cookieに保存 setcookie('user_key', $user_key, time()+60*60*24*7); //セッション情報をデータベースに保存 $addsql = $db->pdo->prepare('INSERT INTO tbl_login(username, loginkey, logindate) VALUES(:username, :loginkey, :logindate)'); $addsql->bindParam(':username', $dt['username'], PDO::PARAM_STR); $addsql->bindParam(':loginkey', $user_key, PDO::PARAM_STR); $addsql->bindParam(':logindate', $login_date, PDO::PARAM_STR); $addsql->execute(); $dt = array(); header("location: ○○○○"); //ログイン完了ページに遷移 exit; } } } } まずは、ログイン処理時に保存しているセッション情報から対象外となるもの（今回は時間制限で1時間以上経過したもの）を削除し、そこから最大件数に満たない場合はセッション情報を追加するようにしています。 入力処理やパスワードの認証処理（暗号化処理を含む）、データベースへの接続に関する記載は、今回は省略しています。 logincheck.php（PHP） session_start(); $value = $_COOKIE['user_key']; //ログインチェック $check_login_sql = $db->pdo->prepare('SELECT id FROM tbl_login WHERE loginkey = :loginkey'); $check_login_sql->bindParam(':loginkey', $value, PDO::PARAM_STR); $check_login_sql->execute(); $check_login_count = $check_login_sql->rowCount(); if(!isset($value) or $check_login_count < 1){ header("location: ○○○○"); //ログインページに遷移 exit(); }else{ //セッション情報（時間）を更新 $login_date = date('Y-m-d H:i:s'); $updatesql = $db->pdo->prepare('UPDATE tbl_login SET logindate= :logindate WHERE loginkey = :loginkey'); $updatesql->bindParam(':logindate', $login_date, PDO::PARAM_STR); $updatesql->bindParam(':loginkey', $value, PDO::PARAM_STR); $updatesql->execute(); } 次に、ページを遷移する度にログインチェックを行うと同時にセッション情報の更新を行います。これを怠ると時間制限により、他の方がログイン処理を行った際に自動的にログアウトされています。 logout.php（PHP） session_start(); $value = $_COOKIE['user_key']; //セッション情報を削除 $delsql = $db->pdo->prepare('DELETE FROM tbl_login WHERE loginkey　= :loginkey'); $delsql->bindParam(':loginkey', $value , PDO::PARAM_STR) $delsql->execute(); //クッキーの削除 setcookie('user_key', '', time()-60); header("location: ○○○○"); //ログインページに遷移 exit(); 最後にログアウト処理の記載です。そのままにしておいても時間制限でセッション情報は削除されてしまいますが、不正アクセスや個人情報の流出から自身を守るといった安全面や、他の方の利用を制限している可能性があることを考えると自発的に削除できる機能は必要不可欠となります。

「ワードプレスがなんだか遅い…」そんな悩みを抱えたことはありませんか？サイトの表示速度は、訪問者の満足度やSEOに直結する重要な要素です。ページの読み込みが遅いと、訪問者がすぐに離脱してしまい、ビジネスに悪影響を及ぼす可能性があります。この記事では、ワードプレスが遅いと感じた時の主な原因と、その解決策をメモ ワードプレスが遅い時の主な原因 ワードプレスの速度低下にはいくつかの要因があります。ここでは、特に初心者が見落としがちなポイントを挙げてみます。 原因1: 画像が大きすぎる ワードプレスにアップロードする画像が、撮影時のサイズのままだとページの読み込みに時間がかかる場合があります。特に高解像度の画像を使用している場合、ページ全体の容量が増大し、結果として表示速度が遅くなるのです。 原因2: 使用中のプラグインが多すぎる 便利だからといってプラグインを多用していませんか？プラグインが増えると、サーバーへの負荷が高まり、サイト全体のパフォーマンスに悪影響を及ぼします。また、同じ機能を持つプラグイン同士が競合することで速度低下を引き起こすこともあります。 プラグインの使用で重くなる理由 CMSでの入力内容はデータベースに保存されます。通常であれば「入力値」のみを保存すれば良いところを、プラグインでは入力項目自体の登録から必要になるため、入力項目、入力値、左記二つを関連付けるための登録と最低でも3つの内容の登録が必要となるためです。 原因3: 投稿履歴（リビジョン）が蓄積している ワードプレスは投稿やページを編集するたびに「リビジョン」と呼ばれる履歴を保存します。これにより、編集内容を遡ることができますが、リビジョンが蓄積されすぎると、データベースが肥大化し、読み込みの処理が遅くなる原因となります。 ワードプレスの遅さを解消するおすすめの解決策 解決策1: 画像の最適化 画像圧縮ツールやプラグインを活用して、ファイルサイズの削減が可能です。既に投稿済のものを編集する場合は「EWWW Image Optimizer」のプラグインを使うのがお勧めですが、プラグインの多用も遅延の原因となるらめ、これからアップロードするものに関しては「TinyPNG」等のブラウザサービスを使用して事前にファイルを圧縮する方が望ましいです。 EWWW Image Optimizer TinyPNG – Compress PNG images while preserving transparency 解決策2: 不要なプラグインを削除 定期的にプラグインを整理し、長らく使っていないプラグインや重複機能を持つものを削除。必要最小限のものだけを使いましょう。 解決策3: リビジョンの管理 既に作成れているリビジョン（投稿履歴）を「WP-Optimize」などのプラグインを使用して不要なリビジョンを削除します。一度設定を行うと定期的にサイトを最適化してはくれますが、事後処理となり、追加されるリビジョンの数の制限まではできないため、事前に追加をさせない場合は別途処理が必要です。 WP-Optimize WordPress（ワードプレス）でリビジョン（投稿履歴）を制御する それでも改善できない場合に考えること 前述の方法で改善が難しい場合はデータベースの設計を見直す必要があるかもしれません。 データベースとはWEB上で情報を保存しておくもので、エクセルファイルのようなものと考えてもらえるとわかりやすいかもしれません。エクセルファイルでデータを取り扱う場合、多くの方は情報の種類に合わせてシート（またはファイル）を分けて保存されていると思いますが、ワードプレスの投稿内容（メディア情報含む）のほとんどは1組のシートに目印をつけながら保存されている状態になっています。当然ながら情報量が多くなり過ぎると目的のものを探す処理に時間がかかるようになってきます。 その場合は、データベースの設計を見直し、保存されるテーブル（シート）を適切に分けて保存できるよう改修することも必要です。 まとめ：サイトを継続的に改善する姿勢が大切 ワードプレスの表示速度を向上させるには、基本的な設定からデータベースの見直しまで幅広い対策が必要です。ただし、一度にすべてを完璧にしようとする必要はありません。まずは、簡単な画像の圧縮やプラグインの見直しから始め、徐々に高度なデータベースの最適化に取り組むと良いでしょう。 適切な対策を講じて快適なサイト運営を目指しましょう！

管理画面等を使用して店舗を追加していく際に、一つづつ確認しながら地図を埋め込むことも可能ですが、入力した住所から動的に地図を生成する方法を実装していた際のコードをメモ。 Geocodingを使用した緯度経度の取得方法 実装する前にAPIキーを取得する googlemapの「geocoding」機能を使用するためにはAPIキーを取得する必要があります。google APIキーは「Google Cloud Platform」よりプロジェクトを作成して取得、更にAPIライブラリの中から「Geocoding API」を有効化。他サイトで利用できないよう認証情報ページで使用サイトと使用APIを制限します。 ヘッドにAPIキーを記載する 取得したAPIキーを、対象ページのヘッド内に下記を記載。 <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> ジオコーディングを実装する HTML <form id="addressForm"> <table> <tr> <th>住所</th> <td> <input type="text" name="address" id="address" value="" onblur="initialize(this)"> <input type="hidden" name="latitude" id="latitude" value=""> <input type="hidden" name="longitude" id="longitude" value=""> </td> </tr> </table> <button type="submit" name="submit">送信</button> </form> javascript function initialize(obj){ var geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(-34.397, 150.644); var address = document.getElementById('address').value; geocoder.geocode({'address': address},function(results,status){ if (status == 'OK') { var latlng = results[0].geometry.location; document.addressForm.latitude.value = latlng.lat(); document.addressForm.longitude.value = latlng.lng(); }else{ alert('Geocode was not successful for the following reason: ' + status); } }); } 後は用途に応じてフォームから取得した値をPHP等を使用してデータベースに保存します。

ホームページ制作を行っていると、稀に検索エンジンにヒットさせたくないファイルが出てくることもあります。サーバーから削除するのが確実ではありますが、諸事情もあるため削除せずにクロールをさせない実装方法をメモ。 robots.txt User-agent: * Disallow: *.pdf$ 上記はファイル（拡張子）対象とした方法。ディレクトリを指定する場合は下記 User-agent: * Disallow: /pdf/ 「robots.txt」はホームページのディレクトリ直下に設置します。

ご依頼されたホームページの確認をお願いすると、「変更を加えたページが更新されていない」という連絡を受けることがあります。こちらの原因の多くはブラウザが保存している「キャッシュ」にあります。この記事では、ホームページの更新が確認できない時の「スーパーリロード」やり方について解説します。 ページの更新を妨げる「キャッシュ」と強制的に更新する「スーパーリロード」 キャッシュとは？ キャッシュは、ブラウザが一度表示したウェブページのデータ（画像やスタイル情報など）を保存しておく仕組みです。これにより、再訪時のページ読み込みが高速化されるメリットがあるのですが、同時に古い情報を表示してしまうというデメリットもあります。 スーパーリロードとは？ スーパーリロードとは、通常の更新ボタン（F5キーなど）とは異なり、ブラウザに保存されているキャッシュを無視してウェブページを再読み込みする操作です。これにより、サーバーから最新のデータを取得できます。 スーパーリロードのやり方 スーパーリロードの操作はブラウザによって異なりますが、基本的にはキーボードの操作となります。以下に主要なブラウザごとの手順を紹介します。 WindowsMacGoogle ChromeCtrl + F5または Ctrl + Shift + RCommand + Shift + RFirefoxCtrl + Shift + RCommand + Shift + RMicrosoft EdgeCtrl + F5または Ctrl + Shift + RSafariCommand + Option + R スマートフォンでスーパーリロードは可能？ スマートフォンのブラウザではスーパーリロードを行うことができません。各種ブラウザの設定から閲覧履歴を削除してから、再読み込みすることで同様の効果を得ることが可能です。 まとめ: スーパーリロードを活用して快適なウェブ体験を スーパーリロードは、ブラウザキャッシュを無視して最新のウェブページを読み込む便利な機能です。初心者の方でも簡単に操作でき、ページが更新されない問題を迅速に解決できます。 WEB制作や管理の場面で役立つだけでなく、日常的なウェブブラウジングにも応用可能です。ぜひスーパーリロードを活用して、快適なウェブ体験を実現してください！

ホームページに訪れた方のサイト内の滞留時間を高めるために、関連のある記事へのリンクを設置するのは有効な手法。ワードプレスの投稿機能を使用時に閲覧している記事の下部に前後の記事へのページネーションを実装する方法をメモ。 single.php // 前の記事を取得 $previous_post = get_previous_post(); // 次の記事を取得 $next_post = get_next_post(); if($previous_post){ echo('<a href="'.get_permalink($previous_post).'">前の記事: '.get_the_title($previous_post).'</a>'); } if($next_post){ echo('<a href="'. get_permalink($next_post).'">次の記事: '.get_the_title($next_post).'</a>'); } 同一カテゴリーに限定する場合は「get_previous_post」「get_next_post」の引数に「true」を指定します。 WordPressでの前後の記事へのページネーション実装方法

サイト内で見かけるパスのアニメーション。あまり使う機会がないのだけれど、必要の際に思い出せるようにCSSとSVGを使用して実装方法をメモ。 HTML <div class="path__wrap"> <svg xmlns="http://www.w3.org/2000/svg" width="79.82" height="33.09" viewBox="0 0 79.82 33.09"> <path d="M953.39-90.53c-19.23,6.84-17.13,12.21-12.87,15.74,10.57,8.76-18.56,19.12-21,16-3.21-4.07,35.73-29.34,38.74-21.15.3.83,0,1.88-2.21,5.62-2.46,4.19,8.68,3.25,14.57-5.57,0,0-14,18.49-16.47,19.57-3.08,1.34-3.12-1.88.73-3.47,2.65-1.09,19.22-9.88,26.36-16.1,0,0-8.48,6.77-4.09,7.86s12.82-7.08,13.6-7.37c0,0-5.92,8.05,2.17,3.78a17.61,17.61,0,0,0,5.48-4.61" transform="translate(-918.88 90.92)" /> </svg> </div> CSS .path__wrap { width: 90%; margin: 0 auto; } svg { width: 100%; height: auto; } path { stroke: #0099d9; stroke-width: 0.2px; fill: none; stroke-dasharray: 300; /* パスの全長を設定 */ stroke-dashoffset: 300; /* アニメーション開始時にパスを非表示 */ animation: draw 2s linear infinite; } @keyframes draw { to { stroke-dashoffset: 0; } } 「stroke-dasharray」を使用して線が全て埋まるまでの数値（パスの全長）を指定。次に「stroke-dashoffset」を使用して上記パスの開始位置が0になるまでオフセット（パスの全長と同じ値を指定）。こうすることで初期状態ではパスが全く描かれていない状態になります。この状態から「animation」プロパティを使用してオフセットを0まで変化させることでパスが描かれていくようなアニメーションになります。 プロパティ公開strokeパスの色を指定するstroke-widthパスの太さを指定するfillパスで囲まれた面の色を指定する。パスアニメーションの場合は無色にする場合が多いstroke-dasharrayパスの間隔を指定する（破線にする）stroke-dashoffset破線のオフセット（打消し量）を後ろから指定する サンプル .path__wrap { width: 90%; margin: 0 auto; } svg { width: 100%; height: auto; } path { stroke: #0099d9; stroke-width: 0.2px; fill: none; stroke-dasharray: 300; stroke-dashoffset: 300; /* アニメーション開始時にパスを非表示 */ animation: draw 2s linear infinite; } @keyframes draw { to { stroke-dashoffset: 0; } } 尚、パスのアニメーションの方向が反対になった場合の対処法と、書き出したSVGの形式がポリライン（polyline）だった場合の対処法は下記になります。それぞれイラストレーターでの「パスの方向反転」、「複合パス作成」で解決可能です。 MacのSafariとスマホだけSVGのpathアニメーションが逆再生されるときの原因と解決方法 たったこれだけ！SVGのpolylineをpathに変換する方法

ご相談を受けてから、ご要望をお伺いし、お見積りを作成した時点で「思っていたよりも費用が…」という事は意外とあります。そんな時に費用を抑えるために弊社でご提案している内容をご紹介。 ホームページ制作費用の内訳を理解しよう 費用を抑えるためには、まずホームページ制作の費用がどのように構成されているのかを知ることが重要です。 項目名内容価格単位ディレクション費用お打ち合わせ、調査、構成案の作成・提案、進行管理等に発生する費用作業日数デザイン費用ホームページのデザインを行うための費用ページ数コーディング費用ホームページをインターネットで確認できるようにするための作業費用ページ数システム開発費用お問い合わせフォームや新着情報等、利用者が操作できるプログラムの開発費用開発日数モーション開発費用画像スライダーやサイト内フェードイン・フェードアウト等の動きを作成する費用開発日数ドメイン・サーバー費用ホームページを公開するスペースやURLの使用料金契約内容 ※上記は弊社の例、写真や動画の撮影、記事の作成等が必要な場合は別途費用が発生します。 費用を抑えるための3つのポイント 情報（ページ数）を整理する ホームページ制作では、ページ数が増えるほど費用が上がる傾向があります。情報量が多くなく、カテゴリーの類似した項目の場合はページを分けずにまとめることをご提案しています。 参考例 代表メッセージ、会社概要、沿革、アクセスを「会社情報」として1ページにまとめる 複数ある事業を個別で紹介せずに「一覧表示」でまとめて紹介する 実績、お客様の声、よくある質問等は制作せずに、後日情報が揃った時点で追加制作する 機能（システム開発やモーション開発）を見直す ホームページ制作費用は、どれだけの機能を実装するかでも大きく変わります。特に自社での更新を可能にするCMS（ワードプレスなど）の導入は便利ではありますが、頻繁に更新する予定がなければ導入しなくても問題はありません。初めての制作では、「本当に必要な機能だけ」に絞ることをご提案しています。 参考例 新着情報が不要、サイトの更新頻度が低いようならCMSを導入しないで、都度追加で変更依頼する お問い合わせフォームも必要がなければ設置しない サイト内検索機能は記事が増えてから実装する 画像にスライド機能を使用せず一覧で表示する LP（ランディングページ）での制作も検討する ランディングページは1ページ内に全ての情報を収めた特集などによく使われるページ。情報提供よりも申し込みに特化したページではありますが、ターゲットを明確にした小規模ホームページとしても利用は可能です。全体的にコンテンツの量が少ないようであれば、構成自体を変更してしまうこともご提案しています。 まとめ：初めから完璧なホームページに仕上げる必要はありません ホームページは一度作って終わりではなく、運用していく中で適切に調整していくことが重要です。訪問者の反応や事業の成長に合わせて、デザインや機能を追加・変更することで、より効果的なサイトへと進化させることができます。 弊社のホームページも制作当初はトップページのみの簡易的なサイトでした。まずは「作ること」に集中し、必要最低限のページと機能でスタートするのをお勧めしています。

背景画像のぼかし処理や、モーダルウィンドウの背景などを実装する際に、画像処理や、透過画像等で対応していた部分をCSSのみで解決できる方法があったのでメモ。 CSS .bg__image { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); } ぼかし以外にも色変化のようなグラフィック効果を適用することもできます。指定した要素の背後にあるすべてに適用されます。 関数名効果値blurぼかし0px 〜 10pxbrightness明るさ0%～contrastコントラスト0%～drop-shadow影grayscaleモノクロ0% ～ 100%hue-rotate色相回転0deg ～ 360deginvert階調0% ～ 100%opacity透過0%～sepiaセピア0% ～ 100%saturate彩度0%～ backdrop-filterの使い方解説！CSSでグラスモーフィズムを実装！

ワードプレスのリビジョン機能は過去の投稿を履歴として残しておく機能です。誤ってブラウザを閉じてしまったり、違えた内容で保存してしまった際に、過去の投稿内容に復旧できるため、とても便利なのですが、そのままにしておくと延々と履歴が溜まり、サイト自体の表示が遅くなることもあるため、制御方法をメモ。 wp-config.php（PHP） define('WP_POST_REVISIONS', 5); 末尾の数値を残しておきたい履歴数を設定。サーバーによっては「wp-config.php」ファイルの書き込みが禁止されているものもあるため、その場合は各種FTPソフト等でパーミッションを「600」に変更して書き込みを許可したのち、元に戻します。 尚、設定前に作成されたリビジョンは上記のコードでは消えないため、別途データベースを編集するか、プラグインで対応する必要があります。

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