パソコンを操作する女性

WebデザインとSEOは無関係だと思っていませんか?無関係どころか、実は両者には切っても切れない深〜い関係があるのです。

この記事では、なぜWebデザインとSEOに関係があるのかについて、Webデザインの基本から、Webデザイン制作の流れを通じてご説明いたします。

Webデザインとは

Webデザインとは、ホームページの見た目をデザインすることです。
ホームページの見た目とは、ホームページを作成される貴社の業種を踏まえて、どうすればホームページの目的を達成できるか、使い勝手や導線を考えながら写真やイラスト、説明文などのテキストのレイアウトを考えたりします。
※お家作りで言えば、間取り(例:玄関入って左側に手洗い場、その奥に脱衣所とお風呂。右側は居住空間にする)や内装の壁紙、外観や外構などを決めることが当てはまります。

Webデザインには、ホームページ制作以外にも以下の3つが含まれます。

  1. Webメディアのデザイン制作(個人のブログ、ニュースサイトなど)
  2. Webサービスのデザイン制作(地図情報、天気予報など)
  3. 広告用ランディングページのデザイン制作

次にWebデザイン制作の流れについて、簡単3ステップに分けてご説明いたします。

Webデザイン制作の流れ

一般的にWebデザインは、次の3つのステップで進められます。

  • Step1.Webデザインの企画
  • Step2.Webデザイン制作
  • Step3.コーディング~納品(公開)

それぞれ簡単に説明いたします。

Step1.Webデザインの企画

お客様との打ち合わせを行います。主に以下の4項目について決めていきます。

  1. ホームページ制作の目的
  2. コンセプト(目的を達成するためにどのような切り口・魅せ方をするか)
  3. ペルソナの設定(想定するユーザー層を決める)
  4. 制作期間

※この段階で、ホームページ制作会社側からお客様に「問題点」や「改善点」を提示することもあります。

Step2.Webデザイン制作

Webデザイン制作では、まず最初にワイヤーフレームを作って、イメージの見える化をいたします。以下にワイヤーフレームのサンプルをご用意いたしました。

ワイヤーフレーム

このように、ホームページのレイアウトを簡単にイメージしたものが、ワイヤーフレームになります。

ワイヤーフレームが完成したら、次にデザインカンプの作成へと移っていきます。
デザインカンプとは、完成見本とか完成品のイメージのことで、ワイヤーフレームに画像(写真、イラスト)やテキスト、色付けを行ってデザインの詳細を決めていきます。

デザインカンプを作るときに使うツールは、当店ではAdobe社製の「XD」というソフトを使用しています。このソフトの特徴は、お客様とのコミュニケーションに優れていることです。

お客様におけるデザイン確認後の修正指示が別のファイルで送られてくると、ファイルを作成するお客様とそれを確認するデザイナーともに、かなりの時間がかかります。

Adobe XDを使用すると、データに直接コメントを記入することができます。デザイナーはそのデータをひらけばすぐに修正点を確認できるので、お客様とデザイナー双方の時間の節約(納期の短縮)につながります。

Step3.コーディング〜納品

見た目が決まったら、それをインターネット上で動作するようにHTMLやCSS、JavaScriptなどの言語を用いて制作していきます。その作業のことを「コーディング」と言います。

SEOとしても、「コーディング」がとても重要なステップです。
コーディングがきちんとしていないと、検索エンジンに誤った情報を伝えることになってしまい、正しい評価を得ることができなくなります。

コーディングが終わったら、お客様の最終確認を経て納品になります。

WebデザインとSEOの深〜い関係

さきほど、SEOとしてもコーディングがとても重要なステップであると説明いたしました。ここでは、なぜ重要なのかについて、できるだけ簡単にご説明いたします。

HTML構成とは?

HTML構成とは、Googleなどの検索エンジンにテキスト(文章)の意味を伝えるために使う、「要素」と呼ばれるもので、SEOにとても重要な役割があります。繰り返しになりますが、Googleなどの検索エンジンは、この「要素」でテキストの意味を把握します。ここがきちんと出来ていないと、SEOに悪影響が出てしまいます。

要素の一例として、以下の3種類をご紹介いたします。

  • 見出し:全部で5種類あって、h1〜h5で表します。
  • 段落:paragraphの略「p」で表します。見出しの説明文などとして広く使います。
  • 免責事項や著作権表示:「small」で表します。

Webデザイナーには、SEOの知識も必要

