ピーチウェブヘッダーロゴ
企画から公開までの流れをご紹介!ホームページの正しい制作工程はデザインなんて後回し

企画から公開までの流れをご紹介!ホームページの正しい制作工程はデザインなんて後回し

ピーチウェブアイコン
合同会社ピーチウェブ2024.10.03

ニワトリが先か、卵が先かみたいな話

「悲しいから泣くのではなく、泣くから悲しくなる」という話を聞いたことがあるだろうか?

雑学としてはよく聞くネタなので、知っている方も多いかもしれない。今から140年ほど前にアメリカの心理学者ウィリアム・ジェームズとデンマークの心理学者カール・ランゲが別々に発見した説で、「刺激をうけて身体変化が起こった結果、情動が変化する」という。2人の名前を取って「ジェームズ・ランゲ説」と呼ばれるこの説は、現在もなお検証が行われているようだ。

こういったニワトリが先か、卵が先かみたいな話題がホームページ制作の業界にもある。デザインが先か中身が先かという論争である。最近では、Canvaのようにテンプレートを選んで簡単にホームページを制作できるツールがあったり、安価なホームページ制作会社は良さそうテンプレートをまず顧客に選ばせて制作工程を省略しようとしている。

イケてるデザインを選んで、その後中身を埋めるという制作工程は実は大きく間違っている。今回はそんなホームページの制作工程についてお話していきたい。

ワイヤーフレームとコピーライティング

先程はデザインが先か中身が先かという表現をしたが、もう少し具体的な言い方をすればワイヤーフレームが先かコピーライティングが先かという言い方になる。

ワイヤーフレームはホームページ制作時に作成される簡素なレイアウト図を指す。どこにタイトルを配置するか、どこにお申し込みボタンをを設置するか、どのくらいの大きさで画像を配置するかなどなど、ページの構造を簡素に表現したもので具体的な中身はない。文字はダミーテキスト、画像部分はシンプルな四角図形、色味もモノクロで描かれる。画像のように手書きで書く場合もあれば、画像制作ツールで描かれる場合もある。

一方、コピーライティングはサイトで実際に使用する文章(コピー)を指している。伝えるべき文字情報を一言一句確定させた状態のイメージで、タイトルもキャッチコピーも説明文も全てを含む。デザインはホームページ制作会社主導で進められるが、コピーライティングはホームページを作りたい顧客から情報を引き出しながら作成する。すぐに見た目ができないので、コピーライティングを先に進めると顧客が不安に感じるかも知れない。

コンテンツファースト

旧来のホームページ制作は、デザインファーストで進められていた。

まずはワイヤーフレームを作成、次に具体的なサイトデザイン(デザインカンプ)を作成して、その後コピーライティングや画像を流し込むという流れが主流であった。スマホやタブレットが普及していなかった時代は、ホームページデザインはパソコン用の1つだけ作成すれば良かったからだ。デザインを決めてそれに合うように、コピーを流し込む。すると、「タイトルが2行になると格好悪いので15文字以内に縮めてください!」みたいなやり取りが発生する。コピーはデザインに比べて、後から容易に変更可能である。結果、デザインに合わせるために後から文字数を増やされたり、縮められたりしていたのだ。

しかし、現在はコンテンツファーストで進めるべきという考え方に変わってきている。

コンテンツファーストとは、つまりコピーライティングを完成させてから、それを元にデザインを作るという制作方法だ。先程も触れたようにすぐに見た目が見えないので、顧客としては少し不安に感じるかも知れない。だかコンテンツファーストの方が以下のようなメリットがあるため効率的であると考えられている。

  • コピー変更による誤字脱字の再チェックをしなくて良い
  • スマホ、タブレット、パソコン用など複数のページデザインの再調整が減る
  • 伝えるべき情報が薄まったり、冗長になったりしない
  • 結果、当初の意図通りに必要な情報が伝えられる

正しいホームページ制作の流れ

コンテンツファーストの考え方を反映させると、ホームページ制作の工程が以下のように変化する。

デザインファーストな制作工程

  1. サイト設計
  2. ワイヤーフレーム作成
  3. デザインツールでカンプ作成
  4. コピーライティング
  5. コーディング
  6. テスト・最終チェック
  7. 公開

コンテンツファーストな制作工程

  1. サイト設計
  2. コピーライティング
  3. ワイヤーフレーム作成
  4. コーディング
  5. ブラウザでカンプ確認
  6. テスト・最終チェック
  7. 公開

コピーライティングとデザイン工程が入れ替わることで、コピーの変更→複数のデバイス用のデザインを微調整→コピーの誤字脱字チェックという無駄な往復が極力減り、効率的な制作が可能となる。

その他の効率化ポイントとして、デザインカンプ(最終的なホームページの見た目)をデザイン制作ソフトで作る手間がなくなる。コピーライティングが確定していることで、デザイン制作に集中できるため、コーディングしながら顧客にブラウザでデザインチェックをしてもらえるようになるためだ。

実は対立する両者

実は、このコピーライティングとデザイン工程だが、ホームページ制作会社によって得意と不得意が結構分かれる領域でもある。

コピーライティングを作り込むことは非常にロジカルな思考を要求する一方で、デザインを作り込むこととは非常にクリエイティブな思考を要求するからだ。相反する2つの思考を高いレベルで併せ持っている会社や制作者は意外に少なく、どちらかの主張に偏ることが多い。

例えば、デザインが得意な会社は魅力的なデザインを提案できるがコピーは顧客任せというパターン、逆にコンテンツファーストを強調する会社はコンサルタント級のコピーの提案ができるもののホームページデザインがダサいというパターンである。

ではどのように適切な業者に出会うべきか?

ここからは完全に私個人の偏った意見となるが、コンテンツファーストを謳っているコンサルティング系の企業を選ぶのが良いのではないかと考える。もしホームページのデザインに不安があるようであれば、「デザインが上手な制作者を巻き込んで制作してくれるか?」と確認してみると良い。

私の経験上、デザインが得意な制作者はコピーライティングが苦手であることを自覚している人が少なく「どっちも得意です!」と軽く言っているケースをよく見かける。一方、コンテンツファーストを謳っている企業は、デザインが苦手であることを自覚してデザイナーとつながる努力をしていることが多い。

またコンテンツファーストな企業の方が「伝える情報」に真摯に向き合っているため、顧客の事業を深く理解して、真摯に改善提案を出してくれる可能性も高い。「デザインが損なわれるので、文字数減らして(長くして)ください。」のような依頼がなく、むしろどうしても文字数調整が必要な場合は、伝わる情報が変わらないようにしっかり考えて提案してくれる。

先程申した通り、完全に偏った意見なので最終的にはお客様の判断で良い制作者に出会えることを願うが、その選択肢にピーチウェブが入っていれば幸いだ。

次の記事更新はいつ?

ニュースレターを登録してピーチウェブの最新情報をいち早く手に入れてください!もちろん、登録無料でいつでも解約可能ですのでご安心ください。

ご氏名
御社名
メールアドレス

TOPページへ

新着記事一覧へ