Webサイト制作のワークフロー

Webサイト制作をどれくらいの粒度で分解してタスク化するか

要件定義

ここではリニューアル方針を決定するためにクライアントへのインタビューとワークショップを行うと仮定している。ターゲットユーザー像はRFPに詳細がまとめられているため追加調査はナシとする。

1-1. 提案依頼書（RFP）

・RFPの共有・確認

・会社案内や経営計画資料の共有

・質問・確認事項シートの作成・確認

1-2. アクセス解析

・閲覧権限の設定

・アクセス解析実施

・レポート作成

1-3. インタビュー

・インタビュー日程調整

・インタビュー項目作成

・インタビュー項目事前共有

・インタビュー実施

・インタビュー議事録作成

1-4. ワークショップ

・ワークショップ目的とゴールの設定

・ワークショップ参加メンバー日程調整

・ワークショップ当日進行資料作成

・ワークショップ利用ツールの事前ログイン確認

・ワークショップ実施

・ワークショップレポート作成

1-5. 要件定義書

・これまでのインプット情報の整理と統合

・リニューアル方針のキーワード・コンセプト作成

・ベストプラクティスとしての参考サイト検索

・要件定義資料作成

構造設計

構造設計は大規模サイトになるほど重要になります。たとえば「大学サイト」の制作で「受験生サイト」との仕分けが必要な場合や「ホールディングスのサイト」で「コーポレートサイト」との整理が必要な場合など、構造設計をしっかりと行うことで次の情報設計における迷いが少なくなります。またWebサイト全体にCMSを導入する場合には特にテンプレート設計は大切なポイントとなります。

2-1. サイトマップ

・現状サイトマップ作成

・リニューアルサイトマップ案作成

・テンプレートマップ案作成

・ユーザーナビゲーションフロー作成

・新規コンテンツ作成箇所の確認

2-2. ページリスト

・全ページ階層リスト作成

・リニューアル後URLの決定

・metaタグ内テキストの整理

・GA・GTMなどの導入タグの確認

2-3. 機能要件リスト

・ログイン機能・マイページの有無の確認

・サイト内検索・問い合わせフォームの有無の確認

・位置情報の利用有無の確認

・SNSシェアボタンの利用有無の確認

・PUSH通知の利用有無の確認

2-4. コンテンツリスト

・リニューアルコンテンツの新規作成／移行登録／削除の方針確認

・新規作成コンテンツの制作時期・点数を確認

・移行登録コンテンツの画像・図版の制作箇所を確認

情報設計

ワイヤーフレームはレイアウトや装飾要素を作り込むと次のデザインがやりにくくなるため、あくまで情報の優先度や量を確認するための資料としてシンプルに仕上げることが重要です。ワイヤーフレームの作り方については以前noteに書いた記事 Webサイトのワイヤーフレームの作り方 – XDを開く前の3ステップ も参考にしてみてください。

3-1. フォーマットワイヤーフレーム

・情報量確認

・情報優先度設計

・ページ回遊設計

・仮レイアウト設計

・フォーマットワイヤーフレーム作成

3-2. テンプレート・汎用ワイヤーフレーム

・主要ページワイヤーフレーム複数案作成

・共通要素・個別要素の確認

・共通要素のテンプレートパーツ化

・個別要素の抜け漏れ確認

・テンプレート・汎用ワイヤーフレーム作成

3-3. 素材整理

・素材管理票作成

・素材不足、またクオリティ不足箇所の確認

・新規作成・ブラッシュアップが必要な原稿・文言の作成

・新規作成・ブラッシュアップが必要なイラスト・写真などの制作準備

・デザインに利用する画像・動画等の整理

デザイン

要件定義で言語化したキーワード・コンセプトと、情報設計で作成したワイヤーフレームを統合してデザインを作成していきます。基本的には色、文字、形、動き、配置などデザインの要素がリニューアルの目的に則した選択となっていることを説明できるように作成します。

4-1. デザインコンセプト

・1-5. 要件定義書のキーワード・コンセプトを受けたトーン＆マナーの確認

・トンマナ確認用としてのムードボード作成・参考サイト検索

・デザインコンセプト資料作成

4-2. フォーマットデザイン

・色彩設計

・タイポグラフィ、Webフォント検討

・画像、イラストレーション検討

・レイアウト設計

・フォーマットデザイン作成

4-3. テンプレート・汎用デザイン

