提案依頼書

提案依頼書というのは、WEB制作を外注するといった場合、相手に求めたい作業範囲を明確にするために作成する書類と言えるでしょう。これは、RFP(=Request For Proposal)とも呼ばれ、内容を深く理解してもらうためのオリエンテーションを行うといった場合もあるようです。ビジネス面だけではないですが「インプット」と「アウトプット」という言葉があるでしょう。これはそれぞれ「入力」と「出力」と言う意味ですが、ビジネス面でこの言葉を使用する場合、経験や知識を重ね、技術的に能力を高めていくことを「インプット」と呼び、それを活かしていくことを「アウトプット」と定義されているのではないでしょうか。インプットした経験をアウトプットしなければただの自己満足ですし、アウトプットするためには、普段から経験を積むために行動しなければならないでしょう。このことからもわかるように、この二つのワードは、切っても切れない関係と言えるでしょう。ことWEB制作の依頼書の作成においても同じことが言えるようです。発注者は思いつきで作成するのではなく、相手に「目的」が伝わるように作成する必要があるでしょう。そのためにまず「インプット」として、その部分を明確にする行動が必要と言えるでしょう。事業計画、戦略、ブランドイメージやデザイン性から、時には季節的なリニューアルなど、制作要因は様々な種類があるでしょう。そうした中から、明確な目的を掘り下げることが大切でしょう。次に、明確にした目的をアウトプットする作業が必要でしょう。提案依頼書を「目的」に合わせ、予算、制作期間とスケジュール、必要な人員やスキルと言ったものを細かく設定して明記することが「アウトプット」と言えるでしょう。提案依頼書の目的は、それを見せることにより、相手の提案を提出してもらうというところにあると言えるでしょう。この一連の流れが、WEB制作の提案依頼におけるインプットとアウトプットなのではないでしょうか。

WEB制作におけるコストと管理

WEB制作の小さなプロジェクトでは、コストの見積もりと予算化を同じ人が行うことが多いようですが、内容は大きく違うものなので、分けて考えたほうがいいと思います。まずコストの見積もりとは個々人のアクティビティを完了するために実際に掛かるコストを算出するものです。プロジェクト上でかかるすべての資源に対するコストを見積もることを指します。主に人的コスト、機材やサービス、施設に加えて、各アクティビティを完成させるために動員するすべてのコストを含めて考える必要があると思います。それに対して予算化というのは、見積もった個々人のアクティビティに更に時間軸や一人あたりの作業量を乗算して、予算をつくることです。設定した予算は、プロジェクトを実行するためだけに認められた資金を元に、コストパフォーマンスを算出して、資金限度額に基づいて実際の支出の調整をしないと赤字になる可能性があります。

見積もりを作るために用意したい要素として、提案依頼書に書かれた前提条件(主に納品日や公開日など)と、過去のプロジェクトの実績(サイトの構成にかかった期間や、類似したページを作成したことがあるかどうかの経歴)、実際にWEB制作者や外部のパートナーにヒアリングして直接このページならいくら掛かるか、何日かかるか聞いてしまうのもありだと思います。こういった見積書を作成するにあたって、期日や予算、機材のコストなどの要件を数字にして見える化することが大事だと思います。また、WEB制作のプロジェクトは受注確定までの期間が短いことが多く契約締結までのプロセス自体をはっきりと規定することが難しいので、見積書の金額や前提条件といったものがそのままWEB制作受注側の、外注に使う個別契約書の条件になる場合も多いみたいです。そのため、項目欄に書ききれない要素や数字以外のことは備考欄などを用いて分けておいたほうがいいかもしれません。

トップレベルドメイン

