はてな編集部の記事は、これから「はてなビジネスブログ」内で公開します

こんにちは、はてな編集部です。

いつも、はてな 編集部ブログ「編む庭」をご愛読いただき、ありがとうございます。

さて、「はてなで働く編集スタッフが『編集』にまつわるさまざまな記事をお届けするブログ」として、2016年2月より約2年間更新してきた「編む庭」ですが、本ブログでの更新を本日を持ってストップします。

今後は、オウンドメディア、ネイティブ広告、コンテンツマーケティングに関する話題を掲載している「はてなビジネスブログ」内で、はてな編集部による「コンテンツ制作」のアレコレをご紹介いたします。

本日、編集スタッフの初瀬川による、「はてなビジネスブログ」での1本目の記事を公開しました！ ご覧いただくと分かる通り、今後はより「コンテンツの作り方」や「編集」を重点的に紹介していく予定です。

これまで、「編む庭」を読んでくださったり、ブログの読者になってくださったり、はてなスターをつけたりしてくださった皆さま、誠にありがとうございました。

これからは「はてなビジネスブログ」で、はてな編集部の情報を発信していきますので、気になる！ という方はぜひぜひ、下記のボタンから読者登録をお願いします。

YOUは何しに「はてな」へ？ さまざまなWebメディアを手掛けてきた新メンバーがJoin！

こんにちは、はてな編集部の谷口です。

このブログ「編む庭」では、はてなの編集スタッフが「編集」に関するあれこれを書き綴ってきたのですが、今回は、編集部に新しく入社したスタッフを紹介したいと思います。

チームのプロデューサーとして id:k-yakou がJoin！

現在、はてなでは、さまざまなオウンドメディアの運営に携わっており、多くの企業さまと一緒に、よりよいコンテンツを作るべく、日々邁進（まいしん）しています。

おかげさまでたくさんの企業さまからお話をいただいており、これからもより安定した体制でコンテンツの制作を行うべく、さまざまなWebメディアを運営してきた谷古宇（id:k-yakou ）が、チームのプロデューサーとして入社しました。ヨッシャ！ 引き続きがんばるぞー！！

といいつつも、まだまだ入社したばかりなので、この記事を書いている私も正直知らないことが多いのです。そこでこの機会にいろんな疑問・質問を谷古宇に投げかけてみました！

谷古宇浩司（やこう・こうじ）

小・中・高・大とサッカー少年で、社会人になってからの趣味はフットサル。書斎が本で埋もれているくらいの読書家で、国内外の文学を中心にさまざまな作品に感銘を受けてきたが、あえて“1冊”を挙げるとしたら村上春樹著『世界の終りとハードボイルド・ワンダーランド』（新潮社）。好きな映画監督は小津安二郎。

――はてなに来るまではどんな仕事をしていたんですか？

谷古宇：株式会社アットマーク・アイティ（現在はアイティメディア株式会社）で、「ITmedia エンタープライズ」や「ITmedia マーケティング」の編集長を経験しました。2015年にはインフォバーンに入社して、エグゼクティブ・プロデューサーとして「DIGIDAY［日本版］」の初代事業責任者や、「BUSINESS INSIDER JAPAN」の初代事業責任者 兼 創刊編集長などを務めました。

――ほうほう。単刀直入に聞きますが、なぜ「はてな」に興味を持ったんですか？

谷古宇：もともと「はてな」という会社には興味があったんです。はてなって、開発やサービスのポテンシャルは高いのに、ある意味「分かりやすくWebサービスのトレンドや波に乗ってマネタイズしていく」っていう選択肢を選ばないままここまで成長している印象があって。その不思議な文化に「なんでなんだろう？」と興味を持っていました。

あとは、長年編集者や記者として働いてきた中で、どこか「ものづくり」に違和感を感じていたんです。その違和感をなかなかうまく言語化できずにいたんですが、アイティメディア時代に人材育成関連のサービスや人、本と触れる機会が多くて、ふと「自分は組織作りや人材育成に興味があるんだ」と気付いたんです。既存の枠組みではなく、「一から始められる場所」を探していて、はてなと出会いました。

――入社してからの業務を一言で表すと？