・共通テンプレートパーツデザイン確認

・個別要素デザイン確認

・テンプレート・汎用デザイン作成

4-4. インタラクションデザイン

・インタラクション指示書作成

・エラー表示などのバリエーション要素デザイン作成

・OGP、favicon、汎用サムネイルなどのパーツ要素デザイン作成

コーディング

依頼されたスコープが「デザインまで」の場合でも、コーディングチェックはデザイナーも一緒に担当できないか必ず打診をしたほうが良いです。 文字やマージンの指定を全て抜け漏れなくコーディングに反映させるのはほぼ不可能な上、コーディングを見たうえで視認性を上げるなど細かな調整を行うことも多々あります。

5-1. 実装方法確認

・コーディングガイドラインの有無の確認

・URL・meta・Alt表記ルールの確認

・SNS利用の確認

・開発環境の確認及び構築

5-2.フォーマットコーディング

・HTML/CSSコーディング作成

・Webフォント適用

・インタラクション実装

・デザイン整合性確認・調整

・インタラクションの気持ち良さの確認・調整

・表示速度確認・調整

・動作検証・調整

5-3. テンプレート・汎用コーディング

・記事セット作成

・文字数可変箇所の調整

・埋め込み・RSS読み込みパーツの確認

・テンプレート・汎用コーディング作成

CMS開発

ここではWebサイト全体にWordPressを導入すると仮定します。WordPressは特にセキュリティに気をつけなければならないため、ログインURLの変更、ユーザーパスワードの複雑化、プラグインの設定などを仕様書に細かく記載するようにします。

6-1. CMS仕様書

・使用想定プラグインの整理

・テンプレートページの投稿／固定／アーカイブページの方針確認

・WYSIWYGツールバーの設定

・カスタムフィールドの定義

・meta・RSS・ヘッダー・フッターなど共通モジュールの定義

・commonテンプレート・各ページテンプレートの定義

6-2. WordPress開発

・テーマの作成

・カスタムフィールド・記事セットの作成

・common・テンプレートの作成

・個別ページの作成

・運用を想定した登録・調整

・イレギュラー登録・調整

・モンキーテスト登録・調整

移行

移行登録を進めると、記事セットが連続した場合のマージンの間隔に違和感がある、レイアウトが単調になってしまうなど、デザイン時に検証しきれなかった箇所が浮かび上がってくることがあります。数百ページを超える大規模サイトになるとデザイン時に全てのページを検証するのは難しいため、移行時に多少の調整を行うことを予めチームメンバーやクライアントにも了承してもらうことで下層ページの細部まで仕上げることができます。

7-1. 移行計画書

・移行対象ページの整理

・移行URL、metaの整理

・リダイレクト方針の確認

・使用記事セットの方針確認

7-2. 移行登録

・本文登録、画像登録

・PDFなどのファイル登録

・必要に応じてデザイン・コーディング微調整

・表示確認

公開

ここでは公開はDNS切り替えを持って公開すると仮定します。新サーバーへのDNS切り替えのためリニューアル前の状態のWebサイトにメンテナンス画面などを表示する必要がない想定です。

8-1. 公開手順書

・公開タイムテーブル作成

・担当者緊急連絡先の明記

・プレスリリース・SNSシェアの有無の確認

8-2. 公開作業

・公開前データのバックアップ取得

・リダイレクト設定

・basic認証の解除

・DNS切り替え

8-3. 公開直後作業

・公開後問い合わせメールアドレスの送受信テスト

・公開後全ページの表示・URL確認

・公開後SNSシェアの確認

・公開後RSSリーダーの確認

・公開後GA・GTMの計測確認

WBSを作成する際のポイント

スコープを分解する際に「作るプロセス」に含まれる「考えるプロセス」も制作工程として見える化させることがポイントです。そうすることでスコープに対して必要な知識や作業工数を共有することができます。

もしスコープを分解せず実作業内容がブラックボックス化してしまうと作業工数を低く見積もられ、スケジュールの短期化や予算の低下につながる可能性も生まれてしまいます。

またスコープを適切に分解することでプロジェクトが進んでいった際に何か上手くいかないことが起きたとき、どこに問題があるか特定することも容易になります。たとえばコーディング後にクライアントから「基本的に良いんだけどなんかグッとこない」と言われたとき、それを「デザインの問題」とせずに、問題点は「キャッチコピーのメッセージ」なのか「配色のバランス」なのか「インタラクションの気持ちよさ」なのか、と分けて検証することで的確に問題点を探り当てることができます。

