タグ検索：web制作

弊社は名古屋のWeb制作会社ですので「Web制作会社 名古屋」や「ホームページ制作会社 名古屋」などのキーワードで検索上位に上がると嬉しいのですが、業種・営業内容・商品など、Webサイト毎に目的に合わせた重要視されるキーワードがあると思います。

この検索キーワードですが、せっかくSEOを意識して施策をしていても、キーワード自体が的外れでは正しい成果を得ることができません。また、キーワードの方向性は合っていても、そもそも需要がない・認知されていない場合は、キーワードの表現を少し分かりやすくするなど、調整した方が良い場合もあります。

しっかりと目標を見定めて目的地を決める為には、まず対策する検索キーワードについて知る必要がありますので、今回はキーワード例として「Web制作会社」と「ホームページ制作会社」を比較しながら「地域性」も踏まえて、キーワードを決めるコツを考えてみようと思います。

キーワードを知る

まずは例としてあげた2つのキーワード「Web制作会社」と「ホームページ制作会社」を調べてみます。
調査方法につきましては、弊社の業務内容にもなりますので詳細は控えさせていただきますが、Googleが提供している「Google Trend」や、専用のキーワード調査ツールなどを使い調査します。また「Google Search Console」などで、すでにサイトに流入しているキーワードを調べて強化するというのも良いかもしれません。

メインのキーワード自体が決まらない場合は、まずWebサイトの主題にまつわる関連キーワード（サジェスト）などを調べると良いと思います。今回の例は似た2つのキーワードになりますが、実際に調べてみると下記の様に結果に少し違いが現れました。

「月間検索数」は数が多いほど1ヶ月に検索されている回数が多く、「競合性」は数が多いほど競争率が激しいとされています。実際の数では無く、あくまでもツールが割り出した目安ですので参考値としてください。キーワードにもトレンドがありますので、時期や期間で変化するものもあり、トレンドを意識する場合もあります。

今回のキーワードについてひとつポイントがあるのですが、前提としてWebについて詳しい方は、私たちの様な会社を「Web制作会社」と呼びますが、一般的なお客様やそれほどWebについて詳しくない方は「ホームページ制作会社」と呼ばれることが多いです。
ホームページはWebサイトのトップページを指すため厳密には違いますが、一般的に使われている言葉の意味合いとしての認識は似ており、Googleでは「Web制作会社」「ホームページ制作会社」のどちらでもヒットすることがあります。

ただ、昔はSEOをする際に表記の揺らぎも意識し、両方のキーワードを上手に使うこともありましたが、ページ内に同じ意味を持つ複数の単語が混在することに違和感がありますし読みにくくなりますので、今はユーザーの目線に立ちしっかりとキーワードを見極めて選定された方が良いと思います。

今回調べて面白かったのが「ホームページ制作会社」と「Web制作会社」だけを比較した際に、圧倒的に「Web制作会社」の方が多いのですが、「名古屋」という地域性が加わると「ホームページ制作会社」の方が多くなりました。この結果から、名古屋エリアでは「ホームページ制作会社」と調べる可能性が高いという傾向がわかりました。

この様にキーワードのチョイスにも地域性が出ますので、キーワードを選ぶ際に配慮されると良いと思います。また、このエリアについては「都道府県」「市」「地域」「駅」などで変わってきます。エリア名をつける場合は、どれくらいの大きさのエリアで絞り込むことが適切かを、営業範囲や検索ボリュームなどを調べて設定されると良いのではないでしょうか。「地域名」と「駅名」が同じ場合などもありますので、エリアによっては注意して検討する必要があるかもしれません。

また「競合性」をみると「ホームページ制作会社」と「Web制作会社」の検索数に反して「ホームページ制作会社」の方が競合が多い結果となっています。検索需要が多く競合が少ない方が、良い順位が取りやすく効果が出やすいともいえますので、競合性の部分も目安にすると良さそうです。

「想定難易度」も意識する必要があります。こちらが高すぎるとビッグワードとなり、そもそもSEOで高順位を狙うこと自体が難しくなりますので、ご自身のWebサイトで「実現が可能か？」「足りない場合は何を補強するのか？」、関連キーワードなどから「狙いやすいキーワードに変更するのか」などを検討する必要があります。今回は2つのワードであまり差がない為、こちらは特に意識せず対策してみます。

競合サイトの調査

キーワードを決める際には、競合サイトを調査する場合もあります。
競合サイトが流入を稼いでいるキーワードが分かれば、そのキーワードについて対策し競合から順位を奪うことで、流入を得ることができる可能性があるからです。競合サイトの流入キーワードは調査が可能ですので、調査結果から効果が高いキーワードの選定が出来ますが、この場合は競合サイトと順位を争うことになりますので、Webサイトやドメイン全体をみて足りない要素を補う方法を考えるなど、Webサイトの全体的なパフォーマンスを上げていく必要があるかしれません。