谷古宇：一言でいえば、交通整理、ですね。はてなでは、ここ最近メディアやコンテンツプロデュースの受注がぐっと増えていて、僕も含めて新しい編集スタッフが増えましたが、受け皿となるチームが完成し切っていなかった。もともとコンテンツを制作する力はしっかりとあるチームなので、これまで以上に教育体制やビジネスとのバランス調整に注力したいです。

――はてなで手がけている編集コンテンツをどう思いますか？

谷古宇：丁寧。構成も、画像も、タイトルも、媒体のテーマにあったキャスティングと企画も、見れば手をかけて作られているのが分かります。正直、ちょっと驚きましたね。もちろん「もっと効率よく進めよう」とか「ぶっ飛んだ企画を出そう」とか課題もあるけど、コンテンツ制作に関して特に問題はない。これから、もっといいチームになると思います。

――もう“身内”なので、何だか照れますね……！ それでは最後に、これから、はてなでどんなことをしていきたいですか？

谷古宇：一般的に、はてなはBtoCのイメージが強いと思いますが、コンテンツ制作をはじめ、BtoBの領域も拡大しています。BtoCで長年ユーザーと向き合ってきた知見とシステムは、企業にも転用できる。もっともっとBtoBの新しいサービスを始めていきたいですし、それを支える「組織」を作っていきたいですね。

寄稿、登壇などのオファーもお待ちしております

谷古宇への取材、執筆、登壇などのオファーは、下記お問い合わせフォームより受け付けております。

â–¼ 取材・広報に関するお問い合わせ - 株式会社はてな

どうしてもやってしまいがちな「固有名詞間違いあるある」

こんにちは、はてなの万井（ id:ayakoya ）です。私が担当した前回の記事では「はてな」という社名で苦労すると書きましたが、固有名詞に注意が必要なのは「はてな」だけではありません。

文章を書く、編集する、校正・校閲する。そのすべての工程で、「文章に登場する固有名詞と数値は本当に本当に本当に合っているか？」という自分への問いは常に必要です。しかし、人間はどうしてもミスをしてしまう生き物なのです……。

そこで！ ついついやってしまいがちなミスの一つである「固有名詞間違いあるある」をご紹介したいと思います。「ああ、またやってしまった」と後悔しがちな自分の「あるある」のほか、他の編集スタッフから聞いた「あるある」もあります。

それでは、ジャンル別でどうぞ。

会社名・商品名

会社名の間違いは、全く言い訳ができない、致命的なミスです。しかし、現在の仮名遣いと一致していないケースも多くあり、「覚える」「気をつける」以外の解決策がありません。

• キャノン
  • 正：キヤノン

• キューピー
  • 正：キユーピー

• オンキョウ/オンキョー
  • 正：オンキヨー

• 日本コロンビア
  • 正：日本コロムビア

• 富士フィルム
  • 正：富士フイルム

• 三和シャッター工業
  • 正：三和シヤッター工業

• サーティーワンアイスクリーム
  • 正：サーティワンアイスクリーム

• セブンイレブン
  • 正：セブン-イレブン

• ビッグカメラ
  • 正：ビックカメラ

• 東京ビックサイト
  • 正：東京ビッグサイト

• ブルドッグソース
  • 正：ブルドックソース

• プリングルス
  • 正：プリングルズ

• CanCan/CamCan
  • 正：CanCam

• 暮らしの手帳/暮しの手帳
  • 正：暮しの手帖

• WOWWOW
  • 正：WOWOW

• 青春18切符
  • 正：青春18きっぷ

• 写るんです
  • 正：写ルンです

• 三井住友銀行
  • 英語表記が「英語表記：Sumitomo Mitsui Banking Corporation」・略称がSMBCで、「三井」「住友」の順が逆になっています

「間違いやすい社名だから気をつけなきゃ！」とは思いつつも、調べてみるとその会社の中で大きな意味を持っていたり、消費者・ユーザーに向けたメッセージが込められていたりします。

ということで、社名について解説されているページも集めてみました。ただ、犬の「ブルドッグ」にちなんでつけられた社名が「ブルドックソース」で、商品のロゴは「Bull-Dog」、会社サイトのドメインでは「bulldog」となると……これは孔明の罠だ……。

