サラバ!? 愛しの縦写真

多くは語るまい。まずは、皆さんに違和感を味わっていただこう。

下の写真をご覧あれ。

大きな縦写真

いかがだろう。
こう思ったのではないだろうか。

写真デカッッ……!

と。

数多(あまた)あるWebメディアが日々、数多の記事をアップし続けているが、反面、見かけることが少なくなっているものがある。

それは、縦写真だ。

上の写真をご覧になって、「なんか写真デカいな」と感じてしまうのは、縦写真がWeb上の記事において見慣れないから、ではないだろうか。

Web上に無数に存在する“記事”において、縦の写真が使用されることは少ない。例えば今をときめくヨッピー氏が手がけたこちらの記事を見てみると……

34枚もの写真(丸抜きの人物写真は除く)が使用されているが、そのうち、縦の写真はゼロである。

これはごくごく一部の例証にすぎないが、なぜ縦の写真はWebメディア上でかくも存在感を後退させたのか。本稿ではその背景を考察してみたい。

で、お前は誰?

はい。はてな編集部の初瀬川と申します。雑誌編集を経てWebの世界に飛び込み、ごく最近はてな編集部に配属されたばかりのペーペーです。でも、わりとオッサンです。

オッサンだけどぺーぺー。涙しかない。

あ、ここからは「ですます調」にします。読む方も書く方も疲れちゃうもんね。

■ 縦写真が真価を発揮するとき

さて、Webでの使用頻度が低い縦写真ですが、雑誌においては今も昔も存在感抜群です。試しに、縦写真を雑誌のフォーマット上に置いてみましょう。

雑誌のフォーマットと縦写真

こちらは、A4判型の誌面を想定した、極めて基本的なレイアウトです。おそらく、一度は雑誌でこんなレイアウトを目にしたことがあるでしょう。

誌面の天地いっぱいに大胆に写真を置くことで迫力が演出され、かつ、実際の雑誌サイズで見てみれば被写体の造形や表情もよく見えます。

左ページのテキスト部分が同時に視界に入っていることも、重要なポイントです。写真とテキストという記事の基本的な情報要素に、視線を動かすだけでアクセスできるからです。

写真に興味を喚起され、テキストを読み込む。また、テキストを読んでいる途中でも、容易に写真に視線を戻せる。縦写真を使うことで、視線の「行ったり来たり」がしやすく、読み手はテンポよく情報を取得できるというわけです。

縦写真が雑誌というフォーマットの中で実に効果的であることが分かります。

■ Webで縦写真が使われない理由

では、なぜWeb記事において縦写真はあまり使われなくなったのでしょうか。その背景には、読む方向デバイスのサイズがあると考えています。

□ 読む方向、とは何か?

まず、読む方向について。多くのWeb記事が、上から下に向かって一方向に展開する、いわゆる「縦読み」の記事方式を採用しています。この縦読みの流れの中に縦写真があったらどうでしょう。

縦読みと縦写真

デバイスやブラウザのサイズにもよりますが、おそらく、上のように画面の大部分を写真が覆い尽くす状態になってしまうでしょう。繰り返しますが、記事の基本構成要素は、写真とテキストです。画面に写真しか見えていないという状態は、この基本構成要素が分断されてしまっている、つまり、情報を取得しにくい状態なのです。一方、これが横写真だったら……

縦読みと横写真

写真が見えつつ、その前後のテキストも画面内に収まっています。視覚的にテキストを追いやすく、かつ写真の情報もスムーズに取得できるでしょう。横写真を使用することで、記事内で述べられている文脈を把握しやすい、いわば読みやすい記事となるのです。

読みやすい、とは記事が持つべき極めて基本的な性能です。縦読みという記事フォーマットの中で、横写真が隆盛するのは、もはや必然かもしれません。

□ 小さい画面に大きい写真、あなたはどう思う?

もう一つ、皆さんが記事を読むデバイスのサイズも無関係ではありません。現在、記事が読まれる主戦場はスマホです。おそらく、多くのWebメディアで流入元の過半数はPCではなくスマホでしょう。

ひと昔前に比べれば、スマホの画面は大型化しましたが、それでも何かを読むのには小さめの画面サイズです。そもそも、縦読みという記事形式も携帯電話・スマートフォンでの読みやすさが考慮された形式です。この小さい画面に縦写真を使ってしまうと……もうお分かりでしょう。

小さい画面に縦写真

一番最初にご覧いただいた写真と同じように、画面はほぼ写真だけ、という状態になってしまいます。記事を読む、という心構えで訪問してくれた読者の方にとって、画面を縦写真が専有する状態は、写真が強すぎるのです。

上の「読む方向」のパートでも述べましたが、記事とは、写真とテキストの両者が適度に目に入っている状態が望ましいと僕は考えています。それは読みやすさの追求であると同時に、読者の方に対し、写真で圧迫感を与えすぎないためでもあるからです。

□ 縦の写真の強さを利用できる場合

一方で、縦写真を使い写真が強すぎる状態をうまく利用するWeb記事があります。ヘアスタイルカタログやファッションスナップといった記事がそれです。これは記事の中で最も重要な要素、つまりスタイルサンプルがよく見えるように、画面いっぱいに縦写真を配置している、と解釈できます。

読者の方も、この場合、記事を読むのではなく見る心構えで訪問していると推測できます。つまり読者の方が求める情報の優先度は「写真>テキスト」であるといえます。ビジュアル情報をより鮮明に見せる縦写真は、この場合、非常に有効といえます。

□ 記事の天地を圧縮したいのよ。編集者は

さらに追加で一つ(まだあんのかよ)。これは読みやすさといった要素は関係なく、完全に作り手側の事情です。

編集者の多くは、記事の天地の長さをできるだけ短くしたいと考えているのです。そうだよね。少なくとも僕はそうです。

なぜなら、記事の天地の長さは読了率、「記事を最後まで読んでくれる読者の方の数」に密接に関わっているからです。

スマホ越しに出会える読者の方はヒマではありません。記事が面白くない、あるいは読むのが面倒な記事は一瞬で離脱されてしまいます。

せっかく作った記事ですから、当然、作り手は最後まで読んでほしいと考えています。そして最後まで読んでもらうための工夫として、少しでも読者の方の面倒事を減らす、つまり、スクロール数を少なくするべく記事の天地を圧縮するのです。

天地を圧縮する上で、縦写真は言うまでもなく使いにくい素材です。試しに、縦写真と横写真を同じ数だけ配置して、記事の天地にどのくらいの差が出るのかを見てみましょう。

記事の天地の長さにどのくらいの差が出るのか

上の画像は両者ともに使用している写真の枚数、そしてテキストの文字数も共通です。しかし、写真の縦横だけでこれだけ天地の長さに差が出るのです。どちらがより少ないスクロールで記事の最後までたどり着けるかは、もはや語るまでもないでしょう。

こうして、編集者は横写真を使い、ときにテキストを調整し記事の天地の長さを圧縮するのです。

この調整技法の体系を編集者は、ALC(Article Length Control:記事長操作)と呼んでいます。うそです。いま考えました。

とにかく、記事の天地の長さが読了に関係するWebにおいては、編集者は横写真を使わざるを得ない、いや、縦写真を使いたくても使えない、という事情があるのです。

■ ロクロ写真は、横写真時代の申し子

Web記事における横写真の隆盛は、面白い副産物を生んだと僕は考えています。それは、俗に言われる「ロクロ写真」の流行です。ロクロ写真とは下のような写真です。

ロクロ写真

取材対象者が、手振りとともに何かを語ってくれているシーンです。この手振りがまるでロクロを回しているようだ、ということからロクロ写真と呼ばれるようになったのでしょう。

確かに、Web記事を読んでいるとこうした写真をよく見かけます。僕もインタビュー記事を編集していると、ついついロクロ写真を使いたくなる衝動にかられます。

なぜ横写真が多いと、ロクロ写真も増えるのか。それは横写真における、インタビューカットの構図に起因していると推測します。

□ 人体と写真の縦横のカンケイ

言うまでもありませんが、人体は縦長です。縦長の被写体を写真内にいい塩梅に収めるには、基本的に縦の構図を選択するのが自然です。下の縦横の比較画像をご覧ください。

縦横の比較画像

いかがでしょう。こちらは同じ被写体を、ほぼ同じ角度から撮影したものです。縦写真はいい具合に被写体が収まっていますが、横写真の場合、余白が大きすぎて安定感に欠ける写真に感じます。

もちろん、被写体のポーズを調整したり、顔などにクローズアップすることで、人体を横写真内にいい具合に収めることは可能でしょう。しかし、上半身全体を収めたプレーンなインタビューカットを撮影する上で、直立しただけの人体では面積不足なのです。

この面積不足を補うものとして、ロクロポーズが重用された、と僕は考えています。これも、比較写真を見てみましょう。

ろくろポーズの比較画像

両写真はほぼ同じ角度から撮影を行っています。が、ロクロ写真の方が、写真内に占める被写体の割合が多く、安定感のある写真に感じられます。

少しでもいい写真を使いたい、という作り手の心理を考慮した際、ロクロありとなし、どちらが選ばれる可能性が高いかは自明でしょう。

インタビュー記事を作る

横写真しか使えない

そのなかでいい写真を使いたい

ロクロ写真を選ぶ

横写真の隆盛は、このような連鎖反応を起し、同時にロクロ写真の隆盛を生んだ。僕はこう考えるのです。

■ げに奥深き、記事作りの世界

紙からWebへ、そしてスマホへ。記事が読まれる環境は、すさまじいスピードで変化しており、それに合わせて記事のフォーマットも変化してきました。変化の過程で、横写真の隆盛という最適化が行われ、その中でさらにロクロ写真というトレンドが生まれる。記事を作る、という行為を考察すると、なんとも深遠な世界が見えてきます。

写真とテキストだけではありません。SNS、動画、VR、ARなどなど、記事作りに関わる要素はさらに多様化しています。こうした世界で「何をどうやって編んでいく」か。先のことを考えると、まだまだ編集者という仕事にワクワクするのです。ぺーぺーのオッサンですが。