最後に

今回のキーワード選定は、結果的に「ホームページ制作会社」と「Web制作会社」で比較して、弊社では「Web制作会社」にて対策することにしました。理由としては、まず「Web制作会社」が正しいこと、そして全国で圧倒的に検索数が多いこと、名古屋エリアでは少ないですが、比較して大きな差はついていないこと、そして競合が少ないことです。

これでしばらくお試しをして、日々結果をモニタリングしながら様子を見ようと思います。
「Web制作会社」で効果が出ることには「ホームページ制作会社」でも何かしら検索結果に表示される可能性がありますので、またそのあたりも踏まえながら判断していこうと思います。

表題の通り、名古屋のWeb制作会社としてもうすぐ15年になります。正確には2024年7月1日で創業15年目になります。もう少し細かく言いますと、その2年前の2007年4月1日に個人事業主として独立しておりますので、名古屋で営業を始めてからの年月としましては丸15年を超えました。

Webは変化が早い業界です。15年もあるとWeb技術やトレンドも含め随分と変わったこともありますが、この東海エリアのお客様に大変良くしていただきまして、変わらず事業を続けてこられた事を大変感謝しております。いつも本当にありがとうございます。

この東海エリアは商業・工業・農業のバランスが取れており、関東・関西の中間位置ということで、日本の中心的な地域なのだと思います。この様に活力のある地域だからこそ、未熟な私たちが起業しても周りのお客様のお力もあり、業務を続けてこられたところが大きいのだと思います。

主な制作実績について

15年もあると今まで様々なご依頼がありました。
ご依頼いただいたお客さま、その節は誠にありがとうございました。
公開可能な実績に関しましては、一部を当サイトの「制作事例」にご紹介させていただいております。主に企業サイトなどのWeb制作のご依頼が多いですが、Webを利用したシステムの開発や、グラフィックデザインなどの印刷物など、多種多様なご依頼をいただいてまいりました。

Webサイト制作はCMS（a-blog cms）を導入して構築することが多いため、効率よくWebサイトを管理されたい方や、Webサイトを成長させビジネスでの効果を望まれる方が多く、運用面でのアドバイスなどもおこなわせていただいております。弊社には15年以上に渡りa-blog cmsにてCMSサイトを制作しており、100サイト以上の導入実績がございますので、お客さまのご要望をお伺いして最適なプランをご提案させていただきます。

また、Youtubeなどの動画コンテンツ／集客のためのWebサイト運用／SNSの活用方法など、時代に合わせた取り組みも行っておりますので、何かWebについてのお困りごとやご相談などがございましたら、弊社までお気軽にお問い合わせください。

非公開の実績も多数ございますので、もし気になる方がお見えでしたら許可の取れているものに関しましては、お打ち合わせなどでご紹介することは可能ですので、お気軽にご相談ください。

最後に

これからも私たちを選択していただいたお客様に有益かつ喜んでいただける様に、結果の出る成果物を求めて精進していきたいと思います。良いご提案ができる様に、新しい取り組みや検証なども頑張ってまいりますので、今後ともどうぞ宜しくお願いいたします。

a-blog cmsとhtmxが非常に相性が良いということで、ベースキャンプ名古屋で開催された「htmx」の勉強会に行ってきました。

htmxは初めて学んだのですが、htmlに記述するだけで複雑なjsを書かなくても、簡単に非同期で要素の置き換えなどができる、多くの機能を備えた js ライブラリの様です。a-blog cms に慣れたユーザーでしたら、「ポストインクルード」の代わりになるものと説明すると分かりやすいかもしれません。

・htmx
https://htmx.org/

・a-blog cms ポストインクルード
https://developer.a-blogcms.jp/document/postinclude/

htmxの話は今回初めて聞いたため、まだ使っておらず機能的なことも詳しくないのですが、すでに海外では非常に人気のあるライブラリの様です。ただ日本ではあまり活用されておらず話題も少ないとのことでした。

htmxの使い方

このhtmxはhtmlに少し専用の記述を追加するだけで簡単に実装ができます。機能を発火させるトリガーの種類や、置き換え対象要素の指定方法なども複数設定がある様なので、その中で仕様に合うものがあれば、低コストで機能性を高めたサイトを作れる可能性があります。ぜひ詳細はhtmxのページを見てください。

<!-- 例：キーアップの500ミリ秒後に #search-results を所得した結果で置き換え -->
<input type="text" name="q"
    hx-get="/trigger_delay"
    hx-trigger="keyup changed delay:500ms"
    hx-target="#search-results"
    placeholder="検索"
