東京・小金井市のWEB制作会社の豆知識

WordPressは定期的なアップデートが推奨されていますが、「アップデートした直後にサイトが真っ白になった」「管理画面に入れなくなった」といったトラブルがないわけではありません。実際に弊社でも、「WordPressをアップデートしたら見れなくなってしまった」というご相談を何度か受けています。アップデートやバックアップはプラグインやボタン一つで実行できる一方で、復旧作業はわからないという方が多いのも事実。本記事では、WordPressアップデートで不具合が発生した場合の対応方法をメモ。 WordPressのアップデートで不具合が起きる2つのパターン アップデートによるトラブルは、「プラグイン・テーマのアップグレードで壊れる場合」と「WordPress本体（コア）のアップデートで壊れた場合」の2種類に分けられます。復旧作業で最も重要なのは、「どちらが原因かを誤らないこと」です。 プラグイン・テーマのアップグレードで壊れた場合 プラグインやテーマをアップデートした直後に動かなくなったのであれば「プラグイン・テーマ」が原因です。 全体の流れ wp-config.phpをデバッグモードに切り替える エラーメッセージから対象プラグインを特定 プラグインを無効化・ダウングレード 公式アナウンスを確認し、修正を待つ or 代替を検討 wp-config.php をデバッグモードに切り替える 白画面のままでは原因が分からないため、まずエラーを表示させます。ワードプレスディレクトリの直下にある「wp-config.php」をFTPでダウンロードし、下記の部分を書き換えます。 wp-config.php //書き換え前 define('WP_DEBUG', false); //書き換え後 define('WP_DEBUG', true); ファイルが上書きできない場合は「パーミッション（ファイル権限）」による場合も多いので、FTPソフトでファイル権限を確認、「444」等であれば「644」等に一時的に変更してから、上書きします。 エラーメッセージからプラグインを特定する デバッグモードを有効にすると、エラーが表示されます。下記の場合は「/wp-content/plugins/sample-plugin/」から「sample-plugin」が原因と判断できます エラーメッセージ例 Fatal error: Uncaught Error: Call to undefined function xxxx() in /wp-content/plugins/sample-plugin/sample.php on line 123 プラグインを無効化・ダウングレード FTPで該当するプラグイン（テーマ）のフォルダ名を変更します。（例：_sample-plugin 等）これにより、強制的にプラグインが無効化されます。無効化した後は手元にあるアップグレード前のバックアップファイルをアップロード。これで、不具合の発生する前に戻ります。 公式アナウンスを確認し、修正を待つ or 代替を検討 公式サイトに修正方法が掲載されていれば、確認して対応。まだ情報が無いようであれば、修正版を待つか、別のもので代用ができないかを検討。使用が必須のものでなければ、今後は使用しない選択も有効です。 WordPress本体（コア）のアップデートで壊れた場合 プラグイン・テーマの更新をしていな状態で、本体をアップグレードしたら動かなくなった場合は本体のアップデートが原因です。 本体のアップデート時にサイトが表示されなくなった場合の対処法も、基本的にはプラグイン時と同様ですが、この場合は本体自身の不具合というよりも、新しいプログラムに対応できなくなったプラグイン（テーマ）の影響となる場合が多いので、「非対応のプラグイン（テーマ）の継続」が必須かどうかで対応方法は変わります。 プラグインの継続が必須でない場合、前述の③項目のリネームまでを行い、プラグインのアップロードを保留。代わりになるプラグインを探すか、機能の実装自体を諦めます。デザインやサイトの運営に影響の少ない、解析系プラグインや圧縮系のプラグインが対象になる場合が多いです。 反対に、プラグインの使用が必須の場合は、本体をダウングレードして完全復旧する方法が必要となります。専用のプラグインを使用する方法もありますが、管理画面に入れない場合もあるため、手動による方法で紹介。 全体の流れ 同一ディレクトリにWordPressを再インストール wp-config.php をアップデート前のものに戻し、追加したデータベースを削除する 公式アナウンスを確認し、修正を待つ or 代替を検討 同一ディレクトリにWordPressを再インストール ワードプレスを稼働中のサイトに再インストールし、直前まで使っていたバージョンまでアップデートを進めます。ワードプレスを再インストールする際に、本体のプログラムファイルは上書きされますが、インストール済みのテーマやプラグイン、アップロードしたファイルは削除されません。サーバーの「簡単インストール」からでも実行は可能ですが、再インストール時のデータベースは新しいものを用意し、稼働中のデータベースに上書きされないよう注意が必要です。※作業前にバックアップを取っておくと安心です。 wp-config.php をアップデート前のものに戻し、追加したデータベースを削除する 再インストールしたワードプレスのデータベースには稼働中の内容が入っていませんし、設定も新しい内容になっています。そのままでは使えないため「wp-config.php」を稼働時の内容に書き換えて、稼働中だったデータベースと入れ替えます。 この時に、phpmyadmin等で新しく作成したデータベースを操作して、稼働中のデータベースの内容に合わせる（インポートする）ことも可能ですが、「認証用ユニークキー」もあり、「wp-config.php」の編集は必要になるので、入れ替えの方が工数を減らせます。 データベースを入れ替えた後は、不要になったデータベースを削除します。 公式アナウンスを確認し、修正を待つ or 代替を検討 サイトが元に戻った後は、公式サイトに修正方法が掲載されていれば、確認して対応。まだ情報が無いようであれば、修正版を待つか、別のもので代用ができないかを検討します。 尚、修正版が無いからと本体のアップデートを永続的に止めるのはお勧めできません。本体のアップデートを止めるのは一時的対応であり、恒久的には推奨されません。 まとめ WordPressのアップデートで不具合が起きても、「原因の特定」→「一次復旧」→「今後の対応」の順序を守れば、営業を止めず安全に復旧できます。 特に、wp-config.php とデータベースを組み合わせた復旧方法は、プラグインの使えない場合の移転作業でも非常に有効であり、知っておくと安心です。

「検索エンジンからのアクセスが減っている」「PVがなかなか伸びない」こうした悩みをお持ちの企業様は多いのではないでしょうか。実際に弊社のサイトでも、AIによる検索要約やゼロクリック検索の増加により、以前と比べて訪問者数は減少しており、PVを増やすこと自体が難しくなっている状況です。しかしながら、ホームページの目的はPVを増やすことそのものではありません。特にBtoBサイトやサービスサイトで、最終的に必要なのはお問い合わせや資料請求といった「見込み客の獲得」です。本記事では、アクセスが減る中でも、少ない訪問者からリードを獲得するために実際に行った施策を紹介します。 まずは結果から｜2024年と2025年の実績比較 実績比較表 指標2024年2025年訪問者数18,339人12,942人PV23,573回16,768回お問い合わせ数376件511件お役立ち資料ダウンロード数0件83件CVR（成約率）（お問い合わせ数＋お役立ち資料ダウンロード数）÷ 訪問者数2.05%4.59% 数字が示していること 訪問者数・PVは減少 成果（お問い合わせ数）は増加 CVRは大きく改善 この結果は、アクセスを増やしたからではなく、ホームページの構成を変えたから生まれた結果です。 2025年に向けて行った施策内容の紹介 CTAボタンの改善 これまでCTAボタンは設置していたものの、「視認性が高いとは言えない」「押した先で何が得られるのかが分かりにくい」といった課題があり、訪問者数に対してお問い合わせにつながりにくい状態でした。 実施した施策内容 CTAを常時見える位置に固定 簡易的なアニメーションを付与 文言に「先月の実績」を明記 まず初めに行ったのは、CTAボタンを「常に表示される位置」に固定することです。これにより、「ページは読んでいるが、問い合わせ導線に気づかない」という取りこぼしを防ぐことができました。 次に、CTAボタンに存在に気づいてもらいやすくするために、簡易アニメーションを追加しました。結果として、ユーザー体験を損なうことなくCTAの認知率を高めることができました。 最後にお問い合わせボタンの文言を「お問い合わせ」といった表現から、「今すぐ無料相談する」という形で、費用が発生しないことを明確に伝え、先月の実績数を同時に記載することで安心感の持てる文言へ変更しました。「無料」という言葉と「実績」を入れることで、心理的なハードルが下がり、行動につながりやすくなったと考えています。 無料お役立ち資料（ホワイトペーパー）の設置 以前のホームページでは、お問い合わせフォームのみを主な成果ポイントとしていましたが、実際には、「いきなり問い合わせるほどではない」「まずは情報収集をしたい」「自社で対応できるかを判断したい」という段階の方も多く、そうした層をそのまま離脱させてしまっている状態でした。 そこで、「今すぐ問い合わせたい人」だけでなく、情報収集中のユーザーも見込み客（リード）として獲得するために、無料のお役立ち資料の設置を行いました。 設置したホワイトペーパーの内容 WordPressの投稿方法マニュアル ホームページの簡易セルフ診断 会社パンフレット いずれも、もともと社内や顧客向けに配布していた資料でしたが、「ダウンロードできる形式」を追加するだけで、情報収集中のユーザーもリードとして獲得できるようになりました。 ブログカテゴリーの追加とランキング表示 以前の記事は、備忘録程度に技術的な内容を記録しているのみで、自身で読み返す際に便利な事や、専門性が高い一方で、ご依頼される方からの関心は低くく、不安や疑問を解決できる内容ではありませんでした。 そこで、新たに「疑問・質問・豆知識」カテゴリーを追加し、実際の商談・相談時にあった質問への回答や、よく誤解されやすいポイント、事前に知っておくと役立つ考え方をテーマとした内容も掲載するように改善、お問い合わせ前の不安を解消できる材料となるように変更しました。 併せて行った施策｜ランキング（読まれた回数）の表示 カテゴリーの追加と同時に、読まれた回数をもとにした記事ランキングも導入、「多くの人に読まれている記事」を可視化することで、ホームページ内の回遊率を上げるとともに、安心して読み進められるようにしました。 まとめ｜PVに振り回されないホームページ運用へ 今回ご紹介した施策は、どれも特別なツールや高度な技術を使っていません。それでも成果につながったのは、「PVを増やす」ことよりも、少ないアクセスを成果につなげる視点に切り替えたからです。 まずは取り入れたい3つの施策 CTAを常に見える位置に置き、「無料」や「実数」を明記する 問い合わせ以外の選択肢（ホワイトペーパー）を用意する ブログ記事を不安解消の材料にできるものにし、アクセスを可視化する PVが減ると不安になるのは自然なことですが、PVを追い続けるだけでは、成果が安定するとは限りません。これからは「増やす」より「活かす」という考え方も取り入れながらホームページを良くしていきましょう。

ホームページを制作する際に、定期的に記事を更新することで検索エンジンに評価され、アクセスが増えるという話を聞き、自身でキーワードを盛り込んだブログを更新されている方も多いと思います。SEO対策というと、まずアクセス解析（Googleアナリティクス）を確認しようと考えがちですが、検索結果での評価や表示状況を把握するためには、サーチコンソールの確認が欠かせません。この記事では、SEO初心者の方でも理解できるように、サーチコンソールの正しい使い方と、弊社で実際に行っている検証の考え方を説明します。 SEO対策にまず必要なのはアナリティクスではなくサーチコンソール SEO対策の目的は、検索結果で適切に表示され、クリックされる状態を作ること。そのためには、検索キーワード、表示回数、クリック数、掲載順位といった検索結果上の情報を把握する必要があります。 アナリティクスは「サイトに来た後の行動」を見るツールですが、サーチコンソールは「検索結果に表示されるまでの状態」を確認するためのツールです。SEO対策を行う場合は、まずサーチコンソールで状況を把握し、その後に必要に応じてアナリティクスを併用する、という順番が基本となります。 まず確認するのはここ。検索パフォーマンスの基本 サーチコンソールを開いたら、まず確認するのが「検索パフォーマンス」の画面です。SEO対策において、この画面を見るだけでも現状把握の大部分は行えます。 この画面で確認する項目 初心者の方が最初に確認すべき項目は、次の4つです。 表示回数 クリック数 平均CTR（クリック率） 平均掲載順位 これらは画面上部のチェックボックスで表示・非表示を切り替えられます。まずはすべてにチェックを入れ、全体像を把握するところから始めます。 まず意識したい考え方 この段階では、数値の良し悪しを判断する必要はありません。「どのような検索キーワードで表示され、どれくらいクリックされているのか」を把握することが目的です。SEO対策の第一歩は、現状を正しく知ることから始まります。 検証には欠かせない「フィルタ機能」の使い方 検索パフォーマンスの数値は、そのまま眺めていても判断が難しいことがほとんどです。そこで重要になるのが、条件を絞って状況を見るための「フィルタ機能」です。全期間・全ページ・全キーワードのままでは、「どこが変化したのか」「何が原因なのか」がわかりません。検証を行う際には「調査対象」を絞って確認することが重要です。 フィルタ機能の基本 検索パフォーマンス画面の上部にある「検索タイプ」「期間」「＋フィルタを追加」から、条件を追加できます。検索タイプは「ウェブ」のままで問題ありません。 フィルタの種類説明期間フィルタ期間を限定して状況を確認したい場合に使用します。「直近28日」と「その前の28日」といった形で比較すると、直近の変化を把握しやすくなります。短期間すぎると数値が安定せず、長期間すぎると変化が見えにくくなるため、まずは28日単位がおすすめ。ページフィルタ特定の記事やページの状況を確認したい場合に使用します。「フィルタを追加」からURLを入力し「URLを完全一致で指定する」ことで個別ページの変化がわかります。検索キーワードフィルタ特定の検索語句に絞って表示状況を確認したい場合に使用します。「フィルタを追加」から検索キーワードを入力し「次を含むクエリ」で想定しているキーワードで表示されているかを確認します。 絞り込み時の注意点 一度に複数の条件をかけすぎない 数値が極端に少ない場合は条件を緩める この数字は良い？悪い？判断の考え方 サーチコンソールの数値は、単体で見ても良し悪しを判断できないことがほとんどです。ここでは、実務でよくある参考例をもとに、考え方を整理します。 表示回数は増えているがクリック数が増えない 表示回数：1,200 → 2,400（約2倍） クリック数：60 → 65（ほぼ横ばい） 平均CTR：5.0％ → 2.7％（低下） 平均掲載順位：8.2 → 8.0（ほぼ変化なし） OKラインの目安 掲載順位が大きく下がっていない（±1〜2位以内） クリック数が急減していない この場合、検索結果には多く表示されるようになっているものの、順位は安定しています。表示回数の増加によるCTR低下はよくあるため、まずは大きな問題はない状態と考えられます。タイトルやディスクリプションは「改善余地があれば検討する」段階です。 表示回数とクリック数が同時に減少している 表示回数：3,000 → 1,800 クリック数：180 → 90 平均CTR：6.0％ → 5.0％（やや低下） 平均掲載順位：5.4 → 9.1（低下） OKラインの目安 一時的な変動（1〜2週間程度）である 他の主要ページに同様の傾向が見られない 順位低下が継続している場合は注意が必要ですが、短期間であれば様子見も選択肢です。競合ページの増加や検索結果の変化など、外的要因も含めて全体の状況確認を優先します。 順位は上がっているが表示回数が増えない 表示回数：220 → 240（ほぼ横ばい） クリック数：18 → 22 平均CTR：8.2％ → 9.1％（改善） 平均掲載順位：15.6 → 9.8（上昇） OKラインの目安 掲載順位が10位前後まで上昇している CTRが改善している 検索需要自体が小さいキーワードの場合、順位改善＝成功と考えて問題ありません。表示回数が少ないこと自体は異常ではないため、関連キーワードや別ページでの展開を検討する段階です。 表示回数は維持されているが、クリック数が大きく減少している 表示回数：3,000 → 3,100 クリック数：180 → 90 平均CTR：6.0％ → 2.9％（大幅低下） 平均掲載順位：5.4 → 5.3（ほぼ変化なし） OKラインの目安 一時的な変動（1〜2週間程度）である 同順位帯の平均CTRとの差が小さい 順位が維持されているにもかかわらずCTR低下が継続している場合は注意が必要です。短期間であれば様子見も可能ですが、3週間以上改善が見られない場合は、タイトルやディスクリプションの見直しを優先的に検討します。 順位が上昇しているにもかかわらず、クリック数が減少している 表示回数：2,000 → 2,800 クリック数：120 → 110 平均CTR：6.0％ → 3.9％（低下） 平均掲載順位：8.5 → 4.8（上昇） OKラインの目安 新規クエリ流入増加による一時的なCTR低下 発生から2週間以内である 順位上昇と反してCTR低下が継続する場合は、検索意図とタイトルのズレが疑われます。短期的な変動であれば経過観察も選択肢ですが、主要キーワードのCTRが回復しない場合はタイトル修正が必要です。 数値は一つだけを見ても判断できません。複数の指標をセットで見ることで、はじめて状況が見えてきます。 参考：CTRの目安について（2026年度掲載順位別の参考） 検索順位クリック率1位39.8%*2位18.7%**3位10.2%4位7.2%5位5.1%6位4.4%7位3.0%8位2.1%9位1.9%10位1.6%11位以下1％未満も珍しくない 上記の数値には「これなら正解」という絶対的な基準はありません。検索需要や業種、掲載順位によって数値は大きく変わります。 Google Click-Through Rates (CTRs) by Ranking Position in 2026 判断できないときに確認するポイント 実際に運用を行っていくうえで、サーチコンソールを見ても明確な結論が出ないケースが多くあります。その場合は、無理に答えを出そうとせず、次のポイントを確認します。 追加で確認したいこと 期間を少し広げてみる 類似ページ（自身のものと、検索に表示される他者のもの）と比較してみる 検索する人のキーワードの使い方が変わっていないか また、Googleのアルゴリズム更新や季節要因など、自分ではコントロールできない要素も存在します。 無理に改善しないという選択 数値が動かない、もしくは理由が特定できない場合、何もしないという選択をすることもあります。安易な修正が、かえって評価を下げることもあるため、無理に施策をするよりも、「状況を見極めること」が重要です。 まとめ｜SEO対策でサーチコンソールを見る意味 SEO対策において重要なのは、検索結果上で何が起きているかを正しく把握することです。そのための基本となるツールが「サーチコンソール」です。まずは数字を正しく見ること、そして判断を急がないことを意識して活用していきましょう。