はてなでは、1枚の写真にこだわり、さらに多様なWebの世界を編んでみたい編集者を募集しています。

hatenacorp.jp

「しょうゆ」、ひらがなで書くか? 漢字で書くか? 表記の話

こんにちは、はてな編集部の谷口です。このブログは、はてなで働く編集者が1本ずつ順番に記事を書いているのですが、私が前回記事を公開したのは約1年前。社会人になってからの1年って恐ろしく早いですね……。

さて今回、私がこの記事で取り上げるのは「表記」の話。ひょうき。編集者やライターをはじめ、文章を書いたりまとめたりする人にとって避けては通れない話題だと思いますが、それ以外の方は、あまり気にされたことがないかもしれません。

でも「表記」って「読みやすい文章」には欠かせない要素なんです。

どんな場面においても、読みやすい文章は「正義」

例えば。

わたしがへやをのぞいたとき、なぜだかわからないが、かのじょはふたつのたまねぎにしょうがじょうゆをかけてたべていた。

こういう一文があったとき、あなたは、どの語句を「漢字」にして、どの語句を「ひらがな」や「カタカナ」「数字」にしますか?

私が部屋を覗いた時、何故だか分からないが、彼女は二つのタマネギに生姜醤油を掛けて食べていた。

と書く方もいれば、

私が部屋をのぞいたとき、なぜだかわからないが、彼女は2つの玉ねぎにショウガ醤油をかけて食べていた。

と書く方もいると思います。

でも、「覗」という漢字、認識しづらくないですか*1? 「なぜだかわからないが」のところ、ひらがなが連続していて読みづらくないですか? 「生姜醤油」は漢字が続く一方で「ショウガ醤油」は文字のバランスがあべこべな気がしませんか?

……と、文章一つとっても、語句を「漢字」「ひらがな」「カタカナ」(そして英数字)のどれで表記するかは、読みやすさに直結します。

自分以外の誰かに読んでほしい文章を書くとき、読みやすさは正義です。読みやすい文章は、書き手の意図や考えを誤解なく伝えるだけでなく、洗練された印象を与えることができ、読み手のストレスも軽減できます。

そして「文章を書く」ということは、勉強でも、仕事でも、プライベートでも、なかなか避けては通れない行為です。私たちのような編集者でなくとも、それは同じだと思います。

メールを書いて、送信ボタンを押す前。日本語の意味や漢字の変換、句読点の位置が適切であるかどうかをチェックするときに、あわせて「この表記で、読みやすいかな?」と立ち止まってみると、もっと読みやすい文章になるはずです。

言葉で伝えるために、表記を統一する

「文章のクオリティーをもっと上げたい!」という場合は、語句の表記を見直すだけでなく、表記統一を意識してみるのはどうでしょうか。表記統一とは、読んで字のごとく「表記を統一」することです。

元々」と「もともと」。「気付く」と「気づく」。「是非」と「ぜひ」。

語句ごとに漢字にするか、ひらがなにするかが統一されていると、文章全体にまとまりが生まれます。逆に表記がバラバラだと、読みづらかったり、雑な印象を与えてしまいます。書き手自身の価値を損なってしまうことにもつながりかねません。

統一する範囲は、媒体単位、サイト単位、記事単位……いろんな考え方があると思うので、省略。はてなでやっている編集のお仕事では、記事単位で統一するケースが多いです(媒体で統一することもあります)。

とはいえ、文章を生業にしていたり、文章を扱う仕事をしている人以外には「必ずしも必要」なことではないと思います。私も、例えば後輩や同僚から「なんで表記統一が必要なんですか?」と真正面から質問されると、「そういう世界だから……」としか答えようがない気がします。

私たちの仕事は、言葉を大切にし、言葉で伝えていくことなので、少しでも「こちらのほうが読みやすそう」「こちらのほうが伝わりやすそう」ということを選んでいく必要があり、その方法の一つが「表記統一」なのかなと、何となく思っていたりします。

この世界には「用語集」というものがある

というわけで私たちは「そういう世界」にいるため、表記に迷ったときの拠り所を決めていたりします。

それがこちら。

毎日新聞、朝日新聞、読売新聞など、それぞれの新聞社による「自社の表記ルール」をまとめた用語集で、新聞社以外でも多くのメディアが使用しています。ちなみに、はてなでは共同通信社の「記者ハンドブック 新聞用字用語集」を利用しています。基本的にはこちらに掲載されている表記にのっとり記事を編集しています。

記者ハンドブック 第13版 新聞用字用語集

記者ハンドブック 第13版 新聞用字用語集

なぜ共同通信社のものを使っているのか……に関しては、はてなに本格的な編集部署ができたときに、「用語集を使いましょう」と決めた人が愛用していたから、です。中途採用で入社した編集者には「毎日新聞のものを使っていました」という人もいます。

表記に迷ったときは、辞書のようにこの用語集を開いています。文章の基本的な書き方やルール、カタカナ表記についてもまとまっており、とっても便利。じっくり読むと、なかなかの時間泥棒です。

ただ、はてなではブロガーさんに寄稿してもらうことも多いため、書き手のこだわりや文章の雰囲気に合わせて柔軟に表記を変えることもしばしば*2。「柔らかい」記事はひらがなを多用しますし、「堅い記事」はやはり漢字にすることが多いです。「はてなニュース」などの自社媒体では、ほぼ用語集に準拠しています。

はてな編集者のおこだわり〜「開く」「閉じる」編〜

ここから先は、表記に一家言ある人向けとなりますが、語句をひらがなで表記することを「開く」、漢字で表記することを「閉じる」と言います。

軽い気持ちで、はてなで働く編集者たちに「表記の開く、閉じるにこだわり、何かありますか?」と聞いたところ、それぞれの“おこだわり”が炸裂しましたので、以下に一部を紹介したいと思います。

  • こと/事
    • 記者ハンドブックには「具体的な事柄に関しては閉じる」とありますが、僕個人としては、常に開きたい。フルオープンでいきたい。なぜなら、「こ」と「と」の曲線基調の字面がかわいいから。一方、重ための原稿ではそのキュートな字面が仇となる……。原稿でも登場頻度が非常に高い言葉なので、毎度悶絶します。
      • 30代男性編集者
  • しょうが醤油
    • 記者ハンドブックにそのまま合わせると「しょうが」+「しょうゆ」で「しょうがじょうゆ」になるが、ひらがな続きで読みにくい上に、一見何か分からなくてイマイチ。「生姜醤油」はちょっと漢字すぎるので「しょうが醤油」がほど良さそう。だし醤油、わさび醤油なども同様。
      • 30代女性編集者
  • 惹かれる
    • 表外音訓のため「引く/引かれる」になってしまうのですが、「素敵な人に引かれる」だと引っ張り回されている感じになりませんか……?
      • 40代女性編集者
  • 玉葱 /タマネギ/玉ねぎ(ネギ)
    • ハンドブックでは「タマネギ」ですが(市況・料理記事では「玉ネギ」も使うとあります)、全てカタカナはできるだけ避けたい。「タマネギ」だと玉っぽさが足りない。「玉ネギ」でもなく「玉ねぎ」表記が一番好き。
      • 20代女性編集者
    • 記者ハンドブックでは開くとあるが、漢字のほうが巧妙さが感じられる。
      • 30代男性編集者
  • のぞく
    • 「除く」は閉じるなのに「覗く」は開く指定。常用外漢字とはいえ、アイデンティティーの崩壊。わたしが「覗く」だったら待遇の差に泣きそう。
      • 30代女性編集者


……はい。「そういう世界」にいる私たちには、人から「そんなことにこだわる必要、ある……?」と思われるに違いない、「表記のこだわり」があるのです……。

ここまでこだわる必要はありませんが、次に文章を書くとき、表記も意識してみてはどうでしょうか。きっと、読みやすさが変わると思います。


はてなでは、用語集を片手にこの記事の表記をチェックしてくれる編集者を募集しております。

その「おこだわり」、俺にもくれよ!!(1) (ワイドKC モーニング)

その「おこだわり」、俺にもくれよ!!(1) (ワイドKC モーニング)

*1:ちなみに、「覗」は常用外漢字です

*2:記者ハンドブックにも「社外執筆者の署名原稿については(中略)筆者が強く希望する場合は例外的表記を認める」とあります

新卒Web編集者が「知っていてよかった」と実感した、HTMLとCSSの基礎

こんにちは、はてな編集部の川原です。大学卒業後、新卒でWebポータルサイトの編集職としてキャリアをスタートさせ、はてなには2016年12月に中途入社しました。現在は、主に企業のオウンドメディア編集に携わっています。

いきなり昔語りとなってしまい恐縮ですが、私自身のWebスキルはというと、「ふみコミュニティ」と「0574 Web Site Ranking」がランキングサイトとして全盛期だったころ(これで大体の年齢がバレる)から、個人でWebサイトを作成している程度。始めた当時は「ふみコミュ」も「0574」も、素材配布サイトや画像加工サイト*1で活気づいていたな……。無料レンタルサーバーが人気すぎて、フリーアドレスだと登録できなかったりする、いい時代でしたね。私は「たださぁば」「忍者ツールズ」「めがね部」あたりを利用し、素材サイトは「フランクなソザイ」などにお世話になってました。

徐々に有料のレンタルサーバーを使用し、自分でデザインを組んで画像を作成したり、トレンドのHTMLデザインに挑戦したりするようになりましたが、あくまで素人のお遊び程度で、仕事に生かせるとは毛ほども思っていませんでした。

ですが、当時新卒で配属されたのは、更新に力を入れ始めたばかりの女性向け総合サイトの編集部。入社した段階では編集部内も「HTMLやCSSのことはそこまで分からない」という人が多く、「あれ? 趣味レベルでやっていたことでもWeb編集者として働く上で意外に役に立つ?」と感じることがありましたし、現在でも「Webサイトを作っていてよかったな」と感じることがあります。

そこで今回は、Web編集の業務をしていく上で「本当に超絶基礎的なことだけど知っていてよかった」と感じたHTMLとCSSの話をしたいと思います。

