WEB制作「ホームページ」

現在では、WEBサイト、WEB、WEB情報などと呼ばれる、WEB制作は、インターネットが普及して間もない頃などには、「ホームページ」などと呼ばれていた時期がありました。「ホームページ」は、「HOME」という意味合いから、現在ではWEBサイトの一番最初の表紙となる、トップページを表わすような表現として捉えられています。1990年頃のインターネットの出はじめに、WEB制作された「ホームページ」は、現在のWEBサイトとは全く異なる様式で、使用性もデザイン性も現在のWEB情報から比較にならないほど、別物のメディアのようなスタイルでありました。現在では、通信速度やユーザーが使用するデバイス機器の向上により、より複雑なコンテンツのWEB制作が可能となり、ユーザビリティが高く、情報量の多く、デザイン性の高い、ハイクォリティなWEBサイトが当たり前の時代がやってきました。そのような背景のもと、WEB社会の中では、人々は出逢い、ショッピングを楽しみ、映画を鑑賞したり、教育の現場として学習し、ビジネスの商談を交わしたり、様々な人々のシチュエーションを生み出しています。当時、一般的な人々にとってのWEBとのファーストコンタクトは、「ホームページ」でありました。

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

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

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