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

最近、ある制作会社の方から「お問い合わせフォーム（ワードプレス未使用時）はGoogleフォームを推奨しています」というお話を聞く機会がありました。Googleフォームは無料で利用できるため、「コストを抑えられる便利なサービス」という印象を持っていましたが、実際に企業サイトで利用することを想定して検証してみると、意外なメリットとデメリットが見えてきたので、今回は、実際に触ってみて感じたGoogleフォームのメリット・デメリットをご紹介してみます。 Googleフォームのメリット 無料で利用できる 最大の魅力は、やはり無料で利用できることです。googleアカウントを登録するという条件はあるものの、サーバー契約やフォームシステムの導入が不要なため、すぐにフォームを公開できます。 フォーム作成が簡単 質問項目を追加していくだけでフォームを作成できます。専門的な知識がなくても、「お問い合わせフォーム」「イベント参加申し込みフォーム」「アンケートフォーム」などを短時間で作成できます。 回答の集計機能が優秀 Googleフォームの大きな特徴が集計機能です。回答内容はGoogleスプレッドシートへと連携が可能です。さらに、「回答数の集計」「グラフ表示」「CSV出力」なども簡単に行え、アンケートや市場調査などでは非常に便利な機能です。 サーバー側の管理が不要 一般的なメールフォームでは、「サーバー設定」「PHPのバージョン管理」「セキュリティ対策」などが必要になりますが、Googleフォームではこれらを意識する必要がありません。 Googleフォームのデメリット 自動返信メールの自由度が低い 企業サイトの問い合わせフォームでは、「お問い合わせありがとうございます。」といった自動返信メールを送ることが一般的です。 しかしGoogleフォームの標準機能では自由度が低く、企業向けの文面を送信するにはGoogle Apps Script（GAS）などによる追加対応が必要になります。 送信元メールアドレスの問題 自動返信メールをカスタマイズした場合でも、そのままの状態では、送信元がGoogleアカウント（フォームを作成したメールアドレス）になります。 企業として運用する場合は、「info@○○.co.jp」「contact@○○.jp」などの独自ドメインメールを利用したいことが多いため、追加設定が必要になります。 この時に、事前にサーバーを契約していない場合は、メール送信用に「Google Workspace」や「各種メール配信サービス」などの追加契約が必要になる場合もあります。 入力チェック設定に知識が必要な場合がある メールアドレスや数値入力などの基本的な入力チェックや必須項目の設定は標準機能で設定できます。 しかし、「郵便番号」「電話番号」「日本語の有無の確認（特定形式の文字列）」などを細かく制御する場合は、「正規表現」と呼ばれる形式を利用した設定が別途必要になります。 郵便番号からの住所自動入力がない 企業向けフォームでは一般的な「郵便番号からの住所自動補完」といった機能が標準では利用できません。こちらも、実装する場合は追加開発が必要になります。 デザインの自由度が低い Googleフォームは手軽に作成できる反面、デザインの自由度は高くありません。企業サイトのデザインに合わせて細かく調整したい場合には制約があります。 コンバージョン計測がしづらい Web広告を運用する場合、Google広告、SNS広告などのコンバージョン計測が重要になります。しかしGoogleフォームでは一般的なフォームのように自由にタグを設置できないため、計測方法に工夫が必要です。 以上、簡単なフォーム作成は可能ですが、業務利用レベルまで作り込むと専門知識が求められます。 本当にコストは安くなるのか？ Googleフォームは無料で利用できます。 しかし、企業サイトで一般的に求められている内容を実装しようとすると、追加開発が発生します。 企業ページで使用する際に実際に必要と考えられる機能 自動返信メール 独自送信元アドレス 郵便番号住所補完 コンバージョン計測 入力チェック（場合に応じて） 結果として、「フォームシステムを導入する費用」は削減できても、「必要な機能を実現するためのカスタマイズ費用」は発生しますので、企業向けのお問い合わせフォームに関しては、一般的なフォームシステムと大きな費用差が出ないケースもあります。明確に負担が無くなるのは、フォームページの作成と完了ページの作成くらいでしょうか。 Googleフォームが向いているケース 実際に検証してみて、Googleフォームは次のような用途に向いていると感じました。 アンケート調査 満足度調査 会員や社内限定の申請フォーム 個人利用（イベント申込等） いずれも、一時的な利用や既に関係性のあるコミュニティーでの利用、自動返信の必要が無いか、個人からの返信でも影響のないものになります。 特にアンケート用途では、回答の集計機能が非常に優秀です。回答内容を自動で集計し、グラフ化まで行えるため、情報収集を目的とするフォームでは大きなメリットがあります。 まとめ Googleフォームは、「回答を集めるツール」としては非常に優秀なサービスです。一方で、「企業サイトのお問い合わせフォーム」として利用する場合は、想像以上に追加対応が必要になるケースが多いと感じました。 無料で利用できることは大きな魅力ですが、導入を検討する際は「何を実現したいのか」を整理したうえで選択することが重要です。 アンケートや情報収集が目的であればGoogleフォームは非常に有力な選択肢です。一方で、企業サイトの問い合わせ窓口として利用する場合は、一般的なフォームシステムとの違いを理解した上で導入を判断することをおすすめします。