そのためには、WebデザインとSEOの専門知識が必要です。しかし残念なことに、そこがきちんとできていないホームページが、とても多いのが実情です。

この記事では、なぜWebデザインとSEOに深い関係があるのかについて説明いたします。

つまり

HTML構成をきちんとしていないと、SEOに悪影響が出ます。

Webデザインのまとめ

Webデザインの目的は以下の2つです。

  • ホームページの見た目をデザインすること
  • ホームページの内容をきちんと検索エンジンに伝えること

いいホームページの条件とは、使い勝手が良くて、きちんと検索エンジンにホームページの内容を伝えられることだと思います。

いくらオシャレでもユーザビリティ(使い勝手)の悪いデザインは、SEOにとってマイナスになってしまい、人の目に触れる機会が減ってしまいます。

ユーザビリティには、スマホでも読みやすくて、使いやすいデザイン「モバイルフレンドリー」であることも含まれます。モバイルフレンドリーであるためには、読みやすいフォント選びと文字サイズ、色使いに気を使うことも必要です。

さらに、Googleが推奨するレスポンシブwebデザインであることも必要です。

ページの読み込み速度を改善することも重要なポイントです。フワッとしたデザインは、高級感が感じられるなど人気ですが、表示速度が遅くなるので多用するのは避けた方がいいでしょう。
※表示速度が遅いと離脱の原因になってしまいます。

このようにWebデザインとSEOには、密接な関係があります。

SEOとは

SEO(Search Engine Optimization)とは、日本語で「検索エンジン最適化」の略です。検索エンジンからホームページを訪れてくれる人を増やすことで、Webサイトの目的の達成率を向上させる施策のことです。

特定のキーワードで検索されたときに、自分のサイトのページが上位表示(1ページ目)されるように、各ページやサイトを調整することが中心になります。

ホームページ制作におけるSEOの最初の一歩は、「キーワードの選定」です。

キーワードの選定のしかた

貴社の業種に合わせて、キーワードを選定することがとても大切です。

どのようなキーワードで検索上位表示させて、サイトに誘導するかを決めます。検索キーワード選定にあたって、ポイントとなるのは検索ボリューム(※)を知ることです。
※どれくらい検索されているか、検索回数のこと。

検索ボリュームを知るためには、Googleが提供するサービス「キーワードプランナー」を使うのがオススメです。
おおよその検索ボリュームを確認しながら、ビッグキーワード(競合の多いキーワード)と、スモールキーワード(検索回数が少なく、いくつかの単語を組み合わせた複合キーワードなどのこと)を選んでいきます。

ビッグキーワードは、競合が多い分上位表示されるまで時間がかかりますが、スモールキーワードは競合するサイト数が少ないので、上位表示されやすい傾向にあります。

ビックキーワードとスモールキーワードの両方を選定しましょう。

ページのSEO

ページごとに、どのようなコンテンツにするか、HTMLの構成のしかた(要素名、属性、属性値)、ページのタイトルやmetaタグの内容など多岐にわたります。

ここでのポイントは、HTMLの構成のしかたになります。検索エンジンは、HTMLの構成を見てページに書かれているテキストの意味と内容を理解します。私が見た限りでは、ここがきちんとなされていないホームページがとても多いように感じます。

当店では、ホームページ制作のセカンドオピニオンも行っております。

内部SEO

内部SEOの主な目的は、以下の3つです。

  • クローラの巡回を促す
  • クローラに正確な内容を伝える
  • ユーザビリティを担保する

クローラとは、Webサイトを巡回するロボットのことです。クローラが各Webサイトを巡回してサイトの各ページを中心にインデックスに登録します。インデックス登録されたWebサイトだけが検索結果に表示されます。

内部SEOでは、クローラを意識した施策が必要です。

外部SEO

かつては、被リンク数が多いWebサイトが高い評価を得ていました。しかし、被リンクを購入する悪質な行為が横行したため、近年では不正に取得した被リンクに対してペナルティが課せられることもあります。

しかしながら、被リンクを取得するための外部施策も大切です。例えばTwitterなどのSNSでの宣伝、オリジナル画像の配信など引用されやすいコンテンツの発信にも力を入れましょう。

定期的に被リンクをチェックして、悪質なサイトからのリンクを拒否する対応も忘れずに実施しましょう。

はまぐちWebデザインのSEO施策

はまぐちWebデザインでは、ホームページ制作の重要な要素の一つであるSEOについて、以下のようなケースでもご対応可能です。

  • ホームページのデザインは気に入っているけど、SEOが弱いから強くしてほしい
  • SEOに強いテキストを作ってほしい
  • 検索キーワードの調査方法を教えてほしい

