Webディレクターはさまざまなドキュメントを作成する機会があります。

企画したWebサイトやWebサービスを説明する時だけでも、企画書やプレゼンテーション資料、ワイヤーフレームなどのドキュメントが必要です。

ドキュメントの作成に使うソフトも「Word」「Excel」「PowerPoint」などさまざまあり、操作に慣れていなければドキュメント作成だけに1日費やすケースも珍しくありません。

ですが使用するソフトやショートカットキー、ドキュメントごとに適した作成ツールの使い方などの基礎知識を身につけておくと、作成にかかる工数を大幅に削減できるようになります。

そこでこの記事ではドキュメント作成に必要なスキルや知識、無料のワイヤーフレーム作成ツールを紹介します。

工数を削減できればWebディレクターとして評価されること間違いないので、ぜひご覧ください。

出典：Unsplash https://unsplash.com/ja/%E5%86%99%E7%9C%9F/n8Qb1ZAkK88

Webディレクターにドキュメント作成スキルが必要な理由

Webディレクターはさまざまな種類の書類を作成するため、ドキュメント作成スキルが強く求められます。

たとえばプロジェクトの受注までに以下のようなドキュメントを作成します。

• 企画書
• ヒアリングシート
• 提案書
• 要件定義書
• プレゼンテーション資料
• 見積書

受注後であれば以下のようなドキュメントが求められます。

• ワイヤーフレーム
• スケジュール進捗管理表
• サイトマップ
• ディレクトリマップ
• サイトナビゲーション設計書
• 議事録

ドキュメントは自分自身のメモだけではなく、チームメンバーやクライアントと情報の共有に使ったり、引き継ぎの際の資料になったりします。

さまざまな役職や職業のクライアントに提出するドキュメントもありますので、誰が読んでも分かりやすく作成する必要があります。

そのためWebディレクターはドキュメントの作成に必要な知識を身につけておくことが大切です。

出典：Unsplash https://unsplash.com/ja/%E5%86%99%E7%9C%9F/aOC7TSLb1o8

ドキュメント作成で磨くべきスキルや知識

チームメンバーやクライアントなどに伝わりやすい書類を効率的に作成するためには、Officeソフトの基礎知識やショートカットキーなどを身につけておくのがおすすめです。

ここでは業務を円滑に進めるために必要なスキルや知識を紹介しますので、ぜひ参考にしてください。

Officeソフトの基礎知識

大半のドキュメント作成時に使う「Word」「Excel」「PowerPoint」などのソフトに関する知識はしっかり身につけておきましょう！

たとえば「Word」であればフォントの種類やサイズの調整、余白の調整など、文書の見栄えをよくするためのレイアウト調整を行えると読みやすい資料を作れます。

「Excel」では、SUM関数やAVERAGE関数といった簡単な関数を知っていると資料作成がスムーズに行えるようになりますよ。

表やグラフの作成もできると、視覚的に分かりやすい資料になるので覚えておきましょう。

プレゼン資料を作成できる「PowerPoint」では、入力した文字のサイズ変更や画像の加工の方法の知識も必須です。

分かりやすく、効率よくドキュメントを作成するためにOfficeソフトの基礎知識は必ず学んでおきましょう。

ショートカットキーを覚える

ドキュメントの作成をスムーズに行うために、ショートカットキーを覚えるのもおすすめです。

たとえばファイルの保存やデータのコピー、貼り付けなどの作業はショートカットキーを活用すれば一瞬で行えます。

慣れないうちは「マウスのほうが早いのでは？」と思うかもしれませんが、指が自然に動くようになれば作業効率が大幅にアップしていくことが実感できますよ。

まずは以下の5つの基本のショートカットキーをマスターしてみましょう。

左がWindows、右がMacのショートカットキーです。

• 「Ctrl + S」「command + S」：ファイルの上書き保存
• 「Ctrl + C」「command + C」：選択した文字やデータをコピーする
• 「Ctrl + V」「command + V」：コピーしたデータを貼り付ける
• 「Ctrl + X」「command + X」：選択した文字やデータを切り取る
• 「Ctrl + F」「command + F」：文字検索ウィンドウを開く

ショートカットキーは仕事の効率化を狙えるので、どんどん使って覚えていきましょう！

無料のワイヤーフレーム作成ツールを覚える

ワイヤーフレームとはWebページのレイアウトを記した設計図のことです。