WBSをしっかりとつくるメリットをまとめると下記のようになるでしょうか。

・作業工程が見える化するため、スケジュールの精度が上がる
・作業工数が見える化するため、見積もりの精度が上がる
・必要な知識が見える化するため、アサインの精度が上がる
・上記が見えることにより、プロジェクトへの理解度が上がる

スケジュールだけでなく、見積もりやアサインといったプロジェクト全体計画の重要項目を精度高く行うためにも、WBSはプロジェクトに関わるメンバー複数人、場合によってはクライアントも一緒に作成できるとベストです。

またWBSはプロジェクトマネージャーやディレクターが作成することが多いためデザインやコーディングのスコープを上手く分解出来ないというケースもあるかと思います。そういう場合にも担当するデザイナーやエンジニアに一緒に作成してもらうのが一番ですね。初期段階からメンバーを上手く巻き込んでいくのもプロジェクトを上手く進める重要なポイントの１つだと思います。

Webサイトのワイヤーフレームの作り方 ― XDを開く前の３ステップ

Webサイトのワイヤーフレームの作り方 ― XDを開く前の３ステップ｜重松佑 / Shhh inc.｜note

情報設計とトンマナ設計を分けて考える

Webサイト制作ではデザイン着手前の工程でワイヤーフレームと呼ばれるWebサイトの設計図のようなものを多くの場合で作ります。デザインとの違いは何かというと、上図のようにワイヤーフレームでは「情報設計」を主として扱います。そのためトンマナ（トーン&マナー）と呼ばれるWebサイトの印象や雰囲気を形作る要素については考えず、Webサイトに掲載する情報について決定することが目的となります。

ワイヤーフレームを作るための代表的なツールとしてAdobe XDやSketchやfigmaなどが挙げられますが、こうしたツールは「形にすること」を助けてくれますが「考えること」を助けることはむしろ不得手です。ワイヤーフレームには色々な要素を盛り込むことが出来るため、ツールを立ち上げてアレコレと考えながら手を動かすとフォントやレイアウトにこだわりだしたりしてしまい、あっという間に時間がなくなってしまいます。考えてから形に落とすことを徹底するために、まずはIA（情報設計）を考え抜くことが大切です。

Webサイトの情報設計について考えるべきことは大体下記となります。

・情報の優先度

・情報の量

・情報の回遊性

一方でトンマナ設計の際に考えるべきことは概ね下記のようになりますが、こちらはデザイン作成時に考えればよいので、ワイヤーフレームに要素として反映させる必要はほとんどありません。（レイアウトやインターフェースは多少ありますが）

・色彩

・タイポグラフィー

・画像やイラスト

・レイアウト

・インターフェース

ワイヤーフレームで考えるべきことは、とにかく「情報設計」でありトンマナではありません。そのためXDなどのツールを立ち上げる前に、情報設計をどのように考えていくと良いか。その手順と方法はこちらです。

情報の優先度を考える

情報の優先度はスプレッドシートなどを使い整理していきます。ワイヤーフレーム着手前に作成しているはずの「ページリスト」または「サイトマップ」や「テンプレートマップ」を基にしながら、各ページにどのような情報が、どのような順番で載ると良いかを考えていきます。1500ページのコーポレートサイトの場合には主要なページとテンプレートページをあわせて30ページくらいのリストを作成しました。

ここで決めた優先度はWebサイトの情報の並び順となっていきます。人間の視線はモニター上をZ型またはF型に移動するため、基本的には情報の優先度に「上下があるものは縦並び」に、情報の優先度が「並列なものは横並び」にしていくことが多いです。例をあげると「色違いの製品を３色」並べるときは情報の粒度としては並列なので、３つの製品のサムネイル画像を横並びにすることが多いです（そのうちの１色がフラッグシップモデルの場合などはまた変わってきますが）。他の例としては「サービスの３つの特徴」などの際には３つの情報が並列なのか、それともそのうちの１つを強調して見せたいのかによって見せ方は変わってきます。

情報の優先度が決められない場合には「クライアントに聞く」または、一旦そのまま進めてワイヤフレーム作成後に「ユーザーテストで行動を観察してから変更する」ことによってより良い情報設計へと近づくことができます。（ユーザーテストでは「ユーザーに意見を聞く」のではなく「ユーザーの行動を観察する」というのが大事です。）

