本連載は、Adobe Acrobat DCを使いこなすための使い方やTIPSを紹介する。第87回は、プレゼン用PDFの途中で動画を再生してみる。 プレゼンする際、スライドの中で動画を再生し、理解度を深めてもったり、アイスブレイクに使うことがある。PowerPointで動画を埋め込んだ資料を作成し、PDFに変換すれば、PDFファイル内でも動画を再生できるので手間はかからない。 とはいえ、動画を埋め込めないソフトやサービスを使ってスライドを作った場合は、Acrobat DC側で動画を追加する必要がある。今回は、プレゼン用PDFの途中で動画を再生する方法を紹介しよう。

Webデザイナーを対象に、Google Apps Script（以下、GAS）の基本的な使い方から実践的なWebサービスの開発方法までを解説する本連載。今回は、Googleサイトで作成したWebサイトに、「お知らせ」ページを自動生成する簡易CMSを作ります。 GoogleサイトをGASで活用しよう 「Googleサイト」は、用意されたパーツを組み合わせるだけでWebページを作れるWebサービスです。GoogleサイトはGASに対応しており、GASでスクリプトを組むことで、Webページの作成を自動化できます。Googleサイトで簡単なお知らせページを自動生成するツールを作ってみましょう。 Googleサイトを作成する まずは、Googleサイトで作ったWebサイトに、公開用のWebページを用意します。以下のアドレスにアクセスし、「作成」ボタンをクリックしてください（すでにGoogleサイトを

ワイヤーフレームとは、その名の通り、ワイヤー（線）によるフレーム（骨組み）のこと。Webサイト制作におけるワイヤーフレームとは、各ページを構成するナビゲーションやコンテンツなどの基本的な要素を線画で示した設計図のことです。一般的にはサイトマップやディレクトリマップによるサイト設計が終わった後に作成し、クライアントへ確認したり、デザイナーへ指示を出したりする資料として利用します。 ワイヤーフレームの内容と作成方法 具体的なワイヤーフレームの要素は案件や用途によって異なりますが、グローバルエリア（ヘッダー／フッター）、ローカルエリア、コンテンツエリアの各領域とそれぞれの領域に配置する要素を記述するのが一般的です。ロゴやグローバルナビゲーション、ローカルナビゲーション、メインコンテンツなどの要素をナビゲーション設計や情報設計をもとに整理し、具体的なレイアウトに落とし込んでいきます。 ワイヤーフレ

ディレクトリマップとは、Webサイトを構成するすべてのページを書き出してまとめた一覧表のことです。ページリストと呼ばれることもあります。 ディレクトリマップでは、サイトマップによって決定したサイトの構造を元に、より詳細なページ単位の仕様を定義していきます。ディレクトリマップは、制作チームのメンバーにとって、実制作を進めていく上での拠りどころとなる重要な資料になりますので、慎重に作成しましょう。 ディレクトリマップで定義する内容 ディレクトリマップは、一般的に、ページ名称、ページID、ページの階層、ファイル名などの項目で構成されます。これらの内容は、サイトマップやワイヤーフレームなどの資料と連動して、各資料で示されているページがどのページなのかを簡単に紐づけられるように作成しなければなりません。 ほかにも、サイトの規模やプロジェクトによって、現行ページのURL（リニューアルの場合）、メタタグ

サイトマップとは、サイトの全体像を描く見取り図であり、サイト内での情報の分類を定義するものです。サイトマップによってサイトの骨格を設計し、掲載する情報の組織化・構造化を進めていきます。 サイトマップには単なる設計資料としての役割だけでなく、サイトの企画意図をクライアントや他のプロジェクトメンバーと共有するためのコミュニケーションツールとしての役割もあります。 サイトマップの作成は、具体的なサイト設計の第一段階です。本来はインフォメーション・アーキテクトの業務ですが、インフォメーション・アーキテクトが存在しない場合はWebディレクターが担当します。 サイトマップの種類と作成方法 サイトマップには、大きく分けて「ハイレベルサイトマップ」と「詳細サイトマップ」の2種類があります。 ハイレベルサイトマップとは、サイトの情報構造や概念を図式化し、全体像をプロジェクト関係者で理解・共有するための設計図