テキスト装飾は、色&太字強調するだけでもメリハリがつく

Web編集者が一番よく使うCSSプロパティは、テキスト装飾にまつわることではないでしょうか。中でも、よく使用するのは「テキストの色を変える」「テキストを太字にする」だと思います。この場合は、<span>タグを使用して、対象のテキストを囲むようにすることで変化します。<span>では前後に改行が入らないので、主に文章の一部に装飾などを施したいときに使用します。

たとえば、Web記事でよく見かける以下のような会話調の形式。

Aさん こんにちは
Bさん こんにちは
Aさん さようなら
Bさん さようなら

これは、「Aさん」「Bさん」部分のテキストの色を変える設定をしています。表示形式として、次のようなものになります。

<span style="color:テキストの色指定;">Aさん</span>
<span style="color:テキストの色指定;">Aさん</span>

また、テキストを太字強調させる<b>も手軽に使えて便利なHTMLタグのひとつ。テキストの色を変える&太字強調させるだけでもかなり雰囲気が変わります。

<b><span style="テキストの色">Aさん</span></b> さようなら

差は以下のようになります。

Aさん さようなら(テキストの色のみ変化)
Aさん さようなら(テキストの色変化と太字強調)

太字強調に関しては、<b>を使わず、<span>〜</span>要素の中に入れ込むこともできます。その際に使用するのはfont-weight プロパティ。一般的にはfont-weight:bold; を使うんだな、と覚えておけば困ることはありません。設定の仕方は以下の通り。

<span style="color:テキストの色; font-weight:bold;">Aさん</span> さようなら

設定すると、<b>を使用したときと同じ見た目になります。

HTMLに直接書き込むのではなく、head部分にstyleでCSSを記入したり、外部ファイルから呼び出したりすれば、HTML画面上では以下のようにスッキリ見せることができます。

<span class="asan">Aさん</span> こんにちは
<span class="bsan">Bさん</span> こんにちは
<span class="asan">Aさん</span> さようなら
<span class="bsan">Bさん</span> さようなら

ただし、Web編集者の場合、WebサイトのCSSファイルをいじれず、CMSのテキストエリア内だけでHTMLに直接スタイル属性を指定していろいろ設定することが多いと思います。少し高度になることもありますし、具体的なやり方については、この記事では触れないでおこうと思います。

テキストの色にもこだわりを

CSSとは少し別の話題にはなりますが、CMSの編集画面などでは、デフォルトでテキストの色パターンが用意されていることも多いはず。

もちろんこれらを活用しても問題はないのですが、せっかくなら「こだわりの色」を選んでみてもいいのでは、と思います。テキストの色を指定するカラーコードを変えるだけなので簡単です。

ちなみに、私はカラーコードを選ぶ際、次のサイトをよく利用していました。

www.colordic.org

Webサイトのデザインや記事のテイストによって、少し色を変えるだけでもかなり雰囲気が変わります。私は、 #ff3366 #cc0033 #abced8#e95464などがお気に入りで、よく使用していました。ただし、テキストの色を変えるときは、背景色など、記事全体のバランスを加味した上で変えるようにしたほうがよいです。また、閲覧環境によって、色の見え方が若干変化することもあるので、軽微な色変化をする場合は、差がきちんと出ているのか、公開前にテストするなどしておいたほうが賢明です。

img タグに関連する話

テキスト装飾と同じくらい、Web編集者ならほぼ必ず行うこととして、「画像の貼り付け」があると思います。画像をWeb上に掲載させるとき、HTMLタグは<img~を使用します。が、ただデフォルトで貼りつけるだけではなく「こうやって貼りたい」と思うこともあるはずです。私が個人的に知っていてよかったな、と感じたCSSプロパティはvertical-alignfloatoverflowの3つです。

vertical-alignは「縦揃え」の指定ができる

カピバラさん

改行せず画像の横にテキストを続けて掲載する場合、何も設定しないと画像の下部分からテキストが表示されてしまうのですが、このvertical-alignを使うことで、上、中央、下などを指定することができます。

たとえば、画像の横に上揃えでテキストを表示させたい、というときはvertical-align:top;で設定します。

カピバラさん

こんな感じ。中央に表示させたい、というときはvertical-align:middle;で設定します。

ただし、vertical-alignは、インライン要素*2に適用されるプロパティのため、pdivに設定しようと思っても適用外になります。また、画像とテキストが一文として捉えられてしまうため、大きな画像の隣に長いテキストを表示させたいという場合だと、以下の画像+テキストのように、少し不恰好な表示になってしまいます。

カピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさん(テキストが画像の下にいってしまう。Wordファイルに例えると挿入した画像位置の設定が「行内」になっている状況です)

floatプロパティとoverflowプロパティ

もし「画像にテキストを回り込ませたい」という場合は、floatを使うことで表示させられます。また、overflowを使えば、テキストを片側に表示しつつも、画像下に回り込まない設定をすることもできます。

floatプロパティを使用した場合

カピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさん(画像の横、画像下に回り込みます)

float+overflowを使用した場合

カピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさんカピバラさん(画像の横に回り込んでいるけれど、画像下に回り込まず、そのまま下に続いていく設定になります)

ただし、floatは、回り込みを解除するためのプロパティを設定しなければいけないなど、少しやっかい(個人的にはCSSかじり始めて最初につまづいたプロパティです)だと思うので、気になる方は「float やり方」とかで調べてみるといいと思います……!(解説を諦めました)

画像の横にテキストを表示させる方法については、ほかにもdldtddで横並びにしたほうがやりやすい、という場合もあります。

上に表示したような会話調の記事(アイコン画像+横にテキストで、記事が進む)では、floatではなくdldtddを使用しているパターンもありそう。

画像貼り付け時の設定は、「いろんなやり方がある」ということが分かっていれば、いざ設定するときに、選択肢の幅が広がると思います。

marginとpaddingの使い分け

margin

margin対象要素の外側の余白をどのくらいあけるか、padding要素の内側の余白をどのくらいあけるのか、という違いがあります。Webで記事を作成する際には、「画像とテキストの間に余白をあけたい」「divで囲った部分に、バランスよくテキストを入れたい」というときに、使用することが多いプロパティだと思います。

divで囲った部分に、バランスよくテキストを入れたい

何もしていないと、以下のような見え方になります。

囲いの外

この囲っている部分は、marginpaddingも設定していません。そのため、テキストが枠内めいっぱいに表示されて、窮屈な印象に見えてしまいます

囲いの外も窮屈

paddingだけ設定して、marginは設定しないと、以下のような見え方になります。

囲いの外

この囲っている部分は、padding:10px;のみ設定しています。枠内にゆとりがあるので、何も設定していないものに比べてだいぶ見やすくなっているはず

囲いの外はまだ窮屈

marginpaddingも設定すると、こんな感じ。

囲いの外

この囲っている部分は、divにstyle指定でmargin:10px;padding:10px;をそれぞれ設定しています。要素の「外側」と「内側」にそれぞれ余白があいているのが分かると思います。ちなみにmarginの余白部分には背景色は反映されません

囲いの外にも余裕が!

好みは人それぞれなので「この表示が正解」というのはありませんが、記事内で独立させて表示させたいブロックがある場合は、ぜひdivと組み合わせて使ってみてはいかがでしょうか。簡単にできるので、HTML・CSS初心者も覚えておきたい要素です。

画像とテキストの間に余白を入れたい

ブロック要素*3divpといった、ひとかたまりとなるもの)に使用することが多いmarginpaddingですが、インライン要素*4aspanなど、文章の一部として扱われるもの)の中で、imgはブロック要素と同じ様にmarginpaddingを設定することが多いプロパティです。


普通に設定していると、「画像とテキストの間がつまっているな」と思うこともあると思います(上記画像とこのテキスト)。

そんなときは、marginで、画像のまわりに余白を入れてみるといい感じになることも。


margin-bottom:20px;imgタグに設定して、いい感じの空白があきました。

ほかにもやり方は複数あるので(対象のp部分にCSSでmarginをかける、というのもアリです)、自分にとって「やりやすい」設定方法を見つけると、記事制作作業がはかどるはずです。

ちなみに私は、divタグでimgを囲うやり方がCMS編集画面などで記事を投稿するときは楽かな、と感じました。

imgを囲っているdivmargin-bottom:30px;を設定しました。

marginとpaddingは上下左右バラバラでも設定できる

marginpaddingは、上右下左まとめて指定するだけでなく、それぞれ異なる値を設定することも可能です。HTMLとCSSを覚えたてのころは、この指定方法があることを知らなかったので、margin-topmargin-bottommargin-rightmargin-leftを一つずつ設定していました……。あと、いつまで経っても「値を3つ指定」「値を4つ指定」のときの順番がこんがらがります。

設定のやり方 反映される値
値を1つ指定 「上下左右」すべて同じ値のmargin(padding)が設定される
値を2つ指定 「上下」「左右」が同じ値のmargin(padding)が設定される(設定は記述順)
値を3つ指定 「上」「左右」「下」のmargin(padding)が設定される(設定は記述順)
値を4つ指定 「上」「右」「下」「左」のmargin(padding)が設定される(設定は記述順)

また、上の部分で少し触れていますが、margin-top:数値;といった形で設定することも可能です。paddingも同様です。

プロパティ 使いみち
margin-top 上のマージンを指定する
margin-bottom 下のマージンを指定する
margin-right 右のマージンを指定する
margin-left 左のマージンを指定する

「他の値は0で、一箇所だけmarginpadding)を設定させたい」というときは、この個別指定のプロパティを使用すると、間違えにくくなります。

余白の数値設定はpx? em?

いざ余白の数値を設定しようと思ったとき、「1px」や「1em」といった単語を見て、「どれを使えばいい?」と悩むと思います。私がmarginpaddingを覚え始めたころはpx(ピクセル単位)全盛期だった記憶があるのですが、今はスマートフォンに対応したWebサイトも多いため、レスポンシブデザインと相性のよいemrem(親またはルートの文字要素単位)がよく使われているようです。