>
<div id="search-results"></div>

強力なa-blog cmsのテンプレート（html）の活かし方が広がる

a-blog cmsのテンプレートエンジンは非常に強力で、a-blog cmsの大きな魅力のひとつだと思います。
PHPなどのプログラムが書けなくても、htmlに専用の記述を書くだけで、DBから欲しい情報を簡単に取得し加工出来る優れた機能を持っています。（もちろんPHPが出来るともっと色々なことができます）

今回の勉強会で話を聞いていて、この優れたテンプレート機能にhtmxがもつUXを改善できる手軽さが加わることで、今まで以上にa-blog cmsの幅を広げるのではないかと思いました。今までもポストインクルードという似た機能はありましたが、個人的には少し取り扱いが難しいと感じていたところもあり、どうしても必要な時にしか使ってこなかった印象があります。ただこのhtmxの場合、最初にセットアップさえしてしまえば、あとは手軽に実装できますので、非常に痒いところに手が届くものになる可能性がありそうです。

また、a-blog cmsには強力なテンプレートのキャッシュ機能がありますので、テンプレートをキャッシュさせてhtmxで非同期に取り扱うことで、従来より高速に動くというお話もありました。このあたりは非常に興味のある話題で、実際にどれほど差があるのかとても興味が湧きました。

SEOの流れにも繋がるところがある

前回のブログ（SEOの話題）で「SEOとは「UX を高めていく事」という時代になったのだと思う」という話を書きましたが、このhtmxはまさにその流れに乗ったものかもしれません。

正直jsをごりごりと書いているプログラマーの方は、htmxだと物足りないと思うかもしれませんが、htmxでUXを改善する手間が減れば、より多くのサイトで機能性を高めるきっかけになると思います。もしかすると日本であまり流行っていないのは、このあたりの認識が海外より重要視されていないのかもしれません。

以上、勉強会の感想でしたが、このブログを書いている段階では、まだ一度も実装したことがありません。
ただ、今回お話を聞いて「これは良さそう」と感じましたのでhtmxのことは今後も少し勉強していこうと思います。

最後に

弊社がなぜa-blog cmsを愛用しているのか、a-blog cmsの特徴やメリットとは。
a-blog cmsをお勧めする理由につきましてはこちらのページをご覧ください。
a-blog cmsをお勧めする理由

10年ほど前によく行われていた旧来のSEOの手法は、Web制作者にとって受け入れ難いものが多々あり、敬遠していた人も多いと思います。実際SEOは重要と認識しつつも、手法のブラックさに拒否していた方がほとんどではないでしょうか。

この様なSEOですが、長い年月をかけてGoogleがアップデートを重ねる度に改善され、現在はCore Web Bitalsなど、より Webサイトの健全性も重要視され、正しいWebサイトが求められる様になりました。

Googleのアップデートも年に数回行われており、方向性は示されてもその具体的な内容は非公開な場合もありますが、SEOのために悪質な（ブラック or グレー）な手法を狙った対策は、アップデートの度に改善されて通用しなくなりますので、小手先で上位を狙う業者も減ってきています。

SEOに今求められているものを探して見えてきたもの

実はここ数ヶ月、SEO案件に同時に複数携わらせていただいております。
実際の案件ですので詳細は書けませんが、その中で僕自身も最新のGoogleの状況を再認識した部分もありますので、少しだけブログに残すことにしました。

重要なのはWebサイトが健全であること

今 Google に評価を得たいのであれば、Webサイトは健全である必要があります。
「健全」には色々な意味があると思いますが、簡単にいくつか紹介すると…

・検索クエリに対して、オリジナルで正確な情報（回答）を届けられているか
・情報提供しているサイト（ドメイン）に信頼はあるか（専門性）
・サイト内のリンク構成は機能的に作られているか
・FCP、LCPなどパフォーマンスの影響で、ユーザーにストレスを与えていないか
・CLPの影響でユーザーが誤操作を招く様なことはないか
・あらゆる特性をもったユーザーを想定したサイトが構成できているか（ユーザー補助）
・安全性、セキュリティは保たれているか
・悪質な施策（隠し文字、隠し要素、重複コンテンツなど）はないか（意図せずの場合も含め）
・悪質な被リンクはないか
・サイトマップに異常はないか

などなど。
個々の具体的な対策内容は伏せさせていただきますが、ブラックなものを除くとどの項目も「ユーザーが求める正しい情報をストレスなく安全にお届けできるか」に配慮された内容が重要視されていることが分かります。

