すべてのWeb制作は「プロジェク卜」である

まずはじめに「プロジェクト」とは何かについて整理したいと思います。なんとなく「仕事のひと区切り、ひと括り」をプロジェクトと捉えがちですが、プロジェク卜マネジメン卜の知識体系である「PMBOK」ではプロジェクトを以下のように定義しているようです。
「独自のプロダクト、サービス、所産を創造するために実施される有期性の業務」
つまりプロジェク卜とは、
・この世でひとつだけのものを作るための仕事で、
・始まりがあり、終わりがある
・終わってしまうと後にも先にも同ーのものは存在しない
一見、ルーティンワークとして見てとれる仕事も、年度や景気、外部からの要望により目標が変わりますよね。そのため、「プロジェク卜」と呼びうるわけです。よって、すべての Web制作はプロジェクトと呼んでよいと考えています。プロジェクトの性質は、他にも以下のものがあげられます。
・目標、目的、ゴールがある
・人によって実施される
・限られた資源(予算、人、期間など)による制約がある
・プロジェクトの基本プロセスには「計画→実行→コントロール→計画」とPDCAサイクルがある

Web制作におけるプロジェクトマネジメントとは

ここではプロジェク卜の概念の解説と、Web制作の分業の観点からみたプロジェクトマネジメントの必要性について解説しようと思います。すべてのWeb制作はプロジェクトであり、 Webディレクターをはじめ、Web制作の「窓口」や「仕切り担当」を執り行なう人はプロジェクトマネジメントの考え方を取り入れ、仕事にあたることが望ましいと考えられます。
まずは仕事のしかたを「マネジメン卜」してみましょう。
ここでは「仕事の全体をとらえ、 与えられた条件をやりとげるため」のタスクを洗い出し、決めごとに基づいて管理(監理)し 進めていく一連の働きを「マネジメン卜」と定義するとしましょう。
マネジメン卜の概念は、仕事の規模の大小を問わず取り入れた方がよいと考えます。よく「神は細部に宿る」と言われるように、Webサイトの構成やデザインを作り込みがちだが、仕事の進め方自体にも計画性と目的を持って遂行しましょう 。個々の作業にはリスクや成長のヒントがあるものです。仕事で取り組むべきこと全体を府搬することで、目的と実際のギャップに気付くはずです。取り組んでいる仕事の規模が小さな仕事であれば効率的に消化していくために、大きな仕事であれば全体感をつかみ舵取りができるために、また発注者側の経営者がビジネスの目的を見失わないためにも、マネジメン卜の概念と手法を活用してほしいと思います。

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メーカーです。