ナビゲーションとは、Webサイト内のコンテンツを移動したり、他のWebサイトへ誘導したりするためのボタンやリンクのことです。Webサイトにアクセスしてきたユーザーが、迷うことなく目的のWebページまでたどり着けるように経路を提供します。 分かりやすいナビゲーションは、そのWebサイトで何が得られるのか、何を見られるのかを示します。ナビゲーションにより、Webサイトで提供している多くのコンテンツのありかをすばやく伝えられます。 ナビゲーションの設計が不適切な場合、ユーザーは目的のページにたどり着けず、Webサイト全体の使い勝手を大きく損ねることになります。特にサイトを初めて訪れたユーザーには悪印象を与えてしまうので、ナビゲーション設計はWebサイト全体の設計においてもっとも重要な項目といえます。 基本パターンの組み合わせで検討 ナビゲーション設計では、ページ内のどの領域に、どんな種類のナビゲ

誰もが情報にアクセスできる「アクセシビリティ」の考え方を一歩進めて、よりよい使い勝手を追求する「ユーザビリティ」や「ユーザーエクスペリエンス（UX）」という考え方が広がっています。 ユーザビリティは、一般的に「使いやすさ」や「使い勝手」と表され、ユーザーエクスペリエンスは、ユーザーが製品やサービスを使用したときに得られる体験や満足、心理的な変化を指します。 いずれも、ユーザーの満足度を向上させる取り組みであり、Webサイトの設計にうまく取り入れることで、企業サイトのブランドイメージを向上させたり、ECサイトではコンバージョン率（購買率）を高めたりといった効果が期待できます。 ユーザビリティの定義と具体例 国際標準化機構の規格であるISO 9241-11では、ユーザビリティを、ユーザーが目的達成するときの「有効さ」「効率」「満足度」「利用状況」であると定義。Webユーザビリティの権威であるヤ

Webサイトを訪れるユーザーは、必ずしもWeb制作者と同じような能力や環境を持っているとは限りません。PCの操作に習熟し、日常的にインターネットを利用している人もいれば、基本的な操作に不安を持つ人もいますし、高齢者や視覚障がい者のように視力が弱い人や、肢体不自由者など、マウスよる細かい操作が難しい人もいます。 アクセシビリティとは、年齢や障害の有無、能力、利用環境などに関係なく、すべてのユーザーがWebサイトの情報にアクセスできることを指します。Webサイトの制作にあたっては、アクセシビリティに配慮し、誰もが目的の情報を得られるようにする必要があります。特に社会的役割が大きい官公庁・公共機関や、企業のWebサイトでは、アクセシビリティへの対応が強く求められています。 アクセシビリティ対応の具体例 アクセシビリティ対応の典型的な例としては、問い合わせフォームが挙げられます。たとえば、入力が必

Webページのレイアウトにはさまざまなパターンがありますが、基本的な構成要素はどのサイトでも大きく変わりません。Webサイトを訪れたユーザーが求めている情報にスムーズにたどり着けるように、一般的には「グローバルエリア」「コンテンツエリア」「ローカルエリア」の3つで構成します。 ナビゲーションとして機能する2つの要素 Webページの基本的な構成要素が決まっているように、各要素に配置する内容や働きもほぼ決まっています。 グローバルエリアは、サイト内で共通の要素を配置する領域です。一般的には、ページの最上部／最下部にあるヘッダー／フッターを指します。サイト内のどのページに移動しても共通して変わらないので、トーン＆マナーによってサイトのアイデンティティを表現できる領域でもあります。 グローバルエリアのうち、ヘッダーにはサイトの名称を表すサイトロゴと、サイト内の主要なページへリンクする「グローバルナ

一般的なWeb制作のプロジェクトについて、大まかな流れとポイントを4つのフェーズで説明します。Webディレクターは、各フェーズのポイントを把握し、的確なディレクションをしていく必要があります。 打ち合わせから提案まで Web制作は、クライアントからの問い合わせや、営業が制作案件を取ってくるところから始まります。この時点で見積りの提出が必要な場合もありますが、大抵は最初にヒアリングのために初回打ち合わせ（オリエンテーション）をセッティングします。なお、案件を受ける際には、コンペか否かも必ず確認しましょう。 初回の打ち合わせで、クライアントの要望やサイト制作の目的などを把握したら、次に企画提案書を作成します。要望や案件規模にもよりますが、初期段階の提案ではプロジェクトの全体像やコンセプトに沿った企画案を盛り込みます。クライアントから要望があれば、この段階でデザインのラフ案を制作することもありま

