HP制作とSEO対策

SEO の施策は、検索エンジンである Google がWeb ページ、を評価する手法の進化に合わせて、さまざまに変化してきました。Google がWeb ページ、を評価する方法 は、これまで何度か大きな変更が行われてきていますが、基本的には検索を行う人に、より有用な情報を提供することを目的としています。評価基準の変更に伴って、SEO の施策にも改良が加えられてきているのです。とはいえ、 SEO の基本的な施策が「内部対策」と「外部対策」に大きく分けられる点は、昔から変わりません。

取り組む順番は内部対策→外部対策
内部対策とは、サイ卜の内部を検索エンジンから高い評価が受けられるように最適化することです。具体的には、タイトルの付け方、見出しの書き方、記事の文章の書き方などが対象となります。タイトルや見出しは昔から重要な評価基準とされてきましたが、最近では文章の内容も細かく評価される傾向にあります。
外部対策はメインのサイ卜以外にサイトを作り、作成したサイ卜からメインのサイトヘリンクを張るととにより 、メインのサイ卜の評価を上げる施策です。たとえば、ブログなどで優良な コンテンツページを立ち上げ、上位表示させたいページに向けてリンクを張ります。
自分で SEO を行うにあたっては、まず内部対策に取り組み、めどが立った時点、で外部対策に取り組みます。

HTMLに目印をつける

HTMLでページの大まかな構造を書いたら、スタイルシート(=CSS)で見栄えを整えるためにHTMLの中に目印を付けます。
cssは「このページのこの場所を白色にする」というように、見栄え(=スタイル)を指定するのですが、cssを読み取って画面の表示に反映させるのはブラウザであり、ブラウザは私たち人間のように「このページのこの場所」と言われでもどこのことだかわかりません。
そのため、HTMLに目印を付けて「HTMLにこの目印が付いている場所を白色にする」というように、ブラウザが理解できる形をとるのです。
なぜなら、ブラウザはcssを読み込む時点ですでにHTMLを読み込み終えているので、HTMLに付けた目印とcssを結びつけるのが最も効率的で理にかなっているからです。
HTMLに付ける目印には「タグ名」「id」「class(クラス)」の3種類があります。
HTMLに目印を付けたら、テキストエディタを使って1つ1つの目印にcssの構文を使って見栄え(=スタイル)の定義を書いていきます。
作ったファイルは「style.css」のように拡張子”.css”を付けて保存します。

ホームページが表示される仕組み

みなさんが普段、パソコンやスマホを使って見ているホームページはインターネットの向こう側にあります。
ホームページを閲覧するために必要なデータは、インターネット上の「ウェブサーバー」と呼ばれるパソコンの中に置いであります。
そして、ホームページにアクセスすると、インターネット回線を通じてパソコンやスマホにホームページのデータがダウンロードされ、パソコンやスマホに入っているブラウザ(ホームページを閲覧するためのソフト)が、ダウンロードしたデータを画面に表示させます。
そのような手順を経て、私たちはホームページを関覧しているのです。
「サーバ ー」や「ドメイン」などの用語が出てきましたが、「専門用語は難しい」と恐れる必要はまったくありません。
知っている身近な言葉に置き換えてみると、「なんだ、そんなことだったのか」と感じることでしょう。

ホームページを作成するには、ホームペ ージの仕組みをある程度は知っておく必要がありますが、多くの方がここでつまずいてしまい、「何だか難しい・・・」と感じて挫折してしまいます。
その最たる原因は、インターネットを構成するいろんな概念や用語の意味を、わかりやすい例に置き換えて理解していくという手順を飛ばしたり、概念や用語よりもとにかく作ることを優先することにあると感じています。
何事にも順序があります。ホームページを作成するのも同じです。
まずは、みなさんが普段当たり前のように見ているホームページが、どのようにして表示されるのかをしっかりと学びましょう。

ワイヤーフレームを使用する