• キヤノンロゴ | キヤノングローバル
• よくお寄せいただくご質問｜キユーピー
• よくあるご質問│株式会社ビックカメラ：株主・投資家情報サイト
• 社名&マークの由来｜会社情報・IR｜ブルドックソース株式会社

社名とサービス名を混同しがちなケース

• ウェザーニューズ（会社名）
• ウェザーニュース（サービス名）

• スカパーJSAT（会社名）
• スカパー!（サービス名）

社名とサービス名が微妙に異なっているときは、文脈によってきちんと使い分ける必要がある場合があります。また、サービス名が社名になる「商号変更」があった場合などは、とにかく調べるしかありません。

有名な例としては「NTTドコモ」をぱっと思い出します。「NTTドコモ」は2013年に商号変更された会社名で、それまでは通称として使われていました。ではその前の正式名称はというと「エヌ・ティ・ティ・ドコモ」。さらにその前は「エヌ・ティ・ティ移動通信網」でした。はてなで表記の指針としている「記者ハンドブック 新聞用字用語集」においては、第12版の「紛らわしい会社名」の中に「NTTドコモ」が含まれていましたが、2016å¹´3月に出版された第13版では記載がなくなっています。

会社の沿革 | 企業情報 | NTTドコモ

人名

人名の間違いも言い訳はできません。つい手癖で書いてしまった後で、「これは間違ってはいないだろうか」と見返すと、案外間違っていたりするものです。

• 森喜郎
  • 正：森喜朗（もり よしろう）

• 管直人
  • 正：菅直人（かん なおと）

• 管義偉
  • 正：菅義偉（すが よしひで）

• 阿部晋三/安部晋三
  • 正：安倍晋三（あべ しんぞう）

• 冨田靖子
  • 正：富田靖子（とみた やすこ）

• 相川翔
  • 正：哀川翔（あいかわ しょう）

• 藤岡弘
  • 正：藤岡弘、（ふじおか ひろし）

• BOΦWY
  • 正：BOOWY（ボウイ）

• つのだひろ
  • 正：つのだ☆ひろ（つのだ ひろ）

技術用語

• javascript/Javascript/Java Script
  • 正：JavaScript

• jquery
  • 正：jQuery

• ElasticSearch/Elastic Search
  • 正：Elasticsearch（かつては表記が統一されていなかったそうです）

• perl
  • 正：Perl

• mRuby
  • 正：mruby（Rubyの場合は、先頭の文字は大文字ですね）

アルファベットで複合語などを表記するときに、単語をスペースで区切らずに詰めてしまって、各単語の先頭の文字を大文字にする手法を「キャメルケース」といいます。プログラミングに関係する用語についてはキャメルケースが用いられていることが多いのではないかと思います。

技術用語の固有名詞をチェックする際には、紛らわしいものかどうかを見つける“勘”が必要だ、と感じることが多々あります。「英単語が連続しているもの」を見たらすぐさま「先頭は大文字か！」「くっついている単語の先頭は小文字で合っているか！」「実は半角スペースが必要なのではないか！！！」など、脳内でツッコミを入れながら必死に……本当に必死に調べています。

Webサービス・アプリ名

Webサービスやアプリの名称についても「キャメルケースなのかどうか」は正誤の判断材料として有効です。

• yahoo/yahoo!
  • 正：Yahoo!

• youtube/Youtube
  • 正：YouTube

• FaceBook/facebook
  • 正：Facebook

• instagram
  • 正：Instagram

• tumblr
  • 正：Tumblr

• Tweetdeck/tweetdeck
  • 正：TweetDeck

• Github/github
  • 正：GitHub

• qiita/Oiita
  • 正：Qiita

• Linkedin
  • 正：LinkedIn

• Livedoor/Live door
  • 正：livedoor

• ITMedia/IT Media
  • 正：ITmedia（会社名はアイティメディア）

• pairs
  • 正：Pairs（ロゴではすべて小文字）

• 人力検索サイトはてな/はてな人力検索
  • 正：人力検索はてな

「人力検索サイトはてな」は、サービスを開始した2001年7月から2005年9月の改称まで使っていたサービス名でした。