情報の量を考える

スプレッドシートで各ページに入る情報の優先度を決めたら、ワードやドキュメントを使い実際のテキストや画像を入れていきます。キャッチコピー、メインビジュアル、説明文など、公開予定のテキストや画像を流し込んでいきます。この段階で公開予定テキストの用意ができていない場合には参考サイトのテキストを入れますが、その際に文章の内容ではなく「文字数」が同じくらいになりそうかアタリをつけておくと良いです。

ここでは文字の大きさやレイアウトは一切気にする必要はありません。１ページあたりの情報がどれくらいのボリュームなのかを確認することが大切です。「文字数が多い箇所はアコーディオンにして情報を格納する」「画像枚数が多い箇所はスライドショーにする」などの情報量に合わせた適切なインターフェースは後のステップで検討するので、ここでは気にしないようにします。

情報量の確認と同時に「細かい情報の優先度」も調整をしていきます。例えば「記事ブロック」にサムネイル画像、タイトル、サマリーテキスト、公開日付、著者、閲覧数、関連キワードタグ、という７つの要素があるとして、この要素のどれを優先度高く見せるかはWebサイトの性質によって変わります。細かい情報の優先度までしっかり設定することで、後のデザインもメリハリのある良いものになります。

情報の回遊性を考える

各ページの優先度と情報量が見えたら、どのページからどのページに遷移してほしいかというユーザーナビゲーションフローを確認していきます。コンバージョンへ向けたメインの導線は基本として抜け漏れのないようにするのは当然ですが、ここでは忘れがちな「寄り道」や「戻り道」のための導線を追加していきます。（上図で黒線となっている箇所）

具体的な例としては、サービスページから「事例」だけでなく「導入の流れ」や「FAQ」へ行けるか、事例詳細から「クライアントの声」や「サービス一覧」に戻れるかなどです。

サイトローンチ後にはアナリティクスやA/Bテストを繰り返しユーザーナビゲーションフローの最適化をしていきますが、設計段階では「こんな情報を段階的に踏めればより理解が深まるはず」とか「この情報の後にはこうしたことを知りたいだろう」といったユーザーへの共感と想像力が大切になってきます。

ワイヤーフレームとして形にする

いよいよXDやSketchの出番です。上記の３ステップを行っていれば、この段階で考えるべきことはインターフェースのみです。ここで言うインターフェースとは、例えば「情報量が多いからフィルター機能をつけて絞り込めるようにしたほうが良い」とか、「画像を大きく沢山見せたいからここはモーダルウインドウで開いてスライドショーにしよう」といったような、主には情報の収納方法を指しています。

またレイアウトをどこまでワイヤーフレームで作るべきか。私は本来ワイヤーフレームの段階では１カラムで左寄せまたは中央寄せで積み重ねていくだけの仮レイアウトで良いだろうと考えていますが「ワイヤーフレームでレイアウトの確認をしたい」と言われることも実際には多いので、プロジェクトのメンバーや最終決定者のデザインリテラシーに合わせてレイアウトの作り込みのレベルは調整しています。

ワイヤーフレーム作成を３ステップに分解するメリット

１番のメリットは「どこに問題があるか」が分かりやすい点です。もし作成したワイヤーフレームが「なんか分かりにくい」とき、それは情報の優先度がつけられていないのか、情報量が多すぎて認知負荷が高いのか、それとも必要な情報にたどり着く順序が悪いのか。どこに問題があるのかをすぐに突き止めることができます。

またデザイン制作後に「なんか違う」とき、それはトンマナの問題なのか、情報設計の問題なのかを切り分けることはとても大切です。私の個人的な経験則では「ごちゃごちゃして分かりにくいからデザインを変えたい」と言うときには、多くの場合トンマナではなく情報設計に問題があります。

Webサイト制作ではディレクターがワイヤーフレームを書いて、デザイナーがそれを基にデザインを作成するという慣習がなぜかありますが、ワイヤーフレームもデザインの一部なので一緒に作ったほうが良いですね。

予算の少ないWebサイト制作は失敗する？Webサイト制作の実態調査

予算の少ないWebサイト制作は失敗する？Webサイト制作の実態調査｜WACUL TECHNOLOGY & MARKETING LAB | 株式会社WACUL