内部施策的なことを掘り下げていくと、結果的には「正しい情報を便利に使いやすく提供する良質なサイト」があれば、Googleは良いサイトとして、検索ユーザーに「調べている事柄に対して、この様なお勧めのWebページがありますよ」と、あなたのWebサイトのページをお勧めしてくれるわけです。

UX（ユーザー体験）に優れているサイトが上位に来る

これはもう一言で言うなら「UXに優れているサイトが上位に来る」時代なのだと思います。もちろんページの内容的に「検索クエリ」に対して、明確な答えがあるページでないといけませんが、それ以上で競うなら「UXに優れているサイトが上位に来る」ことを理解する必要があります。

といっても…全部できる？

実際の現場で考えた場合、全てに配慮することは難しいのではないでしょうか。
予算の都合もありますし、技術的な問題もあります。「ユーザー補助」的なことで例をあげれば、お客様のコーポレートロゴの色や形自体が配慮されていないケースもあります。ただ、この様な状況の中でどこまでを対策として捉え、配慮できるかが重要なのだと思います。

Googleさんが理解しやすい様に配慮する

ただ「UXに優れているサイトが上位に来る」といっても、SEO的にGoogleが理解しやすい方法で、という部分もあると思います。なので使いやすくするために、例えば初期ロード時は「情報が隠れている」コンテンツは、Googleにはプラスに働かないこともありそうです。対策としては初期状態は情報が見渡せ、ユーザーの操作により必要な情報が抽出できる操作性に変更して対応するなど、何かしらの配慮は必要なのかもしれません。

それでもこの様な時代になったという事は、冒頭にお話しした古いSEOの概念は全て捨て、より良いサイト作りを目指すことで、結果的にGoogleの結果が付いてくる時代なのだと思います。それは本来あるべき姿で、Googleを見て施策するのではなく、ユーザーを見てWebサイトを作れば良いのだと思います。

最後に…

弊社ではこの様なSEOへの取り組みも行っております。
お客様のWebサイトを調査し、キーワードの調査選定・サイト構成などのアドバイスだけではなく、実際にWebサイトの改修などの実務もおこない、期間をかけて強いサイトに調整をさせていただく事で、効果を出していくものになります。（原稿自体はお客様にご用意いただきます）

もちろん検索順位はGoogleが独自に決めておりますので、順位上昇の保証はできませんが、以前のSEOと違うのは、確実にWebサイトの健全性があがりユーザー体験がよくなることで、滞在時間やコンバージョンへの良い影響も期待できると言うことです。

こちらのSEO施策は非常に労力がかかりますので、長期のご契約が必要なこと、また実務も行うことから、弊社でa-blog cmsにてWebサイトを構築させていただいたお客様のみのご対応とさせていただいております。（a-blog cmsにはSEOに強い機能や、キーワードの実施なども行いやすいため、SEO対策を行う場合は必須とさせていただいております）

弊社ではWebサイトを長く有益にご利用いただける様に、様々な取り組みを行っております。
何かお困りごとがございましたら、ぜひお気軽にご相談ください。

Web制作に役立つ js ライブラリの小粒な Tips をご紹介します。
今回はWebサイトのTOPページなどでよく利用するjsライブラリ「slick」で、「.slick-dots」で利用される<button>の「aria-hidden」が、画像の表示・非表示に連動してボタンも「aria-hidden="true"」or「aria-hidden="false"」と切り替わってしまう問題についての解決方法をお伝えします。

問題点

この問題点は、画像が表示されていない時にも「.slick-dots」が連動して「aria-hidden="true"」になってしまいます。この場合画像は表示されていなくても、「.slick-dots」の<button>は表示されているため本来は「aria-hidden="false"」が正解になります。
この記述が間違っていることで、音声ブラウザで利用された際にボタンについて間違った操作方法が伝わる可能性があります。

解決策

当初、海外など色々な情報を探しましたが、解決法がわからずでした。
そこで他のサイトはどうかと、最近作った別のサイトを確認したところ、slickを使っていても新しいバージョンではこの問題が解決していることに気付きました。

いつから大丈夫になったのか分かりませんが、今回利用していた古い「slick.js ver1.4.1」では「aria-hidden」問題がおきますが、最新の「slick.js ver1.8.0」（2024/4/19時点）では解決されていました。

新しいサイトを立ち上げる際は js などのライブラリも最新にしますが、過去に作った古いサイトの場合は、そのまま古いライブラリを使っている場合もあります。もし同じ症状に遭遇した場合は、ライブラリを新しくしてみると改善するかもしれません。

Webサイトで利用するjsライブラリなどは、セキュリティの問題もありますので、定期的に確認をするなど最新で運用されることをお勧めいたします。

・slick
https://kenwheeler.github.io/slick/