ホームページでは「いいね」や「お気に入り登録」など、ボタンを押した瞬間に画面が更新される機能を見かけることがあります。これらは多くの場合、ページ全体を再読み込みするのではなく、JavaScriptからサーバーへ通信を行う「非同期通信（AJAX）」によって実現されています。当サイトでも過去にAJAXについて紹介したことはありますが、今回はWordPress標準の「admin-ajax.php」を利用し、投稿に「いいね」を付ける機能を例に実装方法をご紹介します。 ページを再読み込みせず「いいね」機能を作る 非同期通信（AJAX）の流れ 今回の処理を簡単に説明すると、次のような流れになります。 ボタンをクリック JavaScript(jQuery) admin-ajax.php PHPでデータベース更新 PHPがJSON形式で結果を返す JavaScriptで画面を書き換える WordPressでは、この一連の流れを比較的簡単に実装できます。 一般的な非同期通信は下記を参照ください [blogcard url=https://web.syu-u.com/blog/?p=2999] ボタンを設置する まずはショートコードでボタンを表示します。ショートコードに[like_button]を記載するだけでボタンが設置できます PHP（functions.php） function sample_like_button(){ global $post; $count = get_post_meta($post->ID, 'like_count', true); if(empty($count)){ $count = 0; } $html = '<input type="hidden" id="post_id" value="'.esc_attr($post->ID).'">'; $html .= '<button id="like-btn">いいね</button>'; $html .= '<span id="like-count">'.esc_html($count).'</span>'; return $html; } add_shortcode('like_button', 'sample_like_button'); //ショートコードの名称とそれを実行する関数の定義 JavaScriptからAJAXを送信する jQuery（sample-like.js） jQuery(function($){ $('#like-btn').on('click', function(){ const $btn = $(this); if ($btn.prop('disabled')) return; // 通信中ならスキップ $btn.prop('disabled', true); // ボタンを無効化 $.ajax({ type: 'POST', url: sample_ajax.ajaxurl, data: { action : 'sample_like', _ajax_nonce : sample_ajax.nonce, post_id : $('#post_id').val() } }).done(function(response){ $('#like-count').text(response.count); }).fail( function( error ) { console.warn('失敗:', error.status, error.statusText); }).always(function(){ $btn.prop('disabled', false); // 成功・失敗に関わらずボタンを元に戻す }); }); }); JavaScriptへURLを渡す WordPressでは、admin-ajax.php のURLをJavaScriptへ直接記述するのではなく、PHPから渡すのが一般的です。wp_add_inline_script() を利用することで、PHPで取得したURLやnonceをJavaScript側へ安全に渡すことができます。 PHP（functions.php） function sample_enqueue(){ wp_enqueue_script( 'sample-js', plugin_dir_url(__FILE__).'sample-like.js', //jsのファイルパス array('jquery'), null, true ); wp_add_inline_script( 'sample-js', 'const sample_ajax = '.json_encode(array( 'ajaxurl'=>admin_url('admin-ajax.php'), 'nonce'=>wp_create_nonce('sample_nonce') )), 'before' ); } add_action('wp_enqueue_scripts','sample_enqueue'); PHPでAJAXを受信する JavaScriptから送信されたデータは、WordPress側で受け取ります。 PHP（functions.php） function sample_like_ajax() { check_ajax_referer('sample_nonce'); if (isset($_POST['post_id'])) { $post_id = intval($_POST['post_id']); } else { $post_id = 0; } $count = get_post_meta($post_id,'like_count',true); if(empty($count)){ $count = 0; } $count++; update_post_meta($post_id,'like_count',$count); wp_send_json(array('count' => $count)); } // 上記で定義した AJAX ハンドラを AJAX アクションに登録 add_action('wp_ajax_sample_like', 'sample_like_ajax'); //ワードプレスのログインユーザーが対象となる場合 add_action('wp_ajax_nopriv_sample_like', 'sample_like_ajax'); //ワードプレスの非ログインユーザーが対象となる場合 任意の文字列について コード内には sample_like や sample_nonce など、自由に名前を付けられる文字列がいくつか登場します。これらは好きな名前に変更できますが、関連する箇所では必ず同じ文字列を使用する必要があります。 任意の文字列記載箇所説明sample_ajaxconst sample_ajax= {...}JavaScriptへ渡す変数名です。スクリプト内で参照する名前と一致させます。sample_ajaxsample_ajax.ajaxurlJavaScript内上記で定義した変数名と同じものを使用します。sample_ajaxsample_ajax.nonceJavaScript内nonceを取得する変数名です。PHP側で渡したキー名と一致させます。sample_likeaction: 'sample_like'JavaScript内AJAXで呼び出すアクション名を指定します。sample_likeadd_action('wp_ajax_sample_like', 'sample_like_ajax');ログインユーザー用のフックです。JavaScriptのactionと同じ文字列にします。sample_likeadd_action('wp_ajax_nopriv_sample_like', 'sample_like_ajax');非ログインユーザー用のフックです。こちらも同じ文字列にします。sample-jswp_enqueue_script('sample-js', ...)JavaScriptファイルをWordPressへ登録する際のハンドル名（識別子）です。sample-jswp_add_inline_script('sample-js', ...)インラインスクリプトをどのJavaScriptファイルに関連付けるかを指定します。wp_enqueue_script()と同じ文字列を指定します。sample_noncewp_create_nonce('sample_nonce')nonceを生成する際の識別名です。sample_noncecheck_ajax_referer('sample_nonce')nonceを検証する際の識別名です。生成時と同じ文字列にします。 今回は理解しやすさを優先し、テーマの functions.php に実装しています。実際の案件では、再利用性や保守性を考慮してプラグインとして実装するケースもプラグインとして実装するケースも少なくありません。 また、今回の内容は「いいね」機能を例にしていますが、考え方はお気に入り登録や閲覧数の更新、問い合わせフォームの確認処理など、さまざまな非同期処理に応用できます。 一度AJAXの基本的な仕組みを理解しておけば、WordPressで実装できる機能の幅が大きく広がるでしょう。 WordPressのAjaxで非同期処理を実装する方法を徹底解説(サンプルコード付き)

広告運用について相談すると、「まずはLP（ランディングページ）を作りませんか？」と提案されることはないでしょうか。広告を出したいだけなのに、なぜページ制作の話になるのだろう。そう感じた経験がある方もいるかもしれません。しかし、広告の成果は広告だけで決まるものではありません。どれだけ優れた広告を作っても、訪問した先のページが魅力的でなければ問い合わせや資料請求にはつながりません。広告運用の現場では、この訪問後のページ（ランディングページ）を「受け皿」として考えます。今回は、なぜ広告運用の相談でLP（ランディングページ）が提案されるのか、その理由について解説します。 そもそもLP（ランディングページ）とは？ LP（ランディングページ）とは、特定の商品やサービスに特化して紹介し、問い合わせや資料請求などの行動を促すことを目的とした特設ページです。 訪問者が知りたい情報だけを一つのページに集約し、他のページに遷移させることなく、お申し込みまでを1ページで完結でき、行動までの導線を分かりやすく設計できることが特徴です。 参考例 オンラインクリニックの診療予約 新商品の購入 通信回線の申し込み エステ等のキャンペーン また、「LP＝縦長のページ」という説明をされることがありますが、本質はページの長さではありません。広告から訪問したユーザーに対して、必要な情報を分かりやすく伝え、行動につなげることがLP（ランディングページ）の役割です。 広告は人を集める仕組み Google広告やSNS広告など、各種広告の役割は、サービスに興味を持ちそうな人を集めることです。広告文やターゲティングを工夫することで、多くの見込み客をページへ誘導できます。 しかし、広告はあくまで入口です。広告をクリックした人が、「自分に関係のあるサービスか分からない」「サービス内容が理解しづらい」「問い合わせ方法が見つからない」と感じてしまえば、そのままページを離れてしまいます。 広告の成果を高めるためには、広告そのものだけでなく、広告を押して訪れた先のページも重要になります。 広告成果は「アクセス数 × CVR（問い合わせ率）」で決まる 広告の成果は、シンプルに考えると成果=アクセス数×CV率（問い合わせ率）になります。例えば、下記の場合、問い合わせは10件です。 月間アクセス数：1,000人 CVR（問い合わせ率）：1％ ここでイメージしていただきたいのが、「水とバケツ」の関係です。広告は、水を流す蛇口のようなものです。広告費を増やせば、より多くの水を流すことができます。 一方で、LP（ランディングページ）やサービスページは、その水を受け止めるバケツです。もしバケツに穴が開いていたらどうでしょうか。どれだけ勢いよく水を流しても、多くがこぼれてしまいます。逆に、穴をふさいでしっかり水を受け止められるようになれば、同じ量の水でもより多くの水を貯められます。 広告運用も同じです。アクセス数を増やすことも大切ですが、まずは受け皿がきちんと機能しているかを確認することが重要です。広告費を増やす前に受け皿になるページを改善した方が、大きな成果につながるケースも少なくありません。 なぜLP（ランディングページ）が提案されるのか ここで一つお伝えしておきたいのは、LP（ランディングページ）は必須ではないということです。 商材やサービスの内容、既存サイトの構成によっては、ホームページ内のサービスページを活用するだけでも十分な成果が出る場合もあります。 一般的には、広告専用の受け皿を作ることで成果改善が期待できることが多いため、広告運用の相談ではLP（ランディングページ）が提案されるケースが多くあるのです。 また、広告運用の相談でLP（ランディングページ）が提案される理由は、コーポレートサイト（ECサイト、各種サービスサイトを含む）とLP（ランディングページ）では基本的な役割が異なるためです。 例えば、コーポレートサイトを「デパートの総合受付」に例えてみましょう。総合受付では、「会社案内」「サービス紹介」「採用情報」「お知らせ」「お問い合わせ」など、さまざまな情報を案内しています。これは、企業について幅広く知ってもらうための場所であり、様々な用途で訪れるユーザーに対応する役割があるからです。 一方、LP（ランディングページ）は「売り場のカリスマ販売員」のような存在です。ユーザーが特定の商品に興味を持って売り場へ来たとき、「この商品はこんな方におすすめです」「こんなお悩みを解決できます」「他の商品との違いはこちらです」「実際の利用者からは、こんな声があります」と、一つの商品やサービスに絞って説明します。 広告をクリックする人も同じです。何らかの課題や興味を持って訪問しているため、会社全体の情報よりも、自分が探しているサービスについて詳しく知りたいと考えています。 そのため、広告から訪問したユーザーに対して問い合わせや資料請求を促す場合は、情報を絞り込んだLP（ランディングページ）の方が成果につながりやすくなります。 コーポレートサイトが企業を知ってもらうためのページだとすれば、LPはサービスの魅力を伝え、行動を後押しするためのページと言えるでしょう。 だからこそ、広告運用を相談する際にはLP（ランディングページ）をセットで提案されることが多いのです。 実際に成果が改善した事例 当社でも、広告運用の際に受け皿となるLP（ランディングページ）を見直すことで成果が改善したケースがあります。 当社でお手伝いした2つの事例（採用系サービス・情報系サービス）では、もともと広告のリンク先としてホームページ内の特定のページを利用されていました。しかし、よく見てみると下記のような課題が見えてきたため、いくつかの改善を行い、広告専用の受け皿としてLPを設置しました。 採用系サービスでの事例 見えてきた課題 対象者が分かりにくい サービスの強み（メリット）が伝わりにくい 不安解消できる判断材料が少ない 改善に向けて行った取り組み 対象者の明確化 コンテンツ構成の整理 利用者の声やよくある質問の追加 情報系サービスでの事例 見えてきた課題 情報量が多すぎて目的の商品に到達するまでに時間がかかる キャンペーン（複数申し込みでの特典）の内容が伝わりにくい 改善に向けて行った取り組み お勧め商品として、ジャンルごとに選定した人気商品をピックアップして表示 チェックボックスを設けて、同時申し込みの簡略化を行うと同時に、視覚的にもわかり易いよう、達成状況表示も追加 その結果、広告費を大きく増やすことなくCV率が2倍以上に改善しました。もちろん、すべてのケースで同じ結果になるわけではありません。しかし、広告の成果が伸び悩んでいる場合、広告にかける費用を増やすだけでなく、受け皿側に改善の余地が残されていることは少なくありません。 まとめ 広告は人を集める仕組みです。そしてLPは、その人たちを成果へつなげるための受け皿です。 どれだけ多くのアクセスを集めても、受け皿が十分に機能していなければ成果は伸びません。だからこそ、広告運用の相談ではLPが提案されるのです。 広告の成果を高めたい場合は、広告設定や予算だけでなく、ユーザーを迎える受け皿にも目を向けてみてください。受け皿を改善することで成果が大きく変わることがあります。

「ポータルサイトを作りたい」ホームページの制作をしていると、この相談を受ける機会も意外とあります。こういった場合、実際に話を伺うと、「どんな情報を掲載するか」「どう検索できるようにするか」「会員機能をどう作るか」といった、「機能面」 の話が中心になりがちですが、一方で「どこに広告枠を設けるのか」「何を有料化するのか」までを考えられているケースは多くありません。ポータルサイトを利用者目線で見ると便利な一覧サイトのように思えますが、実際は色々なところで収益を得るための差別化が図られています。そのためポータルサイトを考える際には、「どんな機能を作るか」はもちろん、「どう収益化するか」を前もって考える必要があります。この記事では、ポータルサイト運営で見落とされがちな「広告設計」や「収益設計」について、実際の運営視点から解説します。 ポータルサイトは「掲載構造＝収益構造」 一般的な企業サイトであれば、「会社紹介」「サービス（事業）紹介」「お問い合わせ」が主な役割になります。 しかし、ポータルサイトは違います。ポータルサイトは、「掲載者」「ユーザー」「運営」の三者で成立する「市場」に近い構造です。そのため、「どこに価値が生まれるか」を最初に設計する必要があります。 例えば、求人・店舗・不動産・スクール系など、様々なポータルに共通して価値が高くなりやすいのは次のような場所です。 広告枠として有益な場所 FV（ファーストビュー）バナー 検索カテゴリー（地域）ページの上部・下部 検索結果一覧の上部・下部 特集ページでの掲載 ユーザーは、「サイトに訪れる→検索する→比較する→問い合わせる」という流れで行動します。そのため、掲載者はお問い合わせまでの導線に沿ったページ内の「目立つ場所」に価値を感じるようになります。 後から追加しづらい「広告設計」 ポータルサイトでは、広告設計がシステム構造に直結します。掲載枠の管理や優先表示等の掲載条件は後付けすると大規模改修になりやすい部分です。実際、運営経験がある人ほど、要件定義の早い段階で、「どこが広告枠になるか」を考え始めます。これは営業視点というより、「運営継続のための設計」です。 広告設計で考える必要のある項目例 優先表示（ランク設定） エリア別出し分け（掲載箇所の制御） 広告枠管理（掲載数や掲載期間、バナーサイズや文字数） 表示回数制御（ランダムや月内（週内）での表示回数制限） 「無料掲載（成果報酬型）」は本当に掲載者（クライアント）に優しいのか？ ポータルサイトでの収益を考える際に、「無料掲載にしたい」「成果報酬型にしたい」という話もよく聞きます。まずは運用をしてみて、結果が出てから収益を考えたいという方や、掲載者の負担を減らしたいと考える方に多いです。 掲載者側から見ると、「初期費用ゼロ」「成果が出た時だけ支払い」「リスクが低い」というメリットがありますし、運営側の営業活動もしやすく双方にとってメリットのある形態に思えます。 しかし、実際は運営側にとっては非常に厳しいモデルになります。なぜなら、十分な成果が出る前からコストが発生し続けるからです。 例えば、特集記事の制作（必要な場合）、広告運用（集客活動）、サーバー費用、保守管理、カスタマー対応などは、掲載者から費用を回収できなくても毎月発生します。しかも、立ち上げ初期のポータルサイトは、掲載数が少なく、知名度も低いため、成果が出づらく、掲載者が離脱し易い、という悪循環を抱えます。 そのため、無料や成果報酬型は、相当な資金力や既存集客基盤がないと継続が難しいケースも少なくありません。数カ月で運営資金が底を尽き、サービスが終了になった、となれば、掲載はし易くても、結果として掲載者にとってのメリットはなくなります。 月額制が持つ「継続運営」の強さ 一方で、月額制（前払い）は運営基盤を安定させやすい特徴があります。毎月一定の収益があることで、広告出稿や機能追加・改善、コンテンツの追加などにも継続的な投資が可能になります。 掲載者から集めた費用を再投資することで、結果として掲載者にメリットが返りやすい構造になります。 また、有料掲載には別の効果もあります。それは「掲載品質の維持」です。 無料掲載が増えると起こる問題 完全無料掲載で、意外と多いのが掲載者が更新を放置するという問題です。放っておいても費用が発生しないので、どうしても後回しになってしまうのだと思われますが、この状態が多くなると、ユーザー体験が悪化し、広告を出しても成果に繋がらない、結果的にポータルサイト全体の価値も下がってしまいます。 無料掲載でみかける問題 情報が初期の状態で古いまま放置される 写真や説明文がない（少ない） イベントやコンテンツを追加・更新しない 対応（返信）も遅くなる 逆に、月額費用を払っている掲載者は、情報更新やコンテンツの充実に積極的なケースが多いです。有料掲載は単なる収益源ではなく、「掲載品質を維持するフィルター」としても機能するのです。 おすすめは「無料＋有料」のハイブリッド しかしながら、掲載希望者は無料掲載を好む傾向があります。これは「無料が好き」というより、「失敗したくない」という心理に近いものです。そのため、現実的には、無料掲載で入口を広げて、本当に価値のある部分を有料化する、という構造がバランスを取りやすくなります。 無料プランと有料プランの設計例 無料プラン有料プラン画像写真1枚のみ写真追加可能検索順位下位表示上位表示サイト内掲載文基本情報のみ基本情報に加え、追加の説明ができる項目を用意掲載箇所最低限の掲載特集掲載、バナー表示等、露出の多い場所への掲載 「露出」と「成果」に関わる部分を有料化する方法が多いです。 ポータルサイトは「作る」より「続ける」が難しい ポータルサイトは、一覧表示や検索機能を作れば完成ではありません。本当に難しいのは、「掲載者を集め続けること」「ユーザーを増やし続けること」「収益を維持すること」「サービス品質を保つこと」です。 だからこそ、ポータルサイトでは、「どんな機能を作るか」より先に、「どう運営し、どこで利益を出すか」を考える必要があります。 実際、長く続いているポータルほど、「課金設計・掲載品質・継続投資」まで含めて設計されています。ポータルサイト制作は、単なるWeb制作ではなく、「運営設計」そのものなのです。

メールフォームからの問い合わせデータ。アナログの集計が手間なのでDBを使って保存していたのだけれど、簡単に共有したいとのことでスプレッドシートに保存した際の方法をメモ。 Apps Scriptの利用方法 Apps Scriptの利用には「googleアカウント」が必要となるため、お持ちでない方は取得してから操作を行ってください。 スプレッドシートの準備 新しいスプレッドシートを作成し、1行目に、取得したい項目名を入力（例：タイムスタンプ、 お名前、 メールアドレス、 お問い合わせ内容） Apps scriptの作成 スプレッドシートの「拡張機能」から「Apps Script」を開いて、コードを以下の内容に書き換えて帆保存し、「デプロイ」から「新しいデプロイ」選択して進む。今回はメールフォームに組み込むのでアクセス出来るユーザーを「全員」にしていしてデプロイ。WEBアプリURLが発行されるので、コピーしておいて後でPHPのソースコード内で使用する Apps Script function doPost(e) { try { var params = JSON.parse(e.postData.contents); var SECRET_KEY = "○○○○"; if (!params.access_key || params.access_key !== SECRET_KEY) { return ContentService.createTextOutput(JSON.stringify({ "result": "error", "error": "Unauthorized" })).setMimeType(ContentService.MimeType.JSON); } var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("対象のシート名"); var timestamp = new Date(); // 送信日時 sheet.appendRow([ timestamp, params.name, params.email, params.message ]); // 4. 成功した旨を返却 return ContentService.createTextOutput(JSON.stringify({ "result": "success" })).setMimeType(ContentService.MimeType.JSON); } catch (error) { // システムエラーが発生した場合 return ContentService.createTextOutput(JSON.stringify({ "result": "error", "error": error.toString() })).setMimeType(ContentService.MimeType.JSON); } } メールプログラムへの導入 PHP $data = array( 'access_key' => '○○○○', // Apps Script側で設定したのと「全く同じ」パスワード 'name' => $data["name"], 'email' => $data["email"], 'message' => $data["message"] ); $gas_url = "https://script.google.com/△△△△/exec"; // Apps ScriptのWebアプリURL $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $gas_url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data)); // JSON文字列に変換 curl_setopt($ch, CURLOPT_HTTPHEADER, array('Content-Type: text/plain')); // Apps Script受信用 curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); // GASのリダイレクト(302)を追跡するために「必須」 curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // レンタルサーバーの環境に応じてSSL検証をスルー $response = curl_exec($ch); curl_close($ch); 上記ソースコードをフォームからのメール送信プラグラムの中に記載。フォームから受け取った値を適切に処理してから「$data」に格納。「access_key」の箇所は受け取り側のスクリプト（Apps Script）が、外部からの干渉を受けないための保護対策「CURLOPT_SSL_VERIFYPEER」の項目は「true」の方が安全だが、一部サーバー環境により動かない時のためにサンプルは「false」にしています。 WebアプリURLの変更・削除 使用条件を変更する場合や、使わなくなった場合は「デプロイ」から「デプロイを管理」に進み右上の編集またはアーカイブ（ゴミ箱）ボタンより作業をおこなう。 Apps Scriptの利用は「googleアカウント」を持っていれば、誰でも無料で使用できるが利用制限があるため、規模が合わない場合は別の方法を考える必要がある 機能一般ユーザー向けアカウント（gmail.com など）Google Workspaceアカウントスクリプトの実行時間6 分 / 実行6 分 / 実行ユーザーあたりの同時実行数30 / ユーザー30 / ユーザー Google サービスの割り当て | Apps Script | Google for Developers

採用ページのご相談をいただく際、「最近の採用サイトには、どのようなコンテンツが増えていますか？」といった質問をいただくことがあります。確かに、採用サイトには時代ごとのトレンドがあります。近年では、「社員インタビュー」や「データで見る○○」に加え、「動画コンテンツ」や「カジュアル面談」などを取り入れる企業も増えています。しかし、重要なのは「流行っているからページを増やすこと」ではありません。本来、採用サイトの各ページには、それぞれ明確な役割があります。例えば「社員インタビュー」は、単なる社員紹介ではなく、入社前の不安を減らしたり、働くイメージを膨らませる役割を持っています。つまり、採用サイトで本当に重要なのは、「どんなページが流行っているか」ではなく、「求職者のどんな不安や疑問を解消するために必要なのか」を理解することです。また、採用サイトはページ数が多ければ良いというものでもありません。予算や運用体制には限りがあるため、自社に必要な役割を整理し、優先順位を決めることも重要です。この記事では、採用サイトによく設置されるページについて、それぞれの役割や必要性をマーケティング視点で初心者向けに解説します。 採用サイトは「応募判断を支援するサイト」 採用サイトというと、「会社紹介のサイト」というイメージを持たれることがあります。しかし実際には、単なる会社案内ではありません。 求職者は応募前に、「どんな仕事をするのか」「どんな人が働いているのか」「自分に合う会社なのか」「安心して働けるのか」など、多くの不安や疑問を抱えています。 採用サイトの役割は、それらを段階的に解消し、「応募してみよう」と判断できる状態をつくることです。 そのため、必要なページを考える際も、「流行っているから追加する」のではなく、「求職者の意思決定のどこを支援するのか」という視点が重要になります。 採用サイトはAIDCA（行動心理マーケティング）で考えると整理しやすい 採用サイトの役割は、マーケティングで使われる「AIDCA」の考え方で整理すると分かりやすくなります。 AIDCAとは、「Attention（動機付け）」「Interest（内容理解）」「Desire（共感）」「Conviction（納得・安心）」「Action（応募）」という、人が行動に至るまでの心理プロセスを表したものです。 採用サイトの要素を分解してみると、同じように求職者の心理を段階的に支援する構造になっていたりします。 採用サイトの構成ページ一覧 .blogpage .wrap .post_main table tr td:first-of-type { background: none; } フェーズページ主な役割・必要性興味形成・動機付け代表・担当者メッセージ経営者の考え方を伝える。ビジョン / ミッション会社の方向性を示す。共感採用につながるが、抽象論だけでは伝わりにくい。求める人物像ミスマッチ防止。「誰でも歓迎」は逆効果になりやすく、行動特性まで具体化することが重要。仕事理解仕事内容実際に何をするのかを伝える。具体的な業務を可視化。特に未経験者の安心感に直結。1日の流れ働くイメージを可視化できる。未経験応募との相性が良い。人・職場理解・共感対談（座談会）空気感を見せる。人間関係への不安解消につながる。社員インタビュー実体験による信頼形成。入社理由・ギャップ・成長を伝え、職種・キャリア・性別にバリエーションを持たせると効果的。ギャラリー（内観含む）写真による安心感を与える。オフィスや働く様子を可視化できる。応募判断・不安解消人材育成制度教育体制を可視化する。未経験採用では特に重要。キャリアパス将来像を見せる。長期的な安心感につながる。福利厚生比較検討材料になる。「制度がある」だけでなく利用実態も重要。データで見る○○客観性の担保。数字による安心感を与える。選考フロー応募ハードルを下げる。流れが見えることで安心感につながる。よくある質問離脱防止。小さな不安を解消する。募集要項応募条件を整理する。背中を最後にひと押しするための納得材料。アクション（応募）エントリー採用サイトのゴール。フォーム設計でCV率が変わる。インターンシップ学生との早期接点。相互理解の場になる。 トレンドコンテンツは「役割」で判断する 最近では、「動画コンテンツ」「カジュアル面談」「SNS連携」「データで見る○○」など、多くの採用施策があります。 しかし重要なのは、「流行っているか」ではありません。例えば動画も、「社風を伝える動画」「仕事内容を伝える動画」「代表メッセージ動画」では、役割が異なります。逆に、既存コンテンツで十分に役割を果たせているなら、無理に追加する必要はありません。 採用サイトで重要なのは、「ページ数」ではなく、「必要な役割が揃っているか」です。 最小構成でも成立する採用サイトとは？ もちろん、コンテンツが多いほど情報量は増えます。しかし実際には、「制作予算」「更新体制」「写真素材」「取材協力」などには限界があります。そのため、まずは最低限必要な役割を満たすことが重要です。 小規模で制作する場合の例 ビジョン / ミッション or 求める人物像（興味形成） 仕事内容（理解） 社員紹介（共感） 募集要項（不安解消） エントリー（応募）※外部サービスにリンクすることも可 上記が揃っていれば、最低限の導線は成立します。そのうえで、 もっと共感を得たい　→　対談やギャラリーを追加 仕事理解を深めたい　→　職種ごとに細分化したページを作成したり、1日の流れを追加 安心感を強化したい　→　福利厚生やよくある質問、数字で見る○○等を追加 というように、不足している役割に応じて拡張していくのが理想です。 まとめ 採用サイトに必要なページは、「流行っているから必要」というものではありません。各ページには、「動機付け」「興味形成」「働くイメージ形成」「不安解消」「応募」といった役割があります。 そのため、アクセス数が少ないページでも、応募判断の流れの中では重要な役割を担っていることがあります。逆に、人気のあるコンテンツでも、役割が重複している場合は、必要以上に増やす必要はありません。 採用サイトで本当に重要なのは、「どれだけページ数があるか」ではなく、「求職者が安心して応募判断できる状態を作れているか」です。 まずは、自社の採用課題に対して、どの役割が不足しているのかを整理することから始めてみましょう。

採用サイトを制作しようと考えたとき、「結局いくらくらい必要なのか分からない」と感じる方は多いのではないでしょうか。ネットで検索して調べると、30万円台から数百万円規模まで幅広く、費用だけでは判断しづらいのが実情です。その中でも、一般的な採用サイト制作の費用相場としては、50万〜150万円程度が一つの目安と言われています。制作期間は2〜3ヶ月程度。掲載内容としては、「事業紹介」「社員紹介」「社員インタビュー」「福利厚生」「募集要項」「エントリーフォーム」などを含む、いわゆる標準的な採用サイトが想定されます。ただし、同じ100万円でも内容は大きく異なります。この記事では、一般的な費用相場と、弊社がどのような考え方で採用サイトを設計しているかをご紹介します。 採用サイト制作の一般的な費用相場 採用サイトは目的や制作範囲によって価格帯が変わります。 種類費用目安制作期間想定内容採用LP35〜50万円1〜2ヶ月必要情報を1ページに集約一般的な採用サイト50万〜150万円2〜3ヶ月社員紹介・事業紹介・募集要項などブランディング型採用サイト150万〜300万円3〜6ヶ月撮影・動画・演出・独自表現 価格差はページ数よりも、制作工程とコンテンツ制作量で決まることが多くあります。 なぜ採用サイトは価格差が大きいのか 採用サイトは単なる会社紹介ではありません。求職者が、「興味を持つ→仕事内容を理解する→働くイメージを持つ→応募を判断する」という流れを支える役割があります。そのため、制作会社ごとに設計思想が異なります。 例えば、「情報整理を重視するサイト」「共感形成を重視するサイト」「世界観やブランド演出を重視するサイト」など、目的によって必要な工程が変わり、その結果、費用にも差が生まれます。 弊社が考える採用サイトの基本設計 弊社では、採用サイトを「会社紹介」ではなく、応募判断のための情報設計として考えています。基本となる流れは次の5段階です。 興味→ ビジョン / ミッション または 求める人物像 理解→ 仕事内容 共感→ 社員紹介 不安解消→ 募集要項 応募→ エントリー この考え方をもとに、予算や目的に応じて必要な情報量を調整しています。 弊社の採用サイト制作プラン 採用LP（ランディングページ）プラン（35〜40万円） まずは採用導線を整えたい方向けのプランです。必要な情報を1ページに集約し、短期間・低コストで公開します。 想定コンテンツ ビジョン / 求める人物像 仕事内容 社員紹介 募集要項 エントリー 採用媒体だけでは伝えきれない情報を補いたい場合に向いています。※エントリーフォーム作成を含まない場合は35万円前後 ミニマムプラン（55〜60万円） 応募判断に必要な情報を整理した、必要最小限の採用サイトです。 想定コンテンツ ビジョン / ミッション または 求める人物像 仕事内容 社員紹介（一覧） 募集要項 エントリー ランディングページ型より情報量を多くし、求職者が理解しやすい構成にしています。※エントリーフォーム作成を含まない場合は55万円前後 スタンダードプラン（90万円前後） 一般的な採用サイトでよく掲載されるコンテンツを網羅した、標準的な構成のプランです。 単に情報を並べるのではなく、求職者が「この会社で働くイメージ」を持てるように、応募判断に必要な情報を整理して設計します。代表メッセージや仕事内容といった会社の基本情報に加え、社員インタビューや福利厚生、教育制度など、働く環境や人の魅力までバランスよく伝える構成となっています。 また、よくある質問や数字で見る○○を整理することで、応募前の不安を解消し、スムーズなエントリーにつながる導線設計を行います。 採用活動において必要とされる要素を一通り揃えつつ、過不足のない情報設計にすることで、「まずしっかりとした採用サイトを持ちたい」という企業に適した内容です。 想定コンテンツ 代表・担当者メッセージ・ビジョン / ミッション 仕事内容 社員インタビュー（3名程度） 人材育成制度 福利厚生 数字で見る○○ よくある質問 募集要項 エントリー なお、全てのプランにおいて、お客様に素材や原稿をご提供いただくことを前提としています。社員インタビューやよくある質問は、弊社から質問シートやヒアリング項目をご提案し、ご回答いただいた内容を編集・構成して掲載します。写真についても原則ご提供素材を利用します。そのため、一般的な採用サイト相場と比較すると、必要な情報を整理しながら費用を抑えやすい構成となっています。 ※プロによる取材・撮影・原稿作成を一括で追加する場合は、オプションとして「＋20万円〜」が目安となります。 150万〜300万円の採用サイトはどのような内容なのか 一方で、採用サイトの中には150万〜300万円以上になるケースもあります。この価格帯では、情報を掲載するだけではなく、企業の魅力や世界観を伝えるための演出や制作工程が追加されます。制作期間の目安は3〜6ヶ月程度です。代表的な例として、以下が含まれます 採用サイト用の写真を企画・撮影する インタビュー取材・原稿作成を行う 独自イラストを制作する アニメーションや演出を多用して実装する 動画を撮影しサイトに組み込む ブランドコンセプトから設計する この価格帯は情報量を増やすというより、企業らしさや魅力を伝えるための制作物に重きを置く傾向があります。 費用を抑えたい場合の考え方 採用サイトは最初からすべて作り込む必要はありません。例えば、 まずLPで公開する 社員インタビューを後から追加する フォームは外部サービスを利用する CMSは必要になってから導入する という段階的な進め方もできます。まずは応募判断に必要な情報を整え、その後にコンテンツを追加していく考え方も有効です。 まとめ 採用サイト制作の費用相場は一般的に50万〜150万円程度と言われていますが、重要なのは金額そのものではありません。必要なコンテンツや制作工程は、採用目的や伝えたい内容によって大きく変わります。 まずは「何ページ作るか」ではなく、求職者にどのような情報を届け、どのような行動につなげたいかを整理することで、必要な構成や予算も見えやすくなります。

アンケート集計の際に特定条件のレコードのみを選出して集計する必要があった際に「CASE」を使用した方法を用いたので方法をメモ PHP SELECT SUM(CASE WHEN status = 1 THEN 1 ELSE 0 END) AS status1_cnt, SUM(CASE WHEN status = 2 THEN 1 ELSE 0 END) AS status2_cnt, SUM(CASE WHEN status = 3 THEN 1 ELSE 0 END) AS status3_cnt FROM ○○○○; 「CASE WHEN」で条件を設定、「THEN 〇 ELSE 0 END」で条件を満たした場合の値を設定〇の部分を「1」にする事でカウント数を取れる、〇の値が登録してあるカラム（実数値）の場合は対象カラムの合計値も集計可能 SQLのCASE式の使い方を基礎からUPDATE文での応用まで初心者向けに解説

Webサイトの制作や改修を依頼した際に、「松・竹・梅」のように、複数パターンの提案を受けたことはないでしょうか。弊社でも、ご要望に合わせて上記の3パターンでお見積りをお出しする機会がありますが、「結局、何が違うのかわからない」「なぜこんなに制作費が変わるのか」「おすすめが“竹”なのに、なぜ“梅”が存在するのか」という疑問をいただく事もあります。実際のところ、ホームページ制作費の差は単純な「品質差」ではありません。本質的には、「どこまでを制作・改修の対象として考えるか」の違いです。この記事では、ホームページ制作における「梅・竹・松」の違いを、改修範囲という視点を例にわかりやすく解説します。 ホームページ制作費の違いは「品質」ではなく「改修範囲」 まず前提として、「梅＝品質が低い、松＝品質が高い」というわけではありません。もちろん、工数やページ数の差はありますが、本質的な違いは、「どこまで改善対象に含めるか」になります。 例えば、「新しいサービスページを追加したい」という改修依頼があった場合でも、制作会社によって提案範囲は下記の様に変わります。 梅プラン：必要なコンテンツのみを追加 梅プランは、既存サイトを大きく変更せず、必要な情報だけを追加する構成です。 例えば、以下の様な内容が中心になります。 サービスページ（コンテンツ）追加 テキスト修正 バナー差し替え（追加） 必要最低限の導線追加 既存デザインや構成を踏襲するケースが多く、短納期・低コストで進めやすいのが特徴です。つまり梅プランは、「今足りない情報を補う」ための改修です。 梅プランが向いているケース まずは公開を優先したい場合 予算を抑えたい場合 既存デザインを活かしたい場合 大きな方向転換は不要な場合 必要最低限の改修だけ行いたい場合 このようなケースでは、梅プランが合理的な選択になることも少なくありません。 竹プラン：追加内容に合わせてページを最適化 竹プランになると、単なるコンテンツ追加ではなく、「追加するなら、成果につながる形へ改善しよう」という考え方が入ります。 例えば、以下のような感じです。 ページ構成見直し CTA改善 導線調整 ユーザビリティを考慮した情報整理 追加コンテンツが活きるように、対象ページそのものを最適化します。実際、多くのWeb制作では、この「竹」が最もバランスの良い提案になりやすいです。 なぜ「竹」がおすすめになりやすいのか コンテンツを追加しても、以下のような状態では、成果につながりにくくなります。 問い合わせ導線が弱い 情報が整理されていない CTAが古い 他ページとの整合性がない そのため、「追加だけでは弱い」「でも全面改修までは不要」というケースで、竹プランが最適解になりやすいのです。 松プラン：サイト全体を含めた全面見直し 松プランでは、対象ページだけではなく、追加するコンテンツが及ぼすサイト全体への影響を考慮し、全体最適化まで含めて対応します。 TOPページ訴求変更 ナビゲーション整理 サイト構造再設計 ブランド統一 回遊導線改善 ユーザビリティの見直し これは単なる「豪華版」ではありません。新しいコンテンツ追加をきっかけに、「そもそもサイト全体のブランディングや使われ方を見直すべきではないか」という考え方です。 Webサイトの改修は「連鎖」する 実際のホームページ改修でも、「一部だけ直す予定だったのに、結果的に全体を見直すことになった」というケースがよくあります。これは、各ページが単独で完結するのではなく、サイト全体を通して相互干渉しているためです。 例えば、新サービスを追加する場合でも、「新サービス追加」→「掲載ページの変更」→「CTA変更」→「導線変更」→「メニュー整理」→「既存ページの調整」のように、修正箇所が連鎖していきます。 そのため、松プランは「ページ数が多い」という単純なことではなく、「ページ数も含め、関連箇所の整合性を取る」ことにコストが必要になっていたりします。 なぜ「梅プラン」が必要なのか おすすめが竹なら、「最初から竹だけ提案すれば良いのでは？」と思う方もいるかもしれません。 しかし実際には、企業側にも、予算の制約や納期的な制限、稟議の都合でパターン出しが必要など様々な事情がありますし、「一旦は最低限で良い」「まずは様子を見たい」というケースも少なくありません。 そのため、梅プランを「最低限の選択肢」として用意していますが、目的によっては、最も合理的な提案になることもあります。 まとめ｜Web制作費は「どこまで見直すか」で変わる ホームページ制作費の「梅・竹・松」は、単なる価格差ではなく、「どこまでを改善対象に含めるか」の違いです。どれが正しいというものでもありません。 大切なのは、現状の課題や目的、予算や将来の運用などに対して、どこまで改修範囲を広げる必要があるかを整理することです。 ホームページ制作の見積もりを見る際は、単純な価格だけではなく、「どこまでを責任範囲として提案しているのか」を見ることで、制作費の違いが理解しやすくなります。

WordPress（ワードプレス）には、ユーザーごとに操作できる範囲を制御する「ロール機能（ユーザー管理機能）」があります。複数人でサイト運用を行う場合、この権限設計を理解していないと、誤操作や公開ミスにつながる可能性があるため、再確認も意味でも、WordPressの主要ロールの違いと、それぞれの権限内容を分かりやすく整理。 WordPressロール機能とは WordPressのロール機能とは、ユーザーごとに「できる操作」を制限するための権限管理機能。 ロールは「管理者」「編集者」「投稿者」「寄稿者」「購読者」の5種類が標準で用意されており、それぞれ権限の範囲が異なります。 尚、権限はロール単位ではなく、より細かい「capability（権限）」の組み合わせで構成されているため、カスタマイズにより変更や追加が可能。 [blogcard url=https://web.syu-u.com/blog/?p=5039] 各ロールの違い一覧 WordPressの主要ロールごとの権限を投稿機能に限定して以下にまとめます。 管理者編集者投稿者寄稿者購読者投稿作成○○○○投稿編集（自身の投稿）○○○○メディア機能の使用○○○記事公開（自身の投稿）○○○公開後編集（自身の投稿）○○○他人の記事の編集○○ 寄稿者の特徴 ロールの中でも、もっとも使い方に癖があると感じる「寄稿者」について、詳しく解説します。主な特徴は以下の通りです。 記事の作成と自身で作成した編集は可能 記事の公開は不可 公開後の記事は編集不可 メディア機能は一切利用不可 特に重要なのは、メディアライブラリへのアクセスができない点です。画像アップロードはもちろん、メディア一覧の閲覧もできません。画像を使用する際は既存サイトの画像URLを入力しての引用形式になります。そのため、寄稿者はテキスト中心の投稿用途として使われることが一般的です。 投稿者との違い 寄稿者と投稿者の違いは次の2点が中心です。 公開権限の有無 公開後の編集権限の有無 投稿者は自分の投稿を公開でき、公開後の編集も可能ですが、寄稿者は公開自体ができず、公開後編集もできません。 実務での使い分け ロールは運用設計によって適切に使い分ける必要があります。 ロール役割・担当候補寄稿者外部ライター・下書き担当投稿者社内コンテンツ担当編集者校閲・品質管理・公開責任者管理者システム全体管理 まとめ WordPressのロール機能は、単なる権限分けではなく、運用フローそのものを設計可能な重要な仕組みです。備え付けられている機能を把握して、効果的な使い方を考えていきましょう

円グラフや棒グラフを実装する際に値を読み込むことで自動生成可能な「chart.js」Gemini等の生成AIを使用してスライドを作成する際にも使用されていますので、使い方を覚えてくと編集がしやすくなるのでメモ HTML <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script> <script> $(function() { initPieCharts(); initBbrCharts(); }); </script> <!-- 円グラフ --> <div class="chart-wrap"> <canvas class="pie-chart" data-values="57, 43" data-labels="男性, 女性"></canvas> </div> <!-- 棒グラフ --> <div class="chart-wrap"> <canvas class="bar-chart" data-values="120, 200, 280, 350, 400, 530" data-labels="2020, 2021, 2022, 2023, 2024, 2025"> </div> サンプルは外部読み込みファイルで独自関数を作成し、HTML上の値を参照できる仕組みにしています jQuery //円グラフ function initPieCharts(selector = '.pie-chart') { $(selector).each(function() { createPieChart(this); }); } function createPieChart(el) { const values = $(el).data('values').split(',').map(Number); const labels = $(el).data('labels').split(','); //文字サイズを取得 const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize); //グラフの色設定 const baseColors = ['#458ca8', '#e08081', '#a9c25c', '#ddc354', '#efa14c', '#ae5cc2']; const colors = values.map((_, i) => baseColors[i % baseColors.length]); return new Chart(el, { type: 'pie', data: { labels: labels, datasets: [{ data: values, backgroundColor: colors }] }, options: { responsive: true, maintainAspectRatio: true, animation: false, plugins: { legend: { display: false }, tooltip: { enabled: false }, datalabels: { clamp: true, labels: { title: { formatter: (value, context) => { return context.chart.data.labels[context.dataIndex]; }, color: '#fff', font: { size: 1 * rootFontSize }, anchor: 'center', align: 'top', offset: 10, padding: 5 }, value: { formatter: (value, context) => { const data = context.chart.data.datasets[0].data; const total = data.reduce((a, b) => a + b, 0); const percent = Math.round((value / total) * 100); return percent + '%'; }, color: '#fff', font: { size: 1.4 * rootFontSize, weight: 'bold' }, anchor: 'center', align: 'bottom' } } } } }, plugins: [ChartDataLabels] }); } //棒グラフ function initBbrCharts(selector = '.bar-chart') { $(selector).each(function() { createBarChart(this); }); } function createBarChart(el) { const values = $(el).data('values').split(',').map(Number); const labels = $(el).data('labels').split(','); //文字サイズを取得 const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize); //棒グラフの色を設定 const colors = values.map((_, i) => { return (i === values.length - 1) ? '#458ca8' : '#ccc'; }); return new Chart(el, { type: 'bar', data: { labels: labels, datasets: [{ data: values, backgroundColor: colors }] }, options: { responsive: true, maintainAspectRatio: false, animation: false, scales: { x: { grid: { display: true, // グリッド線 drawBorder: false // 軸の線 }, ticks: { display: true // 目盛りラベル } }, y: { grid: { display: false, drawBorder: false }, ticks: { display: false } } }, plugins: { legend: { display: false }, tooltip: { enabled: false }, datalabels: { clamp: true, labels: { value: { formatter: (value) => value, color: '#fff', font: { size: 1.4 * rootFontSize, weight: 'bold' }, anchor: 'center', } } } } }, plugins: [ChartDataLabels] }); } オプション（options）効果responsiveレスポンシブ対応の可否maintainAspectRatio比率の固定の可否animation表示する際のアニメーションの可否

ランサーズを利用してホームページを依頼して、「思ったように仕上がらなかった」と感じた経験はありませんか？弊社の周りでも、その様な話を聞く機会はありますが、この原因の多くは、サービスの仕組みを理解していないことと正しい選び方ができていないことにあります。特に初めて依頼する場合、失敗のリスクは高く、注意が必要です。そこでこの記事では、ランサーズでホームページを発注する際に知っておくべき仕組みや、初めてでも失敗を避ける選び方を紹介します。 制作依頼の仕組み まずはじめに、ホームページ制作を依頼する場合の流れや仕組みを理解しておくことは非常に重要です。特に初めて依頼する方は、通常の制作会社とランサーズでは構造が大きく異なることを押さえておきましょう。 一般的な制作会社の場合 一般的な制作会社でのホームページ制作は、次の流れで進みます。 お問い合わせ ヒアリング 提案 契約 上記の流れでは、ヒアリング工程があるため、発注者の要望が曖昧でも、制作側が内容を整理して最適な提案をしてくれます。つまり、方向性や構成を考える責任は制作会社側にあり、発注者は必要な情報を伝えるだけで進められる構造になっています。 ランサーズの場合 一方、ランサーズでは流れが以下の通りです。 要件提示（募集） 提案 契約 ヒアリング工程は存在せず、質問機能が補助的にある程度です。また、契約が成立するまでは、外部ツールでの連絡も禁止されています。その結果、自分で全ての要件を整理する必要があり、曖昧な内容で提示した場合には自分の希望に見合った提案を得にくいのです。 初めて発注する人が陥るポイント 初めてホームページを依頼する方は、以下の点に注意してください。 うける提案は、あくまで受注希望者が提示内容を独自に解釈した構成案であり、ヒアリングに基づくものではない 自分で全ての内容を考え、整理する必要がある メッセージ機能を使って質問はできるが、不明事項などを確認してくる人は少ない 契約前に直接やり取りできないので、連絡手段が乏しい ランサーズでは、発注者が主導して要件を整理し、確認することが成果物のクオリティに直結するのです。 失敗を防ぐ唯一の方法 ランサーズで失敗を防ぐ方法は、「納得いくまでメッセージを送る」これに尽きます。家や車を購入するときをイメージしてください。パンフレットだけで決めますか？試乗したり、見学会に行ったり、納得できるまで話しますよね？ランサーズでも同じです。 初回の提案書だけで決めない 不明点はどんどん質問する 必要であれば再提案をもらう これを徹底することで、初めてでも満足度の高い成果物を手に入れることができます。ランサーズでは、納得できるまで質問し、話すことが最も効果的なリスク回避策です。メッセージを通して「自分の意見や要望が反映されているか」を確認することが、成功の鍵になります。 余談：高額案件が少ない理由 ランサーズでは、ヒアリング工程がないため、複雑な案件や大規模サイトは成立しにくいように感じます。もちろん、メッセージを複数回交わすことで、実現できるものもあるでしょうが、打ち合わせ1回分の内容をメッセージで行うには、かなりの時間と労力が必要です。 そのため、企業にとっても、フリーランスにとっても短時間で対応できる案件が主軸になるのは自然な流れです。低コストで依頼できるメリットは大きいですが、複雑な案件は構造上、成立しにくいという現実があります。 まとめ ランサーズは「制作会社」ではなく「マッチングサービス」です。成功するかどうかは、発注者の要件整理力と選び方にかかっています。初めて依頼する場合は、納得いくまで質問し、確認し、再提案をもらうことが、満足度の高い成果物を得る唯一の方法です。

最近、SNSだけで集客できれば十分と考える飲食店の方も増えています。特に業界に入ったばかりで日が浅い方は、「ホームページはいらないのでは？」と思われがちです。実際、「新メニューの告知」「日替わりの発信」「イベントやキャンペーン」といった「集客」においては、SNSの方が圧倒的に強いのは事実です。しかし、採用に関しては話が別です。実際に外食系のコンサルタントをされている方から聞いたところ、アルバイトやスタッフを募集する際に、求職者がホームページを確認するケースが少なくないそうで、飲食店の現場でも、「採用のためにホームページは必要だ」と感じている方が多くいます。この記事では、SNS・求人情報サイト・ホームページの役割の違いと、なぜホームページが必要なのかを初心者向けにわかりやすく解説します。 実は、それぞれ役割が違う 同じ「Web施策」でも、目的がまったく異なります。飲食店のWeb施策は、役割ごとに分けると整理しやすいです。 媒体役割SNS集客（来店のきっかけ）求人情報サイト認知（見つけてもらう）ホームページ信頼・判断材料（応募や取引の意思決定） ホームページは「なくても困らないツール」ではなく、採用や信頼を確立するために必要なツールです。 SNSの役割は「行きたい気持ちを作ること」 SNSは、来店の動機を作るのに最適です。「今日のランチメニュー」「限定メニュー」「店内の雰囲気」「空席情報」など、リアルタイム性の高い情報を届けられます。拡散力もあり、日常的に接触できるため、集客ツールとしては非常に強力です。 求人情報サイトは「見つけてもらう場所」 採用活動では、「マイナビ」「バイトル」「タウンワーク」などの求人サイトを活用される方も多いです。求職者は条件に合わせて探したいと考えているため、まず知ってもらう入口として非常に重要です。 一見、便利な求人情報サイトですが、次のような制約があります。 求人情報サイトの制約 書ける項目が限られる レイアウトが固定 表現の自由度が低い 費用（プラン）により露出が制限される そのため、資金力のある店舗が有利である他、どの店舗も似たような見え方になりやすく、魅力で差別化しにくいという弱点があります。つまり、「本当の魅力」ではなく「条件」で比較されやすくなります。 ホームページの役割は「信頼と意思決定」 ホームページは、求職者が応募するかどうかを判断する材料として見られます。SNSでは「雰囲気」は伝わりますが、会社としての信頼性や職場環境までは判断できません。求職者は特に以下のようなことを知りたがっています。 人間関係がうまくいくか 社風が自分に合うか ブラック企業ではないか 業務が過度に忙しくないか やりがいを感じられるか ホームページは、この「判断材料」を最もしっかり伝えられる場所です。 ホームページの強みは「自由さと情報量」 情報量に制限がない 文章も写真もコンテンツも、自由に掲載可能です。 表現が自由 デザイン、構成、ストーリー、雰囲気まで自由に表現できます。 空気感を伝えられる スタッフ紹介、1日の流れ、インタビューこうした情報を丁寧に伝えることで、求職者が「ここで働きたい」と思える環境を作れます。 最初は最低限のホームページでも十分 最初から完璧を目指す必要はありません。まずは、以下の情報だけを掲載するだけでも価値がありますので、1ページ構成（ランディングページ）でも、採用面では十分効果があります。 店舗情報（住所・営業時間・定休日） コンセプトや想い メニュー 採用情報（募集要項・シフト・一緒に働く人・社風・働く環境） お問い合わせ先 まとめ 飲食店のWeb施策は役割ごとに整理するとわかりやすいです。 SNS → 集客 求人情報サイト → 認知 ホームページ → 信頼・意思決定 今回ご紹介するホームページは「集客ツール」というよりは、「選ばれるためのツール」の側面が強いです。特に採用では、「ここで安心して働いていけるか」を判断する材料としてホームページが必須です。

ワードプレスで記事を投稿する際に、まとめ記事や拡張記事などで過去記事を引用したい場合もあります。既存の埋め込み機能を使う方法もありますが、思い通りの内容を表示したい場合は、再利用可能な「ブログカード」を用意するのが便利なので実装方法をメモ。 functions.php function func_blogcard($atts) { $atts = shortcode_atts(array( 'url' => '', ), $atts, 'blogcard'); $url = $atts['url']; $post_id = url_to_postid($url); //URLから投稿IDを取得 //タイトルを取得 $title = esc_html(get_the_title($post_id)); //抜粋文を取得 if(has_excerpt($post_id)) { $excerpt = get_the_excerpt($post_id); }else{ $excerpt = get_bloginfo('description'); } $excerpt = esc_html($excerpt); //アイキャッチ画像を取得 if(has_post_thumbnail($post_id)){ $img = wp_get_attachment_image_src(get_post_thumbnail_id($post_id), 'full'); $img_tag = '<img src="'.$img[0].'" alt="{$title}">'; }else{ $img_tag = '<img src="○○.jpg">'; //アイキャッチ画像がない場合の画像 } //　ブログカードの内容 $blogcardlink = '<div class="blogcard"> <a href="'.$url.'"> <figure class="blogcard__thumbnail">'.$img_tag.'</figure> <dl class="blogcard__inner"> <dt class="blogcard__title">'.$title.'</dt> <dd class="blogcard__excerpt">'.$excerpt.'</dd> </dl> </a> </div>'; return $blogcardlink; } add_shortcode('blogcard', 'func_blogcard'); CSS .blogcard a { display: flex; align-items: center; padding: 1rem; border: #ddd solid 1px; } .blogcard__thumbnail { width: 33%; margin: 0; } .blogcard__thumbnail img { width: 100%; height: auto; margin: 0; } .blogcard__inner { width: calc(67% - 1rem); margin: 0 0 0 auto; } .blogcard__title { margin: 0 0 0.5rem; font-weight: bold; } .blogcard__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.8rem; } 使用時はショートコードブロックに下記を記載 [blogcard url=https://○○] [blogcard url=https://web.syu-u.com/blog/?p=860]

「ホームページを作るとき、CMSって本当に必要なの？」「更新する予定がない場合でも、WordPressを入れるべき？」こうした疑問を持つ方は少なくありません。実際、弊社には企業サイトや採用サイトのご相談のほかに、「名刺代わりになるホームページがとりあえずあれば良い」というご相談も多くあります。こうした場合、依頼者の方は「今後更新する予定はない」とおっしゃることが多く、弊社ではCMS（WordPress）の提案を控えています。本記事では、CMSが不要なケースや導入の柔軟な考え方を、実際の相談事例をもとに解説します。これを読むことで、あなたのホームページにCMSが本当に必要かどうか判断できるようになります。 CMS（WordPress）とは？ CMSとは「コンテンツ管理システム」の略で、専門的な知識がなくてもホームページを更新できる仕組みです。「WordPress」はその中でも世界的にシェアの高いCMSで、ブログやお知らせの投稿などを自社で簡単に行えることが特徴です。 今回のケースでCMSが不要だった理由 今回のホームページは「名刺代わり」のサイトでした。掲載内容も「会社概要」「サービス内容」「お問い合わせ情報」の固定情報のみと少なく、今後これらの内容を頻繁に更新する予定がない。さらに、更新予定もほとんどなく、年に数回の営業案内程度しか更新しない状態でした。 このような場合、CMSを導入するメリットはほとんどありません。 CMSを導入しないメリット 制作コストを抑えられる 管理がシンプルになる（月額の保守費用も不要になる） セキュリティリスクを減らせる CMSは便利な仕組みですが、「使う前提」がない場合は逆に負担になることもあります。特にWordPressは定期的なアップデートや管理が必要になるため、運用する予定がない場合は管理（月額の保守費用）だけが負担になってしまいます。 CMSは後から追加することも可能 CMSは最初に導入しておかないと後で変更できないと思われがちですが、「CMSを入れない＝今後一切更新できない」というわけではありません。弊社のサイトもそうですが、基本的な部分は通常のHTMLファイルで作成しておき、必要になったタイミングで、部分的にCMSを追加する（お知らせ機能だけ導入する）ことも可能です。 WordPressのもともとの使われ方 WordPressが登場した当初は、現在のようにサイト全体を構築するよりも、サイトの一部にブログ機能として追加で組み込むことが主流でした。 コーポレートサイトは静的HTMLで制作 お知らせやブログの部分だけをWordPressで制作して運用 現在ではWordPressを使って全体を構築することも増えましたが、必要な部分だけに使う柔軟な考え方も自然な使い方です。 よくある誤解：「とりあえずWordPress」 制作現場では、「将来の更新や拡張に備えてとりあえずWordPressを入れる」というケースも少なくありません。しかし、更新しない場合や運用担当者がいない場合は、CMSを入れても使われないまま管理負担だけが残ってしまいます。 また、WordPressに関しては次のような誤解も多く見られます。 「自分で更新できる」という誤解 WordPressを導入したからといって、すべてのページを自由に更新できるわけではありません。 固定ページはデザインを優先してHTMLで構築されていることが多く、非技術者では変更が難しい場合がある ブロックエディタで編集できる場合でも、ブログページの延長のようなシンプルなデザインになりやすい 自由度の高いデザインを実現するには、別途カスタマイズ費用が発生することもある つまり、「誰でも簡単に更新できる」という状態を実現するには、自己のスキルや事前の設計、追加コストが必要になるケースが多いのです。 [blogcard url=https://web.syu-u.com/blog/?p=4459] 「SEOに強くなる」という誤解 WordPressはSEOをサポートする機能やプラグインが豊富ですが、導入するだけで検索順位が上がるわけではありません。SEO効果を出すためには、次のような運用や工夫が必要です。 適切なサイト構造や内部リンクの設計 良質なコンテンツの作成 定期的な更新や情報のメンテナンス 記事を適当に更新したら勝手に順位が上がっていた、なんてことは、余程書き方が良かったのか、競合が少なかった以外では起こりません。更新しないサイトや運用体制が整っていない場合、CMSを導入してもSEO効果はほとんど期待できず、結果的に管理負担だけが残ってしまいます。 まとめ CMS（WordPress）は非常に便利な仕組みですが、すべてのホームページに必要というわけではありません。判断の目安として、私たちは 「月に一度以上の更新があるかどうか」 を基準にしています。 月に一度以上の更新がある場合 → CMSがあると便利 更新がほとんどない場合 → CMSは不要な場合も多い CMSは必要になったタイミングで、部分的に導入することも可能です。最初から入れるかどうかではなく、ホームページの目的や運用体制に応じて、必要なタイミングで導入するという柔軟な考え方が重要です。

「ホームページを作りたいけれど、どんなサイトにすればいいのか分からない」初めてホームページ制作を依頼する方から、このような相談をよくいただきます。ホームページ制作では、デザインや構成をゼロから考えるのは意外と難しいものです。そのため、まずおすすめしているのが参考となるサイトをいくつか見つけることです。参考サイトとは、実際に公開されている企業のホームページなどで、自分たちが作りたいホームページのイメージに近いサイトのことです。参考サイトを見ることで、「どのようなページが必要なのか」「どんなデザインがあるのか」「同業他社はどのようなホームページを作っているのか」といった点を知ることができます。また、制作会社に依頼する際も参考サイトがあると「このサイトのような雰囲気にしたい」とイメージを伝えやすくなります。この記事では、参考サイトの見つけ方、参考サイトの見方、参考サイトを探すときに便利なギャラリーサイトについて紹介します。ホームページ制作を検討している方は、ぜひ参考にしてみてください。 参考サイトの見つけ方 参考サイトを探すときは、見た目の好みだけで探すのではなく、目的や業種を基準に探すことが大切です。 目的で探す まずはホームページの目的から探してみましょう。ホームページにはさまざまな種類があります。同じ企業サイトでも、目的によってページ構成やデザインは大きく変わります。そのため、まずは作りたいホームページと同じ目的のサイトを参考サイトとして探すのがおすすめです。 ホームページの種類 コーポレートサイト 採用サイト ショッピングサイト サービスサイト ランディングページ 業種で探す 次に、自社と同じ業種のサイトを見てみましょう。同じ業種のホームページを見ることで、「どのような情報を掲載しているのか」「どのようなページ構成になっているのか」といった点を確認することができます。 特に企業サイトでは、同業他社のホームページが参考になることが多くあります。 色で探す 会社のコーポレートカラーが決まっている場合は、色を基準に参考サイトを探す方法もあります。同じ色を使ったサイトを見ることで、「色の使い方」「配色のバランス」「デザインの印象」などをイメージしやすくなります。 見た目だけで探すのはおすすめしない 参考サイトを探すときに、「デザインのテイスト」「アニメーション」「見た目のかっこよさ」だけで探してしまうこともあります。しかしこの方法だと、実際に作りたいホームページの目的と合わないサイトを参考にしてしまうことがあります。 そのため、まずは「目的」「業種」を基準に参考サイトを探すことをおすすめします。 参考サイトの見方 参考サイトを見るときは、デザインを見るだけではなく、いくつかのポイントを意識して見ることが大切です。 必要なページを確認する 参考サイトを見ることで、ホームページに必要なページを把握することができます。例えば多くの企業サイトでは、下記のようなページが用意されています。 サービス紹介 会社概要 実績紹介 お問い合わせ 複数の参考サイトを見ることで、一般的なページはもちろん、差別化に必要なページ構成を理解することができます。 同業他社と比較する 同業他社のホームページを見ることで、自社サイトの方向性を考えることができます。例えば情報量やサービスの見せ方、強みの打ち出し方などを比較することで、自社の特徴を整理するきっかけになります。 デザインの雰囲気を確認する ホームぺージを作るうえで、最終的に気なるのはデザインです。参考サイトを見ることで、ホームページのデザインテイストを確認することができます。例えば、シンプルなデザイン、高級感のあるデザイン、親しみやすいデザインなど、デザインの方向性をイメージしやすくなります。 参考サイトを探すときに便利なギャラリーサイト 参考サイトを効率よく探すには、ホームページをまとめて紹介している「ギャラリーサイト」を利用すると便利です。 ギャラリーサイトとは、さまざまな企業のホームページを集めて紹介しているサイトのことです。これらのサイトを使うことで、短時間で多くの参考サイトを見ることができます。今回は弊社でも参考にしているサイトをいくつかご紹介します。 MUUUUU.ORG 掲載数が多く、弊社でも設立時より長く利用させていただいているWebデザインのギャラリーサイトです。参考サイトを探すならまずはここを見るというくらい弊社の中では定番です。 MUUUUU.ORG ちょうどいいWebデザインギャラリー ちょうどいいWebデザインギャラリー ギャラリーに掲載されている理由（良いポイント）が合わせて紹介されているWEBデザインのギャラリーサイトです。デザイナーとしても、どんなデザインがどういった効果をもたらすのかを言語化しておくということの重要さを気付けるサイトです。 81-web.com 1-web.com 条件タグを使っての絞り込み検索が役に立つWebデザインのギャラリーサイトです。 現代デザイン 現在デザイン トップページのみでなく、下層ページも合わせて掲載されている、Webサイトをまとめたデザインリンク集型のギャラリーサイトです。 1GUU 1GUU サムネイルが動画ファイルでできており、一覧画面でアニメーションが確認できるWebデザインギャラリーサイトです。 まとめ ホームページ制作では、まず参考となるサイトを見つけることが大切です。 参考サイトを見ることで、必要なページ構成、同業他社との違い、デザインの方向性などをイメージしやすくなります。参考サイトを探す際は、目的で探す、業種で探す、カラーで探すといった方法で探すと、実際のホームページ制作に役立つサイトを見つけやすくなります。 今回紹介したようなギャラリーサイトも活用しながら、ぜひホームページ制作の参考サイトを探してみてください。

近年、AIによる検索や情報収集が急速に広がっており、検索エンジンを使用することなく問題を解決する事例や、ゼロクリック検索といった、検索結果ページ上で表示されるAIによって生成された回答のみを参考に、ユーザーがWebサイトをクリックせずに問題が解決してしまう現象も増えています。そのような流れの中で登場したのが 「llms.txt」 です。llms.txtは、AIに対して「このサイトの情報をどのように参照してほしいか」を伝えるためのファイルです。この記事では「llms.txtとは何か」「llms.txtの書き方」「設置方法」について説明します。 llms.txtとは llms.txtを一言で説明するなら、AI（LLM：大規模言語モデル）向けにサイトの情報を伝えるための「サイト説明メモ」のようなテキストファイルです。 これらのAIはWebサイトの情報をもとに回答を生成することがありますが、通常のWebページは AIが理解しやすい構造になっているとは限りません。そこでAIにサイトの構造や重要ページを伝えるための仕組みとして提案されているのが llms.txt です。 注）LLMとはChatGPT、Claude、GeminiなどのAIのことを指します。 llms.txtの設置場所 llms.txtは サイトのルートディレクトリ に設置します。（例：https://example.com/llms.txt）設置後はブラウザで「https://ドメイン/llms.txt」にアクセスして表示されれば正常です。 llms.txtの書き方 llms.txtはMarkdown形式で記述することが一般的ですが、厳密な書き方が定められているわけではありません。多くの場合は、サイト名やサイトの説明、重要ページ（URL）などを整理して記述しますが、項目の内容や構成を含め書き方は比較的自由です。これは、llms.txtの仕様がまだ確立していないためです。 なお、Markdownはシステム専用の形式ではなく、人が読みやすいようにテキストの先頭などに記号（印）を付けて文章の構造を表す記法です。 記載例 # サイト名 > サイト概要このサイトはWeb制作やWordPressに関する情報を発信しています。 ## 主要ページ - https://example.com/ - https://example.com/service/ - https://example.com/blog/ ## 人気記事 - https://example.com/blog/seo/ - https://example.com/blog/wordpress/ - https://example.com/blog/css/ よくある記載例のポイント 一番上にサイト名を記載する：見出し1 サイトの目的を書く：引用 項目名は自由（個数も自由）：見出し2 URLを記載する：リスト 主なMarkdown記法のルール 種類表記方法表記例段落空白行1段落目2段落目改行行末に2つ以上の半角スペース1行目  （行末に2つ以上の半角スペース）2行目見出し行頭に#（#の個数がH1～H6）# 見出し1## 見出し2### 見出し3強調テキストの前後に * または _*強調*リスト行頭に-または*- リスト項目1- リスト項目2- リスト項目3番号付リスト行頭に数字.1. リスト項目12. リスト項目23. リスト項目3引用行頭に>> メールの返信と同じですねソースコードテキストの前後に``npm run dev`区切り線3つ以上の * か _ または –– – –表| で整形|: で左/中/右揃え– – – – – – – – -: || No   | 氏名        | 保有資格| – – -: | :- – – – – | :| 1    | 佐藤 一郎  | ITサービスマネージャ |画像行頭に !リンク[タイトル](リンク先URL)[運用ナビ](https://un4navi.com/ “システム運用に関する、人気の情報サイト”) まとめ llms.txtはAI向けのサイト説明ファイルです。効果に関してはまだ不明な部分も多く、公式サイトでの公表もないようですが、今後、AIが情報を取得する方法は大きく変わる可能性があります。そのような変化に備えて、AIにサイト構造を伝える仕組みを整えておくことも重要になってくるでしょう。

ホームページを運営していると、ドメインやサーバーの更新管理が必要になりますが、普段あまり意識することがないため、更新時期を忘れてしまうケースも少なくありません。実際に、ドメインの更新を忘れてしまい、ホームページのURLにアクセスすると全く関係のないサイトが表示されてしまったというトラブルもありました。弊社では、こうしたトラブルを防ぐため、希望されるお客様を対象にドメインやサーバーの更新代行を行っていますが、「解約するとどうなるのか」「更新しないとどうなるのか」を知らない方も多いのではないでしょうか。この記事では、初心者の方にもわかりやすく、ドメイン解約や更新時に注意すべきポイントを解説します。 ドメインとは何か ドメインは、インターネット上の表札のようなもので、ホームページのURLやメールアドレスは、このドメインを使って運用されています。（例：example.com、example.jp、example.co.jp） ドメインについての説明は下記を参照 サーバーの引越し（移転）に独自ドメインの新規取得は不要です ドメインを更新しない（解約する）とどうなる？ ドメインの更新を行わない場合、次のようなことが起こります。 ホームページが表示されなくなる ドメインの有効期限が切れると、対象のホームページにアクセスできなくなります。場合によっては「エラー表示」や「ドメインを取り扱っていたサイト」などが表示されることがあります。 メールアドレスが使えなくなる 対象のドメインを利用したメールアドレスも使用できなくなります。info@会社ドメイン、contact@会社ドメインなどのメールアドレスを業務で使われている場合には、メールが受信できなくなり、業務に影響が出る可能性があります。 まったく別のサイトとして運営される可能性がある 解約のイメージから、使用しくなったドメインは削除されてなくなってしまうと思われがちですが、解約されたドメインは多くの場合、一定期間経過後、誰（第三者）でも取得ができる状態になります。  そのため、しばらくしてからアクセスしてみると違うサイトになっていたということも珍しくはありません。 実際にあったドメイン失効のトラブル 実際にあった事例ですが、ある飲食店のホームページのドメインが更新されないまま失効してしまったことがありました。その後、そのドメインは第三者に取得され、アクセスすると全く関係のないお店のサイトが表示される状態になっていました。 店主はその状況に気づいておらず、常連のお客様から「お店のホームページが別のサイトになっていますよ」と言われて初めて知ったそうです。 何とかできませんかと、ご相談をいただたのですが、この状態ではどうすることもできません。相手の方に希望の金額を支払って買い戻すか、使用をやめてくれるのを待つ、諦めるといった方法しかありません。結局、その時は諦めることを選択されました。 このようにドメインが失効すると、全く関係のないサイトとして使われてしまう可能性があります。 ドメイン解約前に確認すること ドメインを解約する前には、次の点を確認しておきましょう。 ホームページは本当に不要か メールアドレスを使っていないか 外部サービスに登録していないか 他サイトからリンクされていないか 印刷物（名刺やチラシ）やQRコードでの利用はないか 特にメールは、思わぬところで使われていることがあります。 使っていないドメインでも維持するという選択肢 ドメインの維持費は、多くの場合、年間1,000円〜3,000円程度です。ホームぺージとメールアドレスを使用しないのであれば、サーバーのみを解約するという方法もありますし、実際にサーバーの方がドメインよりも維持費は高額です。 特に会社名、店舗名、ブランド名（サービス名）が含まれているドメインは、使っていなくても維持しておく方が安全な場合もあります。 まとめ ドメインの更新忘れや解約には注意が必要です。主なリスクとしては「ホームページが表示されなくなる」「メールアドレスが使えなくなる」「第三者にドメインを取得される」があります。 特に「第三者にドメインを取得される」は自分ではどうにもならない部分ですので、ドメインを解約する前や更新時期には、本当に不要かどうかを確認することをお勧めしています。

「記事に入れるバナーは何pxで作れば良いですか？」「スマホとPCでサイズは変えるべきですか？」こうした疑問は、ホームページを運営していると非常によく聞かれます。特に初心者の方にとっては、どのくらいの大きさで作ればいいかイメージがつきにくく、迷いやすいポイントです。結論から言うと、画像は「表示される幅」に合わせて作るのが基本です。無理に大きくしたり小さくしたりする必要はありません。ポイントを押さえて作るだけで、ページはきれいに表示され、読みやすさも確保できます。この記事では、記事内バナーやサムネイルを作るときに押さえておきたい基本ポイントを、初心者の方向けにわかりやすく紹介します。 画像サイズの基本は「コンテンツ幅」 画像サイズを考えるときに、まず押さえておきたいのが画像が表示される横幅、つまり「コンテンツ幅」です。ホームページでは、画面全体の幅ではなく、文章や画像が配置される記事スペースの幅に合わせることが大切です。多くのサイトでは、一般的に次の幅が目安です。 コンテンツ幅目安 PCのコンテンツ幅：900px～1200px程度 スマホのコンテンツ幅：320px〜400px程度 この幅を基準に画像を作れば、無理に大きな画像を用意する必要はありません。逆に、表示幅以上に大きな画像を使っても、ページ上では縮小されてしまうだけで、無駄に容量が増える原因になります。 さらに、画像が大きすぎるとページの読み込みが遅くなるため、訪問者にストレスを与えたり、検索エンジンの評価に影響することもあります。そのため、まずは「コンテンツ幅に合わせる」という考え方を基本にしてください。 iPhone 画面サイズ・ピクセル数早見表 スマホは「表示幅の2倍」で作る 最近のスマートフォンは、非常に高精細なディスプレイ（Retinaディスプレイなど）が主流です。このため、表示サイズぴったりで画像を作ると、少しぼやけて見えることがあります。 スマホ用画像は、縮小されることを前提に「表示幅の2倍で制作し、文字も2倍で作る」のが基本です。 スマホ用画像の制作例（スマホサイズが375px、基本文字サイズが16pxの場合） バナー制作サイズ：750px（表示幅の2倍） バナー内の文字サイズも16pxの2倍の32pxを基準にデザイン 余白も2倍で考える こうすることで、文字入りバナーもスマホでくっきり表示され、読みやすさを損なわずに見せることができます。 サムネイル画像のポイント 該当ページ内に一度しか使用しないバナーなどは、高さ（縦幅）を自由に定めても問題ないことが多いですが、一覧ページや関連記事などで使うサムネイルは、高さ（縦幅）もコンテンツ幅に合わせて、一定の比率で作ります。 サムネイルを作るときのポイント 比率（横縦）を統一：1：1、3：2、4：3、16：9（動画幅）などが多いです。 複数枚並べてもデザインが崩れないようにする 一覧ページではサムネイルが並ぶため、比率が揃っていないと見た目がばらばらになってしまいます。デザイン側ではみ出さないよう、制御されている場合もありますが、その場合は途中でサムネイルが切れた状態で表示されていたりします。比率を既定のサイズに揃えるだけで、ページ全体の印象が整い、見やすくなります。 まとめ 画像は「大きければ良い」「小さければ良い」わけではありません。最も重要なのは、表示される幅に合わせて作ることです。この考え方を押さえるだけで、記事内バナーもサムネイルも、初心者でも迷わず作れるようになります。

ワードプレスを複数人で管理する際にユーザーロール（権限グループ）を割り当てて使用することが多いのですが、社内の仕組みに合わない場合も多々あります。そこで今回は独自のユーザーロール（権限グループ）を、プラグインを使わずに追加する方法をメモ functions.php function my_add_custom_role_once() { //新規ロールの追加 if(!get_role('super_editor')){ add_role( 'super_editor', 'スーパーエディター', array( 'read' => true, //管理画面にアクセス可能 'edit_posts' => true, //投稿の編集を許可 'publish_posts' => true, //投稿の公開を許可 'delete_posts' => true, //投稿の削除を許可 'manage_options' => true, //設定メニューの管理権限を許可 ) ); } //既存ロール削除 if(get_role('super_editor')){ remove_role('super_editor'); } //既存ロールへ権限追加 $role = get_role('super_editor'); if($role){ $role->add_cap('edit_others_posts'); $role->add_cap('edit_published_posts'); $role->add_cap('delete_posts'); $role->add_cap('delete_others_posts'); $role->add_cap('delete_published_posts'); } //既存ロールの権限削除 $role = get_role('super_editor'); if($role){ $role->remove_cap('edit_published_posts'); } } add_action('init', 'my_add_custom_role_once'); 登録した情報はデータベースに保存されるため「add_role()」は複数回実行されないように「get_role()」で存在確認を行うか、簡易プラグインを作成し「register_activation_hook()」内に記述するのが推奨されています。 また、既存のユーザーロールに権限を変更する際は「add_cap」「remove_cap」を使用。権限は、一度変更すると永続的に作用する（実行後にコメント扱いにしても効果は消えない）ため、既存ロールの権限を変更した際などは特に、何を変更したのかが分かるよう、変更履歴は残しておくことをお勧めします。 自分以外の投稿や、公開済みの投稿なども管理できるようにしたい場合は下記ページ内の「権限一覧」を参考にする ユーザーの種類と権限 - サポートフォーラム - WordPress.org 日本語

自社でアクセス解析を行うところが増えてきたのか、Googleアナリティクス（GA4）の設置方法を教えてください、という質問を受ける機会が増えてきたので、タグ発行までをわかりやすく解説。タグの設置に関しては、状況により難易度が変わるため、専門知識のない方には、発行したタグを担当された制作会社に渡して、設置してもらう方法をお勧めしています。 Googleアナリティクス（GA4）のタグ発行手順 ここからは実際の手順を紹介します。尚、Googleアナリティクスの使用には「googleアカウント」が必要となるため、お持ちでない方は取得してから操作を行ってください。 アカウントの作成 Google アナリティクスの公式ページにアクセスし「さっそく始める」をクリック。アカウントの作成画面が表示されますので、指示に従って入力を進めます。 入力項目 アカウント名を入力（英数半角） データ共有設定を確認 基本的には初期設定のままで問題ありません。 Google アナリティクスの公式ページ プロパティの作成 次にプロパティを作成します。ここでの設定は後から変更も可能ですが、最初に正しく設定しておきましょう。 入力項目 プロパティ名（例：会社名_Webサイト） タイムゾーン：日本 通貨：日本円 お店やサービスの詳細 「業種」と「ビジネス規模」について該当するものを選びます。 入力項目 業種 ビジネス規模 ビジネス目標の設定 GA4では、ビジネス目標を選択すると、それに合わせたレポートテンプレートが自動的に用意され、選択肢には、「リードの獲得」「売上の促進」「トラフィックの分析」「ユーザーエンゲージメントとユーザー維持率の把握」「その他」があります。 BtoBサイトであれば「リードの獲得」を目標にされることも多いですが、アクセス数を見るだけであれば、「トラフィックの分析」でも問題はありません。内容はあとからでも編集可能です。 データストリームの作成 プラットフォーム選択画面で「ウェブ」を選択、続いて表示される「ウェブストリームの作成」画面で必要項目を入力し「作成して続行」を押すと計測用のタグが発行されます。 入力項目 サイトURL ストリーム名 計測タグの取得 タグ発行時に表示された「googleタグの設定」画面で手動でインストールをするを選択し、表示された設置用コードをコピー。これを対象のサイトに設置してもらうよう依頼して作業は終了です。 後で確認する場合は、左下の「管理ボタン」より「データストリーム」「該当サイト」「タグ設定を行う」「実装手順」の手順で、タグの設置用コードを確認できます。 余談：なぜ自身でタグを設置するのが難しいのか Googleアナリティクス（GA4）の計測タグを設置する方法は「ソースコードに直書き」「プラグインを使用（ワードプレス）」「googleタグマネージャーを使用」の大きく3つに分かれます。※各種ASPを使用している場合は各社の仕様に従う必要があります。経験上計測タグのページがあるので該当欄に取得したタグを記載するケースが多い。 ワードプレスを使用している場合は比較的、設置作業はしやすいですが、他はハードルが高いようです。 実装方法の比較 実装方法具体的な内容短所直書き該当するファイルに発行したタグを直接書き込み、サーバーへアップロードする方法HTMLファイルの編集が不可欠。専門知識が必要となるためプラグインを使用ワードプレスを使用している場合、googleのプラグインを使用して、設置する方法ワードプレスを使用していることが前提で、プラグインのインストールが必要googleタグマネージャーを使用googleタグマネージャーの機能を用いて、タグを設置する方法タグマネージャーが設置してある必要がある（設置にはファイルへの直書きが必要）タグマネージャーの使用方法が少々わかりにく アナリティクスタグの設置代行について 弊社でも何度もご依頼をいただいて設置を代行しています。アナリティクスの計測タグは、原則として全ページに設置する必要があります。そのため、WordPressなどのCMSで共通テンプレートを使用していない場合や、外部ファイルで一括読み込みをしていない場合は、ページ数分の編集作業が必要になることがあります。 特に静的HTMLサイトでは、ページ数が多いほど作業工数が増えるため、事前確認が重要です。 タグ発行を制作会社で代行する場合について また、タグの発行を代行することも可能です。その場合は、後日依頼主へ管理権限を移行する形になります。 「Googleアカウント」を制作会社に共有する 対象のアカウントに「管理者」として追加される アクセスできるかを確認後、制作会社の管理者権限を削除する この手続きを行うことで、アナリティクスの管理権限は完全にお客様側へ移行し、以降、制作会社では設定変更やデータ閲覧はできなくなります。 補足 長期的な運用を考えると、アナリティクスのアカウントはお客様ご自身で管理されることをおすすめしております。将来的なトラブル防止や、他の制作会社・広告代理店との連携もスムーズになります。

20年以上ホームページ制作を行ってきた中で、一度だけ言われた言葉が強く印象に残っています。「かっこいいホームページ（ビジュアル重視）にはしないでほしい」見た目は綺麗。写真も良い。動きも入って印象的。でも、結果にはつながらない。「デザインの良さ」と「成果」は必ずしも一致するものではありません。ホームページの目的が「問い合わせ」や「リード獲得」であれば、「かっこよさ」だけでは足りないことがあります。そこで今回は、「かっこいいけれど売れないサイト」に見られる特徴をあげてみたいと思います。 かっこいいのに売れない。その理由はどこにあるのか 原因はシンプルで、見た目を優先しすぎて「使いやすさ」が後回しになっていることが多いからです。 ホームページ制作では「第一印象」や「見た目の完成度」が重視されやすく、競合サイトより洗練された印象にしたい、今風に見せたい、企業イメージを高めたいといった要望を多くいただきます。 しかし、成果を増やすことを第一に考えるのであれば、本来大切なのは、「分かりやすいこと」「伝わること」「申し込みがしやすいこと」など、ユーザーにとって使いやすいことです。 「使いさすさ」が弱くなると、「かっこいいけれど売れない」といったサイトになってしまいます。 かっこいいけれど売れないサイトの特徴 文字が小さく、可読性が低い 洗練された印象を出すために、文字サイズを抑えたり、ボタンを目立たせすぎないデザインにすることがあります。しかし、小さくし過ぎると文字は読みにくく、ボタンは押しづらいという結果につながります。文字を読んでもらえなければ、内容を理解してもらうことはできません。 メニューや見出しが英語表記で分かりにくい 「Service」「About」「Works」などの英語表記はスタイリッシュです。しかし、すべての訪問者が瞬時に英語表記を理解できるとは限りません。コンテンツの位置が分からなければ、用意したページを読んでもらうことはできません。 キャッチコピーが抽象的で伝わらない 「未来を創造する」「価値をデザインする」といった言葉は印象的です。しかし、具体的に何をしているのかが伝わらなければ、次の行動にはつながりません。ユーザーが知りたいのは、自分にとってのメリットです。何のサイトで、どのような効果があるのかをが訪問時に理解できることは重要です。 写真が抽象的（雰囲気重視）で内容が伝わらない 雰囲気の良い素材写真や抽象的なビジュアルは、世界観を演出してくれます。しかし、サービス内容や強みの理解、安心感に繋がらなければ、あまり意味はありません。出来るだけ、現実に近いものを用意して、文字で伝わらないニュアンスを視覚的に伝えることが重要です。 とにかくよく動いて、見ていて疲れる アニメーションやエフェクトは、印象づけには効果的です。しかし、動きが多すぎると情報に集中できなくなることもあります。スクロールするたびに動くサイトも最初は新鮮に見えますが、何度も繰り返すうちに、見るのが疲れてしまう場合がありますし、読み込みに時間がかるようであれば見るのを諦めます。※実際に、納品後、発注者様から動きを減らしてほしいとの依頼を受けたこともあります。 注目してほしいポイントのみに使用して、控えめにするくらいがちょうどいいこともあります。 モノトーンやダークカラー中心でメリハリがない モノトーンやダークカラーで構成されたホームページはシンプルで洗練された印象を与えます。しかし、コントラストが弱いと可読性が下がるだけでなく、コンテンツ自体が埋もれてしまうことがあります。問い合わせボタンを用意しても、気が付いてもらえなければ成果は増えません。見てほしいポイントが目立つ程度の配色は必要です。 なぜスーパーのチラシはあのデザインなのか ここで少し視点を変えてみます。スーパーのチラシを「かっこいい」と感じる人は少ないのではないでしょうか。文字は大きく、価格は目立ち、色も随分と派手です。 しかしながら、見た瞬間に伝わるという点に於いては非常に優れたデザインだと思います。成果を出すデザインは、必ずしも「かっこいい」とは限らないのです。 まとめ：かっこよさは否定しない かっこいいデザインが悪いわけではありません。問題は、見た目が目的になって、使いやすさが無視されてしまうことです。 ホームページは成果を生むためのツールです。使いやすく、分かりやすく、行動しやすい。その土台があってこそ、かっこよさが意味を持ちます。 もちろん、ブランドイメージが成果に直結するようなホームページもあるため、雰囲気を優先して作る方法も良いとは思いますが、成果に伸び悩み、改修を考えている場合は、見た目を変える前に、使いやすさを見直されるのも良いかもしれません。

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なら簡単」の正体 例から見えてくるように、依頼者と制作者が使っている「簡単」という言葉は、指している対象が違います。 依頼者が期待している「簡単」は、誰でも、専門知識がなく、自由に入力しても、結果として綺麗で整ったページが完成すること、つまり「成果物の完成度」が保証されている状態を指しています。 一方で制作者が言う「簡単」とは、投稿画面から、特別な操作を必要とせずに更新できること、つまり「操作のしやすさ」を意味しています。 同じ「簡単」という言葉でも、一方は「結果」を、もう一方は「手法」を指しているため、ズレが生じるのです。 まとめ：簡単更新には、情報の共有が必要 「簡単に更新できるサイトを作りたい」という要望は、決して無理なものでもありませんが、情報を共有しない限りすれ違いは続きます。 ズレを生まないために、制作前にすべき確認事項 どんな内容を更新したいのか 誰が更新するのか（専門知識の有無も含め） 見た目はどこまで統一したいのか どこまで自由に書きたいのか 自身での更新をお考えの場合は、「簡単に更新できるようにしてほしい」だけではなく、どのような内容を更新していくかを共有することで、一層満足感の高いホームページ制作ができあがります。