アンケート結果に対する垣内コメント

Webサイトリニューアルでディレクトリ構造やデザインを綺麗にしたところで、ユーザーは喜ばないし気づきすらしない。当然Googleも評価してくれない。Googleのアルゴリズムは日々進化しているため、サイト構造が少し汚なくても問題なくクロールしてくれるのだ。中長期で検索順位を上げたいなら、コンテンツを磨くほかない。ECなら魅力的な商品数を増やす、メディアならユーザの役に立つ記事を増やすだけだ。「デザイン」だけいじるリニューアルで、SEO効果を期待するほうがおかしい。

また、企業/サービスのイメージ向上のためにWebサイトをリニューアルしている人が50％もいることに驚く。さらにそのほとんどが効果検証すらしていない。Webサイトのデザインが少し綺麗になったくらいで、その会社を好きになることがあるだろうか？少なくとも私個人にそんな経験はないし、数千人のユーザー行動観察調査をおこなった経験からも一度も見たことがない。大半のユーザーはデザインの変更に気づきすらしないのだ。「イメージ向上」という隠れ蓑を言い訳に必要のないデザイン洗練がまかり通ってしまう企業体質は、ビジネス成果向上の妨げでしかない。

予算

あとに続く発注側のアンケート結果は、Q3より「コンバージョン数の向上を期待して実際に効果を得られた＝成果を出した発注者」「コンバージョン数の向上を期待したが逆効果だった/変わらなかった＝成果を出せなかった発注者」をそれぞれ抽出したうえで、両者の回答に違いがあるのかを分析した。

予算と成果にはきれいな相関があった。成果が出た割合を「成功する確率」として捉えると、コーポレートサイトの場合、予算が300万円以上の場合は69％の確率で成功するが、100万円未満の場合は30％まで下がる。また、少額だと失敗確率が46％と非常に高い。

ランディングページも同様で、予算が50万円以上の場合は60％の確率で成功するが、25万円未満の場合は37％に留まった。つまり予算が少ない場合、予算が潤沢な場合と比較すると成功確率が20〜40％も下がる。

アンケート結果に対する垣内コメント

Webサイト制作事業は労働集約ビジネスのため「売上＝工数」である。つまり予算が低ければ稼働を抑えざるを得ない。加えて優秀なデザイナー・ディレクターは引っ張りだことなるため、予算が低ければアサインできない。予算を抑えようとすればするほど、人気のない業者が短時間でやっつけるプロジェクトにしかならないのだ。他にも、コンサルティング・広告運用・コンテンツ作成といった労働集約ビジネスは値切った分だけ品質が落ちる。逆に言えば、値切ってよいのはソフトウェアなど人的支援が少ないプロダクトだけだ。

Web制作会社の選び方

Web制作会社の探し方は全体の62%が「既存の取り引き先へ声をかけた」と回答しており圧倒的に多い。また、一定の回答があった項目に対してQ6.Q7同様に成功確率を算出した。

「ネットでWeb制作会社を探して問い合わせた」、つまり新規パートナーの開拓をおこなっている場合は成功確率が54％と他よりも高い。また、「知り合いに紹介してもらった」場合は失敗確率が30％を超えており、やや注意が必要と言える。

「担当営業や担当ディレクターの人柄がよかったから」「マーケティングの知見が深かったから」は成功確率が60％を超えているものの、同時に失敗確率も25％前後とやや高めである。また、「制作実績が豊富だったから」は失敗確率が30％と最も高い。制作実績が豊富であることは、成果を出した実績が豊富であることとイコールではない、と言えるだろう。

デザインのフィードバック

最も回答数の多かった「自社のイメージに合わないと感じた部分の指摘」は成功確率が40％と低い結果となった。成功確率が高く失敗確率も低いものには「サイト訪問者に対して適切ではないと感じた部分を指摘した」「ほぼ指摘しなかった」が挙げられる。

アンケート結果に対する垣内コメント

デザインのフィードバックは、具体的に「このサイトのこの部分のようにしたい」と伝えるようにしている。これを例えば「高級感のあるデザインにしたい」と言葉だけで伝えてしまうと、「黄金に輝くデザイン」「白と紺ベースの上品なデザイン」「明朝体を使った和風デザイン」のどれかすら伝わらない。結果的に何度も手戻りが発生し、必要のないバリエーションが増え、発注側も制作側も消耗していく。