契約書は、見積書に沿ってクライアントから発注された業務内容の詳細をまとめた書類です。具体的には、今後のWebサイト制作にあたっての基本的な約束ごとを取りまとめた「業務委託契約書」、発注単位ごとの金額や条件を定めた「個別契約書」、納品後の毎月のサポート内容をまとめた「保守契約書」など、内容ごとの契約書が存在します。ただし現実的には、業務委託契約書や個別契約書は省略して受注時の注文書が契約書代わりになる場合も少なくありません。 また、契約書を取り交わした後に、SLA（Service Level Agreement：サービス品質合意書）と呼ばれる書類を作成する場合もあります。SLAには、制作のスケジュールやクライアントとの役割分担、指示系統を含むプロジェクト体制などを記載します。 契約書に盛り込む内容と契約のタイミング 契約書は、まず甲乙の形で発注者（支払い責任者）と受注者を明確にしてから、制作

Webサイト制作における受注とは、クライアントに提出した見積書が承認されて、発注が決定した段階を指します。メールや口頭で発注の意思を確認できた時点でWebサイト制作に取りかかる場合と、注文書をファクスで受け取る場合、後で正式な契約書を締結する場合の、主に3つのパターンがあります。 契約締結から支払い完了までの流れ 受注が確定してから支払いまでの正式な流れは、クライアントから作業内容、金額、支払条件、日付が入った注文書を受け取り、契約書を締結するところから始まります。契約締結後にWeb制作を開始し、Webサイトのリリースをもって納品となります。納品時にはクライアントに納品書を提出し、Webサイトの検収後、検収書を受け取ります。検収書の受領後、クライアントに支払い条件を再確認し、請求書を提出します。条件に基づき支払いが完了したことが確認できたら、クライアントに入金の確認が取れたことを連絡して、

コンペとはコンペティション（competition）の略で、クライアントが複数の会社に企画提案の発表を要請して、比較検討するために実施するものです。コンペを実施することにより、クライアントは希望に沿ったサイトを制作するのに最適な発注先を決定できます。 コンペに参加する場合は、クライアントが作成するRFP（Request For Proposal：提案依頼書）と呼ばれる書類に基づいて、企画提案書や見積書を作成します。特にRFPがない場合は、クライアントから提案に必要な要件をヒアリングをします。 大規模なコンペでは合同説明会を開いてRFPの内容を説明し、質疑応答を受け付ける場合もあります。 コンペのタイプと参加方法 コンペは、クライアント側から広く参加を呼び掛けてオープンに実施される場合と、コンペであることが制作会社側には告げられない場合があります。 オープンタイプのコンペでは、クライアントの

Webサイト制作におけるプレゼンテーションの目的は、企画提案の内容が希望するWebサイトの実現に妥当なものであり、かつ適切な発注先であることをクライアントに理解してもらうことです。ひと通りヒアリングが終了した段階で、プレゼンの時間を設けてもらいましょう。 プレゼン当日までに、参加人数分の企画提案書、必要に応じて見積書、ノートPC、モバイルインターネット通信環境、想定される質問集と回答案などを用意しておきます。プロジェクター、PC、ネット回線などは事前にクライアントに借りられるかどうか確認しておきましょう。 プレゼンテーション当日の流れ プレゼン当日は、簡単なあいさつ、企画提案書の配布、プロジェクターとPCの準備、ネット環境の接続確認、企画提案書内容の説明、質疑応答と進めていきます。状況によっては見積もり内容まで説明します。プレゼンの時点で見積もりまで説明するかどうかは、クライアントの反応次

Webサイト制作における見積書とは、Webサイトを制作・公開するために必要な、企画ディレクション費用、デザイン費用、システム関連費用、ランニング費用などをまとめて記載した書類です。ただし、クライアントが概算金額の提示を要求した場合は、企画提案書の中に概算金額を盛り込むこともあります。 正確な見積書を作成するには、ヒアリング後の企画提案書で方向性をしっかり固め、要件定義書でクライアントの意向とズレが生じていないか確認します。それでも、制作が進む中で、当初はなかった要望が発生することはよくあります。追加費用を相談するためにも、見積書に追加費用に関して記載しておくとともに、事前に十分説明しておくことが大切です。 見積書の具体的な作成方法 見積書に記載する見積金額は、一般的にページ単価×ページ数から計算できます。全体のページ数は、企画提案時にサイトマップを作成することで確認が可能です。 会社案内、