サービス名称の変更について - 人力検索はてなの日記 - 機能変更、お知らせなど

アニメ・テレビ番組

テレビアニメ「けいおん!」の第1期は「!」が1つ、第2期は「!」が2つになって「けいおん!!」と表記されるのはおそらく有名だと思いますが、一般的に知られたアニメやテレビ番組でもうっかり間違えることはよくあります。

• 新世紀エヴァンゲリオン（TVアニメ版）
• ヱヴァンゲリヲン新劇場版（TVアニメ版のリメイクであるアニメ映画）
  • 「エ」と「ヱ」、「オ」と「ヲ」をいつも意識しています

• ドラエもん/ドラエモン
  • 正：ドラえもん

• 中居正広のブラックバラエティ
  • 正：中井正広のブラックバラエティ

• ニュースウォッチ9
  • 正：ニュースウオッチ9

地名・駅名・施設名

駅名などで使われている名前と行政区分における地名が一致していないのはもはや当然、疑って当たり前、というくらい、複雑です。

• 成田空港
  • 正式名称は「成田国際空港」。2004年までは「新東京国際空港」でした

• 羽田空港
  • 空港の正式名称は「東京国際空港」
  • 東京都大田区の地名は「羽田空港」

• 山形空港
  • 愛称は「おいしい山形空港」

• 庄内空港
  • 愛称は「おいしい庄内空港」

• 富山空港
  • 愛称は「富山きときと空港」

• 高知空港
  • 愛称は「高知龍馬空港」

• 鳥取空港
  • 愛称は「鳥取砂丘コナン空港」

• 佐賀空港
  • 愛称は「九州佐賀国際空港」

• えのしま
  • 江ノ島駅（江ノ島電鉄の駅名）
  • 片瀬江ノ島駅（小田急電鉄の駅名）
  • 湘南江の島駅（湘南モノレールの駅名）
  • 新江ノ島水族館（神奈川県藤沢市にある水族館名。前身は「江の島水族館」）
  • 江の島（神奈川県藤沢市の地名）
  • 江島神社（神奈川県藤沢市江の島にある神社名）

• あさがや
  • 阿佐ケ谷駅（JRの駅名）
  • 南阿佐ケ谷駅（東京メトロの駅名）
  • 阿佐谷（東京都杉並区の地名）

毎日新聞・校閲グループのサイト「毎日ことば」では、阿佐ケ谷駅の駅名表示が統一されていないことに触れています。

「阿佐ヶ谷駅」か「阿佐ケ谷駅」か | 毎日ことば

食べ物

• 八つ橋/八ツ橋/八ッ橋/å…«æ©‹
  • 扱うお店・ブランド・商品によってかなりばらばらで、表記の確認にはかなり気合が必要です……

その他

このブログで以前取り上げた表記統一の話にもある通り、媒体によって「どこまで表記を統一するか」は異なります。独自のルールを定めている媒体もあります。

はてなで指針とする「記者ハンドブック」の中で、私が一番納得が行かなかったのは、「附属」という言葉は固有名詞であっても使わずに「付属」とするという項目でした。こうなっている理由はいろいろ込み入っているため、以下の記事をぜひご覧ください。

• 文化庁 | 国語施策・日本語教育 | 国語施策情報 | 第5期国語審議会 | 語形の「ゆれ」の問題
• 2010年「改定常用漢字表」対応 新聞用語集 追補版（PDF）
• なぜ新聞は「附属」でなく「付属」と書くのか | 毎日ことば
• Q02「附属」か「付属」か? - 教育出版

＊　＊　＊　＊　＊

一人で書き上げた文章には、たいていどこかしらに間違いがあるものです。自分自身でその間違いを完璧に見つけ出して修正するのは、そう簡単なことではありません。広く世に出す文章については、少し時間を取って誰かに読んでみてもらうと、ごく単純なミスが見つかったり、何度も確認したはずの文にまぎれ込んでいた間違いが一瞬で分かったりします。

（何重にもチェックをかけて作ったはずの文章に、ミスが残ったままになっており、後から見つかることもあるのですが……）