表現したい「こだわり」があれば、スキルはきっとついてくる

とまぁ、ここまでつらつらと書いているのですが、正直HTMLとCSSの知識がまったくなくても、「なんとかなる」ことは事実です。

今は、はてなブログのような、記事編集画面からテキストと画像を入れるだけでOK、といったCMSのシステムを導入しているポータルサイトやオウンドメディアも多いかと思います。

はてなブログは、HTMLやCSSの知識がなくてもメリハリのあるブログ記事が書けるようになっています

ちなみに前職や、私個人が以前から作成しているWebサイトでは、WordPressを使用していました。はてなブログもそうですが、基本的にCMSであれば直感的に使用できるので、「ここは見出しをつけたい」「テキストの色を変えたいな」と思ったとき、編集画面のボタンをクリックするだけで、装飾は一通りできてしまいます。

でも、せっかくならば、より美しくページを表示させたり、思ったようなレイアウトを見せたいところ。そういった「ひと工夫」ができるかどうかも、Web編集者にとっては腕の見せ所です。

§

サイト全体のデザインや構造まで……となると、それこそ知識を深めていかないと厳しい面もあると思いますが、一つの記事に対して「ココだけこうやって見せたい!」といったこだわりは、少しCSSを設定するだけで十分実現可能。書き手の文章をよりよく見せるには、そういった「こだわり」が大事なことだと思いますし、HTMLとCSSの表現でアシストできるのはWeb編集者の醍醐味ではないかな、と思います。

実装するのは独学レベル(私自身、誰も教えてくれなかった!)でも、意外となんとかなる。くわしいことは分からなくても、たとえば「この画像の下は1emあけるべき? それとも1.5emあけるべき?」ということで悶々と悩むことができるのが一番重要で、HTML・CSSスキルはやる気次第でいくらでもついてくる……はず……です!

はてなでは、画像にテキストを回り込ませるfloatのやり方を知っていたり、MarkdownとHTMLが混在する記事をうまく処理できたりする編集者を募集しています。

hatenacorp.jp

*1:素材画像を組み合わせて、Webサイトに使用する画像を作ってくれたりBBSで使用するアイコンをGIF動画加工してくれる個人サイト

*2:インライン要素とブロック要素については後述

*3:HTML5では(フレージング・コンテンツではない)フロー・コンテンツにほぼ相当

*4:HTML5ではフレージング・コンテンツにほぼ相当

これからの時代、Web編集者が大切にするべきことってなんだろう? はてな「編む庭」第2回レポート

2017年1月25日、編集について語るイベント「編む庭」の第2回を、はてな東京オフィスで開催しました。今回のテーマは「『編む』を仕事にする」。当日のイベントの様子をレポートします。

登壇者は、ビジネス系総合情報サイト「PRESIDENT Online」(株式会社プレジデント社)でプロデューサーを務める吉岡綾乃さん、ECサイト「北欧、暮らしの道具店」(株式会社クラシコム)の編集チームにマネジャーとして携わる津田さん、はてなでディレクター兼シニアエディターを担当する万井綾子の3人。司会は、はてなでプランナーと編集を兼任している田坂錦史郎が担当しました。

イベント応募者から事前に頂いた疑問や質問を、編集者として活躍するゲストに投げ掛け、編集という仕事を選んだきっかけやWebメディアの今後について座談会形式で語りました。

* *

編集者になろうと思ったきっかけは?

田坂 最初の質問は「どういう経緯で編集者になったのか」。皆さんそれぞれ経歴が違いますよね。

津田 私は約3年半前に外資系のコンサル企業からクラシコムに転職しました。入社当初は商品の受注管理をしていましたが、編集チームのスタッフが足りないということで、私に声が掛かって丸2年ほどです。

もともと編集の仕事には興味があり、大学では文学部新聞学科でメディアについて学んでいました。私、マンガの『美味しんぼ』が好きなんです。おいしいものを食べるのが仕事っていいな、好きなことを仕事にするのって素敵だなと思っていました。

株式会社クラシコム エディトリアルグループ マネジャー 津田さん

吉岡 私はこの登壇者の中だと唯一、編集職しか経験したことがないですね。もともと本や雑誌が好きで、新書の編集者か『週刊文春』や『週刊新潮』のような総合週刊誌の編集者になりたい、または新聞記者になって海外に行ってみたいなぁと思っていました。ですが、総合出版社も新聞社も落ちてしまって、最初の就職先はパソコン関連の書籍を出していたソフトバンクだったんです。私のキャリアはパソコン雑誌からスタートしました。

万井 編集という職務に就いたのは、はてなに入社してからなんです。最初は在京キー局の子会社で報道の仕事をしていました。そこからIT系のベンチャー企業に転職し、ポータルサイトの編成やWebマーケティングなどの業務を経験した後、はてなに入社して広報・マーケティングを担当しました。マーケティングの一環として2009年にニュースサイト「はてなニュース」がスタートし、そこで報道の経験を生かして、初めて編集という業務に携わり、後に編集長も経験しました。なので自ら志すというよりは、業務の流れで編集者になりました。

記事作りで大事なこと、編集長としてのあるべき姿

田坂 続いては「記事作りで大切にしていることを教えてください」。それぞれ、編集長またはメディアをマネジメントするといった立場から答えていただけると。

万井 はてなニュース編集長時代に始まり、複数の企業のオウンドメディアにおけるコンテンツの企画・制作、はてなニュースの記事広告など、これまで編集者として多種多様な記事を作ってきました。その中で一番大事にしているのは、当然ではありますが、些細なところまでもすべて「嘘をつかない」ということです。

オウンドメディアの記事の例でいえば、記事の読者にもクライアントさまにも同様に「嘘をつかない」を徹底しています。もし記事中の記載に誤りが見つかった場合は、記事のどこが間違っていていつの時点で修正したのかについて読者に説明するための変更履歴を記事内に追記して、クライアントさまに対し誠意を持って説明しています。

はてな ディレクター兼シニアエディター 万井綾子

津田 当社の場合は二つあって、一つは万井さんもおっしゃっていたように「本当のことを書く」です。よく青木(株式会社クラシコム 代表取締役・青木耕平氏)がインタビューで言っている「本当だから役に立つ、役に立つから面白い」というのを大事にしています。もう一つは、編集チーム全員が心掛けている「自分が一人目の読者になれるように」という視点です。自分が書きたいものや誰かが読みたいだろうなという記事は、もしかすると読者が0かもしれない。なので、自分が最初に読みたいと思える記事作りを意識しています。

チームのマネジャーとしては、スタッフに仕事を任せる姿勢が大事かなと。そして、それが上手くいかなかったときにきちんと責任を取るのがリーダーの役割だと思っています。

吉岡 お二人とかぶりますが、やはり「誠意」が大事だと思います。読者に対してはもちろん、取材した相手にも誠意を持って記事を出すというのは、前職で「Business Media 誠*1」の編集長をしていた当時からずっと心掛けています。

紙とWebの媒体、両方を経験して思うのは、やはり紙は文字数制限が厳しいということです。すごくいいインタビューをしても、例えば半ページしかないとなれば、面白い部分を泣く泣く削らないといけない、というのは紙の宿命。その一方で、Webは文字数を気にせず心置きなく詳しく書けるのが大きなメリットです。

インタビューした内容をできるだけ分かりやすく、嘘偽りなく伝えることって大事だと思うんです。よく政治家などが失言をメディアに取り上げられて大騒ぎになり失脚してしまう、という話がありますが、前後の発言を辿るとそこまで変なことは言っていないのに、一部だけを切り取ると事実と異なったニュアンスになるというケースが多いんですよね。Webの特徴を生かして「誠意」を持ってきちんと伝えようというのは「PRESIDENT Online」のプロデューサーになった今でも思っています。

株式会社プレジデント社 オンライン編集部 プロデューサー 吉岡綾乃さん

田坂 皆さん「正しく誠実に」という点が共通していますね。例えば吉岡さんの場合は取材をきっちりやる、津田さんの場合は商品をしっかり調べるというところに誠実さが宿ると思うのですが、Webメディアにおける誠実さはどうすれば読者に伝わるんでしょうか?

吉岡 私の場合は「詳しさ」と「分かりやすさ」を意識しています。読者にとって分かりにくいだろうと思ったところは、先回りして説明しておくこととか、理解の助けになる写真や図版を適切に入れるというのは、編集者の非常に大事な仕事ですよね。「こうやったら分かりやすくなる、読んで面白くなる」と読者にとって親切な見せ方を常に考える。お節介なくらいでいいんじゃないかなと思っています。

津田 社内では「違和感をスルーしない」という話をよくしています。例えば商品ページを作るのであれば、手に取ってお買い物できないお客さまに対して「本当にサイズ感が分かるか」「届いてがっかりしないか」という点で気になることがないかチェックしたり。インタビュー記事がきれいにまとまりそうな場合も「本当に伝えたいのはこういうこと?」と担当者に投げ掛けてみたり。自分が気になったことを率直に担当者に伝えてみて、一緒に考えてみるといいのかなと思います。

数値や収益と記事のクオリティーのバランスを保つ方法

田坂 次は「数値や収益と記事のクオリティーのバランスを保つ方法を教えてください」。これは聞きたい方も多いのではないでしょうか。クラシコムさんの場合はどうですか?

津田 「特集」として公開している取材記事やコラムは、実はかなりしっかり数字を見ています。とはいえ特に目標を立てているわけではなく「結果としてどれくらいの人に読まれたのか」を見ている感じです。記事には「PVが取れるはずの記事」や「PVというより世界観を味わってもらいたい記事」など、それぞれに役割があると思っていて。数値はその役割をどれくらい果たしたかを測る一つの指標ですね。

もちろん記事広告の場合は案件によって目標値を設定していますが、当社とタイアップするクライアントさまは当店ならではの方法で読者に価値を伝えてほしい、というケースが多いですね。個人的な実感としては、読者にとって「本当で役に立つ」記事、すなわちクオリティーを上げていけば、自然と数値や収益も後からついてくるのかなと思います。

