WEB社会とムーブメント

旅行に出かける前に、現地の天気を調べたり、デートの前、映画の上映時間を調べたり、欲しかった花柄のワンピースを買い物したり、WEB情報は、皆さんの生活の一部といっても良いほど、密接な関係性をもつようになりました。WEB制作は、皆さんのそのような「ニーズ」と呼ばれる「欲求」をマーケティングし、その「ニーズ」に応えられるようなWEB制作を心掛ける事で、高い需要を生み出しているのです。現在では環境さえ整えば、誰でも情報の発信が行えるような便利なWEB社会において、人々はどのような「ニーズ」を求めているのでしょうか?そのような、皆さんの「ニーズ」について、詳しいマーケティング調査を行い、WEB制作に活かした営業活動のしくみの1つをSEO対策などと呼んでいます。SEO対策は、皆さんの「ニーズ」の表れとなる、検索エンジンの検索ワードから、たくさんヒントを得た情報とともに、WEB制作に活用していきます。そのような、ターゲットとなるユーザー情報と伴に、開設されたWEBサイト運営の中でも、お客様の動向を詳しく調査、分析する事で、さらなる商品開発やサービスの販売促進につなげていくのです。WEB社会は、人々の「ニーズ」に関する情報の宝庫となり、多方面多方向からなるマーケティング調査や分析によって、新たなるムーブメントを生み出していきます。皆さんが、WEB社会を活用すればするほど、あらゆる情報は蓄積され、次世代の社会へと活かされていきます。

ソースの表示

WEB制作を外注しないと決めた以上は、まずHTMLを覚えることから始めなければなりません。しかし教本を手に取って勉強時間を作るのも、忙しい人にとっては難しい相談です。そこでお勧めするのが、ネットサーフィン中にソース表示させる癖をつけることです。気に入った構成、デザインのサイトを見かけるたびに、そのサイトのソースを確認するように心掛けるのです。例えば綺麗な色だと感じれば、その色をどのように記述しているのか気になるでしょう。ソース表示は簡単に誰でも出来ますから、癖にするのもそれほど時間が掛からないはずです。ブラウザの「表示」から「ソース」を選べばよいだけです。右クリックでも表示させることが出来るので、試してみて下さい。  ソースの表示といっても初心者は分からないでしょうが、具体的にはHTMLのコードが記述されたメモ帳が表示されます。HTMLの基礎さえ身に付けていれば、初めて見るコードであっても、無理なく覚えることが出来ます。同じタグを何度も見ているうちに、そのタグが何を意味するのか自然と覚えるようにもなります。慣れてくると、デザインが似ていても、ソースがかなり異なることもあると分かってきます。例えば「スタイルシート」「テーブル」といった記述の有無を発見することになります。また、フォントの指定をスタイルシートで行うのか、それともフォントタグで済ませてしまうのか、といった違いも知ることになります。  もちろん最初に基礎を勉強するのが面倒なのですが、それでもJavaScriptのようなプログラミングと比べれば、初心者でも簡単に学べます。メジャーなサイトのほとんどはHTMLのみで記述されていませんから、細部まで読解できるようになるには色々な言語を習得しなければなりませんが、何事も少しずつ勉強していけばよいのです。

キックオフミーティングを開く

提案段階やプロジェク卜の計画段階では、主に戦略や見積もりに関わるメンバーが稼働していたが、ここにきてようやく実質的に制作にかかわるメンバーを揃える。この時点でキックオフミーテイングを設定し、制作に関わるメンバーにくまなくプロジェク卜の「これまで」と「現状」を共有しリスクを検討することが大切ではないだろうか。

このキックオフミーティングで必要になってくるのが、キックオフミーティングのアジェンダ
(協議事項) だろう。

ミーティングに与えられた時間やプロジェク卜の内容に応じアジエンタ(協議事項)を作成し、 話し合う。プロジェクトの背景や概念的な話題から各論へ、前提条件から本論に移ると話が伝わりやすくなるのではないだろうか。特に「自己紹介」「プロジェク卜の経緯」「次のアクションについて」は重要度か‘高いと考えてよいだろう。

また、変更管理シートの作成を行うとよりよいと考えられる。

「手を動かす」段階になると、想定と実際との違い、考慮もれが表面化することがある。規模の小さなプ口ジェク卜や、突貫工事のようなプロジェクトではこうした気付きが知らんぷりされがちだが、納品後の検収やトラブル発生時など「いざ」という時に経緯を失念していたり、記憶に頼らなければならなくなるのだ。
制作作業を始める前に「変更管理シート」を用意し、品質管理をデータ化する準備をしておくとこうしたトラブルを未然に防ぐことができる可能性が増すだろう。

Webディレクション=プロジェクトマネジメント?