そうはいっても、最初の段階でできるだけミスのないように心掛けておくと、その後文章や記事を公開するまでの間の確認作業にかかる手間はぐっと減ります！ さらに、自分が文章をチェックする側に回ったときに、「この辺に間違いがありそうだな」という当たりが付けられると、さらにミスを極力減らすことができます。

自分の次にはもう確認工程がない。つまり、自分の後ろにはもうこの記事のミスを見つけてくれる人がいない──その覚悟を記事を作り始める最初の段階で持っておくようにすると、執筆・編集・チェック・公開のどの段階を担当するようになっても、その胆力が生きてくるように思います。

はてなでは、日本語の広大な海とWebメディアの世界を一緒に冒険してくれる編集者を募集しています。

hatenacorp.jp

è¨˜äº‹ã®ãƒã‚¿æŽ¢ã—ã«å½¹ç«‹ã¤ã€ã¯ã¦ãªãƒ–ãƒƒã‚¯ãƒžãƒ¼ã‚¯ã‚’æ´»ç”¨ã—ãŸæƒ…å ±åŽé›†è¡“

こんにちは、はてなニュース編集長の飯塚です。

ニュースサイトを運営していて日々感じるのが、企画のもとになる「ネタ探し」の重要性です。メディアに携わる編集者やライターの皆さんにとっては、独自の情報収集ルートやテクニックを持っておくことが、そのまま自分の仕事に直結するのではないでしょうか。

はてなニュース編集部では、ネタ探しのやり方は基本的に各編集者におまかせしています。編集部宛に届くプレスリリースは編集部全員のメーリングリストで共有していますが、それ以外にどんな方法でどんなネタを探してくるかは自由です。時折「どこで見つけたの？」というようなマニアックな話題が飛び出すこともあります。

今回は、そんなはてなニュースの編集部が実践している、はてなブックマークを中心とした情報収集術についてご紹介したいと思います。

情報収集の要は「はてなブックマーク」

ネタ探しの際は、Twitter、Facebook、InstagramといったSNSアカウント、RSSリーダー、社内のSlackチャンネルなどあらゆるツールを活用していますが、はてなニュースの読者の皆さんに楽しんでいただけるような“はてならしい”ネタを探すとき、最も頼りになるのがはてなブックマークです。

人気順・新着順でのチェックは基本

基本中の基本として、ブックマークされたエントリーを人気順や新着順で見ています。

すでに人気上位になっている話題をそのまま取り上げることは少ないですが、「今このジャンルではこのテーマが熱い」というのを知っておくことは、日々の情報収集の感度を上げるために、とても重要だと考えています。たとえその場ですぐ記事化につながらなかったとしても、別の機会にその話題に関する新しい情報を得たときなどに、「これはあのときに話題になったネタの続報だな」とすぐ気付くことができます。

新着順のページには、ブックマークされ始めたばかりの新しいネタが隠れています。「一体どうやって見つけてきたんだろう??」というようなページがブックマークされていて、編集部で驚くこともよくあります。

ネタをピックアップする際のポイントとして、例えばネタ自体のインパクトが十分強い場合は、ストレートに取り上げるだけで注目を集めることがあります。タイトルやテーマがユニークな書籍などは、その一例です。

hatenanews.com

はてなブックマーク独自の検索方法を駆使する

人気順・新着順でのチェックは基本“流れてくるネタをどんどん見ていく”スタイルですが、企画のざっくりしたテーマが決まっているときや、特定のテーマについてもう少し深く知りたいときなどは、はてなブックマーク独自の検索機能を活用しています。

一般的な検索エンジンも併用しますが、「はてなブックマークが付いている」エントリーから探す方が、よりはてなユーザーさんに楽しんでもらうためのヒントになる可能性が高いからです。

例えば、「IoT」に関する企画を考えたいとき。はてなブックマークの検索窓に「IoT」と入力して検索すると、まず「本文にIoTというキーワードを含む」エントリーが表示されます。サイドバーの「検索対象」欄から、「IoTというタグを付けてブックマークされている」エントリーや「記事タイトルにIoTが入っている」エントリーに切り替えたり、新着順・人気順に並べ変えたりもできるので、条件をいろいろ変えながら、欲しい情報を探します。

タグ「IoT」の付いた3users以上のエントリーを新着順で表示した場合