また、細かいビジュアルデザインにこだわったところで成果の差異はほとんど生じない。素人が余計な口出しをすべきではないのだ。唯一気をつけるべきは、ビジュアルデザインのこだわりによるCV導線の阻害である。例えば、わかりやすくクリックできるリンクは青字下線や立体感のあるボタンだが、これらを用いつつデザインを洗練させるのは難しい。実力の低いデザイナーは安易に黒字テキストリンク、しかも英語表記を使いたがるが、これではリンクであることに気づけずCV誘導率や回遊率が落ちてしまう。ユーザー視点で利便性が損なわれていないかだけは、デザイナーに迎合せずにフィードバックすべきである。

本調査の提言

Webサイトリニューアルに検索順位向上を期待してはならない

Webサイトの新規立ち上げ・リニューアルにおいて「検索順位の向上」はしばしば期待されるが、「期待したものの順位は変化しなかった」という回答が42％を占めた。SEOを強化するためにはコンテンツを拡充するしかなく、部分的・表層的な変化だけで順位向上を期待してはならない。また、デザインを刷新することで「企業/サービスイメージの向上」を期待するケースも多いが、アンケートを用いて効果検証している企業は1割もおらず、評価方法が非常に曖昧だ。数十万〜数百万円の投資をするのだから、目的に応じて当然効果検証すべきである。

予算の少ないWebサイト制作は成功確率が下がる

Webサイト制作の予算と成功確率には相関があり、予算が少ない場合は成功確率が20〜40％下がることが明らかになった。成功確率50％以上を目指すのであれば、コーポレートサイトは300万円以上、ランディングページは50万円以上の予算を確保しよう。

考えなしに仲のいい制作会社へ発注してはならない

Web制作会社は既存取引先へ集約されがちであり、発注の決め手は「元々取り引きがあったから」が57％を占めた。ここには、考えなしに仲のいい会社へ依頼してしまっているケースも多々含まれるだろう。現に既存取引先に声をかける場合の成功確率は30％だが、新規パートナーの開拓をおこなっている場合は成功確率が54％まで上がる。発注側は、期待する効果を出すのにふさわしいパートナーをしっかり調査検討すべきである。また、コンペの開催有無によって成果が変わるかどうかを確認したところ、一切影響がなかった。つまり労力をかけてコンペを実施する必要性はないと言える。

デザインフィードバックやユーザー視点で具体的におこなうべき

成果を出したいのなら発注者はユーザー視点でデザインにフィードバックすべきであり、これは調査結果からも明らかだ。しかし全体で見ると「自社のイメージに合わないと感じた部分を指摘した」という回答が57％と最も多かった。こうした感覚的なフィードバックに振り回され、制作者側の9割はデザインの修正に困っている。気持ちよくプロジェクトを進めて成果を出すために、発注者は今一度デザインフィードバックの基準を改めるべきである。

ライティングで悩むディレクターに贈るコピー制作のコツ！

（自論）ライティングで悩むディレクターに贈るコピー制作のコツ！実例付き | 株式会社LIG

「先方の文言をそのまま使う」を避ける

案件をクライアントが依頼される場合、必ずなにか課題があるはず。我々の仕事は、案件を通してクライアントの抱える「課題」を明確化し、それに対して「答え」を作る作業だと言えます。

ですが、仕事が依頼される段階では、クライアントの中で課題感はモヤモヤとしていることが多いです。

なので、クライアントの悩みを引き出し、再構成する作業なしで、相手の言っていることをそのまま書いても良いものにはならないと思います。

「とりあえずクライアントに原稿依頼する」を避ける

お客様はクリエイティブの専門職ではないため、「ライティング」という作業自体にあまり慣れていません。ですので、制作側で質を担保するべきです。しかし、慣習というべきなのか、Web業界では、「原稿はお客様に依頼するもの」という常識も強いかと思います。　ダメです。書きましょう。本ブログでは触れませんが、コピーだけでなく本文もできる限り構成を考え、自分で書きましょう。依頼を出す場合はベースライティングを行い、その上で文字数を指定して依頼しましょう。（会社のミッションなど、重要なものをそのまま使って欲しいという依頼であれば、そのようにするパターンもあります。）

具体的な下準備/ヒアリング〜デザインキーワードの選定

1. ヒアリングを行い、内容を整理する
2. 抽出した要素をグルーピングし、差別化ポイントを決める
3. 3〜4つ程度のデザインキーワードに落とし込む