トップレベルドメインの中でも、商業用のドットコム、ネットワーク用のドットネット、非営利組織用のドットオーグは、サイトの性質に従って割り当てられるものです。因みにこれらのドメインはICANNと呼ばれる組織が管理しています。他にも沢山のドメインを当該組織は扱っています。トップドメインには、国や地域ごとに異なるものもあります。いわゆる国コードをそのままドメインとして利用したもので、日本であればドットジェイピーが割り当てられています。因みに国コードはISOで規定されています。この国コードに基づいたトップレベルドメインには、サブのドメインが存在します。つまりセカンドレベルドメインが存在するのです。具体的には、「co」「or」「ac」「go」等がそれに当たります。これらはそれぞれ企業、法人、教育機関、政府機関を意味しており、アドレスを見ただけでそのサイトの運営者を漠とイメージすることが出来るようになっています。
ドメインは時代が下るにつれて多様化しており、最初はほとんどがドットコムでしたが、今ではドットトーキョー、ドットショップ等が出回っています。これらのドメインを見れば、どのような製品、サービスを提供している会社であるかがすぐに分かるようになっています。ただ大企業のサイトは未だに旧来のドメインを利用していることが多く、今後の展開が注目されるところです。
ドメインとSEOとの関係についても、WEB制作者なら気になるところでしょう。しかし結論から言えば、それほど関係はありません。特にトップレベルドメインが異なるからといって、SEOの効果に差が生まれることはないのです。ドメインは専らそのアドレスを見たユーザーの心象に影響を与えるのみです。

品質マネジメン卜

品質マネジメントは、プロジェクト実施時の要と言えるだろう。

Webサイト制作は車やビルなどある程度やり方の決まったものを作るのとは異なり、規模やトーン&マナーがあまりにケースバイケースのため、「品質」についてはあまりピンとこない人も中にはいるのではないだろうか。

では、果たしてデザインが「ダサくない」ようにデザイナーをコントロールしたり、マークアップでW3Cの仕様書に従うとか、アクセシビリティについてJIS規格に準拠させることが、品質のマネジメントと言えるのだろうか。
PMBOKにおける品質とは、「プ口ジェクトのステークホルダーが、プロジェク卜に何を期待するか?」を満たすことであると考えられるだろう。また、品質マネジメン卜は、プロジェクトの開始から終了までの間、プロジェク卜の計画と成果物の両方に対し行なうことになっていると言われている。
Web制作に置き換えると、発注者が提案依頼書で表わした要求からはじまり、その後Webサイトが完成するまでに具体化してきた要望、さらにはステークホルダやWebサイトのユーザーの期待に応えられているかということも大切であろう。それを叶えるためのツールとしてガイドラインやルールが存在するのであって逆はないはず。品質マネジメン卜は制作フェースで重点的に実践される必要があると考えている。

パーミッションについて

サーバー上に配置するCGIやPHPなどのプログラムファイルは、HTMLとは違ってただ単にブラウザからURLを指定してアクセスしたのでは動きません。
理由は、これらのプログラムはサーバー側で動作するものなので、ブラウザには動かすことができないからです。
そのため、ウェブサーバーを介して動かします。
しかし、 HTMLのように不特定多数のユーザーがプログラムを実行できてしまってはセキュリティ上好ましくないので、サーバー上のファイルには1つ1つアクセス権を設定できるようになっています。
アクセス権は、誰にどんな操作を許可するかを定義するもので、パーミッション(permission)と呼びます。
permit(許可する)の名詞形がpermlsslonなので、そう呼んだと理解しておけばよいでしょう。

パーミッションの設定はサーバーの管理画面やFTPクライアントなどのソフトを使って設定します。
「誰」に相当するのが「オーナー、グループ、その他」で、「どんな操作」に相 当するのが「読み込み、書き込み、実行」です。
各操作の権限は数字で表され、実行が1、書き込みが2、読み込みが4と決まっています。
そして、許可する操作に対応する数字の合計を、オーナー、グループ、その他の順に並べた3桁で1つのファイルのパーミッションを表します。
たとえば、プログラムに付属するスタイルシート(.CSS)やJavaScript(.js)の場合、設置者自身はファイルを更新できるために書き込みの権限が必要ですが、その他のユーザーはブラウザを介したファイルの読み込みだけができれば用が足りるので、オーナーは「読み込み+書き込み=4+2=6」、グループとその他はそれぞれ「読み込み=4」となり、パーミッシヨンは644となります。

