Web制作における「コンテンツファースト」とはどのような考え方で、従来の制作プロセスとはどのように違うのでしょうか。
本記事では、コンテンツファーストが必要になってきた背景やモバイルシフトの影響などとあわせて、コンテンツファーストの基礎知識を解説します。
また、コンテンツファーストに沿ってWeb制作を進めるためのステップや、実践にあたっての注意点についてもご紹介します。
Web制作におけるコンテンツファーストとは？
昨今のSEOにおいては、Googleが掲げるユーザーファーストの考え方が浸透。
ユーザーの役に立つコンテンツを提供し、ユーザーが検索行動に満足するようなサイトが検索結果で上位表示されるようになってきています。
そして、こうしたサイトを作るための制作プロセスにおいて注目を集めているのが、今回ご紹介する「コンテンツファースト」という概念です。
Webサイトのデザインやレイアウト自体は大切にしながらも、それ以上にコンテンツ、すなわち内容そのものを重視するサイト設計および制作の考え方がコンテンツファーストなのです。
従来とは異なる、コンテンツ重視・先行型の制作プロセスと考え方
雑誌などの紙媒体では、紙面という物理的な制限があります。
そのため、内容もさることながらレイアウトやデザインも非常に重要で、まずはレイアウトの大枠を決めた上でそこに入れるコンテンツを決めていくプロセスが一般的です。
こうした紙媒体の制作プロセスは、従来のWeb制作にも受け継がれました。
まずワイヤーフレームやテンプレートを作り、中身となるコンテンツは後から考えるという流れだったのです。
この手法は、Webサイトを閲覧するデバイスがほぼPCに限られ、そのパソコンも画面解像度やアスペクト比が限られていた頃であれば、確かに効果もありました。
しかし、そもそも画面をスクロールできるWebサイトには、紙媒体のような物理的なページ制限はありません。
逆に、レイアウトやデザインありきでWeb制作を進めることにより、「デザインだけで満足してしまう」「デザインがコンテンツと合わない」「無駄なテンプレート作成作業が発生する」など、さまざまな問題も発生しました。
こうした点を反省し、Webサイトならではの制作プロセスとして提唱されるようになったのがコンテンツファーストです。
制作においてコンテンツそのものを重視し、制作プロセスにおいてもレイアウトやデザインの前に先行させるようになったのです。
モバイルの普及により、コンテンツファーストが重要に
コンテンツファーストへと移行した背景には、モバイルの普及もあります。
スマホやタブレットなどの普及にともない、さまざまな解像度やアスペクト比の画面でWebサイトが閲覧されるようになってきました。
そのため、どのようなデバイスでも快適なユーザー体験が得られるようにするには、従来のようなレイアウト・デザインありきの制作プロセスは適さないのです。
まずコンテンツありきで内容を制作し、その後にどんなデバイスでもコンテンツを見られるように工夫する。
そうしたコンテンツファーストの制作プロセスが重要になったのは、モバイルデバイスの普及が大きな要因として挙げられるでしょう。
GoogleのモバイルフレンドリーとMFI（モバイルファーストインデックス）
上記のようなモバイル重視の流れは、Googleの対応にも色濃く表れています。
Googleは2015年に「モバイルフレンドリー」アップデートを導入。
ランキング要素として、Webサイトがモバイルフレンドリーか否かという点が評価されるようになりました。
これにより、スマホなどの携帯デバイスからアクセスした際に画面サイズが合っていなかったり、文字が小さすぎて読みにくい、レイアウトが崩れてしまうなどのサイトは評価が下がるようになったのです。
また、2018年からはMFI（モバイルファーストインデックス）の導入も始まり、Webサイトにデスクトップ版とモバイル版のページが存在している場合は、インデックスおよびランキングにモバイル版ページが優先使用されるようになりました。
こうしたGoogleの方針に対応するためにも、それぞれのデバイスでのレイアウト・デザインよりも先に、まずコンテンツを決めて制作するべきという流れになってきたのです。
コンテンツファーストでWeb制作を進める5つのステップ
続いては、コンテンツファーストなWeb制作のステップについて見ていきましょう。
①目的とターゲットの明確化
まず第一にすべきは、Webサイトおよびコンテンツの目的とターゲットをしっかりと定めることです。
誰を対象にして、何を伝え、何をしてもらいたいのか。
これらが曖昧なままでは、作るべきものもぼやけてしまい、結局は何の効果も出ないものしか生み出されません。
具体的なペルソナを設定したり、カスタマージャーニーマップを作るなどして、コンテンツに盛り込むべき目的・ターゲット・ストーリーを明確にしましょう。
また、このステップでは検索キーワードの選定や競合の調査なども重要。
「実現可能性のある」目的に落とし込むことも大切です。
②コンテンツの骨子作成
サイトの目的や対象が明確になったら、次に各コンテンツの骨格を組み立てます。
ここで重要なのは、いきなり細部から作り始めない（書き始めない）という点。
まずはコンテンツに必要な情報の要素を洗い出し、目的を達成できるようにそれらの要素を構成します。
全体の骨格ができたら見出しを作り、次にそれぞれの段落で伝える内容を考えましょう。
③コンテンツの制作
コンテンツの枠組みが決まったら、続けて実際のコンテンツ制作という肉付け作業に取りかかります。
コンテンツファーストな制作プロセスの場合、この段階ではまだレイアウトやデザインはあまり（あるいはまったく）進んでいません。
従来の制作プロセスに慣れた人だと、完成形の見た目を想像できない状況での制作が難しく感じられるかもしれません。
そのような場合は、あくまで「伝えるべき情報のみ」という点を意識して内容を執筆してみるのがおすすめです。
④レイアウト
従来の制作プロセスでは、コンテンツ制作の前にレイアウトが決まっているのが一般的でしたが、コンテンツファーストではレイアウトは後から決めるようにします。
まずコンテンツを作った上で、どんなデバイスでも見やすくする、あるいは正しく見えるようにするには、どのようなレイアウトにすべきかを考えましょう。
たとえば、スマホならばワンカラム構成にした方が内容が伝わりやすいなど、あくまでコンテンツありきで「できあがったコンテンツをわかりやすく見せる配置」にしていきます。
⑤デザイン・コーディング
デザインやコーディングも、コンテンツありきの考え方が重要。
できあがったコンテンツをいかにわかりやすく伝えるか、いかに効果を出すかという観点から進めていきましょう。
たとえばモバイルサイトの実装方法についても、「Googleがレスポンシブデザインを推奨しているからレスポンシブデザインを採用する」といった決め方ではなく、Webサイトの目的や現況、コンテンツ内容などから判断するようにします。
コンテンツファーストの実践における注意点
コンテンツの役割や重要性を全員が認識すること
Web制作は基本的には多くの人が関わって進めるものです。
小規模なものであっても、ディレクターにライター、デザイナー、コーダーと複数のメンバーが参加するのが一般的でしょう。
そのため、コンテンツファーストを実践するにあたっては、制作チーム全員が同じ価値観、同じ概念を共有することが欠かせません。
クライアントがいる場合は、そちらも巻き込む必要があります。
なぜコンテンツを重視するのか、どのように制作を進めるのか、なぜそのプロセスなのか。これらを全員が認識した上で制作を進めるようにしましょう。
デザインは「コンテンツをわかりやすく伝える」ためにこそある
コンテンツファーストだからといって、コンテンツ内容のみを考えていれば良いというものではありません。
コンテンツの主役たる文章だけがあったところで、それだけでユーザーにわかりやすく伝わるわけではないのです。
あくまで、コンテンツを重視するという考え方や制作プロセスの順番に違いがあるだけで、デザインそのものの重要性は従来と何ら変わりません。
「コンテンツをわかりやすく伝えること」こそがWeb制作におけるデザインの役割であり、その点についても制作チーム全員がしっかりと理解しておくことが大切です。