対面での打ち合わせを大切にいたします

打ち合わせ

当店では、対面での打ち合わせを大切にしています。その主な理由として以下の2つをご紹介いたします。

  1. 相手とのコミュニケーションが深い
  2. 説明が伝わりやすい

1.相手とのコミュニケーションが深い

対面でのコミュニケーション最大のメリットは、相手とのコミュニケーションが深く、信頼関係が築きやすいことです。相手の表情や口調、身振り手振りなどの仕草、ちょっとした表情の変化などから状況を読み取りやすく、意思の疎通がしやすくなり「思い違い」を減らすことにつながります。これらは、直接会ってこそのものです。また打ち合わせ前後の雑談から、それまで気づかなかった、新たな視点や集客の方法に気づくこともあります。

対面でのコミュニケーションでは、お客様の空気感を含めた雰囲気の確認もできます。そこで感じたお客様の空気感や雰囲気をホームページのデザインや集客&売上に結びつけるためのコンテンツ設計に活かされるケースも多くあります。

ご契約後の打ち合わせ時には、ホームページ掲載用の写真撮影(無料オプション)も行えることから、ホームページのデザインに沿った雰囲気の写真撮影で、ホームページと同じテイストでの制作につながるメリットもあります。

2.説明内容が伝わりやすい

Zoomなどの非対面によるオンライン会議は便利ですが、対面でのコミュニケーションと違って、一人ずつしか発言ができないなど円滑なプレゼンテーションを妨げてしまう面があります。結果、きちんとした意思の疎通が不十分になってしまい「思い違い」などの原因になってしまいます。

その点、対面であれば説明役のプレゼンターが話している途中で疑問点を質問したり、参加者同士で意見交換することができるなど、コミュニケーションの活性化にも役立ちます。その結果、説明内容が参加者に伝わりやすくなります。

まとめ

これらの理由により、ホームページ制作の過程においての打ち合わせは、基本的に対面で行なっています。納品後も要所要所で対面でのコミュニケーションを大切にしています。
※お電話やメール、Zoomは、業務連絡を中心に使用いたします。

お問合せから納品まで、代表がご対応いたします

濱口政巳

はまぐちWebデザインでは、お問合せから打ち合わせ、ご契約、ホームページ制作の全過程(デザイン案の作成など)、納品(公開)まで一貫して、代表がご対応いたします。

ご依頼いただいたホームページ制作の全工程は、代表が責任を持って行うことで、お客様の「集客のノウハウ(ホームページ、チラシ、ネット広告など)」について、同業他社など外部への情報漏洩のリスクが生じません。

複数のスタッフを抱えるホームページ制作会社の場合は、様々な情報を共有することもあるため同業他社への情報漏洩などのリスクが気掛かりですが、そのような心配はありません。

複数の専門スタッフ制作のデメリット

複数の専門スタッフで、作業を分担して制作する場合の主なデメリットをご紹介いたします。
※かつて、当店代表が脱サラをして最初にはじめたビジネス(BBQ出張レンタル店)のホームページ制作をアウトソーシングした際の経験に基づきます。

  • 会ったこともないスタッフが制作に携わるっていることへの不安
  • 経営者目線での打ち合わせができない
  • 制作担当者と性格が合わない
  • 打ち合わせで決めた内容が、制作担当者に正確に伝わらない
  • 縦割りなので、制作の進捗状況は「担当のスタッフのみぞ知る」
  • 制作途中で担当者が交代すると、制作日数が伸びるなどの弊害が生じる

一貫制作のメリット

担当者制ではなく、代表が一貫して制作することで、「打ち合わせで決めた内容が、担当者に伝わっていない」といった問題も生じません。
ホームページ制作の過程における進捗状況などのお返事は、すぐに対応が可能です。一貫して制作するので、担当スタッフとの相性の問題もありません。ご契約までの打ち合わせなどのやり取りを通して、お客様で「合う、合わない」を判断していただけます。
※代表が対応いたしますので、ご依頼が集中する時期は恐縮ですが、ご相談までお待ちいただくことや制作開始までお時間をいただくことがございます。

対応エリアは、大阪・神戸を中心とした関西一円

エリアマップ

はまぐちWebデザインのホームページ制作は、対面でのコミュニケーションを大切に、全て当店の代表がご対応いたします。そのため、大阪・神戸を中心とした関西一円で、地域性をも考慮したホームページ制作を承っています。

