コピーファーストのデザインアプローチは、あらゆる規模のデザインプロジェクトで有効です。ランディングページのような独立するページでも、Webサイトの改善でも、コピーファーストのアプローチを使えばプロジェクトはより効率的になります。
私は個人的にこのアプローチを長い間採用してきました。以前会社に勤めていたときも、スタートアップにいたときも、フリーランスとして関わったプロジェクトでもつねに利用しました。
この記事では、コンテンツファーストのデザインアプローチを使うことによって得られる６つのメリットを詳しく見ていきます。
１. プロジェクトのスケジュールと期限が管理しやすくなる
コンテンツを書くのがチームメンバーなのかクライアントなのかは関係ありません。プロジェクトの最初に時間を割いて、コンテンツのプラン（写真や動画など）とすべてのコピーを書き出しておけば、スケジュールと期限をより正確にとらえ直すことができます。あなたやチームがどのようなツールを使っていようと、誰もが閲覧できるスケジュールを使って始めるべきでしょう。
私は今自分のポートフォリオのいくつかのページを更新しています。上のスクリーンショットの通り、私は大まかなタスクをまとめました。それぞれの期限と作業の順番を把握することで、このプロジェクトをよりスムーズに進めることができます。そうすれば、アイデアで右往左往することはありません。
繰り返し修正する
プロジェクトの規模によっては、すべてのコピーを書き出すのに時間がかかることもあります。しかし、最初は大まかな草稿で十分です。加えて、すべてのコンテンツを作る必要もありません。どこで写真を使いたいのか、どのような写真なのかが把握できるシンプルな指示書きがあれば、スケジュールのどの時点で写真を撮るべきかは十分わかるからです。
２. サイトのプランニングに役立つ
本格的に会社のWebサイトをデザインし直すような大きなプロジェクトでは、このメリットは非常に重要です。コピーとコンテンツのプランを書くためには、デザイナーやチームはプロジェクト自体の計画も考える必要があるため、自然と全体的な戦略に視線が移ります。したがって、Webサイトやさまざまなページがどれほどの規模になるのか確認することができます。もっとも重要なのは、これによって異なるセールスファネルとユーザージャーニーが示されることです。
単一のページのような小規模なプロジェクトでは、コピーとコンテンツのプランを確認することで、そのページがどこまで拡大するのか知ることができます。したがって、ユーザーフローをチェックし、そのページが既存のWebサイトが実行している大がかりな計画にどのように位置づけられるのか理解することができるのです。
サイトプランニングの例
私がUnwander（旅行系アプリ）のためにランディングページを作ったとき、創設者は消費者が自分のアプリのアイデアに興味を持っているかどうか確かめたいと言っていました。そこで私たちはランディングページを文書に書き出し、サインアップや取引条件、連絡先などのリンクを配置しました。
上のドキュメントから、私たちはヘッダーセクションと最初の２つのボディセクションをどのように構築すべきか知ることができます。また、この文書を見れば、どのような画像を調達し、制作すればいいのか、どこにCTAを配置し、どのような文章を添えればいいのか把握できます。何よりも重要なのは、この時点で素晴らしいページデザインの計画ができあがっていることです。
サイトマップは早期から使えるようにする
サイトマップはプロジェクトの初期から使えるようにしましょう。どのように書かれているかは問題ではありません。重要なのは関係者全員がアクセスし、閲覧できるものが存在することです。以下にあるのは、私が昨年Pride Dental（デンタルクリニック）のために作った初期のサイトマップのイメージです。
サイトマップはコンテンツを体系化し、リンクで関連付けるために非常に有効な情報です。これを見れば、何が足りていないのか、何をさらに作業しなければならないのか、どれが次の段階に進む準備ができているのかがわかります。
３. 目的達成をダブルチェックできる
プロジェクトの進行に合わせて、コンテンツが目的に沿っているかをチェックしなければなりません。ここでの目的とは、ユーザーの目的とビジネスの目的のことです。マクロな視点では、すべてのコンテンツが意図したユーザーの目的、ビジネスの目的に沿っているかどうかを確認し、同時に１つひとつのページがそれらの目的に沿っているかも確認しなければなりません。一方でミクロな視点では、それぞれのセクション、またはそれぞれの文について確認する必要があります。
計画されたコピーとコンテンツがそれらの目的からあまりにも乖離しているなら、この段階で書き直すべきです。コンテンツがわずかにずれている場合でさえ、最適化を始める絶好の機会になるでしょう。より直接的に伝わるようコピーを書き直し、コンテンツを調整することは、コンバージョンを高め直帰率を下げる効果的な方法です。
目的がわかりにくいときに助けてくれる
私はSamuel Hulick氏のユーザーオンボーディングの分解をとても気に入っています。以下のスクリーンショットは、ビットコインを買おうとするときのオンボーディングプロセスです。書かれているコメントは愉快ですが、真実をとらえています。これは、明確な目的がないページの好例です。改善できる余地があまりに多く存在します。
「うーむ、等しく重要そうなボタンが割とたくさん並んでいますね」「…こうなるとたとえ番号が振ってあって順番に回るのだとしても、私たちはここに来て何をすればいいのか迷ってしまいますね。」
４. できる限り片付ける
Steve Krug氏のユーザー体験の名著『Don'tMake Me Think』から有名な文を引用します。
それぞれのページにある言葉を半分に減らし、その残りをさらに半分に減らしましょう
もはや誰もが知るところですが、テキストが多すぎるとユーザー体験にとっても、ユーザビリティ、読みやすさ、サイトの指標にとっても好ましくありません。にもかかわらず、適切な量をはるかに超えたコピーが存在するページは多々見られます。
コピーとコンテンツの75%を削減することは戦略的な方法です。Bitchargeのランディングページは的を射た短いコピーの好例です。それぞれの見出しはすべて３単語のみで表現されています。
Webサイトは、少ないほど豊かである（less is more）
Webサイトを整頓していくと、セールスファネルやユーザーフロー、サイトマップやナビゲーションなども改善することができます。購入までの過程が進みやすくなるなら、セクションやページを丸ごと削除するのも良いでしょう。
Incomeeのランディングページは、「less is more」を体現している素晴らしい例です。彼らはコピーで必要な情報を伝えながらも、文字数を最小限に絞っています。
５. ブランディング方針に合わせる
コピーが最適化されたら、それがブランディング方針に沿っているか確認しましょう。つまり、ブランドの雰囲気とメッセージに適っているかどうか参照する必要があります。ブランドが目指している雰囲気とマッチしているでしょうか？ ブランドの個性と合っているでしょうか？ そうであれば次の段階に進み、そうでなければ書き直しましょう。
６. ビジュアルデザインを設定する
ビジュアルデザインを設定するのにコピーファーストのアプローチが役に立つのは、サイトの各部分やすべてのページが明確に定義されるからです。これはデザインのさまざまな側面で効果的ですが、特にレイアウトを決める際に役立ちます。Unwanderのランディングページの事例に戻ると、コピーファーストのアプローチによってコンテンツの構造はすでに十分に確立しているので、あとは書いたものとビジュアル要素を組み合わせるだけで済みます。
コピーファーストのアプローチはまた、高度に協力して進めるプロセスでもあります。コンテンツを決めるとき、デザイナーはよくコピーライターやマーケターと一緒に作業します。開発者でさえ、どのようなコンセプトを開発するのかについて意見を述べます。このような会話がプロジェクトの早い段階で始まれば、チームはより濃密に協力することができるでしょう。
コピーファーストのアプローチが協力的な作業を前提としているおかげで、ビジュアルデザインもすでに始めることができています。たとえば、ランディングページのファーストビューやフッターには、フィーチャーされた人物の大きな画像にすればいいということがわかったり、背景に動画を配置するべきなのはどこのセクションなのかも把握できます。
なぜコピーファーストのアプローチは機能するのか？
コピーファーストのアプローチが成功するもっとも大きな要因は、協力して仕事を進める性質、プランを立てるという性質だと考えます。この性質のおかげで、修正する回数が減り、確かなUXを提供することができます。
なぜなら、ビジュアルデザインやUIデザインの段階になったときには、すでにすべてのページとセクションについて関係者全員が合意しているからです。したがって、仕様変更が発生することはほとんどありません。コピーファーストのアプローチは、将来のデザインプロジェクトをけん引する効果的な方法です。
