このページの本文へ

2007年11月22日 09時00分更新

コンテンツをパワーアップ!Webサイト編集術

第4回 

いちばんの教材は売れている雑誌(1)――記事をつくる要素とは?!

文● 朝日奈 ゆか/株式会社ユンブル 代表取締役

  • はてなブックマークに登録
  • del.icio.usに登録
  • livedoorクリップに登録
  • Buzzurlに登録
  • StumbleUponに登録
  • Google Bookmarksに登録
  • Facebookでシェア
  • Yahoo!ブックマークに登録
  • お気に入りに登録
  • 本文印刷

記事をつくるための要素とは何か

 紙に書きつづった読者へのメッセージの数々。第3回では、「誰に」「何を」伝えるのかを整理するために、まずは伝えたいことを紙に書き出そう、といいました。すべてはそこからはじまると。
 この第一段階をクリアしたら、次にWebサイトのページをつくりあげていくノウハウを考えます。それには、文章のほか、記事を構成する要素を具体的に考える必要があります。編集力がモノをいう場面です。
 ここでは、市販の雑誌がとても役に立ちます。あなたのWebサイトの読者とターゲットが同じ雑誌を選び、まずはその構成を研究してください。

 雑誌の記事や広告ページを構成している要素は、大きく分けて次の4つです。
Ⅰ.文章
Ⅱ.写真
Ⅲ.イラスト、ロゴなどの図版
Ⅳ.ボタン、バナーを含むデザイン

 これらの要素はどのように組み合わさっているのでしょうか。そう、これらのすべてを上手く結び付けて誌面化するのが編集の技術なのです。日ごろは何気なく見ている新聞や雑誌の記事、広告も、作り手の立場としてお手本にすると編集の何たるかが少し見えてきます。
 各要素をさらに細かく分類すると、以下のようになります。

Ⅰ.文章
1.キャッチコピー…大見出しになるコピー。簡潔にいちばんいいたいことを表現する。読者の目をひき、一気にWebサイト全般や商品への興味を呼び起こす役割。大きな文字で色も目立たせる。
2.リードもしくはボディコピー…キャッチコピーに説明を加え、本文へと読者の目を促す。
3.小見出し…本文内の見出し。本文より目立つ大きさと色で書く。
4.本文…記事のテーマや商品を紹介する文。いちばんの長文になる。
5.価格など情報データ…記事のテーマや商品について、読者にとって必要不可欠なデータを記す。住所、電話、営業時間、URL、注文方法など。

Ⅱ.写真
1.写真…文章に添えると、読者により具体的な情報をあたえることになる。
2.キャプション…写真を説明する簡潔な文章。読者の注目率が高い。素人制作のWebサイトでは抜けていることが多いが、プロの編集者はこれを重要視して必ず入れる。価格など情報データを併記することが多い。

Ⅲ.イラスト、ロゴなどの図版
1.ロゴ…露出することで会社やブランドの価値を高める。
2.イラスト…写真同様、ページのテーマや商品をわかりやすく伝える。
3.グラフやデータ…写真、イラストに同じ。読者に情報の信ぴょう性を伝えるために有効。

Ⅳ.デザイン
1.バナー…ロゴに近い役割をはたす。
2.ボタン…クリックしやすいデザインがポイント。
3.アートディレクション…Webサイトや雑誌記事の全体をトータルにデザインする。各ページの書体や色目の決定、バランスを最重視する。
4.デザイン、レイアウト(コーディング)…各ページをデザインし、レイアウトを行う。

 プロの編集者は、これらの要素を組み合わせることで各要素がより良いものになるようにと考えて記事を作成します。写真単体で掲載するよりも、キャプションを添えることでより写真が生える。イラストを入れることで文章がより生き生きとしてくる。読者が興味を持って読んでくれるように、渾身の知恵をふりしぼって構成していきます。

 上の記事は若い女性を読者対象とする雑誌用に当社が制作したものです。みなさんはこの記事を読むにあたって、真っ先にどこに目が行きますか? おそらく、右ページの野菜の集合写真(メイン写真)でしょう。次に目線が移るのは、同ページの「色を食べて元気になる!!」というキャッチコピーではないでしょうか。

 ではここで問題です。
 この記事をつくりにあたり、我々が読者にいちばん見せたかった(読ませたかった)ところはどの部分だと思いますか。すべてはその部分を見せるために、他の要素は存在するのです。
 解答と解説は次回に述べます!

著者プロフィール

名前 朝日奈 ゆか info_email_01[アットマーク]yumble.com
※著者に直接問い合わせをする際は、お名前、会社名、サイトURLなどを明記してください。
会社 株式会社ユンブル
サイト http://www.yumble.com/

カテゴリートップへ

この連載の記事

ASCII.jp RSS2.0 配信中

Webディレクター江口明日香が行く

Web Professional 連載記事一覧

Norton Internet Security 2010

Norton Internet Security 2010

シマンテック

5429円~

34%OFF!!

やよいの青色申告 10

やよいの青色申告 10

弥生

7721円~

26%OFF!!

Norton Internet Security 2010 ニコニコパック

Norton Internet Security 2010 ニ…

シマンテック

5462円~

34%OFF!!

一太郎2010 [25周年記念パック] バージョンアップ版

一太郎2010 [25周年記念パック] バージョンアップ版

ジャストシステム

6945円~

17%OFF!!

Adobe Photoshop Elements 8 日本語版 Windows版

Adobe Photoshop Elements 8 日本語版…

アドビシステムズ

1万1340円~

22%OFF!!

JUST Suite 2010 [一太郎25周年記念パック] 特別バージョンアップ版

JUST Suite 2010 [一太郎25周年記念パック] …

ジャストシステム

1万2980円~

18%OFF!!

Age of Empires III : Complete Collection

Age of Empires III : Complete C…

マイクロソフト

7890円~

20%OFF!!

一太郎2010 [25周年記念パック] アカデミック版

一太郎2010 [25周年記念パック] アカデミック版

ジャストシステム

6973円~

17%OFF!!

Office Standard 2007 アップグレード Office 20周年記念 優待パッケージ

Office Standard 2007 アップグレード Of…

マイクロソフト

1万4299円~

20%OFF!!

Norton AntiVirus 2010

Norton AntiVirus 2010

シマンテック

4194円~

32%OFF!!

Amazon.co.jp