Webディレクターの仕事像にはいろいろな見方があります。『伝言係』として奔走する人もいれば情報をとりまとめる人、プロジェクトを仕切る人、納期と品質に責任を持つ人など、じつに様々存在します。
「なんでも屋」としてあらゆる指揮と調整を引き受けているのがWebディレクターというイメージがあります。発注者のビジネスの方向づけに関わる責任者という考え方も存在します。
ここで考えてみていただきたいのです。窓口担当者がいるからその人が担当の業務として仕切るのではなく、プロジェク卜が始まる前からWebディレクターはマネジメン卜を執り行なうスキルを持ち、タスクを担うということなのです。
Web制作の仕事を『プロジェクト』と捉えた時に、すべての工程とすべての関係者について、様々なことを計画し管理する仕事をプロジェクトマネジメントと呼びます。名刺の肩書きは、会社がその職種にどのような振る舞い、役割を要求しているのかのあらわれであり呼称はさまざまです。ただし、 Webディレクターにプロジェクトマネジメン卜の素養が求められるのは間違いないと言えるでしょう。

Web制作における窓口と仕切りを脱する

ここでプロジェクトマネジメン卜の必要性を、Web制作の分業の側面から考えてみましょう。Web制作を依頼する人(以下、発注者)・依頼され制作する人(以下、制作者)とがひとりずつでない限り、両者のあいだには『窓口』となり物事を取りまとめる人が存在します。仮に一対ーの関係であっても、報告・連絡・相談の場面で窓口の役目を担うことになります。
制作者の窓口は発注者側の要望や指示を仰ぎ、しかるべき人に情報を提供します。また、そのやりとりで生まれた結果を制作者内部同士そして発注者に送り返します。
ただし、この窓口はただ伝言係をこなせばよいのではなく、仕事の『全体』を捉え、とりまとめる能力を要求されます。発注者の要求を咀嚼せず、そのまま制作メンバーに指示を出す制作会社の Webディレクターが「ガキの使いではあるまいし」と批判されることがしばしば見受けられます。これでは制作メンバーの労力を浪費するだけでなく Webサイトの仕上がりにブレが生じ、最悪の場合、発注者やWebサイトのユーザーの要求に適わないものが出来あがってしまう恐れがあります。一方で、発注者のビジネスの性質や予算を無視して押し切ることによって、制作者の不満をつのらせながら、発注者の期待をも外した Webサイトを制作してしまう Webディレクションもあります。
プロジェク卜の失敗を防ぐため、また、発注者のビジネス目標の達成と制作者のスキルアップや ビジネスの成長のために、 Webディレクション業務にあたる者は、単なる窓口や仕切り役から脱しプロジェクトマネジャーとして業務にあたることが望ましいです。

自分でもできるSEO

いくつかの理由から、小規模な Web サイトほど、業者に任せることなく自分で
SEO を行うととが充分に可能な時代になりつつあります。最大の理由は、検索エンジンが Web ページ、を評価する基準として、そのページの中身(コンテンツ)を重視するようになってきたことがあげられます。 しばらく前までSEO といえば、専門の業者に任せてしまうものというイメ ージがありましたが、これには、施策の内容がWeb ページ、の作成に密接にかかわってきたり、 HTMLといった専門の知識が必要になることなどが理由でした。これらの技術的な施策を実現するためには専門家の力が必要だったわけです。
WordPress などのシステムを使えば SEOの負担は減らせます。
最近では Web サイトを、 WordPress に代表されるCMSと呼ばれるシステムで運 用することが珍しくなくなってきました。また、有料/無料のブログサービスでビジネスの情報発信をする人も増えてきています。これらのシステムでは、ある程度あらかじめ SEO が考慮された設定になっていたり、 SEO の機能を提供するプラグイン(機能を拡張するプログラム)などを組み込むことにより比較的簡単に施策を実施できます。SEO の点で重要なモバイ ルへの完全対応も、テンプレー トの変更などで対応するととが可能であるなど、システムを導入することにより技術的な SE O施策は、 Web サイトの運営者がそれほど気にする必要がなくなっているといえます

動作と表示の確認

パソコン上で作ったHTMLファイルをブラウザで開き、デザインの段階で作ったイメージと見比べて見栄えや動作の確認をします。
ホームページは全部作り終えてから確認するのではなく、作りながら確認していくのが効率的です。
なるべく早い段階で構文やスペルの間違いに気付いたほうが、修正する量が少なくて済むからです。
確認するべきポイントは大きく分けると以下の3つです。

① デザイン通りのレイアウトになっていること
② デザイン通りの装飾になっていること
③ リンクやボタンが正しく動作すること

具体的には、
・文字や画像が、正しい場所に正しい順番で表示されているかどうか?
・文字の字体、大きさ、色がcssの指定通りに表示されているかどうか?
・背景色や境界線など、cssで付けた装飾が正しく表示されているかどうか?
・ブロック同士の隙間や余白がcssの指定通りに表示されているかどうか?
・リンクを押すと正しいページに移動するかどうか?
・メールフォーム等の入力ボックスに文字が入力できるかどうか?
・メールフォーム等のボタンが正しく動作するかどうか?
・どのブラウザでも問題芯く表示されるかどうか?
・スマホやタブレッ卜でも問題なく表示されるかどうか?
などの観点で確認していきます。