クライアント側とのページ設計の交渉の時に用いられたり、チーム内の情報共有としての役割もあります。

基本的には画像やテキストは使用せず、四角形や円形や記号などを使って表現するのでPowerPointやExcel、Illustratorなどのツールでも作成できます。

しかしそれらのツールはワイヤーフレームに最適化されているわけではないので、効率的に作るためには専用のツールを利用しましょう。

最初は慣れないかもしれませんが、慣れると簡単に分かりやすいワイヤーフレームを作成できるようになります。

無料で利用できるワイヤーフレーム作成ツールもあり、後ほど詳しく紹介しますのでぜひ参考にしてみてください。

構成やデザインの基礎を覚える

分かりやすいドキュメントを作成するために、構成やデザインの基礎を覚えるのもおすすめです。

ドキュメントは第三者に見せることが主な目的なので、分かりづらかったり見にくかったりする資料では読んでもらえません。

少しでもわかりやすくしようと装飾や見せ方にこだわり、時間をかけすぎれば効率が悪くなってしまうことも。

そんなときに活躍するのが、構成やデザインの基礎知識です。

たとえばスライドのデザインであれば1スライドに1メッセージが原則であったり、使う色は3色に抑えて十分な余白を取ったりするなど、見やすく、分かりやすく作る原則があります。

すでに人に分かりやすく伝える構成やデザインの見せ方は、先人の技術や知識が広まっています。

一から自分で考えるよりも、効率よく分かりやすいドキュメントを作成できるので、構成やデザインの基礎を身につけておきましょう。

無料のワイヤーフレーム作成ツールおすすめ３選

ワイヤーフレームは専用の作成ツールを利用すると、より分かりやすくチームメンバーやクライアントに情報を伝えられるようになることを紹介しました。

WordやExcelでも作れないこともありませんが、効率化のため無料のワイヤーフレーム作成ツールを利用するのがおすすめです。

ここでは無料で利用できるワイヤーフレーム作成ツールを3つ紹介しますので、ぜひ使ってみてくださいね。

おすすめツール1：Figma

「Figma（フィグマ）」はブラウザ上で簡単にデザインができるツールです。

ブラウザさえ起動できれば、自宅や職場など場所を選ばずに使うことができます。

複数のメンバーで1つのファイルを編集できるので、チーム体制での作業に向いており、複数人の意見を反映しながら効率的に制作できます。

おすすめツール2：Cacoo

「Cacoo（カクー）」はブラウザ上で図の作成・共有ができる作図ツールです。

操作がシンプルなエディタで、初心者でも数分で分かりやすく美しいワイヤーフレームを作成できる特徴を持っています。

作成する図はチームメンバーとリアルタイムに編集や共有もできます。

完成したフレームワークは専用のURLで共有できるので、ツールを利用していないチームメンバーやクライアントへの共有も簡単です。

フリープランも用意されており、有料プランは14日間無料で試せるので、一度試してみるのもおすすめです。

おすすめツール3：Moqups

「Moqups（モックアップス）」は会員登録をしないで気軽に作成できるブラウザベースのWeb制作イメージ共有用ツールです。

インターフェースは英語なのが難点ですが、ドラッグ＆ドロップの簡単な操作で直感的に操作を行えたり、作成したフレームワークをPNGやPDFでの出力も可能です。

無料プランで作成できるプロジェクトは1つまでだったり、配置できるオブジェクト数に制限があったりします。

無料プランを利用してみて、使いやすいと判断したら有料プランの導入を検討してみるのもおすすめです。

まとめ

Webディレクターはドキュメントを作成する機会が多くあります。

ドキュメントの作成に慣れるまでは、大幅に時間がかかってしまうことも珍しくありません。

ドキュメントを作成するOfficeソフトやショートカットキーなどを覚えておくと効率的にドキュメントの作成を行えるので、身につけておきましょう！

ドキュメントの中でも、ワイヤーフレームは無料で作成できるツールがあります。

無料で難しい操作もなく、チームメンバーとの共有も簡単に行えるワイヤーフレーム作成ツールを使ってみましょう！

forrioではWebディレクターを募集しています。

最初はさまざまなドキュメントの作成に苦労しますが、慣れるととても分かりやすく、クライアントさんにも絶賛されるドキュメントを作れるようになりますよ！

一緒にforrioで働きませんか？

まずはお気軽にご連絡ください。