22Inc. サービス開発日誌

スタンプスのサービス開発チームが日々の業務で得たノウハウ、経験の共有ブログです。

はてなブログで公開までやってきたことのまとめ

f:id:yang22:20190419105256p:plain

はじめに

はてなブログで自社ブログをはじめました。

社内で「うちもブログ書きましょう!」という話から、ブログの構築・公開までの一連作業、何をやってきたかまとめてみました。

どのツールで書くか決める

選択肢としては、ワードプレスでコーポレートサイト配下にブログを構築するか、外部ブログサービス(はてな、アメーバなど)を利用するかです。 コーポレートサイトの配下に、ワードプレス内の投稿で記事を書いてブログとして利用する方法です。

記事の投稿・管理などは楽ですが、ソースコードの表現は若干不向きですねーという声と、他社のブログもはてなが比較的に多いので、じゃはてなにしましょう!という結論に辿りました。

ブログ全体の方向性を決める

全体の方向性・コンセプト的なもの、なんとなくのノリで書いていくと、「なんのためにかいてるんだっけ?」になってしまい、長く続けられません。

コンセプトを決める

日々の業務での気付き、学習、経験共有など、22inc.で働いているメンバーをより理解していただけるように、ブログを運営していきたいと思います。1つのメディアとして社外へ発信し、そこから何か新しい繋がりが業務に結び付けれると嬉しいですね。

書く内容・カテゴリーを決める

記事内容・ジャンルの話です。サービス開発にあたって業務にまつわること(マーケティング、営業、CS、技術、デザイン全般)を書いていきます。

22inc.は顧客管理・販売促進のサービス「スタンプス」を運営しております。それにまつわる店舗経営のノウハウなど、別で運営している集客ブログで記事を書いております。本ブログはそちらと区別できるように意識して運営していきます。

記事更新の流れ・頻度を決める

記事の起案から公開まで、流れはどうするか議論しました。

基本通常業務に影響が出ないよう、あまり負担のかからない進め方で行きたいです。更新するのは面倒臭いーとなったらやらなくなるので、各自で書きたいネタがあれば自由に書いていく形です。

ざっくりの流れ:下書き→皆さんレビュー→最終チェック→公開

ブログ公開までの流れを決める

今までの議論を踏まえて、次はブログを開設して非公開にしておきます。一旦各メンバー各自で記事を書いてストックしておきます。問題なければいざブログを公開します。

ブログ開設

はてなアカウント作成

ここは一般的な流れで、社用メアドではてなブログを開設し、諸々の設定をしました。

メンバーアカウント作成

ライターとして参加するメンバー全員のアカウントを作って、皆管理者と指定しました。

有料会員になる

もちろんのこと、有料会員にアップグレードしました。

ドメイン設定

どのようなサブドメインにするか議論して、設定を行いました。

デザインカスタマイズ

体裁を決める

他社のブログ・はてなのテーマとか参考して、デザインはどのような感じ、コンテンツは何を出すか話し合いました。

はてなに馴染みのないメンバーが多いので、この段階でどこまでカスタマイズできるか、色々リサーチしました。

テーマを決める

カスタマイズに時間をかけても勿体無いので、できるだけ全体のレイアウトが完成版に近いテーマを選びました。

そこで注意して欲しいのは、レスポンシブ未対応のテーマもあるということです。レスポンシブ対応のテーマを選ぶと楽です。

CSSでカスタマイズ

デザインCSSに直接対象タグのCSSを書けば簡単にカスタマイズできました。

基本なやり方はページの検証から対象コンテンツのタグ名を確認して、CSSを書くイメージです。とても楽です。

記事構成議論

皆で各自で記事を書いていくので、ある程度記事の構成を決めた方がいいかなと思いました。

アイキャッチ画像

デザイン担当に依頼するか、各自で作成します。

目次

SEO観点も含めつつ、読みやすさを訴求して必ず入れるようにしています。

見出し

文章を読みやすくするのはもちろん、SEO観点で最低限見出しの設定も意識したいです(順序よくh1→h2→h3で記事を構造化)。ちょっとリサーチしてみたら以下のことを気付きました。

見るはてなブログ記事構造:

titleタグ(デフォ)

  • 記事タイトル - ブログ名

h1タグ(デフォ)

2つあります

  • ブログ名
  • 記事タイトル

h2タグ(デフォ)

  • ブログの説明文

記事投稿画面でmarkdownで見出しを書く

  • h1=#
  • h2=##
  • h3=###
  • h4=####
  • h5=#####
  • h6=######

はてなエディターの見出しで選択すると

  • 大見出し=h3=###
  • 中見出し=h4=####
  • 小見出し=h5=#####

そこであることを気付きました!!

デフォの大見出しを選ぶと、なんとh2ではなくh3になります。

これは何が起きるかというと、普通にエディターで大見出しで記事を書いていくと、h1(記事タイトル)の次はh2を飛ばしてh3(大見出し)になってしまいます。

ググればこれについて説明している記事もありますね。

pea-nut.hatenablog.com

このことをメンバーに共有してmarkdownでh2→h3→h4…を書くように周知しました。h1対策はシステムデフォでブログ名+記事タイトルで対応してくれているのでこちらの手動対応なしでOKです。

まとめ

ざっくりこのような流れでやってきました。まだまだブログの運営には不足な部分もありますが、様子見ながら調整して行ければと思います。

何かご参考になればと思います。