キーワードを使った検索以外に、URLを使った検索も便利です。例えば「このサイトの記事はよくブックマークされているな。他にはどんな記事が人気なんだろう？」というとき、ブックマークの検索画面に表示されている当該サイトのドメイン名をクリックすると、「当該サイトの記事のうち、はてなブックマークが付いているもの」だけを表示することができます。

また、検索窓に特定のサイトのURLを直接入れて検索することも可能です。「自分のサイトの記事のうち、よりブックマークが多いエントリーから順に見ていく」といった使い方ができるので、自分のサイトでブックマークされやすい記事の傾向も見えます。

はてなニュースでは、タグやURLを使ったはてなブックマークの検索機能自体を生かして、こんな記事も公開しています。

hatenanews.com

hatenanews.com

「特集」「トピック」「お気に入り」など、あらゆる機能を活用

はてなブックマークには、同じテーマのエントリーだけをまとめて見られる「特集」や「トピック」のほか、より自分にとって興味のある話題を見つけられる「お気に入り」「関心ワード」「マイホットエントリー」などの機能があります。記事の企画にしたいテーマに関する特集を眺めたり、はてなニュースの読者層に近い人たちがブックマークしているエントリーをお気に入りやマイホットエントリーでチェックしたりと、これらの機能も記事作りの上で大きなヒントになります。

「プログラミング教育」の特集ページ

逆に“超アナログなやり方”が効く場合も

ここまでは、はてなブックマークというデジタルなツールを使った情報収集術をご紹介してきましたが、まったく逆のアナログな手法が役に立つこともあります。

道を歩いていて見つける

はてなの本社オフィスは京都にあるので、京都に関する情報収集が必要なときもあります。しかし東京の情報に比べ、京都に関する情報は、必ずしもプレスリリースなどインターネット上の情報源だけでは得られないことがあります。

例えば過去には、たまたま休日に街を歩いているときに、オープンに向けて工事中のお店を見つけて近寄ってみたら、はてなのユーザーさんが好きそうなお店の京都店だった、なんていうことがありました。特に地元の情報を発信する場合は、普段から街の様子とその変化をよく見ておくことが重要といえます。

はてなニュースを運営する中で「こういうテーマの記事は特にはてなユーザーさんの関心が高いな」と感じるものがいくつかありますが、「京都」はその一つです。京都の他に、例えば「猫」「文房具」「宇宙」「タモリさん」なども人気です。そういった人気のテーマについては、下記の「京都×猫」のように複数掛け合わせると、単体で取り上げる以上の相乗効果を生むことがあります。

hatenanews.com

お店で売られているものから見つける

トレンドを把握するためには、“今、お店で何が売られているか”をチェックするのもおすすめです。家電量販店で気になるガジェットのコーナーを眺めるのはもちろん、バラエティーショップで大きく場所を取って展開されている商品をチェックしたり、本屋に行って特集コーナーをチェックしたりするだけでも、“今ウケる”もののヒントが見えてきます。

「最近なんとなくこういう商品が多いな」ということに気付くと、ブームの兆しが見えてきます。また、そのような商品を手に取っているのはどんな年代や性別の人なのかを、さりげなく見ておくのもいいでしょう。そういった視点で見られるのは、実店舗ならではです。

会話の中で見つける

インターネット経由ではない、リアルな“口コミ”情報が役立つこともあります。特に思わぬヒントをくれるのが、「自分とは違う職種、業界、年代、性別の人」や「普段から自分とは違う情報源に触れている人」との会話です。その人にとってはごく当たり前の情報でも、多くのインターネットユーザーにとってはとても新鮮で、面白い情報だったりします。

テーマを設定する際に意識していること

最後に、ここまでで触れた以外にも“記事化するネタをピックアップする際に意識しているポイント”がいくつかありますので、ご紹介します。

目新しさ・独自性があるかどうか

プレスリリースをもとにした記事は、同じタイミングで多くのメディアに掲載されるため、独自性を出すのは難しいこともあります。一方で「大手のプレスリリース配信サービスには載らないネタ」や「プレスリリースは出ていても、意外と他媒体で取り上げられていないネタ」は、思わぬヒットの可能性を秘めていることがあります。