吉岡 「マネタイズに振るとコンテンツのクオリティーが落ちる」と思ったことは、私はありません。コンテンツのクオリティーを上げながら、きちっとマネタイズすることが編集長の責務ですから。うちの媒体は、PVに連動するバナー広告の収入と記事広告の収入が主なので、何よりPV管理が大事です。ウィークリーでPVを管理するほか、編集者それぞれがデイリーやリアルタイムのPVも見ています。毎週の編集会では期待より数値がよかった記事やそうではなかった記事を整理して、次に生かす話し合いをしていますね。

「記事のクオリティー」という点では、予算の使い方にメリハリをつけてクオリティーを上げる、というのは常に考えています。例えば取材記事を作る場合、私は原稿書きも写真撮影もできるので、予算次第では自分ですべて担当してコストを下げることがあります。逆にここぞというときは、自分では書けない記事を執筆してくださるライターさんに頼んだり、プロのカメラマンさんに発注したりしますね。

万井 はてなが携わっているオウンドメディアの場合は、クライアントさまごとにKPIの設定やアプローチが違います。記事広告なども含め、世に出した記事のPVが多いに越したことはありません。しかし、とにかくその前提として、「読み手にとってよい記事を届けること」「クオリティーに関して妥協しないこと」を、はてなの編集者全員が常に意識しています。

記事の中の固有名詞で不明瞭な部分がある場合や、引用部分が正確かどうか確認したいときは、資料を求めて図書館へ調べに出向くこともあります。表現を変えることで事実関係の確認を不要にする方法などもあるので、きちんと調べぬくことは非効率的に見えるかもしれませんが、そういう細かな作業の積み重ねが媒体全体の信頼性を高めると考えています。

いい書き手を見つける方法とライターとの付き合い方

田坂 編集者はライターさんと二人三脚で仕事をする機会が多いですよね。「皆さんはどうやって『いい書き手』を見つけていますか」という質問も来ています。

吉岡 「とにかく面倒くさがらずに数を打つ」ですかね。特定の人とずっとタッグを組む方が気心も知れているし、ある程度のクオリティーも担保されるんですが、あえていろいろな人に声を掛けます。

万井 はてなブログのユーザーさんに寄稿をお願いするケースが多いので、はてなブログをよく見るようにしています。いいなと思ったブログがあると個人的に読み込んで「ブログのファン」になります。また、他社さんの媒体の記事を拝見して、いいなと思ったものをブックマークするなどして覚えておきます。好きなブログの書き手の方やいい記事のライターさんと、自分が担当する媒体や企画がうまくマッチするかどうか、日々考えています。

津田 当社の特集やクライアントさまとのタイアップ記事「BRAND NOTE」では、外部のライターさんとお付き合いはまだ少なくて、ほとんどの記事を編集チームが書いています。なので「チームにどういう人を採用するか」が大事なのかなと。二次面接ではエッセイのようなものを書いてもらって、どういうテーマをどんな切り口で書くか、というのをじっくり見ます。

田坂 なるほど。では「書き手といい記事を作る方法」はありますか?

津田 いい記事、の基準は難しいところですが……。当社ではポリシーとして「三つの分かる」というのを掲げています。一つ目は「読んで意味が分かる」、二つ目は「共感の分かる」、三つ目は「読者に行動のきっかけを与える動機が分かる」というもの。この三つがきちんと記事に落とし込まれているか、をチェックし、担当者と話し合うようにしています。

万井 はてなでは、書き手に対して「あなたの文章はこういうところがとても素敵です。だから、ぜひこういうことを書いていただきたいです」と、情熱的に伝えることも大事だと考えています。好きなブログの書き手さんに打ち合わせでお会いできると本当にうれしく思いますし、その気持ちも伝えます。書き手を好きであることがご本人に伝われば、信頼関係も自然と培われていくと思っています。吉岡さんはいかがでしょうか?

吉岡 一定のレベルのライターさんには、その人がやりたいことや、面白いと感じていることを書いてもらった方がいいですね。私はライターさんのSNSをよく見て、その人が最近はまっているものに近い仕事を振ることがあります。そうすると取材をノリノリでやってくれますし、いい記事になります。

田坂 さっきの「いい書き手を見つける方法」にも通じますね。

吉岡 「ライターは世代交代が進まない」とよくいわれていますが、私は「世代交代の前に若い人を育てていない」というのがずっと気になっているんです。なので、何か縁があって一緒に組むことになったライターさんには、できるだけその人の名前を冠した連載コーナーを作って、定期的に記事を書いてもらう、ということをよくしていました。連載を通じてライターさんが有名になっていくのは編集者にとってとてもうれしいことですから。

また、当たり前のことですが、編集者はライターさんの記事を真摯に読んでフィードバックすることが大事です。他の人がどう読んだか、というのがライターさんにとってはとても勉強になるので。ベテランの場合は黙ってこちらで直してしまうことも多いのですが、特に若い人の場合は、原稿には細かくチェックを入れるようにしています。

Webの編集者に必要なスキル

田坂 「より優れたコンテンツを作るために、Web編集者が『やるべきこと』や『大切にすること』は何だと思いますか?」。

吉岡 まずは、Webに限らずいろいろなことを面白がること。記者はこの道一筋な専門性の高い人でいいと思いますが、編集者はミーハーで浮気性なくらいがちょうどいいんじゃないかなと。特にWeb編集者は、新しいWebサービスをいち早く使ってみるのがすごく大事だと思います。仕事には直接役に立たないかもしれないけど、新しいものに触っているのといないのでは全然違いますから。例えばSNSなどは最初は趣味で始めましたが、TwitterやInstagram、Facebookなどは今や仕事でも必須ツールになりつつあります。早い時期からやっておいて本当によかったと思います。

津田 私は「ポジショニング」ですね。編集者にはいろいろな「形」があるので、「自分がどうすればチームの役に立てるか」を見つけることが大事だと思います。

当社の編集チームには、写真がすごく得意なスタッフがいれば、ロングインタビューをしっかり書けるスタッフもいて、それぞれに得意分野があります。私は別のチームから移ってきたこともあるので、ある程度の距離からチームを俯瞰(ふかん)したり、みんなが「面白そうだね」って進めているところに「本当にそう?」と一言投げ掛けてみたり。企画力や構成力、文章力といった基礎的なスキルの他に、そういうポジションを見つけることも仕事を作る上では大事かなと思います。

万井 Web編集者に限らない話ではありますが、教養を持つことが大事だと思います。いろいろな分野のことについて広く浅く触れておくだけでも、何か違和感のある情報を見たときに「あれ、これは間違っているかもしれないぞ」というちょっとした勘が働くようになるんですよね。

田坂 最近だとフェイクニュースも話題になっていますよね。そういう「気付ける能力」というのは、どうやったら習得できるんでしょうか?

万井 世間で旬の話題をきちんと追い掛けられているかどうかが試される部分だと感じています。例えば、米大統領選ひとつとってみてもいろいろな媒体でさまざまな視点の記事が出ます。「今はこれが大きい話題だからとりあえず一通りの情報を追っておこう」と意識して媒体を見ておくだけでもずいぶん視点が変わると実感しています。

女性は「編集者」に向いている?

田坂 今日の登壇者は全員女性ということで「『女性編集者』としてこれからの働き方に悩んでいる」という相談もきています。

津田 当社の編集チームは9人全員が女性で、子供のいるスタッフや結婚しているスタッフもいます。共通しているのは、全員午後6時に退社して残業しないこと。それでも、「こう働きたい」というのは人それぞれなので、マネジャーとしては「時短で働きたい」「そろそろ仕事のボリュームを増やしたい」など、本人の希望をしっかり伝えてもらった方がありがたいかなと。

万井 私は産休・育休の制度を整えている企業に取材する機会が多いのですが、女性でも働きやすい職場が増えてきていると感じます。もし編集者を続けられない状況になったとしても、編集のスキルを持っていると、いろいろな形で活躍できるケースがあると思います。編集者のキャリアを歩まれた方が、別の会社でそのキャリアを生かして広報やマーケティングを担当しているケースもありますね。

吉岡 一般に、「女性が働きやすい環境」という場合には、大きく二つのケースがあります。一つは産休・育休が取りやすく、負荷が高い時期に仕事を減らしてくれたり、家庭と両立しやすい部署に配属させてくれたりするケース。もう一つは、仕事の成果をしっかり見てくれて、目標を達成すれば男女問わず評価してくれるケースです。

前者と後者のどちらがいいかは人によるところですが、後者の場合はどれくらいの時間働いたかではなく、会社が自分の成果をきちんと見てくれるかどうかが大事です。そういう意味で「編集者」という職種は成果が可視化しやすいし、女性に向いていると思います。会社勤めではなくフリーでもやっていけるという点でも、働き続けるにはいい仕事だと考えています。

どうなっている? Web媒体の未来

田坂 最後の質問です。「10年後、Web媒体はどうなっていると思いますか?」。

吉岡 私は、記事やコンテンツを世に出すという編集者の仕事自体は変わらないと思いますが、読まれ方が変わっていくだろうなと予想しています。モバイルの人気はもう止められなくて、パソコンからではなく、個人それぞれの都合でスマートフォンから読むという流れが続くと思います。最近はAIがニュース記事を書くという話もありますし、フェイクニュースかどうかを判定するというような形でもAIの技術は使われていくんじゃないかなと。

万井 Web媒体はどんどん増えていて、本当に多種多様な媒体が登場していますよね。今ある媒体が10年先も存在するかというとそれは分かりません。でも、ほぼ日さん(ほぼ日刊イトイ新聞)やデイリーポータルZさんのように、10年以上続いているWeb媒体もあります。Web媒体そのものは何かしらの形をとりながらずっと続いていくのだろうと、結構楽観的に考えています。

田坂 読む人の価値観は、時代の流れに沿って変わっていくかもしれませんよね。Web媒体のコンセプトも、その価値観に沿って変化していくべきだと思いますか?