当店にホームページ制作をご依頼予定で、打ち合わせをご希望のお客様は、基本的に御社にお伺いしてのご対応になります。

業種別の運用データに基づく最適なホームページ制作

グラフ

はまぐちWebデザインでは、これまでに士業、治療院、病院、各種スクール(教室)など様々な業種のホームページ制作を承っております。その経験と実績に基づくデータの蓄積と分析によって、業種ごとに必須となる要素は異なることを確認しています。お客様の業種に必須となる要素に、お客様の個性を反映させてSEOに強く、集客&売上につなげる仕様とデザインで制作いたします。

SEO施策の一例をご紹介

プログラミングの画面

2013年から蓄積しているSEOの失敗と成功のノウハウ、Web集客のノウハウ、最新のSEOを全て注ぎ込み、狙ったキーワードで検索上位(10位以内)を目指して制作いたします。

営業担当として活躍してくれるホームページに必要なSEO施策の一例を、以下にご紹介いたします。

  1. ページの表示速度を意識したSEO施策
  2. 使いやすいコンテンツ設計

1.ページの表示速度を意識したSEO施策

ホームページを訪れてくれたお客様の印象を左右する大切な要素の一つが、最初に表示される画面の画像(写真やイラスト)やテキストです。

画像やテキストの内容は、ホームページを訪れてくれたお客様がその後も閲覧してくれる率を高めて、直帰率を改善できる要素の一つです。直帰率を改善したいからといって、画像を入れすぎるとページの表示速度が遅くなり逆に離脱につながってしまいます。

Googleが公表しているデータでは、

  • 画像が重くて表示速度が遅い(目安:3秒以上)ホームページの評価を下げる
  • ページが表示されるまで3秒以上かかる場合の離脱率は53%
  • ページが表示されるまで2秒以内だと離脱率は9%

せっかくシンプルで信頼感のあるデザインのホームページを公開しても、ページの表示が遅いと顧客獲得のチャンスを逃してしまいます。

本プランでは、ホームページの表示を2秒で完了させる独自ルールを設けています。そのために、ホームページで使用する画像は、質感とデータの軽量化のバランスを大切に最適な圧縮比率で圧縮いたします。ヘッダー画像(メインビジュアル)は、パソコンとスマートフォンで最適な画像に切り替える仕組みを採用しています。

2.使いやすいコンテンツ設計

迷路突き抜ける赤い直線

検索結果からホームページを訪れてくれたお客様の直帰(離脱)を防ぎ、お問合せへとつなげるためには、使いやすいコンテンツ設計も外せません。

使いやすいコンテンツ設計とは、ホームページを訪れてくれたお客様が、探している情報に迷うことなく辿り着けるように設計することです(例:サイト内検索は、すぐわかる場所に表示させる)。

当店では、お客様の業種別の事業ニーズと顧客ニーズ、ご要望に応じて、検索結果からホームページへとたどり着いてくれたお客様が、自然な流れでお問合せにつながるように、使いやすいコンテンツ設計をご提案いたします。

スマートフォン、タブレットなどにも対応

机の上にパソコンとスマホ

スマートフォン、タブレット端末にも対応するために、Googleも推奨しているレスポンシブWebデザインでホームページを制作いたします。

業種によっては、スマートフォンからのアクセス数が9割を超えるものもあります。全業種のホームページの平均値でもスマートフォンからのアクセスは5割を超えており、今後さらにスマートフォンからのアクセス割合が増える予想がGoogleからも公表されています。

レスポンシブWebデザインは、どんな大きさの画面でも見やすく、使いやすいホームページにするために必要なものです。 1つのホームページの情報を更新すれば、全ての端末で瞬時に更新された情報が確認できるようになります。つまり、内容は全て同じですが画面に応じて見せ方が違うということです。

スマートフォンでアクセスしてくれたお客様が問い合わせしやすいように、タップすれば電話やメールのお問合せフォームが展開できる機能をご提供いたします。それにより、スマートフォンユーザーからの取りこぼす心配がありません。

SEO施策で検索上位表示、優れた操作性でお客様を逃がさない

2013年から蓄積しているSEOとWeb集客のノウハウ、最新のSEO施策を全て注ぎ込み、狙ったキーワードで検索上位(10位以内)を目指して制作いたします。

ホームページを訪れてくれたお客様を逃さないように、様々な仕掛けをそっと忍ばせておきます。