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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

・情報を枠内に収める

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

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

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

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

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

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

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

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

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

という点です。

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

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

・Facebook シェアデバッガー

・Twitter Card validator

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

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

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

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

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

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

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

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

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

Next Page

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