制作のとき、 Webページのビジュアルデザインを無計画にはじめると、サイト運営者の思惑からまったく外れたものになってしまうことがある。そのような場合は再デザインを余儀なくされるが、そうそうスケ ジュールに余裕があるわけではない。そのような非効率を起きにくくするために使われるのが、画面の設計を線のみを使ってシンプルに 書き起こしたワイヤーフレームだ。 ワイヤーフレームという名称は制作者の聞ではなじみがあるもの の、サイト運営者にとってはあまりなじみがない。加えて、ワイヤーフレームと一口にいっても、要素を暫定的なレイアウトに まとめたものから、ラベ‘ルやナビゲーションのスタイル、レイアウトま で固めた詳細なワイヤーフレームまでさまざまあり、各現場の習慣によって異なる。さらには、ワイヤーフレームの用途も、仕様の確認として 存在するものから、デザイナーへの指示書としてのものまで多岐にわ たる。 ワイヤーフレームは検討材料としての側面もあるため、すぐに変更 できるようにつくられているが、一貫性を保つうえで画像やボタンの 描き方を統一し、凡例としてまとめたり、ページ番号、ページタイトル、 プロジェクトタイトル、最終更新日などの書類として最低限必要な要 素も追記しておくと、後日別の担当者が見た際にもわかりやすくなるだろう。

画像のサイズの設定のやり方

挿入した画像のサイズは、マウスで画像のハンドルをドラックすることによって自由自在に変更できます。また、サイズをピクセル単位で数値を指定したり、ウインドウの大きさに対する割合を設定することもできますが、これは画像を右クリックしてショートカットメニューから [画像のプロパティ] を選択して行います。ただし、気をつけなければいけないのは、フロントページエクスプレスでの挿入画像のサイズ変更は、表示上の画像の大きさが変更されるだけで、画像の元ファイルのサイズまでは変更されないので、いくらフロントページエクスプレス上で画像を小さくしようとも、画像を表示するためには元ファイルの大きさの転送容量が必要となってしまうということです。快適に表示できるページを作るためには、 グラフィックソフトなどで画像のサイズ変更をするほうが良いでしょう。また、画像のサイズをもとに戻したいときは、[画像プロパティ]ダイアログをショートカットメニューから表示して、[外観]タブの[サイズの指定]チェックボックスのチェックをはすすと元のサイズに戻すことができます。

 

オリジナリティの高いコンテンツ

検索エンジンの進歩とともに、検索エンジンをだます対策から、検索エンジンの
求める利用者の希望を叶える対策が重要になってきたことは納得していただけたで
しょう。では、検索エンジンは何を基準に、「利用者の希望を叶えるWebサイト」だと
判断するのでしょうか。

もっとも大切なコンテンツの オリジナリティ

当たり前の話ですが、まず大切になるのはコンテンツです。利用者のニーズを満たす
コンテンツがあるか否かがもっとも大切になります。充実したコンテンツがないWeb
サイトでは、訪問した利用者が満足するわけがありません。
これまでのSEO対策でコンテンツが疎かにされていたのは、検索エンジンがコンテ
ンツを正確に評価できなかったからにすぎません。利用者のニーズを満たすオリジナリ
ティの高いコンテンツは、検索結果の価値を高める多様な選択肢となるため高く評価さ
れ、その評価は技術の進歩とともにより高まっていくでしょう 。また、オリジナリティ
の高いコンテンツには自然と外部りンクが集まるので、外部対策にもつながります。
利用者の満足度を左右する利便性

オリジナリティの高いコンテンツを作成したら、次に大切になるのが「利便性」です。
どんなに利用したいコンテンツでも、ページが表示されるまでに何分もかかるのでは、
利用者は不満に思うでしょう 。また、表示されたページが見にくく、目的の内容がなか
なか見つからないのも利用者の満足度を下げます。 Google はページ、の表示速度だけでなく、利用者それぞれの環境で最適な表示がされるか、レイアウトが利用者にとって見やすくなっているかなども評価の対象にしていま
す。SEO対策のためにも利用者のためにも、「利便性」を考えるととが大切です。

デザインの配色の考え方

配色を決める方法には、色相中心の配色とトーン中心の配色がある。前者は色相から連想する具体的、抽象的なイメージに 合致し、基調となる色相が明確なときの配色法で、類似した彩度の 高い色を中心に使う。後者は複数の色相を使ってイメージを表現す るときに使われる手法で、中心になるトーンを類似させることでイメー ジを的確に表現することができる。一般的にトーンを中心とした配色 が使われる頻度は高い。また、色相中心の配色でも彩度の高い色 を使わなければトーンのイメージが優先される。

画像や写真