また、FTPクライアン卜などの画面では数字ではなくrwxなどのアルファベットで表示 される場合がありますが、これは3桁の数字でパーミッションを表すのと全く同じことです。
RはRead(読み込み)、wはWrite(書き込み)、XはExecute(実行)の意味だからです。
また、CGIはPerlと呼ばれるプログラム言語を使って記述されますが、HTMLやCSSで記述されたホームページを表示するためにブラウザが必要なのと同様に、Perlを動かすためにはサーバーに備わっている「Perlを動かすためのソフトウェア」が置いてある場所を示すパスをCGIファイルに記述して関連付けてあげる必要があります。
同様に、メール送信機能はサーバーに備わっている「Sendmail」というソフトウェアの場所を示すパスを記述する必要があります。

ホームページ作成の実務で気を付けるポイント

社外の制作業者やウェブデザイナーと一緒にホームページを作成していく場合は、ページの横幅や、画像や余白の大きさなど細かな部分のサイズまできっちりとワイヤーフレームに記載することがあります。
ワイヤーフレームは次の作業工程の「デザイン」をするための設計図になるからです。
ですから、ワイヤーフレームを作るのか作らないのか、作るのならどちらが作るのかという責任分担や、どこまで細かく作るのかを制作に関わる人たちの間でしっかり認識を合わせしておくようにしましょう。

一般に、ホームページのデザインを作るデザイナーや、 コーダー(HTMLやcssのコー ドを書く人)など、ホームページの作成に関わる人たちを取りまとめる役割をディレクションと呼び、ディレクションを担当する人をディレクターと呼びます。
ディレクターは楽団に たとえると指揮者です。
ワイヤーフレームはディレクターが作って、デザイナーに渡されることが多いです。
しかし、ホームページ作成の実務では、ディレクターが誰なのかが陵昧なまま制作を進めたために、制作工程の役割分担に認識の食い違いが生じてトラブルになる(責任転嫁やコスト超過)ことが珍しくありません。
ワイヤーフレーム(設計図)に記載すべきことが記載されていなかったために、次の工程を担当するデザイナーが独断で決めてしまい、その次の工 程を担当するコーダーがデザイン通りにHTMしを作り、最終的にできあがったホームペー ジを見たお客様が「思っていたものと違う」と言い、 ディレクターがデザイナーにやり直し(ダメ出し)を指示するという理不尽なことが起こります。
ホームページの制作を依頼した お客様には何の関係も芯いところで勝手にトラブルになってしまうのです。
筆者の経験上、複数人での分業に慣れていない人がディレクターを務める場合によく起こるようです。
ホームページ制作はもちろん、これからウェブ関係の仕事を目指しておられる方は、どこまでが自分の責任範囲なのか、関係者の間で認識合わせをすることを意識していきましょう。

サイト設計に使えるツール

Webサイトの構造設計を行う上で、特に気を配って進めたいのが想定ユーザーの設定だ。想定するユーザーによって、カテゴリの分類は変わってくるだろうし、それぞれの階層構成も変化する。適切なカテゴリ名も決めなくてはならないだろう。Webサイトで提供される情報を見に来るのはどんな人なのだろうか。そこを見極めたうえで、Webサイトの構造を設計したい。構造設計は打ち合わせを重ねながらすり合わせを行い、決定に至るまで様々な変更を受けつつ進められていく。。このため、構造設計の初期段階では柔軟に変更が可能な手法で設計図をつくるのが望ましい。具体的には設計初期段階では、紙で下書きをしながら 大まかな構成を検討していくやり方や、各カテゴリや情報のまとまりを カード形式で記入して、これを並べ替えながら構造を検討していくや り方がある。 また、 PCを作業ツールとして使う場合は、 「Microsoft Excel」や「Microsoft Visio」といったビジネスツールを使って図式化し、これをプリンタで出力しながら検討を進めていく手法もよく使われている。ビジネスソフトをツールに使うメリッ卜は、 Excel とVisio が備えているコネクタツールを使うことで、位置の変更や階層の変更が容易に行えるという点にある。また、汎用性が高いソフトでもあるので、連携がスムーズで修正もしやすい。 PCでサイト構造の設計図をつくること は、書類をつくるという目的もある。「Adobe Illustrator」等のドロー ソフトを使って、ビジュアル的にも美しいサイトマップを制作している 制作会社も多い。ドキュメントの制作は、一見 Webサイトの構造設 計と具体的に離れているようには見えても、実際制作チーム内ある いは Web担当者との情報共有、詳細部分を検討する“詰め”段階で は重要な役割をもっているのだ。また、最近ではサイト構造の作成に アウトラインプロセッサを使うケースもある。大規模な変更が容易で あるというメリッ卜がアウトラインプロセッサにはあるのだ。 ここで紹介した手法のどれがベストということはない。サイト全体 の設計を正しく行えて、情報を適切に整理していくことが可能で、自 分を含めた周囲の制作環境にマッチしたツールを使って作業を行う ことが大切だ。