津田 「これしかやらない」と突っぱねるのではなく、お客さんに楽しんでもらうために「柔軟に変化していく」のが大事だと思います。「北欧、暮らしの道具店」は北欧のヴィンテージ食器の販売からスタートしましたが、今では日本や世界各国の雑貨、アパレルも取り扱っています。「暮らしが好き」という軸は大事にしつつ、他は時代に合わせて変わっていくものなのかもしれないですね。

吉岡 読者の価値観に沿った変化というより、「見せ方」の変化には柔軟に対応していくべきだと思います。それがVRなのか動画なのか、10年後に何がトレンドになるかは分かりませんが……。さっきの新しいサービスを使ってみるという話にも通じますが、ユーザーの視点を意識して新しいものをどんどん試してみるのが大事です。

津田 そういう意味では、当社はどんどん「伝え方」を変えています。例えばInstagramは、青木の後押しもあり、他の企業があまりやっていない時期から始めていました。継続してやってきたおかげで、今では50万超のフォロワーがいます。

田坂 とりあえず挑戦する、ということなんですね。

津田 はい。それも結構早めの段階で、できる範囲から始めてみる、というのを意識しています。動画を撮り始めた時は、まずはデジタル一眼レフカメラの動画モードから始めて。やれる範囲で工夫しています。

吉岡 こういうのって、スモールスタートが大事なんですよね。あとは、新しい取り組みを理解して後押ししてくれる青木さんが素晴らしいと思いました。現場はやる気があっても上層部が分かってくれない、ということも多々ありますからね。

田坂 ユーザーの視点に立ってまずはやってみる、というのはすごく大事ですね。本日はありがとうございました。

* *

「編む庭」第2回のレポートをお届けしました。イベントは今後も開催予定です。興味のある方はぜひお越しください!

はてなでは、編集職およびオウンドメディア編集長を募集しています。

hatenacorp.jp

*1:2015年3月31日終了。同年4月1日から「ITmedia ビジネスオンライン」に

改行のはなし

ネットの編集・ライティング界隈に人知れず一匹の妖怪が棲み着いている。それこそが「改段落なき改行」。すなわち文章の途中であっても任意の句読点で(あるいは句読点すらなくても)行を改める表記のことである。

これはほんとうに些細で日常的な、なんのこともなく見過ごされがちな文章の書き方であるとともに、見過ごしたにしても何らかしらの問題に発展するともおもえない、平たくいうならひとつのbr要素にすぎないのだが、正面から向き合おうとするとなかなかにやっかいな側面を持っているのである、という持って回ったような大仰な話をこれからしようとおもいます。

こんにちは。はてな編集部のid:mohritarohです。最近はセブン-イレブンの「黒糖まん」がお気に入りで、駅前のコンビニに立ち寄るたびについ買ってしまいます。という書き出しを用意していましたが、本稿の執筆から公開までの間にメニューから消えてしまいました……。

……なんの話でしたっけ? あ、そうですね。改行です。

お台場(写真は原稿と関係ありません)

トラディショナルな文章の世界における改行の扱い