ホームページ作成で画像や写真はaltタグを使ってSEO的にもアピールしたほうがいいです。
デジタル力メラで撮ったおいしそうな料理の写真、画像編集ソフトを駆使して作ったアイコンや口ゴ。ページを彩るために、画像は欠かせ ない要素です。しかし、ロボッ卜は画像の中身、つまりどんな画像なのか、画像の中にどんな文字が書かれているかは認識できません。せっかく口ゴの画像にサイト名が書かれていも、単なるひとつの画像と見なされてはもったいありません。そこで画像を使う場合に、画像の内容を検索エンジンにアピールできるワザを紹介します。 それはaltタグを使うことです。画像のHTMLに、alt タグとキーワードを付記することで、検索エンジンにどういった画像なのかを伝えられます。
それぞれの画像にユニークなキーワードを
alt タグを使う際は、いくつかのポイントがあります。まずはそのページのメインとなるキーワードを記述することです。ナポリタンのページであればa l t タグ内にナポリタンと記述しましょう。 問題はここからです。たとえばナポリタンの作り方を伝えるために、 調理風景を撮影した画像を 1 ページに数枚掲載したと します。すべてナポリタンに関連しているからと、すべてに「ナポリタン」とだけ記 述すると、とたんに<alt> タクの効果が弱まってしまいます。画像の点 数によってはSEO スパムになってしまうこともあります。 このようなとき、パスタを茄でている画像であれば「ナポリタン 茄で方画像j、ソ ースを作っている画像であれば「ナポリタン ソース作り方画像」と記述しましょう。1 画像でアクセスを集める意図がなければ記述しなくてかまいません。長い文章をalt タグ に記 述しているページがよくありますが、これはわざわざキーワー ドの効果を弱めてしまっています。 基本的にキーワードを 1~3つほど、簡潔に記述するのがコツです。

おすすめのSEO業者は東京SEOメーカーです。

配色の共通性と対比のバランス

配色を行うときに、共通性と対比のバランスが重要でありますが、共通性と対比のバランスを考えたときに重要な要素 となるのが色の三属性である。作業を行うとき、イメージによって色 の三属性である色相、明度、彩度それぞれで共通させる部分と対比 させる部分を意図的につくり出すことで配色のバランスをとる。 色相のイメージ、が強いときには特定の色を決め、その色に近似ま たは類似した色を中心に配色を考える。色の性質が似ていると色 相のイメージは強調されるが、不明瞭な配色になることも多い。こうしたときはトーンに差をつけることで、色相のイメージを変えずに明確な 配色にすることができる。トーンは明度と彩度の関係によって決まる。 トーンに差をつけるには明度差を強調する、彩度を強調する、明度・ 彩度両方の差をつけるという3つの方法がある⑮。トーンのイメージ が強いときは、色相に差をつける。彩度が高いトーンでイメージが強 い場合には色みの度合いが高く、これに色相差をつけると対比が強 くなる。複数の色相を使って配色を行うと派手な印象の配色になる。 また、彩度が低くてトーンのイメージ、が強い配色の場合、類似する 色相で配色を行うと不明瞭で同一の色相に見えてしまうことがある。 これは色相の差を最大限に生かすことで、違いを明確にすることが できる。具体的には色数を増やすと、色みの少なさを補ってくれる。

配色効果

無彩色はどの色相にも属さない色で、どんな色と組み合わせても 不調和を感じない配色になる。濁色系で低彩度の色は、敬遠されや すい色だが無彩色と同じ効果がある。以前から無彩色は死、陰湿と いったマイナスイメージが強く、好意的につかわれることが少なかった が、最近はインテリジェンスを感じさせる都会的な色として多用される ようになった。また、隣り合う色の明度が近く、境界が不明瞭になっ た場合、全体のイメージを保ちつつ境界を明確にするセパレートカラーとして使われることもある。無彩色は対比を強調する、不調和を 軽減して対比を弱めるといった具合に配色を行ううえで、重要な色で ある。色づかいの上手な人ほど、無彩色や低彩度の色を効果的に使っている。
配色を行ったとき、「重要な部分の見え方が弱い」「統一感がない」「全体的に締まりがない」ということがある。これらを解消する手段と して「セパレートカラー」「アクセントカラー」「グラデーション 」といった 方法がよく用いられる。セパレートカラーは、隣り合う色面の境界が不 明際なときにその違いを明確にする目的で使われる。アクセントカラー は全体を引き締めるために使われる色で、彩度の高い色を小さな面 積で使うと効果的である。グラデーションは段階的に色を配置するこ とで対比を弱め、全体のつながりに秩序を与えることができる。色の 三属性それそ会れで、グラデーションをつくれる。