スタイルガイド

HARE media の記事本文で使えるパーツの一覧です。見出し・リンクは採用済みのスタイルを使用しています。エディターからの挿入を想定したサンプルを、カテゴリーごとにまとめています。

見出し

見出し2 / H2

見出し2のサンプルテキスト

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

見出し3 / H3

見出し3のサンプルテキスト

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

見出し4 / H4

見出し4のサンプルテキスト

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

見出し5 / H5

見出し5のサンプルテキスト

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

見出し6 / H6

見出し6のサンプルテキスト

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

本文テキスト・インライン装飾

通常の本文テキストです。読みやすさを重視した行間・文字サイズで設定されています。

<strong> — strong要素は強い重要性を表します。

<em> — em要素は強勢（アクセント）をつけます。

<b> — b要素は重要性は持たずに他のテキストと区別します。

<a> — この要素はテキストリンクです。

<code> — インラインコードはこのように表示されます。

HARE独自の装飾

マーカーは黄色・赤・青の3色。下線や打ち消し線も使えます。文字色は青・赤・緑、背景色つきはスカイやイエロー。※ これは小さな注釈テキストです。

リンク

通常リンク・外部リンク（アイコン付き）

本文中の通常リンクはホバーで青い下線が伸びます。外部サイトへは参考レポートのように「↗」を添えます。

ボタンリンク

資料を請求する
事例を見る

PDFダウンロードリンク

ブランド戦略チェックシートPDF・2.4MB・全8ページ

ブランディング: 企業や商品・サービスのブランドを構築・強化するための戦略的な活動のこと。
コンテンツマーケティング: 見込み顧客にとって価値ある情報を継続的に発信し、信頼関係を構築するマーケティング手法。
CTA（Call to Action）: ユーザーに具体的な行動を促すための要素。ボタンやリンクの形で設置される。

装飾リスト（HARE独自）

箇条書き

自社の強みを3つ書き出す
届けたい相手を一人に絞る
言葉づかいのトーンを決める

番号付きリスト

現状を棚卸しする
理想の状態を言葉にする
ギャップを埋める施策を選ぶ

チェックリスト

ロゴ・カラーが統一されている
発信のトーンが揃っている
社内で共有できている

ボックス系

メモ

後で見返したい補足情報。本文の流れを止めずに残せます。

補足

本文を補う豆知識や用語の説明に。

ポイント

ここだけは押さえたい、という要点を強調します。

注意

間違えやすい点や前提条件など、気をつけてほしいこと。

警告 / NG

避けるべき行為や、やってはいけないことを明示します。

成功

うまくいった例や、達成できた状態を示すときに。

吹き出し

左・アイコンあり

担当者

ブランディングと聞くと「大企業がやること」と思われがちですが、実は規模が小さい会社ほど効果が出やすい取り組みです。まずは自社の「らしさ」を言葉にして、誰に届けたいのかを一人に絞り込むこと。そのうえで、強みとターゲットをつなぐメッセージを短く覚えやすい言葉に落とし込めば、発信のたびにブレない判断ができるようになります。焦らず、小さな一貫性を積み重ねていきましょう。

右・アイコンあり（色つき）

お客さま

なるほど、まず相手を決めるんですね。やってみます！

アイコンなし

アイコンを省いたシンプルな吹き出しも使えます。

テーブル

シンプル表（行見出しつき）

項目	内容	備考
ブランディング	企業の価値観や強みを言語化・視覚化する	長期的な信頼構築に直結する
デザイン	視覚的な情報伝達を設計する	ユーザー体験に大きく影響する
マーケティング	ターゲットに価値を届けるための戦略	ブランドと組み合わせると効果的
コンテンツ	読者に役立つ情報を継続的に発信する	SEOや信頼醸成にも寄与する

比較表

	自社制作	外部依頼	併用
コスト	◎	×	△
スピード	△	◎	◎
専門性	×	◎	◎

スクロール対応表（スマホで横スクロール）

プラン	初期費用	月額	サポート	レポート
ライト	0円	1万円	メール	月1回
スタンダード	3万円	3万円	メール＋電話	月2回
プロ	5万円	8万円	専任担当	週1回

横にスクロールできます

引用・コールアウト

引用（標準）

通常の段落テキストです。その下に標準のblockquote要素が続きます。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。宮沢賢治『ポラーノの広場』

引用ブロック（HARE独自）

ブランドとは、ロゴやデザインのことではなく、顧客の心の中にある「その会社らしさ」のことです。

出典付き引用（HARE独自）

顧客が本当に買っているのは、製品そのものではなく「その先の体験」だ。

マーケティング白書 2025

コールアウト（HARE独自）

自社の提供価値をリストアップする
顧客インタビューやアンケートを実施する
競合他社との違いを整理する

強調パーツ

チェックポイント

✓ チェックポイント

ターゲットは一人に絞れているか
強みが言語化できているか
発信トーンが統一されているか

メリット／デメリット

＋メリット

認知が広がりやすい
価格競争に巻き込まれにくい
採用にも効果がある

－デメリット

効果が出るまで時間がかかる
社内の合意形成が必要

画像

中央寄せ

画像を中央に配置したサンプルです。

中央寄せ画像サンプル

左寄せ（テキスト回り込み）

左寄せ画像サンプル

画像を左寄せにしたとき、テキストが右側に回り込むサンプルです。画像の上・下・右にスペースが確保されており、テキストが画像に密着せず読みやすく表示されます。スマートフォンでは回り込みが解除され、縦積みになります。

回り込みが解除されるタイミングを確認するため、テキストを少し長くしています。このへんでテキストが画像の下に回り込んで、ちょうど良い具合に収まっているのが確認できます。

右寄せ（テキスト回り込み）

右寄せ画像サンプル

画像を右寄せにしたとき、テキストが左側に回り込むサンプルです。画像の上・下・左にスペースが確保されています。スマートフォンでは同様に回り込みが解除されます。

テキストが画像の下に回り込んで、ちょうど良い具合に収まっているのが確認できます。

配置なし（全幅）

全幅画像サンプル

配置指定なし（全幅）の画像です。コンテンツエリアからはみ出ず、最大幅内に収まります。

見出し