特に最後の2つは忘れやすいので注意が必要です。
HTMLやcssは、ホームページにアクセスするブラウザの種類やパージョンによって対応している構文と対応していない構文があるからです。
利用者の多いブラウザについては一通り動作確認をしたほうが良いでしょう。
このような確認を行って、どこかおかしいところがある場合は、HTMLの構造が正しい階層になっていない可能性や、cssの構文が間違っている可能性が高いので、前の工程に戻って再点検します。
最初のうちは書き間違いに自分で気付くことが難しいと思いますので、インターネット上にある構文チェックツールを利用することをおすすめします。
「HTML自動整形ツ ール」とか「HTML構文チェッカー」などといったキーワードでインターネット検索すると見つかります。
自習だけでなく実務にもお役立ていただけると思います。

サーバーとは?

サーバーと聞くと「難しい」と感じられるかも知れませんが、私たちが普段使っているパソコンと同じようなものという理解でよいでしょう。
一番大きな違いは、パソコンはいろんなソフトを入れて仕事や遊びなど多目的に利用するのに対して、サーバーは決まった目的で利用されることが多いということです。

たとえば、ホームページのデータをインターネット上に保管する役割をもったサーバーは「ウェブサーバー」と呼ばれ、メールの送受信を担当するサーバーは「メールサーバー」と呼 ばれます。
SNSのようにログインしないと利用できないサービスの裏側には、ユーザー全員のIDやパスワードなどの情報を保管する「データベースサーバー」と呼ばれるサーバーが存
在しています。
なぜパソコンのように一台にいろんな役割を任せないのかというと、サーバーは多くの人が共同で利用するので、大量の情報を同時に処理できなければならないからです。
また、セキュリテイの観点からも、役割ごとに機械をわけでおいたほうが好ましいという理由もあります。
一台が故障しても、全体がダメになるわけではないからです。
そのため、サーバーは役割に応じた名前で呼ばれ、使いわけがされるのです。

サーバーのうち、みなさんが実際にホームページを作成したり公開したりするときに 重要なのは、「ウェブサーバー」と「DNSサーバー」に関する基本的な知識です。
それぞれの役割を簡単にまとめると以下のようになります。

【ウェブサーバー】
ホームページのデータを保管し、アクセスしてきたブラウザにデータを送り返す。

【DNSサーバー】
ホームページが置いてあるウェブサーバーのインタネット上での住所(アドレス)を管理する。
ブラウザがホームページのデータを要求したとき、該当のウェブサーバーのアドレスを探し出し、ブラウザに伝える。

サイト構造パターン

Webサイトは目的により構造が変わってくる。

例えば観光案内に関するサイトであれば、トップページから目的のページ (ゴール)まで分岐せずに一直線にリンクが張られている。途中で別の ページに進めたり、ショートカッ卜することができないので、サイトとして 機能させるには不都合が多いが、ナビゲーションがわかりやすく表示 されているので、これほど訪問者が迷わない構造もないだろう。 Web サイトというとトップページでさまざまなカテゴリ分けがされていて、途 中には数多くの分岐が存在する、という先入観があるが、目的が単 一で情報の順序が決まっていれば、このパターンを検討してみるの もよい。また、これによく似た構造として、ページを移動するに従って異 なるディレクトリのファイルに接続されて先ヘ進んでいくというタイプ がある。これは、ディレクトリにファイルが階層的に並べられているの で一見すると別のタイプに思えるが、ページ分岐がなく、順番に閲覧するナビゲーションをもっていることから、同じようなタイプに属しているとい えるだろう。

画像と文字の配置を変更する

フロントページエクスプレスでは、画像は文字の1つのように扱われます。画像の横に文字を入れようとすると画像の 横に1行だけ文字が入力され、あとはウインドウで折り返されて画像の下に入力されてしまいます。画像と文字をどの位置で揃えるかは、[画像のプロパティ]で設定できます。[画像のプロパティ]ダイアログボックスを開き、[外観]タブの[レイアウト]-[配置]で設定します。画像の横に、パンフ レットや本、ビジネス文書のように、見栄え良く文章を回 り込ませたいと思うときには、 [配置]で[右]もしくは[左]を選ぶことで、画像の横に文章を回り込ませることができます。[右][左]は、一見したところ逆にな るように思えますが、画像の位置が本来の行 (テキスト、画像含めて)に対してどこに配置されるかという「画像の配置の指定と考えれば容易に理解できると思 います。しかし、 [配置]を[右]や[左] に設定して、画像の横に文章を回り込みさせると、画像と文字との間に空きがほとんどなく、くっついたような感じになってしまいます。 そのようなときには〔横の間隔][縦の間隔]を設定して、画像と文字との間隔を数値で指定して空けることができます。また、途中で回り込みを解除して画像の下に続きの文章を入れたい場合は、[改行のプロパティ]で[余白なし]に設定した改行を入れることで設定できます。