Webサイト制作における要件定義書は、クライアントの要望をもとに制作するWebサイトの仕様をまとめたものです。具体的には、各画面遷移や管理画面イメージ、サーバー情報、プログラム開発内容、データベース、セキュリティなどのシステムに関する内容が含まれています。通常、企画提案書で方向性が固まった段階で、要件定義書の作成に取り掛かります。より正確な見積書を作成するためにも必要なものです。 ただし、プログラムやデータベースなどのシステム要素が複雑でない簡単なWebサイトの場合は、企画提案書をブラッシュアップさせて要件定義書の代わりにすることも多いのが実情です。 要件定義書の具体的な作成方法 ヒアリングした内容と企画提案書に盛り込んだ内容をさらに具体的なものにするために整理していきます。企画提案書の段階では制作者側の案も含まれているので、要件定義書にはクライアントが実施したいという確認が取れた部分だけ

ヒアリングシートとは、クライアント企業の希望に沿ったWebサイトを制作するために、要望を正確に聞き出す目的で作成する質問リストのことです。ヒアリング時の質問内容を事前に用意しておくことで聞き洩らしを防ぐとともに、プロジェクトに対する意気込みをクライアントに伝えられます。 ヒアリングシートは、ミーティング時に全員に配布するアジェンダとは異なり、基本的には制作サイドでクライアントに確認しながらその場で記入します。作成後は、聞き出した要望を制作スタッフと共有するための内部資料として使用します。 ヒアリングシートの具体的な使い方 ヒアリング当日は、クライアントが理解しやすい言葉を使って、事前に用意しておいた質問を1つずつ聞いていきます。制作会社では当たり前に使っている用語が、クライアントの担当者にとっては難しい言葉であることはよくあります。また、会話の中で互いに使っている用語が違う意味を指している

Webサイト制作におけるオリエンテーションとは、クライアントもしくはクライアントから依頼を受けた発注者と、Webサイト制作を円滑に進めるために実際に会って打ち合わせをすることです。ヒアリングでは、オリエンテーションの参加者から、どのようなWebサイトにしたいかというニーズを的確にくみ取ります。 オリエンテーションとヒアリングの両方で重要になるのがアジェンダです。アジェンダは「予定表」や「行動計画」という意味ですが、ここではオリエンテーションやヒアリングでの打ち合わせ用の議題を指します。 オリエンテーション／ヒアリングを実施するには オリエンテーションやヒアリングの前には、クライアントや発注担当者にメールなどでアジェンダを連絡しておきましょう。アジェンダには、開催日時、場所、確認したい内容を箇条書きで記載します。 事前にアジェンダを渡しておけば、参加者は打ち合わせの準備ができます。また、打ち

Webサイト制作を受注するときに必要になるのが、企画提案書です。企画提案書はクライアントの要望を正確に引き出すことを目的に、ヒアリングした内容をもとにプロジェクトの概要をまとめます。具体的には、Webサイトの目的、コンテンツ内容、サイトマップ、画面レイアウト（ワイヤーフレーム、デザインカンプともいいます）、スケジュール、サーバー環境、見積金額などを記載します。クライアントから発注を受ける前に、Webサイトの完成イメージをクライアントに理解してもらうためにも重要なものです。 企画提案書でクライアントの要望が確定したら、次の要件定義書の作成に入っていきます。 企画提案書の作成方法 企画提案書の作成には、マイクロソフトのPowerPointを使用することが多いようです。実際に自分がクライアントの前でプレゼンする状況をイメージしながら、話をする順番に沿ってページを作成していきます。 企画提案書の前

6月23日、ファーストサーバは6月20日に発生した大規模障害に関して、共用サーバーおよびVPSサービスにおいて「データ復旧は不可能と判断した」と発表した。専用サーバーサービスにおいても要望があれば行なうが、復旧の可能性は低いという見通しを明らかにしている。 同社では障害発生後、サーバーを初期化することで、サービス自体の再開を進めてきた。しかし、Webやメールなど損失したデータに関しては、当初から復旧は保証できる状態になく、ユーザー自身で取得したバックアップを初期化したサーバーにリカバリすることを推奨してきた。そして、今回の発表で顧客データの復旧は事実上、断念したことになる。 障害対象となるサービスは、共用サーバーのビズ／ビズ２、専用サーバーサービスのエントリービズ／エンタープライズ3、VPSサービスのEC-CUBEクラウドサーバ マネージドクラウドで、契約顧客数は5698件と発表された。な