11
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Livesense not engineersAdvent Calendar 2018

Day 10

HTMLと戦うライターが作業効率をアップするためにしていること

Posted at

こんにちは。
リブセンスで転職ノウハウメディアを担当してしているライターの@1kw-ayaと申します。

普段は転職に関するお役立ち記事を書いており、技術にはほとんど触れていないのですが、せっかくのお誘いということで少し書かせていただきます。

さて、タイトルの通り私の職業はライター(まだひよっこ)ですが、毎日のようにHTMLと戦っています。
最近はwebメディアが日々生まれていて、ライターさんも増えているはずです。
その中には、私のように慣れないHTMLで四苦八苦している方もいるのではないでしょうか?

今日はその戦いを振り返りながら、専門的な知識のない私がHTMLで入稿する際に効率よく作業をするための方法などをご紹介します。

#HTMLと戦うことになった経緯
ずっとライターになりたかった私ですが、本格的に文章を書くようになったのは今のお仕事を始めてからでした。

実は前の会社でもなんとなく似たようなことはしていて、WordPressを使った入稿も行っていたので、「ボタンをポチポチして文字を入力したらOK」という入稿を想定していたのですが…。
その期待が打ち砕かれたのは2年ほど前になります。

理由は担当メディアで使っているCMSの仕様です。
ライターには優しくないですが、その他の面を考慮した結果とのこと。(CMSの選び方についてはこちらの記事こちらの記事をご覧ください。)

そして、今にいたります。

#ライターにとって機能的なテキストエディタを使う
戦いといっても、実はそんなに難しいことはしていません。

用意されたパーツのHTMLを使って、自分の書いた文章の見た目を整えている(入稿作業)だけです。

しかし、初心者にとってはこの作業も簡単ではありません。

「正しく表示をさせたい。でも知識が少ない…」
悩めるライターさんが、入稿をする際に欠かせないのが、テキストエディタです。

とはいえ、「テキストエディタと言われても何を使えば…」と思いますよね。
エンジニアさんであれば、ある程度機能が充実したものを使うべきなのでしょうが、ライターの場合はそこまで機能が必要というわけではありません。

入稿作業を2年間続けてきた私が、最低限これだけは必要だと思う機能は以下の5つです。

  • 日本語に対応している
  • タグが色分けされる
  • 対応するタグがわかりやすく表示される
  • 自動インデントができる
  • 置換できる
ちなみに私が使っているのは[atom](https://atom.io/)さん。
最初は黒い画面に白い文字・色とりどりのタグは未知の世界でしたが、今ではこの子がいないと仕事になりません。
「絶対!」というわけではありませんが、atomはさきほどの条件を満たしていて、2年間使って不便に感じたことはほとんど無いので、私としてはオススメかなと思います。
そして、atomさんにはatom-html-previewという便利なパッケージもあったりします。 しっかり設定すれば、ブラウザを使わなくてもプレビューを見ることができるこの機能。
私は使い方を覚えることをサボって使わなくなってしまいましたが、いちいちCMSに流し込んでプレビューするよりもatom-html-previewのほうが効率がいい気がします。
ちなみに、デフォルトは英語表記なので、Japanese-menuというパッケージを使って日本語化をしておくことをお忘れなく。

#パーツは一つにまとめておく
私が担当しているメディアには独自パーツがたくさんあります。

自分でほしいと言ったのに、覚えきれないほど多くなってしまったパーツたちを項目ごとにまとめた資料は、入稿作業には欠かせない存在です。

見た目のキャプチャとHTMLを貼って、注意点も一緒に入れておく。

最初まとめるのが面倒ですが、後々の作業が楽なので、自分のためにも作っておくことをオススメします。

このとりあえずこの資料があれば、全くわからない人でも次の日には簡単な入稿作業はできるはずです。

#教える立場になって
嬉しいことに、ライター1人から始まった編集部にも、新しい仲間が増えています!

昔の自分を思い出しながら、HTMLの入稿作業を教えていますが、人に教えているうちに、HTML初心者のライターさんたちが同じ部分で引っかかっていることに気が付きました。

このタグの中にこれが入っているよ!みたいな構造的な部分

例えば、sectionタグの場合、

説明書の表記
<section>
 <h2>H2見出し</h2>
 <p>えいちつー</p>
 <section>
  <h3>H3見出し</h3> 
  <p>えいちすりー</p>
 </section>
</section>

と説明書に記載してあっても、これを見てもらった上で実際に書いてもらうと

入稿されたもの
<section>
 <h2>H2見出し</h2>
 <p>えいちつー</p>
</section>
<section>
 <h3>H3見出し</h3> 
 <p>えいちすりー</p>
</section>

となっていたり、そもそもh2のセクションしかなかったり。

慣れてくると「このタグの中にこれが入る」というような構造や、「そもそもタグは基本的に対になっている」ことは説明書に簡単に書いておけば大丈夫だろうと思いがちですが、初めてHTMLに触った頃はそれどころではなかったと教えているうちに思い出しました。

「1からHTMLをを書くわけではないから、基本の考え方を教えなくてもいい」というわけではなく、基本を理解してもらった方が、初心者ライターさんにとっても覚えやすく、教える側にとってもスムーズだと感じました。

そして、それ以外はパーツをまとめた資料を渡せば、皆さんほぼ直すところはない。

つまり、基礎の基礎さえわかれば、HTMLの入稿作業はそんなに難しくないのです。

#基本さえおさえれば、HTMLと仲良く過ごせる
結果として、基本の考え方と最低限の機能さえあれば、HTMLを使った入稿は恐れるほどのものでは無いのです。

入稿で使うだけであれば、過度に理解しようとせず、どうしたら楽をできるか、早くできるかを考えればOKだと思います。
ライターさんの中には苦手意識がある方もいると思いますが、あまり気をわずにチャレンジしてみてください。

そして、運営側で教えたり指示する立場の方は、ライターさんに負担がかかりすぎないように、環境をしっかりと整えておくのが、自分のためにもなるはずです。

11
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?