Column コラム

WEBメディアでの情報発信をする前に、気をつけるべき26のポイント

プロフィール

塩谷 舞
塩谷 舞

milieu編集長。1988年大阪・千里生まれ。京都市立芸術大学 美術学部 総合芸術学科卒業。大学時代にアートマガジンSHAKE ART!を創刊、展覧会のキュレーションやメディア運営を行う。2012年CINRA入社、WEBディレクター・PRを経て2015年からフリーランス。執筆・司会業などを行う。THE BAKE MAGAZINE編集長、DemoDay.Tokyoオーガナイザーなども兼任。Twitter  |  Instagram  |  Facebook

こんにちは!milieuというWEBメディアの運営をしている塩谷舞(@ciotan)と申します。ときには「WEB編集者」と呼ばれることもあります。

この「WEB編集者」って肩書き、ここ数年でよく耳にするようになりました。この求人サイトCINRA.JOBにも「WEB編集者」の募集がチラホラ見られます。

「わざわざWEBってつける必要あるの? 編集者、で良いのでは?」という声もあったりしますが、紙媒体1割、WEB9割くらいの割合で仕事をしていると、それぞれ気をくばることはかなり異なる……! と思っています。

「編集」という仕事はあまりにも幅が広く、私自身その片鱗しかつかめていないなぁとも思うのですが、今日は私がWEBで記事を書き、それを流通させていく上で大切にしているハウツーをまとめてお伝えしたいと思います!

私がお伝えできる一側面のみにはなりますが、

・オウンドメディアを始めたいけど、社内に知見がなくて……。
・フリーライターに仕事を頼みたいけど、どんな準備をすればいいかわからない。
・出版社で編集をしているけど、WEBのハウツーについても押さえておきたい!

 
といった方にとって、少しでもこの記事がお役に立てれば幸いです!

1.PC・スマホで読みやすいレイアウト
2.WEBの記事は、サムネイルが命!
3.Twitter、Facebook、LINE@での拡散方法
4.URL、ハッシュタグ、同時接続人数などの注意点
5.さいごに

1.PC・スマホで読みやすいレイアウト

WordファイルやGoogle docsなどで執筆することが多い原稿。いざWEBに掲載されたところ、こんな感じになっていたら……ちょっと読みにくいですよね。(画像は実際のものよりも、縮小表示されています……!)

image7

記事は、完成してからの流し込みが超重要!

書籍と違って、パソコンは目からの距離が遠いので、あまりにも改行が少ないと、読んでいる途中に迷子になってしまいます。

そこで、以下のように修正。

image2

・大胆に改行する
・重要なポイントを太字にする

だけで、ぐっと読みやすくなります。太字にしたり、文字色をつけたりするのは、やりすぎるとダサかったりもしますが、適宜良い塩梅でやってみるのはいかがでしょう。

とはいえ、ニュースメディアなどはあまり大きな改行をしませんので、「改行が多いのはブログ風」だと思われるかもしれません。


また、「PCで読みやすいから」と、かなり細かく改行する人もいるのですが……。

image1

スマホで見ると、以下のようになってしまいます。

image18

ブツブツと切れてしまって、少し読みにくいですよね。

・スマホで読みづらくなっていないか、実機でチェックする

ことが大切です!そもそも「スマホ対応してない……」というのは絶対にNG!

WEBメディアであれば、スマホ優先。開発予算が少なければ、スマホサイトを優先して作りましょう。(完全にBtoBな内容のものであれば別)


次にこちら。

image3

・中見出しのスタイルをつける
・発言者の名前を色分けする

なども、メリハリがついて読みやすくなります。発言者の名前は、服の色などによって色分けしていたりもします。


以下のように

image13

・顔写真を丸く切りぬいて載せる

という手法もありますが、これはオモシロ系の記事で多用されていますね。漫画感覚でサクサク読むことが出来ます。

ちなみに、WordPressで簡単に顔アイコンを入れられるプラグインもあります!


記事の最後や、注釈には……

image4

・情報を枠内に収める

こうすることで、読み手は「情報の塊」として捉えやすくなります。読み飛ばす人、情報だけを探している人、どちらのニーズにも応えやすいですね。


ほかには、以下の点なども気をつけています。

・手順や用語解説は、文章ではなく箇条書きで書いたほうがわかりやすい
  
・話のネタになっているものの写真をその場に差し込む
(笑ってるところで笑ってる写真、シリアスなところでシリアスな表情の写真などにすれば、臨場感が伝わりやすい)

・PCだと横660pxぐらいが限界で、それ以上横に長いとすごく読みづらい
 
・画像は基本横長のものを掲載。縦長画像は、スマホだと画面を埋め尽くしてしまうので、記事として読みづらくなる。

・記事からのリンクは基本すべて新規タブ(新規ウィンドウ)に飛ばす
(記事を読んでいる途中での離脱を防ぐため)

・YouTubeやVimeoやInstagramの埋め込みが、スマホで崩れていないかチェック

細かくは色々ありますが、なによりも記事の公開・拡散前の、スマホでのチェックが大切です!

2.WEBの記事は、サムネイルが命!

公開後「SNSで拡散しよう!」という前に、必ずチェックして欲しいこと。

・TwitterとFacebookで、サムネイル、タイトルがしっかり表示されるか?

という点です。

こちらは、サムネイルが正しく設定されていない例。

image16
image6

サムネイルが表示されるかどうかは、

・Facebook シェアデバッガー

・Twitter Card validator

で確認することが出来ます。もし、公開すぐのURLである場合は、設定が浸透していない場合があるので、上記サイトで何度も「もう一度スクレイビング」「Preview Card」ボタンをクリックしまくると、設定したサムネイル画像がきちんと表示されます。

正しくサムネイルが設定されていれば、FacebookやTwitterのタイムラインでこのように表示されます。

image17

image14

サムネイルの設定方法は、WEBメディアのシステムによってそれぞれなので深く言及しませんが、WordPressだと「All in One SEO Pack」というプラグインでSNS用のサムネイルを設定することが出来ます。

WEBメディアの一覧ページに表示する画像と、SNSに表示させる画像を、それぞれ分けて設定できるのもすごく便利です。

前者はオシャレな画像、後者は引きの強い画像(顔のアップや、美味しそうな食べ物など)に設定すれば、SNSでのエンゲージを高めつつ、WEBメディア上のトンマナを揃えることが出来ます。

また、Twitterで表示されるサムネイル(Twitterカード)は、2種類の大きさがあります。

image10

・Twitterカードは「要約の大きい画像」を選択

しましょう。タイムライン上で大きなサムネイルが表示させるため、存在感が抜群です。(一部のTwitterクライアントではサムネイルは表示されませんが……。)

さて、次のページからはSNSでの拡散方法について説明します!

Next Page
3.Twitter、Facebook、LINE@での拡散方法

バックナンバー