hatenanews.com

独自性という観点では、はてなの編集部だからできる企画として、はてなのスタッフに焦点を当てた記事もあります。

hatenanews.com

hatenanews.com

広すぎず、狭すぎずを狙う

記事のテーマを設定するとき、狙う層が広すぎるとテーマがぼんやりしたり目新しさがなくなったりしてしまいます。逆に狭すぎても、ニッチすぎてあまり読まれない記事になってしまうでしょう。

はてなニュースの読者の皆さんには、「少し珍しい切り口の、面白いネタや役立つネタ」が喜ばれる傾向にあります。企画を立てる際は“広すぎず、狭すぎず”のラインを意識しています。

hatenanews.com

今回は、はてなニュース編集部による、はてなブックマークを中心とした情報収集術についてお送りしました。

はてなでは、はてなブックマークを眺めるのが何よりも大好き！という編集者を募集しています

hatenacorp.jp

サラバ!? 愛しの縦写真

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

下の写真をご覧あれ。

⬇

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

写真デカッッ……！

と。

数多（あまた）ある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版 新聞用字用語集

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

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

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

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

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

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

• こと／事
  • 記者ハンドブックには「具体的な事柄に関しては閉じる」とありますが、僕個人としては、常に開きたい。フルオープンでいきたい。なぜなら、「こ」と「と」の曲線基調の字面がかわいいから。一方、重ための原稿ではそのキュートな字面が仇となる……。原稿でも登場頻度が非常に高い言葉なので、毎度悶絶します。
    • 30代男性編集者

• しょうが醤油
  • 記者ハンドブックにそのまま合わせると「しょうが」+「しょうゆ」で「しょうがじょうゆ」になるが、ひらがな続きで読みにくい上に、一見何か分からなくてイマイチ。「生姜醤油」はちょっと漢字すぎるので「しょうが醤油」がほど良さそう。だし醤油、わさび醤油なども同様。
    • 30代女性編集者

• 惹かれる
  • 表外音訓のため「引く／引かれる」になってしまうのですが、「素敵な人に引かれる」だと引っ張り回されている感じになりませんか……？
    • 40代女性編集者

• 玉葱 ／タマネギ／玉ねぎ（ネギ）
  • ハンドブックでは「タマネギ」ですが（市況・料理記事では「玉ネギ」も使うとあります）、全てカタカナはできるだけ避けたい。「タマネギ」だと玉っぽさが足りない。「玉ネギ」でもなく「玉ねぎ」表記が一番好き。
    • 20代女性編集者

• ç½ 
  • 記者ハンドブックでは開くとあるが、漢字のほうが巧妙さが感じられる。
    • 30代男性編集者

• のぞく
  • 「除く」は閉じるなのに「覗く」は開く指定。常用外漢字とはいえ、アイデンティティーの崩壊。わたしが「覗く」だったら待遇の差に泣きそう。
    • 30代女性編集者

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

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

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

その「おこだわり」、俺にもくれよ!!(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-align、float、overflowの3つです。

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

カピバラさん

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

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

カピバラさん

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

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

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

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

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

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

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

float＋overflowを使用した場合

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

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

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

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

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

marginとpaddingの使い分け

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

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

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

囲いの外

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

囲いの外も窮屈

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

囲いの外

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

囲いの外はまだ窮屈

marginã‚‚paddingも設定すると、こんな感じ。

囲いの外

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

囲いの外にも余裕が！

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

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

ブロック要素*3（divã‚„pといった、ひとかたまりとなるもの）に使用することが多いmarginとpaddingですが、インライン要素*4（aã‚„spanなど、文章の一部として扱われるもの）の中で、imgはブロック要素と同じ様にmarginとpaddingを設定することが多いプロパティです。

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

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

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

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

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

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

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

marginとpaddingは、上右下左まとめて指定するだけでなく、それぞれ異なる値を設定することも可能です。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で、一箇所だけmargin（padding）を設定させたい」というときは、この個別指定のプロパティを使用すると、間違えにくくなります。

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

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

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

とまぁ、ここまでつらつらと書いているのですが、正直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ではフレージング・コンテンツにほぼ相当