改行というのは、文章をこのように書いているときに、長々とずらずら書き連ねてしまうと読み辛いので(→改行が少なくて読みづらい文章の悪例、適当なところで行を改めて、行間を空けたり字下げなどを行って、新たな気持ちで文章を読ませるギミックです。

ただし、伝統的な紙の書籍の世界では、というより一般的に商用に流通しうる、あるいは学習・研究の成果等として発表される、つまりざっくり言うなら「ちゃんとした」文章においては、どこでも勝手気ままに改行をしてよいというものではありません。これはあくまで(暗黙の)ルールですが、改行は段落を改めるときにのみ行うことが原則です。

もちろん例外があり、会話であったり、引用、詩歌などが掲載されるときに、段落といえる意味のかたまりの途中であっても改行することがありますが、基本的には複数の文を連ねてある程度の長さになり、前後の文のかたまりと区別できるひとつのまとまり、つまり文章の量と意味の両面から適切な切れ目だろうというところで「改行」を行い、「段落」を分けることが文章術の基本とされています。

ただし、このルールはおもに「どこで改行するか」についてのもので、「どこで改行しないか」はあまり意識されていません。例えば、多くのニュース系メディアで表記の拠り所とされている共同通信社の「記者ハンドブック」では、改行について冒頭の「記事の書き方」で次のように記述している程度です(第13版、9ページ、【文章について】より)

3 記事はなるべく10行以内で改行し、やむを得ないときも15行を超えないようにする。文意により2、3行で改行してもよい*1。(中略)

5 かぎかっこなどの中の文章は改行しない。(後略)

このように、長すぎないように「改行して(段落を改めて)ください」というルールはあっても、意味のまとまりでもないのに「改行しないでください」ということや、文章のどこでどのように改行「しないか」については、(かぎかっこの中などの特別な場合を除き)わざわざ説明されないものなのです。

この意識の向き方は、意外に重要なことなのかもしれません。

なお、学校教育ではそういった改行ひとつを形式段落と呼び、複数の形式段落によるまとまりを意味段落ということもあるようですが*2、これからまさに形式段落ならぬ「形式改行」と言うべきものの話をしようとしています。じつに用語が面倒ですね。

好きなところで「改行」するインターネットでの会話

前節で述べたように、紙の書籍や論文などでは一般に、行末まで改行しないで書き進められ、用紙の端まできたら折り返して行頭から書きつなぎます。

ところが最近では、大学でICT教育の一環として(Microsoft Wordのような)文章作成ソフトウェアで学期末の「レポート」を書かせると、行末まで書いたら(ソフトウェアの機能として)自動で折り返されるにもかかわらず、適当な句読点の位置で自分で「改行」を入れる学生がかなりおり、わざわざ「改行しないでください」と指導しなければならないという話を、大学教育にかかわる知人から聞いたことがあります。

そんなラフな体裁のレポートを提出できるのもすごいなあ、というな印象があるのですが、そういった感想は、紙ベースのちゃんとした文章にたくさん慣れている世代だからこそ持つのであって、学生の方々にとっては自由に改行した自由な体裁の文章により親しんでいて、そういう文章の書き方を自然としているにすぎないということなのかもしれません。

これは学生に限ったことではなく、いまや私たちが日頃から接している執筆環境、つまりインターネットのチャットや掲示板、SNSやメッセンジャーでのやりとりにおいては、おもいつくままに書き、おもいつくままに区切って、1行あるいはもっと短い言葉の固まりを「投稿」しています。わざわざ長文のテキストを書いておきながら、Twitterの文字制限にあわせて分割して「連投」する人さえいます。

このとき「段落」という意味のまとまりを意識することはあまりありません。むしろ、こういった言葉がほとんど「会話」であることを考えるなら、書き言葉の世界に「話し言葉」が混ざってきているとも言えるでしょう。改行には意味があるというこれまでの常識を離れ、日本語の書き方を「話し方」として身に付ける、新しい文言一致が起きているのかもしれません。

ここで、同じように次の行に進むものながら「改行」と「折り返し」を区別していることにご留意ください。本稿においては、ひとが「ここで行を改めたほうがよさそう」と自分の判断において次の行に進むことが「改行」であり、用紙サイズやWebページの表示領域などの外部的な制約によって次の行に送られてしまうことを「折り返し」とします。

ネットにおける文章のリテラシーはデバイスの制約をうける

先ほど紹介した、レポートの途中で自由に改行を入れる話に、最近の学生は「リテラシーがない……」と嘆かれた方もいるでしょう。

一方で、電子メールをやりとりする際に、段落中に改行をまったく入れず、アプリの折り返し設定にまかせたメールが届いたなら、これまた「リテラシーがない……」と嘆かれるのではないでしょうか。電子メールでは一般に、ページの幅いっぱいに文字を書き連ねるのではなく、適度に改行を入れることがマナーとされています*3

同じように文章の途中で改行を入れる動作でありながら、文書作成ソフトにおいては入力領域の幅いっぱいに使うことがリテラシーであり、メール作成ソフトにおいては入力領域の幅いっぱいになる前に改行を入れることがリテラシーである、という分裂的な状況はいったいなぜ起きるのでしょうか?

考えられるのは、文書作成ソフトでは適度にレイアウトを行ってくれますが、電子メールはいわゆるプレーンテキストにより近く、レイアウトの面においてデバイスの制約をそのまま受けてしまうことです。表示領域の折り返しに従っていては、文字がビッシリと敷き詰められた、たいへん読みづらい文面になってしまいます。

かつてコンピューターの画面といえば、いまのようなグラフィカルなインターフェースはなく、アスキー文字を1行に80文字、それを20数行表示できる固定サイズのターミナルが一般的でした。文字サイズも行間も調整できず、画面に文字が表示されるというだけで革命的であった時代、読みやすさをうんぬんすることは贅沢だったはずです。

その制限が、グラフィカルなインターフェースにおいてもそのまま古典的な表示として受け継がれた面は否めないでしょう。いまでも、テキストやメールをただ書くだけのエディターでは適度な横幅や行間が初期状態で設定されておらず、端から端まで埋めていくと文字ばかりで辟易することがままあります。

そういった「ターミナルの限界」から、メールの書面を適切にレイアウトしなければならないという必要があり、改行を入れるマナーになっていったのではないかとおもいます。

また、相手のメールを引用して返信する際にも、適度に改行されていなければ引用記号がうまく表示されず、たいへん扱いづらいといった事情もあります。

HTMLでいうblockquoteなどがサポートされれば、適切に字下げして表現できるはずですが、1970年代からの伝統にのっとって、電子メールでは基本的にはプレーンテキストを扱う文化で発展してきました。そういうコンピューティング環境の未熟さが、本来なら不要な改行を強いる要因となったのでしょう。

もうひとつ、古典的なターミナル環境と並んで、(日本の)ひとが文章を書くふるまいを規定してしまったものとしていわゆるガラケー、つまり1999年に開始されたiモードによって始まった携帯メールや、携帯電話端末でのWebブラウジングの普及もあるのではないかと考えられます。

とくに、著名人・有名人ブログなどで顕著に見られる、文章を短く改行して、さらに行間を何行も開けるような書き方は、ガラケーでのWebブラウジングを前提として書かれたものではないかと想像するのですが、実際のところどうなのかは有名人ブログについてより造詣が深い方の意見を伺いたいところです。

また、コンピューターゲームのメッセージ、とくにロールプレイングゲームなどで、ある程度の長い文章を低解像度の画面で読ませるために生み出された工夫が、それを楽しんだ世代に与えた影響も、ひょっとするとあるのかもしれません。

2つに分離した「改行」と忘れ去られる「段落」の意義

とはいえ、ひとの執筆環境がデジタルデバイスに移行し、ワードプロセッサやテキストエディターを利用するようになり、いきなり改行の「常識」が変化したわけではないでしょう。チャット、掲示板、メッセンジャー、SNSなど、文章で「会話」して「好きなところで改行する」ことが徐々に増えるにつれ、テキストエリアでの「改行」が2つに完全に分裂することになりました。

つまり、旧来的な「意味の区切り」としての改行(=段落を改めること)と、本稿で取り上げているような主にレイアウト的な目的によって「自分が好きなところ」で入れられる改行です。HTMLについて知っているなら、なるほどp要素とbr要素のことだな、と思うかもしれません。

ただし、ここで考えておきたいことは、旧来的な紙の世界ではpこそが改行であり、brによって改行することは特別なレイアウトだったということです。

しかし、いまやネットの世界ではbrによるものが改行であり、pは普段ほとんど意識されないものになっています。むしろ、改行とは別のものとして「改段(改段落)」と呼ばれるようにすらなっています(この用語で検索すると、改行と改段の使い分けのノウハウや「ビジネスマナー」を紹介したライフハック系のサイトやブログがたくさん見つかり、市民権を得ていることがうかがえます)

携帯電話が普及したあとの「固定電話」や、スマートフォン普及後の「ガラケー」と同じようなレトロニムとも言えますが、面倒なことに「改段」は出版ですでに使われている用語です(段組みのレイアウトで段を改めることを指します)

そこで本稿では、先ほど少しふれた「形式改行」という用語で段落中の任意のbr改行を表し、従来のp改行を「段落改行」と呼ぶことにします。改行と「折り返し」を区別するとも書きましたから、まとめると次の3つになります。

用語 説明
形式改行 段落中の任意の位置で、主に読みやすさを考慮して書き手が入れる改行。
段落改行 段落の区切りでの改行。従来の文章でふつうに「改行」と呼ばれていたもの。
折り返し 書き手の意思と関係なく、紙幅やページサイズの限界によって起きるもの。

インターネットで文章を書く機会が増えたいま、旧来の「折り返し+段落改行」の原則に沿った文章を書くことが減り、形式改行ばかりでテキストを書くようになっています。旧来の原則が原則として成り立たず、旧来の常識は(ちゃんとした書籍の世界というサークルに閉じた)少数派になりつつあるのかもしれません。

ポエム化する日本語

ここまで日本語の「ちゃんとした」文章は用紙や表示領域の端で「折り返す」ほかには、段落を改めるまで改行しないものだという前提で書いてきました。しかし、日本語のちゃんとした文章であって、行末に達していないにもかかわらず頻繁に改行する文章があります。それは(ポエム)です。

そういう意味で、インターネットに流れている言葉のほとんどは形式的にポエムだといえるでしょう。2ちゃんねるのコピペ、ツイートまとめ、細切れに改行される有名人ブログ、はてな匿名ダイアリー。そういったテキストをすべて、散文詩だとみなすことができます。

興味があれば「縦書きツール」などで縦書きにしてみてください。ふだんとは違った味わいがあり、エントリーによってはまったくの「詩」となっていることに驚かされるでしょう。

私たちは段落の途中で形式改行するとき、そこに感情の変化を織り込んでいるのではないでしょうか。つまり、形式改行とは、情感に訴えるためのテクニックであり、むしろ形式などではなく本来的な意味においてポエムなのではないかと思えるのです。

そうであれば、これを読者の心を動かす記法として、積極的に利用していくことも可能でしょう。具体的に例示するなら「ほぼ日刊イトイ新聞」において、おそらくそういった効果が働いているのではないかとおもいます。

ほぼ日刊イトイ新聞1101.com

このサイトでは、たいへんに真面目な話、シリアスなインタビューであっても、適度に明示的な形式改行をいれた短文を、ゆったりとした行間で読ませています。これは、文書の内容、書かれている意味を理解してもらいたいだけでなく、対話がなされている場の雰囲気や、そこにおける参加者の気分まで共有させたいという姿勢の表れではないかとおもうのです。

糸井重里さんは、自身のツイートなどネットで発表した文章をまとめた書籍をいくつか出されていますが、先に書いた「形式改行の縦書き」でほとんどの文章が構成されており、書籍全体としてエッセイや警句集というより、詩集のような雰囲気があるのです。

こういった試みを見たときに、形式改行の存在をただ段落と改行の混乱というネガティブな側面ばかりでなく、ネット時代の新しい表現技法のひとつであると捉えることもできるということに改めて気付かされるのです。

ネットの編集者として改行にどのように取り組むべきか

形式改行を一種の文体として積極的に活用することは新しいことではなく、Webの黎明期からあります。例えば、1995年に開設された「貞奴」などが最初期のサイトに挙げられるでしょう*4

貞奴sadayacco.com

また、いわゆる「テキストサイト」と呼ばれたサイト群でも、フォントのサイズや色を変更し、読ませ方やレイアウトまで工夫したエントリーが書かれており、現在でもその影響を受けたサイトやライターの方々によって、形式改行と画像を組み合わせ、行間を利用した表現が試みられています。

一方で、あくまで旧然とした段落改行と折り返しの原則に従い、さらには段落間もマージンではなく字下げで整えるスタイルで文章を書いているサイトもあります。

つまり、インターネットにおいて人にどう読まれるかを意識するのであれば、形式改行を積極的に利用するにせよ、排除するにせよ、その表示に対してより自覚的にならざるを得ず、レイアウトまでも含めた文章の「空間を編集する」ことが、現代のWeb編集者には求められているのです。

とはいえ、執筆いただいた原稿に形式改行と段落改行が無意識に混在されていたり、PCで読みやすかった形式改行がスマートフォンではかえって読みづらくなったりするとき、何をどこまで修正すればよいのか? にただ悩むということもよくあります。

はてなでは、改行や行間への新しいアプローチをともに模索し、Web編集における知見を共有したい編集者を募集しています。

hatenacorp.jp

おまけ

本稿では「改行」のWebにおける現状を簡単にまとめてみましたが、そもそも「文章を読みやすくするために改行する」という作法はいつごろから始まったものなのでしょう?

例えば江戸時代に書かれた絵巻の画像などを見ると、(段落の切れ目を意味する)改行も句読点も見当たらないまま書かれており、これらは濁音の記号などとともに現代的な近代になって使用されるようになった表記の技術ではないかということがうかがえます。

与謝蕪村の筆による「奥の細道画巻」(出典 Wikimedia Commons

また、手書きの張り紙などでも紙幅いっぱいではなく形式改行したものを見かけますが、なんとなく増えているようなきがするのですが、実際にはどうなのかなども気になってるところです。こういった改行文化について詳しくご存知の方がいればぜひお教えください。

なお、余談ながら、それについて参考書がないものかとAmazonで「改行」を含む書籍を検索してみたところ「開業」の本がたくさん並び、世間のみなさんは文章よりも事業のほうに興味があるというごく当たり前の知見が得られました。そんなこんなですが参考文献をいくつか挙げて終わりたいとおもいます。最後までお読みいただきありがとうございました。

たのしい編集 本づくりの基礎技術─編集、DTP、校正、装幀

たのしい編集 本づくりの基礎技術─編集、DTP、校正、装幀

  • 作者: 和田文夫,大西美穂
  • 出版社/メーカー: ガイア・オペレーションズ
  • 発売日: 2014/01/14
  • メディア: 単行本(ソフトカバー)
  • この商品を含むブログを見る

東京の編集

東京の編集

※本稿は執筆者の要請により、いわゆる表記の統一を行っておりません。ご了承ください。

*1:この直前の項目で1行11字組みを原則とされているので、通常は110文字、多くて165文字で1段落となります。これがTwitterのツイートの制限に近い文字数なのは、おもしろい偶然です。

*2:http://www.t-gungun.net/shiryoshitsu/youten/kokugo1/16.html などを参照

*3:http://shuchi.php.co.jp/the21/detail/2490 などを参照

*4:書籍『教科書には載らない日本のインターネットの歴史教科書』では、日記サイトからテキストサイトへの転換点となったサイトとして紹介されています(114ページ)。

編集者のためのイベント「編む庭」第2回を開催します 〜「編む」を仕事にする〜

編集者の「はたらきかた」を知りたい

編集者のためのイベント「編む庭」を、また、開催します。

第2回となる今回のテーマは「『編む』を仕事にする」です。「編集者」として働いているゲストをお招きし、この職業を選んだきっかけからはじまり、楽しかったことや苦労したこと、どうやって成長してきたかなど、さまざまなことをお話しいただきます。

そして今回のイベントは、応募者からの疑問、質問、お悩みをもとに話をすすめていく座談会となります。ラジオの「お悩み相談コーナー」が、イメージに近いでしょうか。参加を希望される方はぜひ、応募フォームに「出演者に聞いてみたい」ことをご記入ください。

開催日は2017年1月25日(水)です。詳細は、下記の「イベントについて」をご覧ください。

2016年12月26日追記:お申込み受付は終了しました。たくさんのご応募ありがとうございました。

出演者のプロフィール

Q1:今している「編集」の仕事
Q2:あなたにとって「編集」とは

■吉岡綾乃さん(PRESIDENT Online プロデューサー)

東京・秋葉原生まれ。大学&大学院でイスラーム史を専攻。
就職活動に苦戦、出版社・新聞社の中で唯一受かったソフトバンクに入社する。希望通り出版事業部に配属され「DOS/V magazine」編集部で6年間編集者として働く。
パソコン雑誌が売れなくなっていくのをどうしたらいいのか分からないまま、ソフトバンクグループでオンラインメディアを専門とするアイティメディアに転籍。「ITmedia Mobile」編集部で記者職の基礎を学び、携帯電話関連の記事を書く。
その後「ITmediaビジネスモバイル」「Business Media 誠」を立ち上げ、クローズまでの8年間、編集長を務める。数か月「ねとらぼ」編集部に所属したのち、プレジデント社に転職。
「PRESIDENT Online」と「PRESIDENT WOMAN Online」の副編集長を1年、現在は「PRESIDENT Online」のプロデューサー。

  • A1: 「PRESIDENT Online」に掲載する記事を制作しています。メインは編集仕事ですが、たまに自分で記事を書くことも。ただ、紙の雑誌がメインの会社なので、オンラインメディアをどうマネタイズするかというところを求められており、一般に「編集」と聞いて想像するのとはだいぶ違う仕事もしています(オンラインメディアの編集長の仕事ではあるのですが)
  • A2:読者が知りたいこと、読みたいことに先回りして気付き、できるだけ分かりやすい形でパッケージングすること。編集者は昔は黒子でしたが、最近は変わってきたのかなと思っています。


■津田さん(株式会社クラシコム エディトリアルグループ マネジャー)

1984年、東京生まれ。上智大学文学部新聞学科卒業。
外資系コンサルティング会社に6年勤めたのち、2013年に「北欧、暮らしの道具店」を運営する株式会社クラシコムに転職。
現在は編集チームのマネジャーとして、記事の企画・取材・執筆・チェックやSNS運用を担当。

  • A1:「北欧、暮らしの道具店」の記事編成を考えています。そこから特集の企画立案、予算管理・工数管理、記事チェックなどもしています。
  • A2:自分が読みたいものをつくること。自分が一人目の読者になれること。


■万井綾子(株式会社はてな ディレクター/シニアエディター)

大学で図書館・情報学を専攻し、卒業後在京キー局の報道系子会社を経てITベンチャーの世界へ。
ポータルサイト運営会社、価格比較サイト運営会社で編成、編集、広報、リスティング広告など広範囲な業務を担当し、2008年7月に株式会社はてな入社。広報・マーケティング・「はてなニュース」編集長を経て、オウンドメディア編集、広告企画などに関わる。
現在はディレクター兼シニアエディター。

  • A1:はてなブログMediaで運用されている企業オウンドメディアに提供する記事の制作。広告企画の立案・実施。編集チームの取りまとめ。
  • A2:天職(以前伊藤直也さん(元はてなCTO、現一休CTO)が言ってくださった言葉で、大事にしています)。

■司会・田坂錦史郎(株式会社はてな エディター/プランナー)

1985年生まれ。
出版社やテレビ局と共同で女性系Webメディアの立ち上げを行い、コンテンツディレクターとして従事。
2016年から現職。

  • A1:オウンドメディア周辺の業務に携わっています。プランナーも兼務しています。
  • A2:なにかを、感じてもらいやすくする仕事です。

イベントについて

はてな 東京オフィス SHIBAFU
  • 日時:2017年1月25日(水)18時〜20時(17時30分開場)
  • 場所:株式会社はてな 東京オフィス SHIBAFU
  • 地図:https://goo.gl/maps/KdBz4YTEkLH2
  • 料金:無料
  • 定員:50名(応募者多数の場合は抽選とさせていただきます)
時間 内容 
  17:30      開場・受付開始   
  18:00     ごあいさつ   
  18:10     座談会   
  19:10      懇親会   
  20:00     閉場   

懇親会では、軽食と飲み物をご用意いたします。

応募フォーム

参加を希望される方は、下記のフォームに必要事項を明記いただき、お申し込みをお願いします。
応募者多数の場合は抽選となります。あらかじめご了承くださいませ。抽選となった場合の結果は、1月10日(火)ごろにはてなからメールをお送りします。

お申し込みの締め切りは、2016年12月26日(月)正午です。

お申込み受付は終了しました。たくさんのご応募ありがとうございました。

前回の「編む庭」のレポートはこちら




はてなでは、編集職およびオウンドメディア編集長を募集しています。

hatenacorp.jp

書き手の個性を生かしつつ、完読されるための工夫を 「オウンドメディアにおける編集」って?

こんにちは。2015年5月入社、はてな編集部の野瀬です。現在は企業のオウンドメディアやはてなブログの編集をしています。「はてなの編集ってどんなことをしているの?」と聞かれることが多いので、今回は「オウンドメディアにおける編集」についてお話ししたいと思います。はてなの編集に興味を持ってもらえるとうれしいです。

はてなではオウンドメディアの運営に携わっています

企業のマーケティング手法として「コンテンツマーケティング」に注目が集まる昨今、自社でブログやサイトを立ち上げて情報発信に取り組む、オウンドメディアの事例が増えています。こういった背景を受けはてなでは、はてなブログの仕組みを使ったオウンドメディアCMS「はてなブログMedia」を企業向けに提供しています。

さまざまな企業に導入いただいている中、楽天さまの「それどこ」やアイデムさまの「りっすん」のように、CMSの提供だけでなくコンテンツの制作も請け負っているメディアがあります。

コンテンツ制作って何をやるの? それどこの場合

いくつかのメディアのコンテンツ制作に携わる中で、私は、はてな側の編集責任者として、楽天さまの「それどこ」をメインに担当しています。

思わず「それ、どこで見付けたの?」「それ、どこがスゴイの!?」と言いたくなるような、買い物を通じて得た知識や体験や感動、揺さぶられた物欲を共有するお買い物情報メディアとして、バラエティー豊かなコンテンツを発信しています。

「それどこ」TOPページ

「それどこ」での私の仕事は大きく分けて2つです。

  • 記事の制作
  • メディア全体の管理

前者はいち編集者としての視点で、「面白い」と思う記事を制作しています。後者は全体の進行管理や数値の振り返り、メディアの方向性やメディア全体の記事のバランスが取れているかの確認など、編集長に近い視点を持って携わっているというとイメージが湧きやすいでしょうか。

以降ではこの「それどこ」を例に、具体的な編集の仕事についてお話しします。

どんなふうに記事を制作しているのか

一つの記事が出来上がるまでの工程は、以下の通りです。

  1. はてな編集部で企画会議を実施
  2. 楽天さまと実際に進める企画を決定
  3. 書き手(はてなブロガーやライター)に打診
  4. 原稿を編集
  5. 記事公開
  6. 公開した記事の振り返り

企画会議では、各編集者が「記事の企画案」「書き手の候補」「想定する読者層と読後感」「目標数値(PVやSNSでのシェア数)」を持ち寄ります。そして、そこで出た案をもとに、楽天さまと相談して進行する企画を決定。記事を公開した後も「目標の読後感や数値と結果に乖離(かいり)がないか」「良かった点」「改善点」を振り返り、それを楽天さまと共有して今後の施策に生かす、といったことを行っています。

はてなには魅力的な書き手がたくさん

書き手の候補には、プロのライターはもちろんのこと、はてなブロガーを挙げることもよくあります。実は、はてなの編集者は日ごろからユーザーのブログをいち読者としてよく読んでいるのです。

熱量やこだわりを感じるもの、独自の視点で書かれたもの……はてなには魅力的なブログがたくさんあります。その中から、自分が「これは!」と惚れ込んだ書き手を企画会議でプレゼンするというわけです。そのため各編集者が熱い思いを持って会議に臨みます。

はてなブロガーの魅力的な記事を発信できるのは、はてなが手がけるオウンドメディアの特徴の一つだといえます。

候補が決まったら、書き手にメールで執筆のお願いをします。「書き手のどこに魅力を感じたのか」「どういった記事を書いてほしいのか」など、執筆をオファーした背景が伝わるように思いをつづります。定型文を送るのではなく、各編集者が独自のスタイルでメールを書いています。

その後、書き手と実際に会って打ち合わせをしたりメールでのやりとりを重ねて、コミュニケーションをとりながら記事を完成させます

編集するうえで心がけていること

記事を編集するとき、最も大切にしているのは「書き手の個性を生かすこと」です。もちろん、想定する読後感や企画の軸からブレないように、場合によっては記事の構成を大きく変更、調整することもあります。しかし、基本的に表現方法については書き手に委ねます。そうすることで他では読めないオリジナリティーあふれる記事が出来上がるからです。

では、私たち編集者は何をするのか?

それは、より魅力的な記事に仕上げるための“ちょっとしたお手伝い”です。読者視点に立って客観的に記事を眺め、完読されるための細かい工夫や表現の微調整を行います。

細やかな工夫を加えて記事をブラッシュアップ

例えば、ボリュームのある記事であれば「小見出しを追加して読者が記事の骨格をつかみやすいようにする」「要所で太字表現やフォントカラーの変更を加えて読者がポイントを把握できるようにする」「フォントサイズの大・小でメリハリを付けて文章の流れにリズムを作る」などして、離脱させない工夫をします。

また、シチュエーションや目的別に構成された記事や、時系列に話が進む記事では、「冒頭に目次を追加して読者が内容を選んで読めるようにする」といったことも。

会話調の記事では「間の取り方」を意識します。行間をあえて空けたり、画像とテキストの並びに試行錯誤したり……。そこまでする必要なんてないのでは、と思われる人もいるかもしれませんが、細部にまでこだわります。編集者はしつこい性格の人が多いのかもしれません(笑)。

この編集作業にはそれなりの時間を要しますが、書き手から「読みやすくなりました!」「編集してもらって良かったです」というフィードバックがあったり、読者から「面白かった」「役に立った」というコメントがあると素直にうれしいです。

メディア運営に協力すると同時に、書き手の「後押し」も

さまざまな作業を経て、書き手と一緒に作り上げた記事が世に発信されるときの喜びはひとしお。企業のメディア運営に協力すると同時に、書き手の「後押し」にもつながるオウンドメディアの編集には、非常に魅力とやりがいを感じます

こういったお仕事に興味のある方は、ぜひはてなに応募いただけるとうれしいです! ご応募お待ちしております。

はてなでは編集者を募集しています

hatenacorp.jp