デザイン

デザイン

コンテンツ・ファーストのデザイン方法を学ぶ【より良い製品やWebサイトを作る秘密】

588 views

読了時間 : 約2分56秒

新しいアプリを一からデザインしたり、新しい機能を開発したり、ランディングページを作成したりすることはwebサイトにおいてそれほど重要ではありません。デザインはまずコンテンツありきで始める必要があります。コンテンツを第一に考えることには多くの利点があり、最終的にはより良い製品やウェブサイトを作成することに繋がります。

 

コンテンツとはどういう意味でしょうか?私は主に「コピー」や「文章」のことを指しています。ただし、コンテンツには、CTA、ダウンロード、写真、動画、オーディオなども含まれます。しかし、焦点はそこに「書かれた」言葉にあるのです。私たちのテクノロジーの大半は読むことによって消費されているからです。

 

 

映画やビデオゲームのストーリーテラー

映画であれビデオゲームであれ、制作現場はストーリーのデザイナー/ライターを採用しています。彼らの仕事は、映画やゲームがどういうストーリーを基に進んでいくのかを考えることで、やるべきことの大半はプロジェクトの初期段階に行われます。どうしてでしょう?それは、映画やゲームを通して「何を伝えるのか」という大前提がなければ、その見た目や動きは何もデザインできないからです。

 

同じことがウェブやアプリのデザインにも当てはまります。エンドユーザーと共有したいストーリーを考えてみることで、構築しようとしているプロジェクトの全てをよりよく考えることができます。

 

 

コンテンツファーストのデザイン

デザインの中身を書き出していくことは、いくつかの点で役に立つでしょう。まず、ページが成功するために必要最小限のものは何ですか?ワイヤーフレームやピクセルを作成する前にコンテンツを精査すると、デザイナーとしてのその後のプロセスがぐっと楽になるでしょう。

 

コンテンツのあるべき姿を理解してからデザインに取り組むのとそうでないのとでは、仕事はまるで別次元の結果を生み出すでしょう。

コンテンツを作る際、自分で記述していくのか、他の誰かがあなたに提供したものを編集するのかという選択肢があります。自分で書く場合、コンテンツを設定するためにいくつかの一連の質問を想定していくことで、効率よく進められるでしょう。「顧客はどのような問題を抱えていますか?」「ユーザーはどんな結果を望んでいますか?」「なぜ訪問者はこのランディングページだけを見ただけで離脱するのですか?」といった質問です。ターゲットオーディエンスと話してみてください。 また、書き終えたものについては必ずフィードバックを得ることが大切です。

 

他の人がコンテンツを提供してくれた場合、上記のような自問自答を行い、まずその内容も見直してください。さらに、内容の一部が欠落していないか、すべてが理にかなっているか、別のページに分割されるべきコンテンツはないか、ブランディングとして記述のトーンは正しいかなどがチェックポイントです。

 

 

デザインプロセスのもう1つのステップ

素晴らしいコンテンツはすべてストーリーがあります。最終的にデザインの一部となるコンテンツにも同じことが言えます。

 

このプロジェクトやクライアントの「ストーリー」は何ですか?ユーザーや訪問者はどんな問題に直面していますか?顧客の理想的な結果などは何ですか?自身に問い続けましょう。

 

 

デザイン構造の始まり

あなたが何を伝えるべきか決めることができたら、ライティングとリライトを繰り返しましょう。個人的には、私はGoogle Docsを使います。共有したりコメントしたりするのが簡単だからです。

 

それがウェブサイト上にあると想像しつつ、コンテンツの作成を開始します。各ページまたは画面にはそれぞれ目的があります。そして、各ページ内はそれぞれセクションに分かれています。これらのセクションにもあらかじめ定義された目的があります。次に、これらのセクションに表示すべきことを見出しから順に書き出します。

 

 

設計プロセスに組み込む

あなたが大規模なチームの一員であれば、専任のコピーライターがいるかもしれません。できるだけ早い段階でプロジェクトに参加させてください。この記事の全体的なポイントは、コンテンツファーストのアプローチに慣れることです。小規模なプロジェクトで専任のコピーライターがいない場合や一人で行うプロジェクトであっても、目に見えるデザイン作業を始める前にコンテンツと向き合う作業を取り入れてください。

 

 

 

※本記事はCreating Better Design with Content First Approachを翻訳・再構成したものです。

 

 

▼こちらの記事もおすすめです!

 

おすすめ新着記事

おすすめタグ