わかりづらいので、図にしました。

気をつけているのは、③の時点で

「よくある言葉の羅列」にならないようにするキーワードを設定すること

です。

誰にでも、何にでもあてはまる「便利言葉」はやめよう

たとえば、「信頼」「挑戦」「未来」みたいな耳障りのいい言葉の並びだと、コピーにありがちな要素が並んでいるだけでどんな案件や企業にも当てはまってしまうと思います。こういう「無」のコンセプト、残念ながらたまに見ます。

そうではなく、必ずその企業/サービス/プロダクトなどの本質はなんだろう？ という視点で考えたいと思っています。たとえば、デザインで使われがちな「信頼」にも「泥臭い信頼」もあれば「ロジカルでスマートな信頼」もあるはず。そして、それを言い表す言葉や、キーワードの組み合わせがあるはずです。

※ヒアリング〜コンセプトの流れの詳細は、また別記事で紹介できればと思います

メンバーを集める

LIGではアイデア会議は割とプロジェクトメンバーだけでなく、プランナーやその辺で暇にしている人などにも声をかけてMTGをすることが多いです。メンバーを集めて前提を共有し、スプレッドシートを用意して、ガシガシ書いてもらいます。

「個人思考」と「全体共有」を繰り返して案を深める

自分は以下のような進め方をすることが多いです。

まず、メンバー各自の案出しの時間を取ります(15分程度)。静かに案を考えてもらいます。

次に、各案を全員で共有します。お喋りしたりしながら、各自のアイデアを膨らませたりします。

最後に、案を分類し方向性を絞り込みます。

有力案が出ない場合、さらに上記の拡散→収束のサイクルを繰り返します。

アイデアの方向性があまりにも偏りすぎたり、似通っている場合は違和感のある案を放り込んだりもします。まったく関係ないところから案がつながることもあるので、そういう場を少し掻き乱すことが得意な人が一人参加していると心強いです。

最終的には、自分の責任で決める

アイデア出しの際、最終的なゴール地点はイメージしておいて、絞り込む際は割と恣意的に方向を誘導します。また最終決定は自分でやります。なんとなくの合議制で決めると、方向がまとまりません。プロジェクトの全体像を把握するディレクターが、着地点を決めるべきだと思います。

とにかく一つの方向に流れを作ります。そのためにも、上記「下準備」が大切ですし、ディレクターには案件理解が必要です。

※この辺は、またブレストの方法論としてまとめられればと思います。

どの言葉を、なぜ選んだのか明確になっているか

私たちの仕事は、コーポレートサイトや、採用サイト、サービスサイト、プロダクトサイト……など多岐に渡りますが、重要なのは顧客の持つ魅力が他としっかり差別化できているかです。

他との差別化の根拠は言葉に表れます。どんなサービス、どんな顧客にでもあてはまるようなコピーを使ってしまっては、その顧客の独自性が際立たなくなります。そのため、繰り返しになりますが何にでも当てはまる「便利言葉」は避けるべきです。

無駄な「贅肉言葉」を削ぎ落とし、文字数を刈り込めているか

必要のない言い回し、端的でない表現はないかをチェックしています。言葉が決まらないとき、内容がブレるときは、だいたい伝えることが明確化されていない場合が多いです。くどくどした言い回し、あるいは本質から外れた無駄な要素はなるべく削っています。必要なことに的を絞り、端的に言い切りましょう。

対比/反復/整列/強弱のデザイン４原則を言葉でも意識してみる

「対比」「反復」「整列」「強弱」というデザインの四原則があるのですが、コピーライティングの上でもそれを意識しています。言葉を使ってデザインをするイメージです。

たとえば、「赤」と「青」を対比させる。似た言い回しを連続させる。単語の抽象/具体の粒度を揃える。硬い言葉と柔らかい言葉を組み合わせてみる。などなど、情報の強弱をはっきりさせることで、どこに意識を向かわせるか、何を目立たせるかがはっきりしてくると思います。

サイト全体の構成を意識した言葉になっているか

WEBサイトは、基本的に読み進めることが前提なので、「閲覧」という概念が重要になってきます。たとえば、MV（メインビジュアル）ですべての情報を伝える必要がある場合は少ないです。

また、文字情報が多すぎるよりも、全体がテンポよく読み進められることを重視すべきだと考えています。