画像に文字を載せる際に文字を読みやすくするためや、画像の印象を変える際等に「乗算」加工を施す場合があります。以前は、画像を事前に加工していたり、透過処理で似たような効果を得ていたのですが、CSSの「mix-blend-mode」で乗算加工ができるようになっていたのでメモ。 HTML <div class="image_wrap"> <figure><img src="○○.jpg"></figure> <div class="blend-wrap"> <p>乗算の上に乗せた文字</p> </div> </div> CSS .image_wrap { position: relative; display: inline-block; } .blend-wrap p { color: #fff; position: relative; z-index: 1; } .blend-wrap { padding: 2rem; position: absolute; right: 0; bottom: 0; } .blend-wrap::before { content: ''; background: #093177; mix-blend-mode: multiply; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } 乗算の適応範囲が子要素まで及ぶので、使用する際には疑似要素（::before等）を使うなどの工夫が必要です。 SAMPLE 乗算の上に乗せた文字 .image_wrap{ position: relative; display: inline-block; } .blend-wrap p { margin: 0 !important; color: #fff; position: relative; z-index: 1; } .blend-wrap { margin: 0 !important; padding: 2rem; position: absolute; right: 0; bottom: 0; } .blend-wrap::before { content: ''; background: #093177; mix-blend-mode: multiply; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .blogpage .wrap .post_main .wp-block-image { display: inline-block; } .post_sample01, .post_sample02 { position: relative; } .post_sample01::after, .post_sample02::after { content: ''; background: var(--darkcolor); position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0.5; } .post_sample02::after { mix-blend-mode: multiply; } 下記は画像加工の方法による実際の見え方の比較です。色は同じものを使用していますが、透過は合成の仕方が異なるため、若干見え方が異なります。 画像加工で乗算をしたもの（50％透過） CSSで透過したもの（50％透過） CSSで乗算したもの（50％透過） なお、プロパティーの値には乗算の他にも画像加工で付与できる効果が一通り設定できるようです。 効果値通常normal乗算multiplyスクリーンscreenオーバーレイoverlay覆い焼きcolor-dodge焼き込みcolor-burn比較（暗）darken比較（明）lightenハードライトhard-lightソフトライトsoft-light差の絶対値difference除外exclusion色相hue彩度saturationカラーcolor輝度luminosity 乗算などのブレンドモードはCSSの「mix-blend-mode」で解決 Photoshopの乗算とは一体何が起きているのか？

ホームページ制作の打ち合わせなどで「写真の用意が難しいようでしたら、フリー素材で対応できますよ」と言われたことはありませんか？このとき多くの方が、「フリー素材＝無料の素材（写真）」というイメージを持たれると思います。私自身もこの仕事を始めたばかりの頃は、フリー素材という言葉を聞いて「無料で使える便利な写真のこと」だと思っていました。しかしながら、実務に関わるようになってから、この認識が少し違っていたことに気づきましたので、初心者の片向けにフリーの意味を解説します。 「フリー素材」のフリーは「無料」という意味ではない 「フリー素材」の フリー（free） には、必ずしも「無料」という意味は含まれていません。ここでのフリーは、「条件の範囲内であるならば（無料、または一度の購入で複数用途に）利用可能」といった意味合いで使われています。そのため、「無料で使えるもの」「料金を支払って使うもの」があるというのが実際のところです。 ホームページ制作で使われる素材の実態 ホームページ制作で使われる写真やイラストには、いくつかの種類があります。 完全に無料の素材 誰でも無償で使える素材ですが、「商用利用ができない」「使い方に制限がある（リンクの設置等）」といったケースもあります。 購入して使う素材（ロイヤリティフリー素材） 制作現場でよく使われているのがこちら。一度購入すれば、追加料金なしで使える素材ですが、購入自体は有料です。多くの制作会社では、このような素材を案件ごとに購入して使用しています。 なぜ無料素材ではなく、購入した素材を使うのか ホームページ制作では、無料で手に入る素材ではなく、あえて購入した素材を使うことがあります。理由はとてもシンプルで、依頼者の方に安心してホームページを使ってもらうためです。 購入した素材の特徴 商用利用がはっきり認められている 著作権に関する条件が分かりやすい 公開後も安心して使い続けられる 無料素材がすべて危険というわけではありませんが、条件が合わなかったり、素材の権利が本当にクリアか分からない場合や、後から利用ルールが変わることもあります。企業のホームページとして長く使うことを考えると、最初から条件が明確な素材を選ぶ方が安心という判断になります。 その結果、見積りに素材費や諸経費が含まれることがあります こうした理由から、ホームページ制作の見積りには「素材費」や「諸経費」といった項目が含まれることがあります。これは、「写真やイラストを案件ごとに購入しているが、使用する素材の点数や内容が事前に確定しにくい」といった事情があるため、素材の購入費用をまとめて計上しているためです。 「フリー素材と聞いていたのに、なぜ費用がかかるのか」と感じられるかもしれませんが、安心して使える素材を選ぶための、必要なコストだと考えていただけると分かりやすいと思います。 まとめ フリー素材＝無料、ではない フリーとは「条件の範囲内であるならば（無料、または一度の購入で複数用途に）利用可能」という意味 ホームページ制作では、安心のために素材を購入することがある 見積りに素材費や諸経費として購入費が含まれる場合がある 分からない点があれば、見積りの段階で遠慮なく確認してみてください。きちんと説明してくれるかどうかも、信頼できる制作会社を選ぶうえでの大切なポイントです。

ホームページ制作を相談した際、「思っていたより見積金額が高い」と感じた経験はありませんか。これは、依頼者側がホームページに掲載されていた内容を見間違えているからでも、制作会社が不当に高い金額を提示しているからでもありません。多くの場合、「ホームページ制作に含まれる作業内容の捉え方」や「制作側と依頼者側で想定している内容の違い」が原因です。本記事では、見積金額が想定と異なる理由を、制作の実情を踏まえて解説し、ホームページ制作を検討している方が、見積内容を納得した上で依頼できるようお手伝いいたします。 見積金額が想定とズレる主な理由 依頼者の想定している「ページ数」が実際に必要なページ数より少ない 依頼者の方がページ数を考える際、次のような「目に見えるページ」だけを数えるケースが多く見られます。 依頼者の想定しているページ構成例 トップページ 会社概要 サービス紹介 お問い合わせ 上記の場合、「4ページのホームページ」という認識で相談をいただきますが、実際のホームページ制作では、以下のようなページもほぼ必要となります。 見落としがちなページ例 個人情報保護方針（プライバシーポリシー） 利用規約（サービス等の場合） 特定商取引法表記（該当する場合） お問い合わせ内容の確認、送信完了ページ 404ページ（ページが存在しない場合の表示） これらは普段あまり意識されていませんが、制作・デザイン・実装が必要となるページです。 お問い合わせページは「1ページ」ではない 特に誤解されやすいのが、お問い合わせページです。多くの方は「お問い合わせは1ページ」と考えますが、実際には以下のような構成になります。 お問い合わせを構成するページ 入力画面 内容確認画面 送信完了画面 つまり、3画面分の設計と実装が必要になります。制作の見積は「コンテンツの数」ではなく、制作の必要な工数（ページ数）を基準に算出されるため、この差が金額のズレにつながります。 新着情報での一覧・詳細ページの存在が想定されていない ブログやお知らせ、実績紹介などを導入する場合、「記事一覧ページ」「記事カテゴリーページ（必要の場合）」「記事詳細ページ」という複数のページテンプレートが必要になります。 お問い合わせと同様に「コンテンツが1つだから1ページ分」と考えがちですが、制作側は、問題なく更新が行っていけるように、初期段階からしっかりとした設計で考えます。 素材の用意（写真撮影・記事ライティング）が必要となる場合がある 見積金額には、ページ制作そのものだけでなく、下記のような素材作成の作業が含まれる場合があります。 素材の用意として含まれるもの 写真撮影（商品・人物・店舗・社屋など） 写真の選定・補正 原稿作成・ライティング 文章構成の整理・言い回しの調整 依頼者の方は「文章や写真は自分で用意するつもりだった」と思っていても、「内容が未確定で素材の提供が必要」「ご用意いただいた素材・原稿がそのままでは掲載に適さない」「プロの視点で整理・補足が必要」と判断されるケースでは、制作側が作業範囲に含めることがあります。 これらは目に見えにくい工程ですが、実際には打ち合わせ・構成作成・修正対応などの工数が発生するため、見積金額に反映されます。 使い勝手や印象を良くするための動きや演出が必要となる場合がある 見積金額には、単に情報を表示するだけでなく、訪問者の使い勝手や印象を向上させるための動き・演出が含まれることがあります。 動きや演出として実装されるもの スクロール時のアニメーション ボタンやリンクの動き（ホバー効果など） 表示切り替えやフェードなどの演出 スマートフォンでの操作性を高める調整 これらは一見すると小さな要素に見えますが、実際には設計・実装・動作確認といった工程が必要なため、見積金額に反映される場合があります。 特に、制作会社の実績紹介において、動きや演出を取り入れたサイトが多数掲載されている場合は「一定の動きや効果を含めた表現」を前提に制作されることが予想されます。 依頼者の方も、そうした実績を見た上で問い合わせをされていることが多く、結果としてページには動きのある表現が含まれていると考えていることが多いのです。 見積金額のズレを防ぐためにできること まずは気軽に問い合わせてみる 見積金額のズレを防ぐうえで、最も確実な方法は早い段階で一度相談してみることです。「この内容だと、どのくらいの規模になりますか？」 「何が見積に含まれますか？」 といった簡単な質問だけでも、ページ数の考え方や作業範囲、素材作成や動き（演出）の有無といった点をまとめて確認できます。 問い合わせは必ずしも依頼を前提とするものではありません。認識を揃えるための相談として、気軽に活用することをおすすめします。 想定ページ数よりも5ページ程度多く考えておく（補助的な考え方） 問い合わせをする前段階の目安として、想定しているページ数よりも5ページ程度多めに考えておくのも有効です。 個人情報保護方針のページや完了画面などは、普段あまり意識されなくてもページ制作には含まれるため、最初から少し余裕を持って考えておくことで、見積金額を見た際のギャップを小さくできます。 まとめ ホームページ制作の見積金額が想定と異なる理由の多くは、ページ数の考え方、制作側と依頼者側の前提の差にあります。 見積金額は「高い・安い」だけで判断するのではなく、どこまで含まれているのかという視点で確認することが、納得のいくホームページ制作につながります。 制作会社としても、できる限り分かりやすい説明を心がけていますので、疑問点があれば遠慮なく相談してみてください。

ワードプレスのようなCMSを導入する場合、投稿カテゴリー毎にデザイン（色、形等）を設定しておいても、利用者側で自由にカテゴリーの項目数を増やされた場合に、初期設定ものになる事も多く、結果として設定したデザインが使用されないことが多いため、項目数を増やしても、設定したデザインをループさせて適応させる方法をメモ。 CSS .category01 { background: #f00; color: #fff; } .category02 { background: #00f; color: #fff; } .category03 { background: #ff0; } CSS側でループさせたいデザインを設定。参考例は3パターンを用意しています。 PHP（index.php等） <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <li> <span><?php the_time('Y.m.j') ?></span> <?php $categories = get_the_category(); $raw_class = ''; $loop_class = ''; if($categories){ $categories = $categories[0]; $raw_class = $categories->slug; if(preg_match('/^category(\d+)$/', $raw_class, $matches)){ $number = (int) $matches[1]; $mod = (($number - 1) % 3) + 1; $loop_class = 'category'.str_pad($mod, 2, '0', STR_PAD_LEFT); } echo '<span class="'.esc_attr($raw_class).' '.esc_attr($loop_class).'">'.esc_html($categories->cat_name).'</span>'; } ?> <a href="<?php the_permalink() ?>"><?php the_title(); ?></a> </li> <?php endwhile; else: ?> <?php endif; ?> 前提条件として、ルールを設けないとループ処理が行えないため、今回はスラグ名(slug)を「category○○（○○は数字）」の形式に固定。取得したスラグ名から「preg_match」関数で数字のみを取り出し、設定したデザイン数で除算することでループした値（$loop_class ）をHTMLタグに追加設定することで、デザインのループを実現しています。 また、今回はスラグ名を使用して実装しているますが「説明（$categories->description）項目」に入力して使用する方法も可能です。 尚、ループ処理自体はカテゴリーIDを使用することでも実装は可能ですが、カテゴリーIDは他の項目と共有しているため、綺麗に連番にならない場合もあります。

ホームページ制作をご相談いただく際、「WordPressなら、自分で簡単に更新できますよね？」というご質問をいただく機会があります。もちろん、WordPressを導入することで、自身での更新が可能にはなりますが、「簡単に更新できる」という言葉の中には、多くの場合、「専門知識がない人でも、自由に、綺麗にデザインされたページが作れる」といった期待が含まれており、この認識が「思っていたものと違う…」と感じてしまう原因となることもあります。今回は、実際の2つの投稿ページを例に、「簡単に更新できる」と言われているものの正体を整理してみます。 今回紹介する2つのページについて まず実際のページを見ていく前に大切な前提条件を説明しておきます。 どちらも WordPressの投稿ページ 専門知識のない依頼主自身が投稿 HTMLやCSSなどのコード編集はなし 管理画面から通常の投稿操作のみ つまり、ツールは同じ、更新者の条件も同じ。それでも完成したページには、はっきりとした違いが出てきます。 例A：WordPress標準に近い「簡単に更新できるページ」 まずは、制作者を含め、多くの方が更新できるようにしてほしいと聞いて一番最初に思い浮かべる基本的な投稿ページです。 自由に文章を書き、写真を入れ、公開するといった形式ですので、WordPressを初めて触る方でも、操作自体は難しくありませし、自由に投稿が可能ですが、画像サイズを前もって調整したり、HTMLやCSSといったソースコードを操作することなく、複雑なレイアウトのデザインにするのは難しいでしょう。 特徴 WordPress標準に近い投稿形式（見出し・本文・画像を自由に配置できる） 特別な入力ルールはなく、投稿者の自由度が高い 実際に起きやすいこと 情報の順番やレイアウトが人によって変わる 写真サイズや文章量にばらつきが出る 綺麗にまとまったページになるかどうかは投稿者の能力に依存する 東京エコサービス「エココミュ」 例B：依頼者が期待している「簡単に更新できるページ」 一方で、もうひとつの例は印象が大きく異なります。 このようなページを見て、「WordPressなら、このような感じで自分で簡単に作れる」と感じる方は多いと思いますが、こちらはどういった内容の投稿を行っていくのかをしっかりとヒアリングし、それに合わせた専用カスタマイズを行っています。そのため、投稿者が「決められた項目を選択し、文章や写真を入れるだけ」で簡単にデザインされたページが作成できるという状態に作られています。 特徴 入力する内容をあらかじめ決定し、専用のブロックや入力欄が追加されている レイアウトや順番は固定されている 投稿者の自由度は制限されるが、どのページもクオリティが揃っている 入力項目が増えた分だけ操作の手間は増える Hidden Japan 「WordPressなら簡単」の正体 例から見えてくるように、依頼者と制作者が使っている「簡単」という言葉は、指している対象が違います。 依頼者が期待している「簡単」は、誰でも、専門知識がなく、自由に入力しても、結果として綺麗で整ったページが完成すること、つまり「成果物の完成度」が保証されている状態を指しています。 一方で制作者が言う「簡単」とは、投稿画面から、特別な操作を必要とせずに更新できること、つまり「操作のしやすさ」を意味しています。 同じ「簡単」という言葉でも、一方は「結果」を、もう一方は「手法」を指しているため、ズレが生じるのです。 まとめ：簡単更新には、情報の共有が必要 「簡単に更新できるサイトを作りたい」という要望は、決して無理なものでもありませんが、情報を共有しない限りすれ違いは続きます。 ズレを生まないために、制作前にすべき確認事項 どんな内容を更新したいのか 誰が更新するのか（専門知識の有無も含め） 見た目はどこまで統一したいのか どこまで自由に書きたいのか 自身での更新をお考えの場合は、「簡単に更新できるようにしてほしい」だけではなく、どのような内容を更新していくかを共有することで、一層満足感の高いホームページ制作ができあがります。

採用サイトの相談を受ける際、「コンテンツ（中身）をどのようすれば良いのでしょうか？」という質問をいただくことがあります。弊社では提案書の段階で、制作を予定しているページ構成をあらかじめリストとして提示していますが、すべての企業が同じ準備をされているわけではありません。そこで今回は、採用サイトをつくる上で「どのような情報を掲載すればよいのか」という点に絞り、見た目以上に重要となる「求職者視点の理解」と「企業の魅力の伝え方」の2点を解説していきます。 企業の核となる情報を、求職者の視点で整理する 採用サイトの役割は、まず 「不安をひとつずつ取り除き、安心して応募できる状態に導くこと」 にあります。そのためには、企業が伝えたい情報ではなく、求職者が知りたい情報 を軸に内容を整理することが欠かせません。実際に求職者がよく閲覧するコンテンツを分析すると、以下のような優先順位が見えてきます。 求職者が見たいページ TOP5 ページ内容募集要項（採用条件）応募を判断するための最重要情報。給与・勤務時間・休日・勤務地など仕事内容・職種紹介現場の役割・自分が担当する業務の具体像。福利厚生働くうえでの安心材料。特に子育て関連制度、資格支援、手当などが注目されやすい。事業内容将来性・安定性・社会的意義を判断する材料。抽象的すぎる説明は避け、何をしている会社なのかを端的に伝える必要があります。企業情報拠点や従業員数、売り上げなど 求職者が最も気にしているのは「自分はここで働けるのか」「どんな日常が待っているのか」という点です。採用サイトで提供すべき情報は、求職者が自分の未来を具体的にイメージできる材料となることが大切です。 抽象的な魅力ではなく、具体的な魅力を言語化する 企業の魅力は、外から見ている求職者のほうが感じやすいことがあります。一方で、内部の人は「特別なことはない（していない）」と考えがちで、それゆえ魅力が埋もれてしまうことも少なくありません。「現場で日々行われている習慣」「社員の成長をサポートする制度」「チームの連携や空気感」は、企業にとっては当たり前でも、求職者には応募を後押しする魅力的な材料になる場合もあります。その魅力を掘り起こすために効果的なのが次の3つです。 社員インタビュー 入社理由、仕事内容、やりがい、苦労、将来像など、本人の言葉だからこそ伝わるリアルがあります。企業の価値観や働く文化を、押し付けではなく「第三者の視点」で自然に伝えられます。 対談（座談会）コンテンツ 複数人での会話は、職場の雰囲気・人間関係・コミュニケーションの距離感などが伝わりやすく、応募前の不安を大きく和らげます。「どんな人たちと働くのか」を立体的に見せられるため、採用サイトの中でも人気の高いコンテンツです。 社員に密着コンテンツ（一日の流れ） 社員が実際にどのようなスケジュールで働いているのかを時系列で見せることで、働き方のイメージが一気につかみやすくなります。業務量やメリハリ、休憩の取り方、他部署とのやり取りなど、文字だけでは伝わりにくい「働くリアル」を視覚的に理解してもらうことができます。ミスマッチ防止にも効果的で、安心感を生むコンテンツです。 こうしたコンテンツを通じて、企業自身も「魅力はすでに存在していて、気づかれずに埋もれているだけ」ということを再確認できるようになります。 情報を集める前に、「利用者の声」も欠かせない 採用サイトをつくる際は、年齢や立場の違いによって「魅力の感じ方」や「求める情報」が大きく異なるため、制作側の思い込みだけで判断するのは危険です。現在の求職中の方に響く内容になっているかを確認するためにも、実際に直近で入社した方の声を取り入れながら内容を確認していくことも非常に重要です。 直近3年間程度で入社者に「応募の決め手」をアンケートする どの情報が役に立ったのか どこで不安が解消されたのか 逆に、足りないと感じた情報はあるかのか、それは何だったのか これらの回答には、採用サイトの制作ポイントがそのまま詰まっています。企業が想定した魅力と、求職者が魅力と感じる点には必ず差があり、そのズレを埋めることでサイトの精度が大きく上がっていきます。 まとめ 採用サイトは、企業の魅力を装飾して見せる場所ではありません。「すでに存在している魅力を、求職者の視点で丁寧に言語化する場」 です。 求職者が求める情報を軸に、社員の声・現場のリアル・企業文化を適切に組み合わせることで、ただの会社紹介ではなく、「ここで働いてみたい」と感じてもらえる採用サイトへと変わっていきます。

ホームページ上にビフォーアフターの画像を掲載する場合に、同じ画角の画像を対比させて表示し、画像上のスライダーを動かすことで変化を表現しているものがありましたので、実装方法をメモ HTML <div class="ba-container"> <img src="○○.jpg" alt="Before"> <div class="ba-overlay"><img src="△△.jpg" alt="After"></div> <div class="ba-slider"></div> </div> CSS .ba-container { position: relative; width: 900px; height: 600px; margin: 0 auto; overflow: hidden; user-select: none; } .ba-container img { width: 100%; height: 100%; object-fit: cover; } .ba-overlay { position: absolute; width: 50%; height: 100%; overflow: hidden; top: 0; left: 0; } .ba-slider { position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background: #fff; cursor: ew-resize; z-index: 10; transform: translateX(-50%); } @media screen and (max-width: 980px) { .ba-container { width: 100%; height: 300px; } } jQuery $(function(){ var $container = $('.ba-container'); var $overlay = $('.ba-overlay'); var $slider = $('.ba-slider'); var dragging = false; // 画像幅をコンテナに合わせる $overlay.find('img').css({'width': $container.width() + 'px'}); // スマホ用タッチイベント if($(window).width() < 980){ $container.on('touchstart', function(e){ dragging = true; }); $container.on('touchend touchcancel', function(e){ dragging = false; }); $container.on('touchmove', function(e){ if(!dragging) return; var touch = e.originalEvent.touches[0]; moveSlider(touch.pageX); e.preventDefault(); // 画面スクロール防止 }); }else{ $slider.on('mousedown', function(e){ if($(window).width() >= 980){ dragging = true; } }); $(document).on('mouseup', function(){ dragging = false; }); $(document).on('mousemove', function(e){ if(!dragging) return; moveSlider(e.pageX); }); } function moveSlider(pageX){ var offset = $container.offset(); var relativeX = pageX - offset.left; if(relativeX < 0) relativeX = 0; if(relativeX > $container.width()) relativeX = $container.width(); $overlay.width(relativeX); $slider.css('left', relativeX); } }); ビフォーアフターの2枚の画像を重ねて配置。上側の画像の表示領域（幅）を変化させることで、画像が切り替わっているように見せています。 SAMPLE .ba-container { position: relative; width: 100%; height: 500px; margin: 0 auto; overflow: hidden; user-select: none; } .ba-container img { width: 100%; height: 100%; object-fit: cover; margin: 0 !important; } .ba-container img.before { filter: grayscale(1); } .ba-overlay { position: absolute; width: 50%; height: 100%; margin: 0 !important; overflow: hidden; top: 0; left: 0; } .ba-slider { position: absolute; top: 0; left: 50%; width: 4px; height: 100%; margin: 0 !important; background: #fff; cursor: ew-resize; z-index: 10; transform: translateX(-50%); } @media screen and (max-width: 980px) { .ba-container { width: 100%; height: 300px; } /* スマホ用サイズ調整 */ } $(function(){ var $container = $('.ba-container'); var $overlay = $('.ba-overlay'); var $slider = $('.ba-slider'); var dragging = false; // 画像幅をコンテナに合わせる $overlay.find('img').css({'width': $container.width() + 'px'}); // PC用マウスイベント $slider.on('mousedown', function(e){ if($(window).width() >= 980){ dragging = true; } }); $(document).on('mouseup', function(){ dragging = false; }); $(document).on('mousemove', function(e){ if(!dragging) return; moveSlider(e.pageX); }); // スマホ用タッチイベント if($(window).width() < 980){ $container.on('touchstart', function(e){ dragging = true; }); $container.on('touchend touchcancel', function(e){ dragging = false; }); $container.on('touchmove', function(e){ if(!dragging) return; var touch = e.originalEvent.touches[0]; moveSlider(touch.pageX); e.preventDefault(); // 画面スクロール防止 }); } function moveSlider(pageX){ var offset = $container.offset(); var relativeX = pageX - offset.left; if(relativeX < 0) relativeX = 0; if(relativeX > $container.width()) relativeX = $container.width(); $overlay.width(relativeX); $slider.css('left', relativeX); } }); サンプルでは同じ画像を使用し、元画像をグレースケールにすることで切り替わるの様子が分かるようjにしています。

採用サイトの制作を進めていく中で、「ホームページ型（複数ページ型）が良いのか？」「ランディングページ（LP）が良いのか？」という相談を非常に多く受けます。こういった場合、どちらが正しいということはほとんどありませんが、採用サイトを作る目的・職種数・集客に対する考え方によって最適な形式が変わると弊社では考えています。この記事では、採用サイトで希望通りの成果を出すために、ホームページとランディングページの明確な違いと、実際の採用サイト（新生テクノス／小池設備）を例に比較しながら解説します。 職種が多いならホームページ型、1つならランディングページ型がお勧め 目的や集客方法によって変わってくることはありますが、弊社では、複数職種の募集を希望される場合は、職種を整理して掲載でき、求職者に会社全体の理解を深めてもらいやすい「ホームページ型」を、1種類の場合は、1ページ完結型で募集職種に特化して訴求のできる「ランディングページ型」をお勧めしています。 ホームページタイプホームページ型ランディングページ型条件・職種が複数ある・SEOからの流入も強化したい・会社の理解を深めたい・1つの職種だけ急募したい・広告で応募を取りたい・応募率を上げたい ホームページ型採用サイトの特徴と具体例 Webページ型は、複数のメニューを持つ「サイト構造（階層構造）」を持ちます。 新生テクノス株式会社－「ホームページ型」的構成 新生テクノス株式会社の採用サイトは、職種紹介・事業内容・施工実績・会社概要・福利厚生・キャリアアップ・職場環境・Q&Aなど、採用情報を多層メニューで整理。PRムービーや社員インタビューを活用し、さまざまな角度から会社のことを伝えるとともに、新卒・インターンなど幅広いターゲットに対応。全体として「閲覧者（求職者）に会社のことをよく知ってもらう」ための、「情報の網羅性・深さ」を重視した構成になっています。 特徴 「職種紹介」「事業内容」「数字で見る」「キャリア・研修制度」「職場環境」などを多層メニューで整理 PRムービーや社員インタビューなど、多角的に会社像を伝える 新卒・インターンなど幅広いターゲット対応 メリット 会社理解を深められる SEOに強く自然検索での集客が可能 複数職種の採用に向く デメリット 応募ボタンが埋もれやすい 回遊が発生し、応募まで時間がかかる 新生テクノス株式会社｜採用サイト ランディングページ型採用サイトの特徴と具体例 ランディングページ型は 1ページ完結の縦長ページ が基本。最適化されたストーリーで、応募まで一直線に進めます。 小池設備 －「ランディングページ型」的構成 小池設備の採用サイトは、メニュー構成を「会社紹介」「社員の声」「仕事内容」「研修制度」「福利厚生」「エントリー」とシンプルに整理。内容もコンパクトで、必要情報にすぐアクセスでき、応募フォームにもすぐ移動できる。サイト内では「強み（特徴）」「資格取得サポート」「休暇制度」「住宅サポート」「手当」など、必要最低限のメリットや働き方の魅力を素早く伝えて、特定の対象者に向けて応募を促す構成になっています。 特徴 働くメリットや手当、資格支援などを前面に訴求 ページ構成がシンプルでスマホでも見やすい 応募ボタンが明確で、視線移動がシンプル インタビューは別ページに切り出し、LPの縦長構成を邪魔しない メリット 応募率（CVR）を最大化できる 求人広告との相性が良い ターゲットが明確で訴求がしやすい デメリット SEOには弱い 会社理解は浅めで、ミスマッチの可能性あり 企業の広がりやブランドを伝えにくい 株式会社小池設備｜採用サイト ホームページ型とランディングページ型は「目的に応じて使い分ける」 前章で紹介した新生テクノス株式会社（ホームページ型）と小池設備（ランディングページ型）の事例からも見えてくるように、ホームページ型とランディングページ型の採用サイトにはそれぞれ得意な用途があり、単純にどちらか一方を選ぶのではなく、目的に応じて使い分けることが大切 です。下の表に、採用目的ごとに適した形式を整理しました。 採用サイトの目的ホームページ型ランディングページ型会社理解を深めたい◎△特定職種の応募率を上げたい△◎SEOで採用流入を増やしたい◎△広告の効果を最大化したい△〇複数職種を整理して掲載したい〇△1職種だけ急募したい△◎ まとめ：最も成果を出す採用サイトの設計法 採用サイト制作では、「ホームページ型とランディングページ型のどちらが良いか」ではなく、「求める職種数や集客方法、目的に合わせて最適な形式を選択」することで会社理解と応募率の両方を最適化させていきましょう。

GmailがPOP受信を廃止することが発表され、メールの受信方式が改めて注目されています。普段あまり意識せずに使っている方も多いですが、メールをどの方式で受信するかによって、管理方法や便利さが大きく変わります。今回は初心者の方でもわかりやすいように、「POP」と「IMAP」という2つの受信方式の特徴と違いを説明します。 POPとは？ POPは「Post Office Protocol」の略で、メールをサーバーから自分の端末（パソコン、スマートフォン等）にダウンロードして保存、受信したメールはサーバーから削除する方式。 一度ダウンロードすれば、オフラインでも確認ができる他、サーバー内のメールを削除しても手元に残せるのでサーバー容量を抑えることが可能ですが、複数の端末でメールを受信する場合は、初回受信時にメールが削除されてしまわないよう、使用しているメールソフトで「一定期間はサーバーにメールを残す」設定をする必要があります。 また、メールの状態を同期できないため、複数端末で受信する場合は、端末ごとに削除や既読の操作をする必要があります。 POPのメリット 一度ダウンロードすれば、オフラインでもメールを閲覧できる サーバー容量をあまり使わない POPのデメリット 複数の端末でメールを同期できない 端末が壊れるとメールが消えてしまうリスクがある サーバー上のメールが削除される場合もある IMAPとは？ IMAPは「Internet Message Access Protocol」の略で、メールを各端末にダウンロードせず、サーバー上で管理する方式で、受信メールだけでなく送信メールもサーバー内に保存されます。 各種メールソフトからサーバー内のメールを直接操作するため、削除や既読、送信の管理が一括でできますが、オフラインでの確認が出来ず、誤って削除しまった場合も復旧ができませんし、サーバー障がい等で消失した場合にも復旧はできません。 また、メールを多く残す場合（添付ファイルが大きい場合は特に）はサーバー使用容量が大きくなる（費用負担が大きくなる）ため、定期的に整理する必要があります。 IMAPのメリット PC・スマホ・タブレットなど、どの端末でも同じメールを確認できる フォルダ管理や既読/未読の状態、送信メールも同期される IMAPのデメリット オフラインで利用するには設定が必要 サーバー容量を使う メールソフトによってはオフラインでも確認できる設定に出来きますが、その場合はメールをダウンロードすることになるため、同期のメリットは薄れます。 POPとIMAPの違いを簡単比較 特徴POPIMAPメールの保存場所端末サーバー複数端末での同期×（サーバーに残す設定で部分対応）〇オフライン利用〇△（設定が必要） POPとIMAPの併用は推奨できません 複数の端末でメールを管理する場合、一方を「POP」他方を「IMAP」にすることも設定上では可能ですが、「POP」形式で受信されたメールを「IMAP」形式で確認する場合には、削除されて確認できない場合もあるため、併用はおすすめできません。 特に、Gmailをメール受信に使用する場合は、その他のメールソフトも全て「IMAP」形式に変更することが望ましいです。 まとめ どちらの形式にもメリット・デメリットはありますが、Gmailを使用するのであれば「IMAP」、単一端末（パソコンのみ、スマートフォンのみ）であれば「POP」、複数端末（パソコンとスマートフォンの同時利用等）であれば、「お好みの形式」となります。 尚、弊社にご相談いただく際は、メール受信よりも、メール送信の頻度から考えてアドバイスをしています。複数端末で受信する場合でも送信がパソコンのみ（単一端末）という方であれば「POP」でも不便に感じる機会は少ないですが、全ての端末で同頻度で送信を行う場合は同期できている方が便利ですので「IMAP」をお勧めしています。

要素を円形に添って配置する図を作成する場合、画像で作成されている場合も多いのだけれど、要素が増える度に位置を調整して画像を作り直すのも大変だったので、CSSを使用して円形のパスに添ってボタンを等間隔に配置した方法をメモ。 HTML <div class="circle-wrapper"> <div class="circle-button" style="--i: 0;">1</div> <div class="circle-button" style="--i: 1;">2</div> <div class="circle-button" style="--i: 2;">3</div> <div class="circle-button" style="--i: 3;">4</div> <div class="circle-button" style="--i: 4;">5</div> <div class="circle-button" style="--i: 5;">6</div> <div class="circle-button" style="--i: 6;">7</div> <div class="circle-button" style="--i: 7;">8</div> <div class="circle-button" style="--i: 8;">9</div> <div class="circle-button" style="--i: 9;">10</div> <div class="circle-button" style="--i: 10;">11</div> <div class="circle-button" style="--i: 11;">12</div> </div> CSS .circle-wrapper { position: relative; width: 300px; height: 300px; margin: 50px auto; border: 2px dashed #ccc; border-radius: 50%; } .circle-button { --count: 12; /* 合計の個数 */ --radius: 130px; /* 円の半径 - ボタン半径 */ position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; background: #3498db; border-radius: 50%; transform: rotate(calc(360deg / var(--count) * var(--i) - 90deg)) translate(var(--radius)) rotate(calc(-360deg / var(--count) * var(--i) + 90deg)); transform-origin: center; margin: -20px 0 0 -20px; /* ボタンの中心を基準にする */ text-align: center; line-height: 40px; } HTMLに記載されている「style="--i: 0;"」はカスタムプロパティ（CSS変数）の設定。タグごとに設定し直すことで「transform」の値を変更しボタンの順序に応じて角度をずらして配置しています。「--radius」の値は外側の円に内接するよう外側の円の半径からボタンの半径を差し引いた値を設定。外側の円に外接する場合は外側の円の半径にボタンの半径を加えた値（例は170px）になります。 サンプル .circle-wrapper { position: relative; width: 300px; height: 300px; margin: 50px auto; border: 2px dashed #ccc; border-radius: 50%; } .circle-button { --count: 12; --radius: 130px; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; background: #3498db; border-radius: 50%; transform: rotate(calc(360deg / var(--count) * var(--i) - 90deg)) translate(var(--radius)) rotate(calc(-360deg / var(--count) * var(--i) + 90deg)); transform-origin: center; margin: -20px 0 0 -20px !important; text-align: center; line-height: 40px; } 1 2 3 4 5 6 7 8 9 10 11 12

求人・採用サイトのご相談いただく機会が多いのですが、その際に、毎回のように質問いただくのが「企業サイトの下層ページとして作るべきか」それとも「サブドメインとして独立サイトにするべきか」という、採用サイトをどのドメインで運用するのかというご質問。SEO（検索エンジン対策）的にはどちらを選択しても優劣はないという事ですが、双方にどのようなメリット・デメリットがあるのかを比較します。 下層ページ型の特徴（例：example.com/recruit/） 下層ページ型採用サイトとは、既存の企業サイト（コーポレートサイト）の下層ページ（サブディレクトリ）として採用サイトを制作する方法。既に検索エンジンに認知されているのであれば、その効果を引き継げるため立ち上げ時にのSEO的効果は高いです。 デザイン面においてはコーポレートサイトのデザインを踏襲する流れがあるため、採用に特化した訴求をしにくい場合もあります。デザインを切り分けることも可能ですが、ワードプレス等のCMSを使用している場合はテンプレートを切り分ける等の工夫が必要で、管理が若干複雑になります。 メリット 立ち上げ時にSEOに有利企業サイトのドメイン評価を引き継げるため、検索順位が付きやすい。 運用コストが低い管理・更新・アクセス解析が企業サイトと一元化できる。 信頼性の維持企業サイトの一部として扱われるため、ブランドとしての安心感を与えやすい。 デメリット デザインや表現の自由度が低い企業サイトのテンプレートやトーンに縛られやすく、若手向けに柔らかい表現を出しにくい。 採用ブランドの独立性が弱い採用サイトとしての特化戦略やマーケティング施策が行いにくい。 リスク分散が難しいペナルティが発生した場合、企業サイト全体に影響する可能性がある。 サブドメイン型の特徴（例：recruit.example.com） サブドメイン型採用サイトは、企業サイトとは別にサブドメインを取得して採用サイトを制作する方法。企業サイトとは別の新規サイトとして扱われるため、検索エンジンに認識されるまでに時間がかかる場合がありますが、デザインの自由度が高く、マーケティングもしやすい傾向にあります。 また、企業サイトとは分けて、採用ページ専用にCMS（ワードプレス等）を使用する場合、上位ディレクトリに影響されないので管理がしやすくなります。 メリット デザインや導線の自由度が高い若手・学生向けに特化したデザイン、ナビゲーション、コンテンツ設計が可能。 マーケティング戦略が独立SNS広告、動画コンテンツ、オウンドメディアとの連携を自由に実施できる。 SEOリスクの分散ペナルティが発生しても、基本的にはサブドメイン内に限定されるため、企業サイト本体への影響が少ない。 デメリット 初期SEOは弱いドメインパワーはゼロからスタートするため、検索流入を得るまでに時間がかかる。 管理コストが増える別サイトとしてCMS設定、SSL管理、分析ツールなどを個別に管理する必要がある。 その他の採用サイトの制作方法を判断する基準 ページ数・コンテンツ量による判断 メリット・デメリットの他には、採用サイトのページ数や情報量によっても、最適な構成は変わります。例えば募集要項のみ等の基本情報だけで構成する場合（5ページ以下）は下層ページ型でも十分。 反対に、職種別募集、社員インタビュー、その他の支援制度の紹介など多様なコンテンツを掲載する場合はサブドメイン型でしっかりと作成する方が導線が伝わりやすいです。 制作体制による判断 下層ページ型は、既存の企業サイト内にページを作成するため、新たなシステム構築やサーバー設定の負担が少なく、制作コストや運用負荷を抑えやすい点はメリットですが、既存の制作元や管理者への確認や調整等が不可欠です。新たに外部制作チームや新しい担当者が独自に運用する場合は制約が大きくなります。 サブドメイン型は、既存サイトとは独立して構築できるため、制作体制やサーバー構成に柔軟性があります。別サーバーで運用することも可能で、既存サイトのデータや構造に影響を与えません。制作チームも独立させやすく、将来的な改修や拡張も容易です。 ペナルティ・リスクマネジメントによる判断 特徴の部分でも軽く触れていますが、SEOにはペナルティーが存在します。過度なキーワードの埋め込み、不自然なリンク、品質の低いコンテンツ（コピーページ）の量産などgoogleの基準で不適切と判断された場合はサイトの評価が下がる場合があります。 サブドメイン型の場合は、影響範囲がサブドメインで作成されたページのみに収まりますが、下層ページ型の場合は全てのページに影響が出ます。ペナルティーを受けないように気を付けることはもちろんですが、積極的に施策を行う場合、サブドメイン型の方が安心です。 まとめ 採用サイトの立ち上げは、単にURL構造の問題ではなく、コンテンツ量、制作体制、リスク管理を総合的に考えた上で決定することが重要です。 短期的なSEOでは下層ページ型が有利目点はありますが、弊社では特にご要望の無い場合は、自由度の高いサブドメイン型での構築をお勧めしています。 自社のWebサイト運用目的をふまえた上で、採用サイトの運用方法をきちんと考えることが大切です。自社の目的や戦略に合わせて、最適な形式を選びましょう。

お問い合わせフォームよりご連絡いただく中で、GmailやYahoo!メールなどのフリーメールを利用されている方をちらほら見かけます。新規案件のご相談や、ホームページに関するご質問の場合は気にならないのですが、協業をご希望の方の場合は少々不安になる事もあります。ビジネスメールを運用する際に、会社や組織の信頼性を高めるなら独自ドメインのメールアドレスがおすすめです。この記事では、独自ドメインメールを利用するメリットと、フリーメールとの違いをわかりやすく解説します。 独自ドメインメールとは？ 独自ドメインメールとは、会社やブランドのドメイン名を使ったメールアドレスのことです。例：info@yourcompany.com、support@yourcompany.com「@（アットマーク）」の後ろに自社のドメイン名が入るため、企業の公式サイトと同一ドメインであることを示せるのが大きな特徴です。 一方、フリーメール（例：yourname@gmail.com）は誰でも作成できるため、発信元の信頼性を証明することが難しくなります。 独自ドメインメールは信頼性が高い 独自ドメインのメールは、送信元の信頼性を直接示せる点が大きな強みです。例えば「info@yourcompany.jp」というメールを受け取った場合、相手はドメイン部分（yourcompany.jp）をそのままブラウザに入力することで、公式ホームページが存在するかどうかをすぐに確認でき、なりすましや詐欺メールへの不安を軽減できます。特に初めて取引する相手にとっては、この「確認できる安心感」が大きな信頼要素になります。 さらに、独自ドメインでは「SPF」などの認証を設定できるため、迷惑メールフォルダに振り分けられにくく、セキュリティ面でも安全性が高まります。 これに対して、フリーメールはアカウント名（@の前の部分）でも信頼性が変わります。下記のような趣味やニックネームを含むアドレスは、プライベート感が強く、ビジネス用としては不適切に見えてしまい、取引先から「片手間かもしれない」「業務としてのやり取りを行うのは不安」と思われる可能性もあります。 ビジネスメールとしては不適切に見えるメールアドレス例 ○○_love@gmail.com happy123@yahoo.co.jp rocker1980@gmail.com 独自ドメインメールはメール管理・セキュリティがしやすい 独自ドメインを使うと、社員の入退社や役職変更に合わせてメールアカウントを自由に作成・変更・削除できます。 例えば「sales@yourcompany.com（営業窓口）」「support@yourcompany.com（サポート専用）」のようなメールアドレスを使用している場合、フリーメールの場合は個人アカウントに依存するため、退職時のメール引き継ぎが困難ですが、独自ドメインメールの場合は、アカウント情報を引き継ぐことでそまま運用が可能です。 独自ドメインメールなら、会社のクラウドやサーバーでメールを一元管理でき、安全かつ効率的です。 フリーメールとの比較 比較項目フリーメール独自ドメインメール信頼性個人用に見える場合あり公式メールとして安心感ありブランド弱い会社名入りで統一感あり管理性退職時に引き継ぎ困難社員管理・役職変更対応可セキュリティ個人管理に依存SPF/DKIM/DMARC設定可能 フリーメールは手軽ですが、信頼性・ブランド・管理性の面で独自ドメインメールには敵いません。 まとめ：独自ドメインメールは「信頼・ブランド・安心」の基盤 独自ドメインのビジネスメールを使うことで、「信頼性：取引先に安心感を与える」「ブランド：会社のプロフェッショナルな印象を強化」「管理性・セキュリティ：社員管理や情報保護が容易」というメリットがあります。 メールアドレスは、見た目以上に会社の信頼を左右する重要な要素です。特に法人や中規模以上の企業では、独自ドメインメールを公式連絡先として運用することが、今や標準的なビジネス運用となっています。「誰からのメールなのか」がすぐにわかる独自ドメインメールを導入することで、ビジネスの信頼性を確実に高めましょう。

以前、飲食店サイトを制作した際に、記念写真を掲載する目的でメインビューに使っていたスクリプトを思い出しのたのでメモ。卓上に写真を広げるような感じでレイアウトでき、ドラッグ操作で動かせるので、一覧表示と比べると若干の見づらさはあるものの、目的のものを探し出す体験も含めて、一定の効果はありそうです。 HTML <ul id="photo-list"> <li><a href=""><img src="○○.jpg" alt="○○"></a></li> <li><a href=""><img src="○○.jpg" alt="○○"></a></li> <li><a href=""><img src="○○.jpg" alt="○○"></a></li> <li><a href=""><img src="○○.jpg" alt="○○"></a></li> <li><a href=""><img src="○○.jpg" alt="○○"></a></li> <li><a href=""><img src="○○.jpg" alt="○○"></a></li> <li><a href=""><img src="○○.jpg" alt="○○"></a></li> <li><a href=""><img src="○○.jpg" alt="○○"></a></li> <li><a href=""><img src="○○.jpg" alt="○○"></a></li> <li><a href=""><img src="○○.jpg" alt="○○"></a></li> </ul> CSS #photo-list { position: relative; width: 100%; height: 100vh; margin: 0 auto; padding: 0; background: #f5f5f5; overflow: hidden; } #photo-list li { list-style: none; position: absolute; width: 25vw; /* 親幅に応じて自動調整 */ left: 100vw; } #photo-list li:active { cursor: grabbing; } #photo-list li img { width: 100%; display: block; box-shadow: 0 4px 10px rgba(0,0,0,0.3); border-radius: 6px; transition: transform 0.8s ease-out; user-select: none; } jQuery var $items = $('#photo-list li'); var $container = $('#photo-list'); var zIndexCounter = 1; function getAreaSize() { return { width: $container.width(), height: $container.height() }; } function getItemSize($el) { return { width: $el.width(), height: $el.height() }; } // 初期位置：右外からばらまく $items.each(function() { var area = getAreaSize(); var item = getItemSize($(this)); $(this).css({ left: area.width + 200, top: area.height / 2 - item.height / 2, opacity: 0, transform: 'rotate(0deg) scale(0.8)' }); }); // ばらまきアニメーション setTimeout(() => { $items.each(function() { var area = getAreaSize(); var item = getItemSize($(this)); var left = Math.random() * (area.width - item.width); var top = Math.random() * (area.height - item.height); var rotate = (Math.random() * 60) - 30; var delay = Math.random() * 800; $(this).delay(delay).animate({ left: left, top: top, opacity: 1 }, { duration: 1000, easing: 'swing', step: function(_, fx) { $(this).css('transform', `rotate(${rotate}deg) scale(1)`); } }); }); }, 500); if ($(window).width() < 980) { // スマホ・タブレット用ドラッグ $items.on({ touchstart: function(e) { var $this = $(this); var touch = e.originalEvent.touches[0]; $this.data({ startX: touch.pageX, startY: touch.pageY, offsetX: touch.pageX - $this.position().left - $container.offset().left, offsetY: touch.pageY - $this.position().top - $container.offset().top, isDragging: false, dragOccurred: false }); zIndexCounter++; $this.css('z-index', zIndexCounter); }, touchmove: function(e) { var $this = $(this); var touch = e.originalEvent.touches[0]; var startX = $this.data('startX'); var startY = $this.data('startY'); var offsetX = $this.data('offsetX'); var offsetY = $this.data('offsetY'); var isDragging = $this.data('isDragging'); var dragOccurred = $this.data('dragOccurred'); var dragThreshold = 5; var deltaX = Math.abs(touch.pageX - startX); var deltaY = Math.abs(touch.pageY - startY); if (!isDragging && (deltaX > dragThreshold || deltaY > dragThreshold)) { isDragging = true; dragOccurred = true; } if (isDragging) { e.preventDefault(); $this.css({ left: touch.pageX - $container.offset().left - offsetX + 'px', top: touch.pageY - $container.offset().top - offsetY + 'px' }); } $this.data({ isDragging: isDragging, dragOccurred: dragOccurred }); }, touchend: function(e) { var $this = $(this); var dragOccurred = $this.data('dragOccurred'); if (dragOccurred) e.preventDefault(); $this.removeData('isDragging dragOccurred startX startY offsetX offsetY'); } }); } else { // PC用ドラッグ $items.on('mousedown', function(e) { var $this = $(this); e.preventDefault(); var startX = e.pageX; var startY = e.pageY; var offsetX = startX - $this.position().left - $container.offset().left; var offsetY = startY - $this.position().top - $container.offset().top; var isDragging = false; var dragThreshold = 3; var dragOccurred = false; zIndexCounter++; $this.css('z-index', zIndexCounter); function clickPreventer(e) { e.preventDefault(); } function mouseMoveHandler(e) { var deltaX = Math.abs(e.pageX - startX); var deltaY = Math.abs(e.pageY - startY); if (!isDragging && (deltaX > dragThreshold || deltaY > dragThreshold)) { isDragging = true; dragOccurred = true; $this.find('a').on('click.prevent', clickPreventer); } if (isDragging) { $this.css({ left: e.pageX - $container.offset().left - offsetX + 'px', top: e.pageY - $container.offset().top - offsetY + 'px' }); } } function mouseUpHandler(e) { $(document).off('mousemove', mouseMoveHandler); $(document).off('mouseup', mouseUpHandler); if (dragOccurred) { $this.one('click', function(e) { e.preventDefault(); }); $this.find('a').off('click.prevent', clickPreventer); } } $(document).on('mousemove', mouseMoveHandler); $(document).on('mouseup', mouseUpHandler); }); } SAMPLE #photo-list { position: relative; width: 100%; height: 100vh; /* 画面幅に応じた高さ */ margin: 0 auto; padding: 0; background: #f5f5f5; overflow: hidden; } #photo-list li { list-style: none; position: absolute; width: 25vw; /* 親幅に応じて自動調整 */ left: 100vw; } #photo-list li:active { cursor: grabbing; } #photo-list li img { width: 100%; display: block; box-shadow: 0 4px 10px rgba(0,0,0,0.3); border-radius: 6px; transition: transform 0.8s ease-out; user-select: none; }

「バックアップデータはないのですが、改ざんされたホームページ（WordPressを使用）を復旧できますか？」先日、お取引のある企業様よりこんなご相談をいただきました。幸いにも、データベースとダウンロードしていたファイルから復旧することができましたが、改めて バックアップの必要性 を実感する機会となりましたので、専門知識がなくてもできる、中小企業担当者向けのホームページバックアップの正しい方法をご紹介します。 なぜバックアップが必要なのか ホームページは更新作業中のミスやサーバー障害、ウイルス感染など、日常的にトラブルのリスクがあります。特に中小企業では専門のシステム担当者がいないことも多く、万が一の時に慌ててしまいがちです。 そこで大切なのが 「バックアップ」 です。バックアップとは、ホームページのデータを別の場所にコピーして保存しておくこと。普段は使わなくても、いざという時にデータを元に戻せる「保険」のようなものです。 バックアップを必要とするトラブル例 更新作業中に誤ってファイルを削除してしまった サーバー障害でデータが消えてしまった WordPressの更新後に画面が真っ白になった サイトが改ざんされてアクセスができなくなった ホームページの仕組みとバックアップの対象 バックアップを正しく取るためには、まず「何を保存すればいいか」を理解する必要があります。ホームページは主に次の2つで構成されています。 ファイルデータ（HTML・CSS・画像・PHP、JS等のプログラムファイルなど） データベース（WordPressなどの管理画面を持っているサイトの場合） 管理画面のない静的なHTMLサイトの場合はファイルデータをそのままコピーしておけばOKですが、WordPressのように投稿や設定をデータベースに保存するタイプでは、ファイル＋データベースの両方をバックアップする必要があります。 バックアップの取り方 手動でバックアップする方法（静的HTMLやワードプレス以外のCMSの場合） ワードプレスのような専用のプラグインの無いホームページの場合はFTPソフトを使用して手動でバックアップを行うことが多いです。 FTPソフトでサーバーからホームページのファイルをすべてダウンロード サーバー管理画面（例：phpMyAdmin）からデータベースをエクスポート ダウンロードしたデータを外付けHDDやクラウドストレージに保存 ポイントは、日付をつけて定期的に取ることです。例えば、「backup_2025-10-07」のように名前を付けると管理しやすくなります。 自動バックアップ（WordPressの場合） WordPressを使っている場合は、プラグインを使うことで自動化できます。 代表的なプラグイン UpdraftPlus All-in-One WP Migration WPvivid これらを設定しておくと、毎週または毎月、自動でバックアップを取り、指定したファイルに保存してくれます。自動化しておけば、担当者の手間を減らしながら確実にデータを守れます。 注意点 プラグインを使用したバックアップは効率的で便利ですが、復旧時にもプラグインが必要となります。復旧時のデータアップロードに容量制限のある場合もあるため、事前に復旧可能かをテストしておくことをお勧めします。 .htaccessでPHPのファイルアップロードサイズの上限値を変更 バックアップの管理と注意点 バックアップは取るだけでなく、安全に保管・管理することが大切です。 保存先は 2ヶ所以上にする（クラウド＋外付けHDDなど） サーバーと同じ場所に置かない（障害時に同時に失うリスク） ファイル名や日付を明確にして整理 一度は復元テストを実施して、きちんと戻せるか確認 「バックアップを取ったけれど戻せなかった」では意味がありません。テスト環境などの用意があれば、事前にテストしておくと安心です。 まとめ ホームページは、会社の顔であり、貴重な情報資産です。万が一のトラブルに備えて、日頃からバックアップを取る習慣をつけておきましょう。

ホームページは持っているのだけれど、リニューアルのタイミングが良くわからない…。そんな相談をよく受けます。実際、ホームページは壊れない限り「使えてしまう」ため、リニューアルのタイミングを判断しづらいものです。しかし、見た目は問題なくても、内容や仕組みが今のビジネスに合っていないことでお問い合わせを逃しているケースもあります。この記事では、リニューアルの判断基準と、成功のポイントをわかりやすく解説します。 ホームページのリニューアルを検討すべき目的と判断の目安 ホームページを作り直す目的は、単に「デザインを新しくする」ことではありません。リニューアルの本来の目的は、今のビジネス（状況）に合った形で運用することにあります。 次の項目に当てはまる場合は、リニューアルや部分改修の検討タイミングです。3つ以上当てはまる場合は、対応を検討しましょう。 リニューアルを必要とする主なタイミング デザインの老朽化：古い印象やスマホ非対応で信頼感を損ねている 内容のズレ：掲載している情報が現在の事業内容と合っていない 集客力の低下：アクセス数や問い合わせが減っている 運用が困難になっている：更新が難しく、社内で管理できていない 技術・セキュリティ面の問題：SSL未対応や古いシステムのままで危険 特に、スマホ非対応やSSL未対応は信頼性に関わります。「見た目が古い」だけでなく、「仕組みが時代に合っていない」状態が続くのは避けたいところです。 部分改修・機能追加で対応できるケース ホームページのリニューアルと聞くと全体を作り直すイメージをされることも多いですが、必ずしもホームページ全体を作り直す必要はありません。課題に応じて部分的に改善することで、コストを抑えつつ効果を出すことが可能です。 特に「デザインは悪くないけれど、更新しづらい・機能が足りない」という場合には部分改修が有効です。 状況対応方法内容サービス内容・ターゲットが変わったリニューアル構成や導線の再設計が必要デザインが古いが内容は現状維持リニューアルトップページ・ビジュアル刷新部分的なデザイン変更をしたい部分改修写真やフォントの見直し、スマホ表示の調整のみ行うコンテンツの追加・更新が必要になった部分改修追加ページの新設、事業の変化に合わせたページの見直し・最新化機能を追加したい・更新しやすくしたい機能追加CMS化、フォーム追加などセキュリティ・速度に問題がある技術的メンテナンスサーバー移行・システム更新 成功するリニューアル・改修のポイント 一言で言うと、「目的を見失わない」ことが最重要です。リニューアルと聞くと、どうしても「デザインを新しくすること」に目が行きがちですが、リニューアルの本来の目的は成果につながる情報発信や使いやすさの改善です。デザインだけを変えても、問い合わせが増えない、サービス内容が正しく伝わらない、といったケースは少なくありません。 リニューアルや部分改修を効果的に進めるには、以下のポイントを押さえることも重要です。 改善したい課題を明確にする アクセス解析で人気ページ・離脱ページを確認 問い合わせや資料請求の履歴を分析 「感覚」ではなく数字で課題を特定 リニューアル・改修の方針を明確にする デザインは目的に沿って最適化 年代・業種・利用デバイスなどターゲット層を再確認 「誰に」「何を伝えるか」を明確化（ゴールの設定） 部分改修でも対象ページや機能がターゲットに合っているかをチェック ページ構成や情報の優先順位を見直す まとめ：リニューアルも改修も「成長の節目」 リニューアルは「壊して作り直す」作業ではなく、「成長に合わせて整える」タイミングです。そして、必ずしも全体を作り直す必要はありません。 目安としては制作から3〜5年周期で見直されることが多いようですが、自社の課題に応じて、部分改修や機能追加で柔軟に対応することが重要です。 自社の現状を見直すきっかけとして、リニューアルや部分改修を「事業成長のためのメンテナンス」と捉えてみてはいかがでしょうか。

ページのアクセス数はgoogleアナリティクスでも確認は出来るのですが、ワードプレスの管理画面からも簡易的に人気記事を確認できたり、ページに閲覧数を表示して、より興味を示してもらえるようにと閲覧数（総合値）を取得できるようにした方法をメモ functions.php（PHP） // 閲覧数を取得 function get_post_views($postID){ $count_key = 'post_views_count'; $count = get_post_meta($postID, $count_key, true); if($count == ''){ delete_post_meta($postID, $count_key); add_post_meta($postID, $count_key, '0'); return "0"; } return $count; } // 閲覧数をカウント function set_post_views($postID){ $count_key = 'post_views_count'; $count = get_post_meta($postID, $count_key, true); if($count == ''){ $count = 0; delete_post_meta($postID, $count_key); add_post_meta($postID, $count_key, '0'); }else{ $count++; update_post_meta($postID, $count_key, $count); } } // REST APIやボットによるリクエストを無視 function is_real_user(){ return !(is_admin() || wp_doing_ajax() || strpos($_SERVER['HTTP_USER_AGENT'], 'bot') !== false); } // 閲覧数を投稿閲覧時にカウント（singleページ） function count_post_views(){ if(is_single() && is_real_user()){ global $post; set_post_views($post->ID); } } add_action('wp_head', 'count_post_views'); // カラムの追加 function add_views_column($columns) { $columns['post_views'] = '閲覧数'; return $columns; } add_filter('manage_posts_columns', 'add_views_column'); // カラムに表示する内容 function display_views_column($column_name, $post_id) { if($column_name === 'post_views'){ echo get_post_views($post_id); } } add_action('manage_posts_custom_column', 'display_views_column', 10, 2); // 閲覧数カラムをソート対象に追加 function post_views_sortable_column($columns) { $columns['post_views'] = 'post_views'; return $columns; } add_filter('manage_edit-post_sortable_columns', 'post_views_sortable_column'); // ソート実行のためのクエリ調整 function post_views_orderby($query) { if (!is_admin()) return; $orderby = $query->get('orderby'); if ('post_views' == $orderby) { $query->set('meta_key', 'post_views_count'); $query->set('orderby', 'meta_value_num'); } } add_action('pre_get_posts', 'post_views_orderby'); single.php（PHP） <p><?php echo get_post_views(get_the_ID()); ?> 回閲覧されました</p> 閲覧数を登録するメタキーに「post_views_count」を作成。今回は投稿ページを対象とするため「single.php」にアクセスがあった際にカウント処理が動くようになっています。他のページ（カスタム投稿「○○」等）に使用する際はカウント処理「count_post_views」と各管理画面側の項目をそれぞれ変更します。 functions.php（PHP） // 閲覧数を投稿閲覧時にカウント function count_post_views(){ if ( is_singular(['post','○○']) && is_real_front_user() ) { set_post_views( get_queried_object_id() ); } } add_action('wp_head', 'count_post_views'); // カラムの追加 function add_views_column($columns) { $columns['post_views'] = '閲覧数'; return $columns; } add_filter('manage_posts_columns', 'add_views_column'); add_filter('manage_○○_posts_columns', 'add_views_column'); // カラムに表示する内容 function display_views_column($column_name, $post_id) { if($column_name === 'post_views'){ echo get_post_views($post_id); } } add_action('manage_posts_custom_column', 'display_views_column', 10, 2); add_action('manage_○○_posts_custom_column', 'show_views_column', 10, 2); // 閲覧数カラムをソート対象に追加 function post_views_sortable_column($columns) { $columns['post_views'] = 'post_views'; return $columns; } add_filter('manage_edit-post_sortable_columns', 'post_views_sortable_column'); add_filter('manage_edit-○○_sortable_columns', 'post_views_sortable_column'); // ソート実行のためのクエリ調整 function post_views_orderby($query) { if (!is_admin() || !$query->is_main_query()) return; if ($query->get('orderby') === 'post_views') { $query->set('meta_key', 'post_views_count'); $query->set('orderby', 'meta_value_num'); } } add_action('pre_get_posts', 'post_views_orderby');

ホームページを作る、または運営していく上で「競合他社が何をしているか」を知ることは重要です。どんなコンテンツが含まれているのか、どんなキーワードで集客しているのかを知れば、自社サイトの改善や差別化ポイントが見えてきます。ここでは、特別なスキルがなくても実践できる「ホームページ競合分析」の進め方を5つのステップで解説します。 競合企業を特定する まずは、自社と同じサービス・地域で活動している競合他社をリストアップします。検索エンジンを使用して、キーワードを入力し、検索結果の上位10位以内に入るものを5件から10件程度ピックアップしていきます。 直接競合：同じ商品やサービスを提供している会社 間接競合：同じ顧客の悩みを解決する商品やサービスを提供している会社 競合のホームページを分析する ピックアップした競合サイトを確認し、以下のようなポイントで調査内容を整理します。 調査ポイント内容トップページのページタイトルホームページのタイトルCTAお問い合わせや資料請求など、行動喚起ボタンの種類キャチコピーサービスをどのような表現しているか提供している商品・サービス商品・サービスの強みや特徴、差別化されている点、価格、種類などデザインの印象色味や雰囲気、ブランドイメージなどページの構成サイト内に含まれているコンテンツその他気になる点参考にできるポイント　など SNSやレビューサイトも確認する 競合他社がSNSを利用しているようであれば、どのように情報発信しているかも重要です。SNSやレビューサイトを確認してみましょう。 フォロワー数やいいね数、コメントの反応 投稿内容や更新頻度 顧客からの評価やレビューの傾向 これにより、競合が顧客にどんな価値を提供しているかを把握できます。 自社にある点・ない点を整理・比較して戦略を考える 競合のホームページやSNS、レビューから得た情報をもとに、自社と比較して施策している点（ある点）・していない点（ない点）を整理し、その内容をもとに自社戦略を考えます。 項目内容自社にある点自社のみが行っている部分、自社が提供できる価値・強み自社にない点競合が提供していて自社にはないもの、改善や導入を検討すべき部分 戦略例 競合が提供しているが自社にはないものを新たに導入できるか 自社にある点をさらに強化して差別化できるか 市場で自社の強みをどのように表現するか 戦略を考えるうえで気を注意したいのは、サービスの差別化を目的にし過ぎて、少数派の需要（弱いニーズ）を満たしてしまうこと。競合他社とサービスを比較する場合、多くの方がほとんど使わないであろう機能やオプションを加えて価格を据え置きにするよりは、その分をコストダウンする方が好まれます。 競合分析は「他社を知る」だけでなく、自社の成長戦略を具体的に考える材料になります 競合分析は「他社を知る」だけでなく、自社の成長戦略を考えるための大切なステップです。初心者でも、今回紹介したステップを順番に実践すれば、確実に自社の強みや改善点を見つけることができます。ぜひ、定期的に分析を行い、ホームページやビジネスの成果に繋げていきましょう。

ホームページでのお悩みをお伺いする際に「どうやってお客さんを集めればいいですか？」と集客方法について質問されることがあります。ホームぺージは作って終わりでなく、作ったサイトにお客さんを集客できて初めて成果に繋がります。この記事では、営業用のリストがない状態でもホームページ（実店舗でも可）に見込み客を呼び込むための基本的な方法と考え方を紹介します。 集客の基本は「4つの主軸」 集客を成功させるには、まず「何を主軸にターゲットを定めるか」を決めることが大切です。ここでは、顧客リストがなくても今日から実践できる 4つの基本軸 を押さえることで、誰に・どのような方法でアプローチをするのかが一気に明確になります。 キーワードを主軸に集客する ユーザーが検索エンジンや各種情報系サイトに入力する言葉（検索語）を軸として、コンテンツや広告を設計し、見込み客を呼び込む方法。 具体的な方法 ブログ（SEO）「○○　使い方」「○○　比較」等、検索されるキーワードを調べ、その内容に関連する記事を作成してホームぺージの上位表示を狙う。 リスティング広告（検索連動型）ユーザーが「△△　通販」などで検索した瞬間に広告を表示し、クリックを誘導する。 YouTube「○○ 初心者」「○○ 使い方」といった検索語をタイトルやタグに入れて露出を増やす。 年齢・性別を主軸に集客する 自社の商品・サービスを「どの世代に最も響くか」を起点に、広告媒体・メッセージ・デザイン・タイミングを組み立てる考え方です。ターゲットを“年齢”で切り分けることで、ライフスタイルや価値観が似通った人たちに絞ってアプローチできます。 具体的な方法 SNS商品やサービスのアピールに終始せず、お約立ち情報や共感できるコメントの投稿を心がける。また、フォロワー数の増加を目的とした施策も本来も目的から外れるため控える。 主要SNS別 利用者層（目安） サービス主な年代層特徴・補足LINE10〜60代まで幅広い日本国内で最も利用率が高く、連絡ツールとして必須。公式アカウント配信やLINE広告向き。X（旧Twitter）20〜40代中心拡散力が高く、リアルタイム情報やニュース性が強い。Instagram10〜30代女性が中心ビジュアル訴求が得意。ファッション・美容・ライフスタイル系に強い。Facebook30〜50代ビジネス利用が多い。実名制を活かしたBtoBや地域コミュニティに有効。TikTok10〜20代前半若年層中心。短尺動画で拡散力大。 地域（時間帯）を主軸に集客する 特定のエリアや商圏を起点に、広告や販促の戦略を組み立てる考え方です。「どこに住む人を集めたいか」をまず決め、その地域に合わせて媒体・メッセージ・時間・サービス内容を最適化します。 具体的な方法 ポスティング、街頭配布街頭配布は「人が集まる場所・時間」で効果が変わる。 業種（業界）を主軸に集客する 自身の「業界・職種・業務領域」に対して興味を持っている方を軸として、メッセージ・媒体・企画を最適化して集客する考え方です。BtoB（企業向け）ビジネスでは特に重要で、「相手の業界特有の課題や習慣」を深く理解したうえでアプローチするのがポイントになります。 展示会への出展どの業界に興味のある方が来場するかを踏まえて内容やブースを設計。 まずは小さくテストし、データをもとに改善することが大切 顧客リストがなくても、キーワード・年齢や性別・地域（時間帯）・業種という4つの基本軸をしっかり決めれば集客は始められます。さらにライフステージや興味関心、季節などの補助的な視点を組み合わせることで、狙いたい層へより的確に届けられます。まずは小さくテストし、データをもとに改善を重ねることで、集客と同時に顧客リストも自然に育っていきます。

ワードプレスの投稿画面で表を作成する場合、表（テーブル）用のブロックを使用しているのだけれど、項目の多いものになると打ち込みが大変なうえに、打ち間違いも増えるので、オリジナル投稿ブロックを作成してCSVファイルから自動生成できるようにした方法をメモ original-blocks.js (function (blocks, editor, element, blockEditor){ var RichText = editor.RichText; var { InnerBlocks } = blockEditor; //CSVファイル展開 blocks.registerBlockType('sample/csv-viewer', { title: 'CSVファイル展開', icon: 'media-spreadsheet', category: 'common', edit: function(props){ return element.createElement('div', {className: 'post_csvviewer'}, [ element.createElement('div',　{className: 'post_csvviewer__container' }, [ ] ), element.createElement('div',　{className: 'post_csvviewer__input' }, [ element.createElement( InnerBlocks, { template: [ ['core/file', {className: ''}], ] } ), ] ), ] ) }, save: function(props){ return element.createElement('div', {className: 'post_csvviewer'}, [ element.createElement('div',　{className: 'post_csvviewer__container' }, [ ] ), element.createElement('div',　{className: 'post_csvviewer__input' }, [ element.createElement( InnerBlocks.Content, {} ), ] ), ] ); }, }); }( window.wp.blocks, window.wp.editor, window.wp.element, window.wp.blockEditor ) ); original-blocks.css .post_csvviewer { display: flex; padding: 20px; border: 1px solid #ddd; } .post_csvviewer .post_csvviewer__container::before { content: "読み込みファイル"; } .post_csvviewer .post_csvviewer__input .wp-block { margin: 0 0 0 20px; } .post_csvviewer .post_csvviewer__input .wp-block-file__button-richtext-wrapper { display: none; } ファイル（メディア）の登録はコアブロック（デフォルトで用意されているもの）を使用登録画面では表の生成は行わず、使用しているファイルをそのまま表示。編集画面に不要なボタン（ダウンロードボタン）が表示されるのでCSSで調整を行っています。 詳しい投稿ブロックの作成方法は前回のブログで確認いただけます WordPress（ワードプレス）のグーテンベルクにオリジナル投稿ブロックを設置する javascript（jQuery） async function loadCSV(url) { try { const response = await fetch(url); // Shift-JIS → UTF-8 に変換 const arrayBuffer = await response.arrayBuffer(); const decoder = new TextDecoder('shift-jis'); const text = decoder.decode(arrayBuffer); const rows = text.split('').map(row => row.split(',')); return rows; } catch (err) { console.error(err); return []; } } function renderTable(data, $i) { var $table = $('<table>'); data.forEach(row => { // row の中で空文字以外があるか確認 var hasContent = row.some(cell => cell.trim() !== ''); if (!hasContent) { return; // 空行ならスキップ } var $tr = $('<tr>'); row.forEach(cell => { var $td = $('<td>').text(cell); $tr.append($td); }); $table.append($tr); }); $('.post_csvviewer__container').eq($i).append($table); } $(function(){ if($('.post_csvviewer__container').length){ $('.post_csvviewer__input').hide(); var count = $('.post_csvviewer__container').length; var csvUrl = []; var urlPath = [] for(let i = 0; i < count; i++){ //読み込みファイルの取得 csvUrl[i] = $('.post_csvviewer__input').eq(i).find('a').eq(0).attr('href'); //表示ページのプロトコル（http or https）に差し替える var currentOrigin = window.location.protocol + '//' + window.location.host; urlPath[i] = csvUrl[i].replace(/^https?:\/\/[^/]+/, ''); csvUrl[i] = currentOrigin + urlPath[i]; loadCSV(csvUrl[i]).then(data => { renderTable(data, i); }); } } }); 表示側のjavascriptで対象ファイルを読み込み、表示ページのプロトコル（http or https）に差し替えてから「post_csvviewer__container」の箇所に表を自動生成して表示。 ループ処理を使用しているためページ内に複数のCSVファイルが存在していても上書きされることなく表示が可能。ファイル名の表示されている部分はまとめて非表示にしています。 また、CSVファイルの生成は「Shift-JIS」を使用されることが多いため、「Shift-JIS」から「UTF-8」への変換を行っていますが、必要ない場合（もともとUTF-8の場合）は下記を参照 javascript（jQuery） async function loadCSV(url) { try { const response = await fetch(url); const text = await response.text(); // デフォルトでUTF-8として読み込み const rows = text.split('').map(row => row.split(',')); return rows; } catch (err) { console.error(err); return []; } } 「投稿ページ用」とは書きましたが「固定ページ」でも使用が可能。表の差し換えもCSVファイルを入れ替えるだけで可能になるので、定期的に報告書などを掲載している方には便利です。※カラムを結合している複雑な表には対応していません

弊社でもデザイン案を提出した際に「デザインに詳しくないので、どのように判断しているんですか」と質問されることがあります。見た目の好みだけでデザインを選んでしまうと、ターゲットに合わなかったり、デザインの目的に沿わず、伝えたい情報やメッセージが十分に伝わらなかったりすることがあります。この記事では、初心者でも迷わずデザインを選べるように、選考のポイントと判断基準をわかりやすく解説します。 デザインを選ぶ前に知っておきたいこと デザインは単なる装飾ではなく、目的を達成するための手段です。デザインを選ぶ前には、何となく見た目で選ぶのではなく、全体の方向性を理解しておくことが大切です。事前に必要な要素を整理しておくことで、選ぶ際の判断基準が明確になり、迷わず評価できるようになります。 ターゲットを明確にする 誰に向けてデザインするのかを具体的にイメージすることが重要です。年齢層や性別、職業、趣味、価値観などを具体的にイメージすることで、どのようなデザインが伝わりやすいのかを判断しやすくなります。 デザインの目的を理解する デザインを通して達成したい目的は何なのかを確認します。例えば、商品を購入してもらう、ブランドの信頼感を高める、新しいサービスを知ってもらう、といった目的を明確にすることで、デザインに必要な要素（文章、画像）や評価基準が定まります。 デザインのテーマ（コンセプト）から考える ターゲットと目的をもとに、デザインの表現方法や方向性を決めるのがテーマ（コンセプト）です。テーマを理解することで、色使いやフォント、レイアウト、全体の雰囲気など、具体的なデザインを目的に沿って選べるようになります。例えば、「アールヌーボー調の高級感」や「絵本のような親しみやすく温かみのあるデザイン」など、テーマがはっきりしているとデザイン選びがブレません。 尚、「高級感」や「誠実さ」「親しみやすさ」というだけではテイストとしては良いのですが、イメージから連想できるものが個人で異なると判断がずれるため、共通認識を持てる程度まで具体的な方が良いです。 ブランドカラーやブランドイメージを意識する 既存のブランドが持つ色や雰囲気もデザイン選びの重要な要素です。ブランドカラーやロゴのトーン、全体のイメージに合ったデザインを選ぶことで、統一感を保ちつつターゲットへの訴求力を高めることができます。 使用する媒体や環境を考慮する デザインが使われる媒体によって適切な表現は変わります。Webサイト、SNS、印刷物では見え方やサイズ感が異なり、スマホやパソコンなどの表示環境も考慮する必要があります。 デザイン選考の基本的な基準とチェックリスト 評価軸チェック項目視覚的印象・色の組み合わせが調和しているか・フォントの種類やサイズが適切か・余白やレイアウトのバランスが整っているか・画像やアイコンがデザインに合っているか分かりやすさ・重要な情報が目立つか・文字や文章が読みやすいか・情報の順序や構造が整理されているか・アイコンや図の意味が直感的に分かるかターゲットへの訴求力・ターゲットの興味や価値観に合っているか・ターゲットが共感できる雰囲気になっているか・メッセージや情報がターゲットに伝わるか統一感・ブランド適合・ブランドカラーやロゴに沿っているか・デザイン全体のトーンや雰囲気が統一されているか・他のデザインや既存素材との整合性があるか実用性・Web表示や印刷で問題がないか・フォントサイズや文字色が可読性に優れているか・ファイル形式や解像度が使用環境に適しているか ターゲットに響くデザインで目的達成を目指す デザインを選ぶときは、まずターゲット、目的、テーマ、ブランド、使用環境を理解することが大切です。そのうえで、視覚的印象、分かりやすさ、ターゲットへの訴求力、統一感、実用性の5つの軸で評価すれば、初心者でも自信を持ってデザインを判断できます。 実際にデザイン案を提出した際に、「自身の好みではないけれど、ターゲットにはマッチしているのでこのまま進めてください」と言われたことがあります。これはまさに、個人の好みではなくターゲットに合ったデザインを選ぶことを優先した例です。デザインは見た目の好き嫌いだけで決めるものではなく、誰に何を伝えたいか、どのように伝えるかを意識して選ぶことが成功のポイントです。 余談：ターゲットの声を取り入れる重要性 広告担当の方から聞いた話ですが、30代・40代の男性が20代女性向けにアイデアを考えたところ、同世代の男性には好評でも、実際のターゲット層には響かなかったそうです。実際のターゲットに近い人の意見を聞いたり、一緒に考えてもらったりすることも、効果的でズレのないデザインやアイデアを選定する上で必要な要素となりそうです。

「ホームページ制作」と聞くと、「企業サイト」や「採用サイト」のみを取り扱っていると思われることも多いのですが、実際にはそれ以上の幅広いサービスに対応している制作会社が多くあります。当社でも、一般的な企業用ホームページの制作にとどまらず、ビジネス課題を解決するための多様なWebサービスに対応しています。この記事では、具体的にどのようなサービスが含まれるのか、をご紹介します。 ホームページ制作だけではない理由 ホームページ制作というと、デザインやコーディングを行い、複数のページをWEB上に公開することと思われがちですが、実際には「ホームページそのもの」を商品として提供しているのではありません。私たちが提供しているのは、ホームページを通じて企業様の成長や課題解決を支援する「伴走型の支援サービス」です。 そのため、制作の過程で培われた技術やノウハウを応用することで、企業様の目的やビジネス課題に合わせ、集客・販売・業務効率化などを総合的にサポートできる仕組みを構築することが可能です。ホームページ制作とは、単なるWEBサイト公開にとどまらず、企業活動を支える包括的な支援の一部なのです。 具体的な制作事例 当社では、以下のような制作物の対応実績があります。 ランディングページの制作 商品やサービスの魅力を効果的に伝える縦長1ページの特設ページの制作。キャンペーンやプロモーションにも活用できます。 ECサイト（ショッピングサイト）の制作 インターネットを通じて商品を販売できるショップサイトの制作。決済機能や在庫管理も組み込まれており、販売データを分析してマーケティングに活かすことも可能です。shopifyやカラーミーショップ、メイクショップ、ECキューブなどを使用したものが有名です。 プラットフォームの制作 会員制サイトやマッチングサイトなど、複数のユーザーがやり取りできる仕組みを作成。ビジネスモデルに合わせた柔軟な対応が可能です。 各種オンラインの業務システムの作成 投票システム、顧客管理システム、出勤管理システム、代理店管理システムなど、Webを通じて業務効率化を図るシステムの構築。社外には公開さることはありませんし、前述するWEBサービスとは用途も異なりますが、特定の用途においては、一般的なホームページ以上の価値を提供します。 各種クリエイティブの制作 ホームページに必要なバナーやアイキャッチ画像、広告用素材なども制作可能で、ホームページと統一感のあるデザインでブランドイメージを保ちます。 なぜ「ホームページ制作」と表現するのか 実際に多くのサービスを行っていても、何気ない会話の中で、全ての内容を説明をすることはできません。そんな中で「ホームページ制作」という表現は、多くの人にとって、直感的にイメージがしやすいという事と、自社で行っている主力なサービスだからだと思われます。 まとめ 「ホームページ制作」は、単なるサイト作成ではなく、Webを活用したビジネス課題解決全般の入口だと考えるとイメージしやすいかもしれません。依頼の際には、制作対応が可能な範囲や追加サービスの有無を確認することで、より効果的なWeb活用が可能になります。

迷惑メールが増えてきたので、メールフォームに「reCAPTCHA v3」を設置したいとの相談を受けた際にPHPを使用して実装した手順をメモ。 Google「reCAPTCHA v3」に登録 まずはGoogle reCAPTCHAのサイト情報の登録画面にアクセスし、必要情報を入力。送信ボタンを押した後に表示される「サイトキー」と「シークレットキー」を取得します。※登録にはgoogleアカウントが必要です。 入力項目入力内容ラベル管理用の任意の文字列を入力reCAPTCHAタイプ｢スコアベース(v3)｣を選択ドメインreCAPTCHA v3を使うサイトのドメインを入力 Google reCAPTCHAのサイト情報の登録画面 Google reCAPTCHA v3をサイトに設置 メールフォームの設置されてるページに「reCAPTCHA v3」用のjavascriptとinputタグを設置します。 HTML <script src="https://www.google.com/recaptcha/api.js?render=サイトキー"></script> <script> grecaptcha.ready(function () { grecaptcha.execute('サイトキー', { action: 'submit' }).then(function (token) { document.getElementById('recaptcha_response').value = token; }); }); </script> <form action="sendmail.php" method="post"> <!-- reCAPTCHA v3 用タグ --> <input type="hidden" name="recaptcha_response" id="recaptcha_response"> <!-- reCAPTCHA v3 用タグ --> <dl> <dt>お名前</dt> <dd><input type="text" name="name"></dd> <dt>メールアドレス</dt> <dd><input type="text" name="email"></dd> <dt>電話番号</dt> <dd><input type="text" name="tel"></dd> <dt>お問い合わせの内容</dt> <dd> <textarea name="content"></textarea></dd> </dl> <div><input type="submit" name="submit" value="入力内容を確認する"></div> </form> PHP（sendmail.php） if(!empty($_POST['submit'])){ $secret_key = 'シークレットキー'; if(isset($_POST['recaptcha_response'])) { $token = $_POST['recaptcha_response']; }else{ $token = ''; } $remote_ip = $_SERVER['REMOTE_ADDR']; // トークンをGoogleに検証依頼 $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secret_key}&response={$token}&remoteip={$remote_ip}"); $result = json_decode($response, true); // スコアのしきい値（例：0.5以上で人間と判断） if ($result["success"] && $result["score"] >= 0.5) { // 通過処理 ここにメール送信処理などを記述 } else { // botまたは不正なアクセスと判断 停止処理などを記述 } } 「reCAPTCHA v3」を利用する際の注意事項 「reCAPTCHA v3」の利用には費用が必要となります。月間1万アクセスまでであれば無料で利用ができますが、以降は利用した量に応じて費用が請求されます。多くの中小企業サイトであれば無料枠内で問題なく運用は可能かと思いますが、運用してみたら想定外の費用が必要になった、という事のないよう、アクセス解析等を確認しながら、どの程度の費用が必要となるかを事前に確認しておくのが良いです。 ワードプレスを使用している場合はプラグインを使うことでより簡単に実装ができるようです。 Google reCAPTCHA v3認証の導入方法 – 2025年度版

ホームページを制作される目的として多いのは、自社で取り扱っているサービス（製品）へのお申し込みではないでしょうか。弊社のホームページでも興味を持っていただいた方に素早くお問い合わせいただけるよう、CTA（行動喚起）ボタンの作り方には試行錯誤を重ねており、それに伴ってお問い合わせ率（CVR）も上昇してきましたので、実際に行ったことを含め説明していきます。 CTA（行動喚起）ボタンとは CTAとは「Call To Action（コールトゥアクション）」の略で、ホームページ上でユーザーに「問い合わせ」「申し込み」「資料請求」など具体的な行動を促すボタンやリンクのことです。 世界には素敵なホームページが多く存在しますが、ホームページ内で何をしてほしいのかがユーザー伝わらなければ成果（売上）は出ません。 このボタンがわかり易く設置されているだけで、お問い合わせの数が変わってくるため、ホームページの成果を左右する “超重要なポイント” として考えられています。 具体的なCTA実践例＋理由を解説！ ユーザーの目線を意識した配置 お問い合わせボタンを最上部（ヘッダー部分）に設置しているところは多く見かけますが、それだけでは不十分です。人は上から下にページを読み進めるため、最初に行動したい人とじっくり見て納得した人の両方に合わせたボタンの配置が必要です。また、スクロールしてもボタンが見えると、いつでも行動しやすくなります。 ファーストビュー（ページ最上部）に大きなCTAボタンを置く ページ下部にももう1つCTAを設置する サービス紹介や料金説明の後など、要所に設置する スマホでは画面下部に固定表示すると押しやすい 周囲に埋もれない色やデザイン CTAボタンもホームページの雰囲気に合わせて作りたいところですが、CTAボタンが周囲に埋もれてしまっては意味がありません。ユーザーに見落とされてしまわないよう、色や形、サイズなど、デザイン的な工夫が必要です。 暖色系（赤・オレンジ・黄色）の色は目を引く 文字は白や黒でコントラストを強く サイズはスマホでも指で押しやすい大きさに ボタン周囲に十分な余白をとる 押したくなる文言を使う 具体的でわかりやすい文言は「行動後に得られるもの」をイメージさせやすく、ユーザーがクリックしやすくなります。「送信」「クリック」などの抽象的な表現はもちろん、「お問い合わせ」や「資料請求」などの名刺で終わる文言ではなく「○○に問い合わせる」「資料請求する」などの動作に直結する文言を選びましょう。「する」という動詞が入っていることで、行動イメージが湧きやすく、心理的に背中を押されやすくなります。 また、「今すぐ」「30秒で」といった文言を加えて、ユーザーにすぐに行動するよう促す手法もよく使われています。 無料で相談する 30秒で登録する 今すぐ資料請求する 数字を入れて信頼感をプラス バンドワゴン効果（多くの人が支持しているものに対して、さらに支持が集まる現象）からもわかるように、人は多くの人が利用しているサービスや商品に対して安心感を持ちやすい傾向があります。 「現在○○人が利用中」など、実際にどの程度の人が利用しているのかを数値として示すことで、その安心感や信頼度がさらに高まり、行動を後押しします。 ただし、数字は必ず正確なものであることが重要で、誇張や偽りがあると逆に信頼を失います。 先月は70件のご相談をいただきました 累計1,200件以上の実績 現在10名の方が資料請求中 ボタンに軽い動き（アニメーション）をつける 動く要素は人の視線を集めやすいため、軽いアニメーションは「押したくなる」心理を刺激します。大きさや色を変化させたり、軽く動かすことで、ユーザーは「ここを押せばいいんだ」と直感的に理解しやすくなります。しかし、動きが激しすぎると逆にストレスになるため、控えめかつスムーズな演出が望ましいです。 少し拡大（1.1倍程度） ゆっくりフェードイン 軽い上下のバウンド（2px程度） 控えめな点滅 まとめ：適切なCTAを見つけてお問い合わせ数を上げましょう CTAはホームページの成果を左右する超重要パーツです。具体的な理由を理解して効果的に設置すれば、ユーザーの行動を自然に後押しできます。ぜひこの記事を参考に、あなたのホームページで実践してみてください！ 株式会社衆サイトの運用実績

ホームページ制作やWordPress運用をしていると、画像やPDFなどのファイル名に「日本語」を目にする機会があります。たとえば、「会社案内.pdf」や「商品名①.jpg」のような名前です。普段は問題なく見えても、サーバー移転などのタイミングで大きなトラブルを引き起こす可能性があります。今回は、弊社がWordPressのサーバー移転時に経験した実際のトラブルをもとに、なぜ日本語ファイル名は非推奨とされているのかを初心者向けにわかりやすく解説します。 日本語ファイル名はなぜよく使われるの？ まず大前提として、日本語ファイル名は日常業務でよく使われています。 WindowsやMacでは「会社案内.pdf」などの日本語名のファイルが問題なく扱えます。 社内資料や共有フォルダでは、内容が一目でわかって便利です。 WordPressでも日本語名のまま画像やPDFをアップロードできますし、URL（スラグ）を日本語に設定する事も可能です。 そのため、多くの方が「日本語ファイル名＝普通に使えるもの」と認識されていても不思議ではありません。しかしながら、「普段使えているからOK」では通用しないのがWebの世界です。 WordPressでの実体験：移転したらメディアが表示されない！ これは実際に弊社で行った移転作業中に起こった事例です。移転前のデータをダウンロードし、移転先のサーバーへFTPを使用してアップロード、全ての設定を完了し、サイトを開いてみると画像が一部表示されず、PDFも開けない。調べてみると、ファイル名に日本語が含まれているメディアだけが読み込まれていないことがわかりました。 最終的には、20点程度の日本語名で登録されていたファイルを全て再登録することで問題を解消できたのですが、再登録の必要なファイルの数が多かった場合は、より多くの時間を費やすことになったでしょう。 なぜ日本語ファイル名はトラブルを起こすのか？ ホームページで使用するファイル名を日本語にすることについて基本的には非推奨とされています。理由は「日本語ファイル名やURLは、見た目とは違って実際には英数字に変換（エンコード）されて処理されている」からです。 たとえば、次のような日本語URL「https://example.com/会社概要」は、実際にはブラウザやサーバーの内部では「https://example.com/%E4%BC%9A%E7%A4%BE%E6%A6%82%E8%A6%81」のように変換されて扱われています。 このような変換は、インターネットの国際的なルール（RFC 3986）により決まっています。URLで使用できるのは英数字や一部記号のみとされているため、日本語や全角文字は自動的に「パーセントエンコード」という形で処理されます。 見た目には「日本語が使えている」ように見えますが、それはブラウザが気を利かせて“元の日本語”で表示してくれているだけで、実際には複雑な文字列として扱われており、システムによってはこれをうまく処理できないことがあります。 よくあるトラブル例 リンク切れやファイルの読み込み失敗につながる場合がある サーバー移転やバックアップの際、FTPソフトが日本語ファイル名を文字化けさせる SNSや外部サービスで日本語URLをシェアすると、長くて読みにくいURLに変換される まとめ ワードプレスの普及で日本語のファイルをそのままアップロードしたり、URLに日本語を使用したものも見かけるようになりました。 パソコン上で作業をしている時（ローカル環境）には問題なく表示されていることもあるため、日本語のファイル名のままサーバーにアップロードしてしまう方も多いようですが、サーバーによっては日本語のファイル名を正しく処理できないものも存在します。 安定した運用やトラブル防止のために、ホームページに使用するファイルは最初から英数字のファイル名にしておくことを強くおすすめします。

アクセス解析をする際に、非常にお世話になっている「googleアナリティクス」専用タグの設置してあるサイト内ページであれば計測が簡単なのだけれど、外部リンクには自社タグが設置できないため、仮想ページとリダイレクト処理を使用して計測できるようにした方法をメモ。 まず、GA4からのgoogleアナリティクスの仕様変更により、パス表示ではパラメータ形式のURLは個別ページとして表示してくれないため、ディレクトリ構成でのURLを生成する必要があります。参考例はワードプレスを使用し、カスタムフィールド（target_url）に外部リンクのURLが設定しています。 計測したいサイト内ディレクトリ直下に計測用のディレクトリ「links」を作成。その中に「.htaccess」と「index.php」を設置します。 .htaccess RewriteEngine on RewriteRule ^(.*)$ index.php [L] index.php <?php require_once(__DIR__.'/../wp-blog-header.php'); $parse_url = parse_url($_SERVER["REQUEST_URI"]); $segments = explode('/', trim($parse_url['path'], '/')); $id = $segments[1]; if(!empty($id)){ $dt['id'] = preg_replace('/[^0-9]/', '', $id); //数字のみを対象 $url = esc_url(get_post_meta($dt['id'], 'target_url', true)); } ?> <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <meta name="robots" content="noindex, nofollow"> <title>外部リンク｜<?php echo get_the_title($dt['id']); ?></title> <!-- Google tag (gtag.js) をここに記載--> <meta http-equiv="refresh" content="0; URL=<?php echo($url); ?>"> </head> <body> </body> </html> phpでのリダイレクト処理では「header関数」を使用することが一般的ですが、その場合は計測タグが読み込めなくなるため、今回はメタリフレッシュを使用しています。自然な遷移になるよう、リダイレクトまでの処理時間を「0秒」に設定していますが、遷移先のページの読み込みが遅い場合は一定時間、空のページが表示されてしまいます。訪問者が戸惑わないよう「リダイレクト中」などの表記を加えても良いかもしれません。 外部リンクを設置するページ（single.php） <a href="/links/<?php echo get_the_ID(); ?>" target="_blank" rel="noreferrer noopener">外部リンク先名</a> 外部リンクを設置するページではリンクを仮想ページ（links）に向けます。以上です。 尚、今回は外部リンク設定が1点でしたが、複数になる場合はリンクの記載に対象となるカスタムフィールドの値を追記し、受け取り側で判別して振り分けることも可能です。 外部リンクを設置するページ（single.php） <a href="/links/target_url/<?php echo get_the_ID(); ?>" target="_blank" rel="noreferrer noopener">外部リンク先名</a> 受け取り側の処理は下記を参考ください index.php <?php require_once(__DIR__.'/../wp-blog-header.php'); $parse_url = parse_url($_SERVER["REQUEST_URI"]); $segments = explode('/', trim($parse_url['path'], '/')); $category = $segments[1]; $id = $segments[2]; if(!empty($category) && !empty($id)){ $dt['id'] = preg_replace('/[^0-9]/', '', $id); //数字のみを対象 $url = esc_url(get_post_meta($dt['id'], $category, true)); } ?> 以下省略 PHP「parse_url」とhtaccessを使ってパラメータ形式のURLをディレクトリ形式に変更する

「ブログを始めてみたものの、何を書けばいいのかわからない…」そんな悩みを抱えている方は少なくありません。特にビジネス目的でブログを活用する場合、ただの日記や雑記ではなかなか集客につながりません。大切なのは、見込み客の興味や悩みに寄り添った“記事ネタ”を選ぶことです。今回は、初心者でも実践しやすい「ブログ記事のネタ出しテクニック」を4つの視点からご紹介します。 業界の知識を記事にする（専門性をアピール） あなたが日常的に使っている専門知識や業界の常識は、初心者にとっては新鮮で役立つ情報ばかり。例えば、弊社記事の「プロが考える！ホームページ作成で押さえたいポイント6選」「ホームページ制作の会社を探すには？初心者でもできる3つの探し方」といった記事（豆知識）は、初めて発注を考えている人にとって十分役に立つ情報になります。 参考例 印刷会社 → 「名刺の印刷で紙質を選ぶときのポイント」 美容室 → 「カラーの色持ちをよくするホームケア方法」 ポイントは、難しい言葉をかみ砕いて、初心者向けに意識して書くこと。専門家としての信頼感を得られる記事は、読者に「相談してみたい」と思わせる力を持っています。 技術を記事に書く（経験者・同業者がうなる専門的視点） 「技術的にどのように解決できるのか」「なぜその方法を選んでいるか」など、プロ目線での発信は同業者や経験者からの信頼や評価にもつながります。例えば、弊社記事の「.htaccessでPHPのファイルアップロードサイズの上限値を変更」「PHPの「preg_replace」を使って文中のURLを自動認識してリンクに変換」といった技術記事は、多くの経験者に読まれています。 同業者に読まれて何の意味があるのか？と思われるかもしれませんが、このような「専門的な記事」は、次のような効果があります。 記事の効果 あなたの技術力・視点の深さを可視化できる（=信頼・権威の構築） 協業・紹介・相談のチャンスが増える 「この人となら安心して一緒に仕事できそう」と感じてもらえる また、専門的な話題ほどSNSや技術系コミュニティで拡散されやすく、記事の露出や被リンク獲得にもつながります。 記事を書かれている方の中には、専門的な内容を公開することで、同業他社に真似されてしまうのでは？と思われる方がいるかもしれません。しかし、記事で公開しなければあなたがどのような技術を持っているのかを知ってもらうこともできませんし、そのような解決方法（使い方）があることに気がついてももらえません。 実際に「計算プログラムの作り方」を記載したことで、お見積りプログラムの制作依頼を頂いた事例もあります。出し惜しみせず、すべてを知ってもらう気持ちで書くのがコツです。 実績を記事に書く（信頼・安心感を与える） 過去の実績や事例は、読者にとって「本当に効果があるのか？」を判断する重要な材料です。例えば、リフォーム会社なら「築30年の住宅を明るく生まれ変わらせた事例」「水回りのトラブルを解決したA様の声」といった記事が信頼につながります。 重要なのは、ただ実績を並べるのではなく「どんな悩みがどのように解決されたか」を丁寧に描写すること。そして、実績のタイトルは検索エンジンからの流入を考えて、名称（サイト名や施設名）でなく「地域・業種・施策内容」を記載すること。 読者は「自分もこのケースに当てはまるかも」と共感し、問い合わせにつながる可能性が高くなります。 人柄を伝える記事を書く（共感・親しみを生む） 最後に、紹介するのは「人柄を伝える記事」です。商品やサービスの内容がほぼ同じなら、「どんな人がやっているか」も大切な判断基準になります。だからこそ、あなたの考え方や価値観、日々感じていることなどを、さりげなく発信する記事も重要です。 例えば「なぜこの技術使っているのか」「お客さんとのやり取りで大切にしていること（理念）」「失敗から学んだこと」など、共感を生むエピソードは、人となりを伝えると同時に「この人に相談してみたい」と思わせる効果があります。 まとめ：ネタ選びでブログの価値が変わる ブログ記事は、ただ書けばいいわけではありません。「誰に」「何を伝えるか」を意識し、読み手の心に響くネタを選ぶことが最重要です。 今回ご紹介した「4つの視点」を意識してネタを選んでいけば、初心者でも成果につながるブログ記事を書けるようになります。 最初から完璧を目指す必要はありません。まずは、あなたの中にすでにある経験や考えをもとに、1記事だけ書いてみてください。きっと、それが次の仕事やご縁につながる第一歩になります。

ホームページ改修のご相談を受ける際に「テスト環境」についてお伺いする機会があるのですが、システムが絡むようなホームページをお持ちの企業様でもテスト環境をお持ちでない場合もありましたので、ホームページの運用（変更や改修）には欠かせない「テスト環境」について説明していきます。 ホームページのテスト環境とは テスト環境とは、稼働中のホームページ（本番環境）を複製して作られたコピーサイトで、特に本番環境と同一のサーバーを使ったものを「ステージング環境」と言うこともあります。 テスト環境は、稼働中のホームページを修正・改修する際の、事前確認（動作確認）を目的としており、まずはテスト環境で構築してから、本番環境に適応する、というように安心してホームページを運用するためには欠かせないものです。 テスト環境の用意の仕方 テスト環境を用意する方法として、大きく3つの方法があります。ご紹介する方法の中には、途中からでは難しいものもありますので、定期的に更新が予想されるホームページや、システムを組み込んだホームページを制作する場合は、予めテスト環境の事を考えて構築することをお勧めしております。 同一サーバー内で用意する：自社保有 ホームページの公開用に用意したサーバー内にコピーサイトを用意する方法で、動作確認がしやすく、また運用に追加費用がかからない方法。 本番環境とテスト環境とがお互いに干渉しないよう並列のディレクトリ構成にする事が望ましく、URLはサブドメインを利用する場合が多いです。 しかしながら、既にサーバーの直下に本番用のファイルがある場合は、途中からの変更が難しいため、その下に作ること（直列構成）になります。この場合は、上位ディレクトリの影響を受ける場合や、パスの指定が変わることもあるので、同一環境とはいっても注意が必要。 別サーバーで用意する：自社または委託先の業者が保有 コピーサイト用に新規でサーバーを契約する方法。追加の運用費用が必要となりますが、本番環境は完全に分かれているため、安心して作業ができる他、ディレクトリ構成も自由にできるため、途中から用意する場合でも問題なく対応できます。 都度、用意する：委託先の業者保有 テスト環境を用意せずに、改修の度に委託先の業者のものを借りる方法。テスト環境をお持ちでない企業様が最も利用される方法で、ホームページを納品するまでの期間、委託先のサーバーで開発・確認を行い、納品後は全てのデータが削除されます。 月々の費用はかかりませんが、複雑なシステムであればテスト環境を用意する度に費用が発生します。更新頻度の高い企業様によっては、保守管理と合わせて、そのままテスト環境として契約されることもあります。 まとめ ホームページは一度制作して終わりではなく、事業の拡大や、利用者の動向に合わせて日々変化していきます。特に、ワードプレスのようなCMSを利用されている場合は、本体やプラグインのバージョンアップにより更新する予定が無くても更新を迫られる場面もあります。アップデートと同時にページが見れなくなった、というなことが無いよう、ホームページを運用する際には、出来るだけ自社でテスト環境は用意されることをお勧めしています。