画像デザインについて

形がもつシルエットの特徴は、見る人の心理に大きく影響しています。モチーフは閉じでも、それがどのように 画面の中で存在しているかで見え方は違ってくるのです。Web全体に使用するビジュアル選びやモチーフの配置を意識的に行えば、デザインの方向性もはっきりします。
形の特徴が人に与える印象にはさまざまなものがあります。また、よい印象の裏側には必ずデメリッ トがあるものです。

画像には 画面の奥ヘ溶け込んで見えやすいものと、手前に出てくるように目立って視線を集めやすいものがあります。人は画面の中の違いを自然に探し、形を区別して浮き上がらせて見ているのですこのときに目 に浮き上がって見える 「図」と、奥ヘ後退して見える「地」の関係は、デサインを勉強するうえでとても大切です。

複数のスタイルを設定するには?

「プロパティ:値」を「;」で区切る
セレクタを使ってスタイルを設定する場合、背景色と文字色、文字の大きさと色など複数のスタイルを表現したい場合、「プロパティ:値」をセミコロ ン「;」で区切って並べ挙げます。「;」の後で改行しても効果は一緒なので、見易さを考えて改行して記すよいのではないでしょうか。3 つ以上並べ挙げる場合も同じです。
②背景と文字色を指定する
下のソースでは背景色を指定するbackground-color プ口パティを 「blue」、文字色を指定するcolor プ口パティを 「white」に設定しています。 なお、並べ挙げた末尾の「プロパティ:値」のあとの「;」は不要ですが、あとでスタイルを追加するときに付け忘れないように付けておいてもよ いでしょう。

<html>

<head>

<title>複数スタイルの設定</title>

<style type=”text/title>

<!–

h1{background-color:blue;

color:white;

}

–>

</style>

</head>

<body>

<h1>Cascading Style Sheets</h1>

</body>

</html>

スタイルを記述する場所は?

① style属性の値として記述する
「プロパティ値」の設定をs記す方法は3通り存在します。

スタイルを設定したい要素に、 style属性を設定する方法で、「style=” プロパティ:値”」 のように 「”(ダブルクオーテーション)」または 「'(シングルクオーテーション)」 を付けます。
②headタグ内に記述する
1つの HTML 文書内に共通するスタイルは、 head部分に styleタグを使って指定をするものです。

まず、 styleタグのtype属性に「”text/css”」を指定します。これはcssがスタイルシ ー トの種類であることを示しています。スタイル設定の対象を指定するものを「セレクタ」と呼びますが、 同ーのタグすべてにスタイルを設定したい場合は、タグ名をそのままセレクタとして使います。 たとえば、h1 タグにスタイルを設定したいのであれば、「h1」を記述し、「{}」で囲んで「プロパティ:値」を記します。なお、この記述方法を採用すると、 css に対応できていないブラウザの場合は、スタイル 指定の文字列がそのままブラウザに出現してしまうので、それを防ぐためにスタイルの指定の部分を「<!-」 「ー>」でコメン卜化しておくのが 一般的です。
③拡張子「.css」のファイルを作成する
外部スタイルシート(スタイルを設定するファイル)を別途作り、その設定情報を HTML 文書から出すことも可能です。 この方法を採用するならば、複数の HTML 文書に共通するスタイルを設定することが簡単にできるようになるはずです。 外部スタイルシートファイルは、スタイル設定情報を入力し、拡張子を「.css」で保存するのです。