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

プロフィール
塩谷 舞
塩谷 舞

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

『milieu』編集長を務める「しおたん」こと塩谷舞さんによる、WEBメディア編集の極意とは……?今日からすぐ使えるノウハウ満載のコラムです!

ウェブサイト情報
CINRAが提供する求人情報サービスはこちら

「CINRA JOB」はクリエイティブ業界の転職や新たなキャリアをサポートするプラットフォームです。デザイナーや編集者、プランナーなど魅力的な企業のクリエイティブ求人のほか、働き方をアップデートするヒントなど、さまざまなお役立ち情報をお届けします。

こんにちは!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@での拡散方法

1ページ目はこちら

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

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

image8

・記事上下についているSNSボタンが、PC、スマホで正しく挙動するか?

という点です。特にスマホで、これらのSNSボタンが不備なく動くかはしっかりチェックしましょう。

ツイートボタンを押した後にTwitterのログインを求められたりすると、それだけでシェアを諦めてしまう人もいたりするからです。

そもそもSNSボタンがついていない場合は、つけておくことをオススメします。拡散される数に明らかに違いが出ます。

オシャレな独自デザインのSNSボタンだと、読者が気づかないリスクもあるので、個人的にはデフォルトのSNSボタンが良いと思います。


また、ツイートボタンを押したときに、以下のようになっていたら最悪です。

image11

記事タイトルや、付随する情報が多すぎて、140文字を超えてしまっている!!!これだと、読者がわざわざ無駄な情報を4文字ぶん消してから投稿する…という必要があります。面倒すぎる。

・ツイートボタンを押したとき、読者が感想を書き込めるだけの文字数が残っているか

をチェックしておきましょう。また、一般的には

・タイトルは32文字くらいが良い

そうです。それ以上だと、SNSや検索結果で見切れてしまいがちです。


・Twitterでの情報発信

お次に、Twitterで拡散されやすい投稿について。

Twitterのタイムラインを見ている人は、ツイート冒頭の1行を見て、面白そうでなければ読み飛ばしてしまう場合もあります。

だから、以下のように……

・ツイートは最初の一行で、端的な意見を述べる

と、一瞬で判断しやすく、続きを読んでくれやすい気がします。

記事の中でもっともキャッチーな画像を投稿すれば、より説明が具体的になり、拡散に繋がる場合があります。詳しくはこちらに書いています!

ただ、記事の面白い部分をスクショした画像だけを投稿して、URLを掲載していないと、記事執筆者が泣きます。URLは必ず掲載しましょう!!


・Facebookでの情報発信

続いてはFacebookです。もしFacebookページを運営しているのであれば……

・Facebookページで最初に投稿し、その投稿を個人アカウントでシェアする

というのがオススメです。

というのも、Facebookページは、淡々とリンクを投稿していただけでは、なかなかリーチが伸びません。投稿しているにも関わらず、フォロワーのタイムラインに浮上してこないんです。

Facebookページの投稿を、個人アカウントからシェアしたり、いいね!を押したり、コメントしたり……積極的に反応することによって、投稿のリーチが上がっていくような気がしています。肌感ですが。

「ページへのいいね!」が数万以上あるのに、「投稿へのいいね!」が2、3しか付かない…というFacebookページもよくあります。

Facebookページは、手をかければかけるほどにリーチが上がる(気がする)ので、SNSを活発に使っている企業さんであれば、社員みんなでしっかりFacebookをシェアするのが良いかもしれません。

ただ、「個人アカウントでシェアしてください!」と社員に強要するのもナンセンスだと思うので、これは企業文化によりけり、ですね。


・LINE@での情報発信

最後に、LINE@について。

これは運営している方は少ないかもしれないのですが……上手に運営すれば、密なコミュニケーションを取れたり、本当のファンに一番に情報を提供できる素晴らしいサービスです。

ただ、このような投稿はNG。

image12

企業アカウントっぽい公式情報は、すぐにブロックされてしまいがち。プッシュ通知で来ると、うるさく感じてしまいますしね……。

LINEはもっともプライベートな空間で、みんなが友達や家族とのコミュニケーションに使っています。

そんな場所だからこそ、宣伝的にならずに、友達のように話しかけるほうが、変な違和感がありません。私も、LINE@のフォロワーの方と一番距離感が近く、よく個別に話したりもするのですが、一体どんな投稿をしているか……は、こちらからフォローして見てみてください(笑)。

・LINEはプライベートな空間。その空気を乱さないようなプッシュ通知を!

4.URL、ハッシュタグ、同時接続人数などの注意点

他にも色々あるのですが、共有できる範囲で箇条書きにさせていただきます!

・日本語URLは、環境によっては正しく表示されず、リンク切れを引き起こしやすい原因にもなります。アルファベットで表記した方がベター!

・タイトルに【連載】【後編】などと入れてしまうと、「前編読んでないし、読まないでいいや」と思われるリスクがあります。WEBの記事はバラ売りが基本。記事を読んでもらった上で、これまでの過去記事などもオススメするようにしましょう。

・話題のハッシュタグがあれば、タイトルに入れておくと、自然と同じ話題をしている方が見に来てくれたりもします。

・拡散前に、「サイトへの同時接続数は何人までか?」というところを、しっかり確認しておきましょう。サーバーダウンはものすごい機会損失。バズりそうなコンテンツを発表するときには、特に注意を。

5.さいごに……

この記事で書いたことを、簡単にまとめたチェックシートを作りました。

・WEB編集者の気をつけることチェックシート

ダウンロードして使っていただいたり、適宜必要な項目を増やしていただいたりして、ご自由にご活用ください!

また「他にもこんなことをチェックしたほうがいい!」 という方は、ぜひともTwitterで @ciotan まで教えてください。耳寄り情報は、こちらのチェックシートに加えさせていただく場合もあります。

本記事では、SEOのことなどが全くお伝え出来ておらず、申し訳ありません!そこはもっと詳しい方がいらっしゃるので、ぜひそんな方のブログなどをご参考にしてくださいませ…!(他力本願…!)

もちろん、ここに書いていることは「読んでもらえるための敷居を下げるハウツー」であって、内容が面白かったり、意義深ければ、こんな小技を使わなくてもたくさんシェアされることもあります。

ただ、とっても良い内容を書かれているのに、設計ミスによりあまり読まれていない……という記事を見かけると心底「もったいない!!」と思ってしまうので、今回CINRA.JOBさんにお願いしてこうしたハウツー記事を書かせてもらうことにしました。

「WEB編集者」の仕事は、他にも色々やるべき事があるかとは思うのですが、今回は応用しやすいように概論や感情論ではなく、現場のハウツーを中心にお伝えしました。

日頃は、もっと感情的にメディア「milieu」を運営しているので、よければそちらもぜひチェックしてみてくださいね。

・milieu(ミリュー)



フィードバック 1

新たな発見や感動を得ることはできましたか?

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

Special Feature

coe──未来世代のちいさな声から兆しをつくる

ダイバーシティーやインクルージョンという言葉が浸透し、SDGsなど社会課題の解決を目指す取り組みが進む。しかし、個人のちいさな声はどうしても取りこぼされてしまいがちだ。いまこの瞬間も、たくさんの子どもや若者たちが真剣な悩みやコンプレックス、生きづらさを抱えながら、毎日を生きている。

記事一覧へ

JOB