embed design guidelineこのガイドラインについて
このガイドラインには、embedを実装・デザインするにあたって、noteとして推奨すること、守っていただきたいこと、注意いただきたいことがまとまっています。

このガイドラインに準拠いただき、読者にとって見やすく、分かりやすく、使いやすいデザインを心がけていただければ幸いです。
*embedとは？

noteの記事に、サービスごとにカスタマイズしたモジュールを埋め込める機能です。

noteではおもに「埋め込み機能」と表現しています。

1embedの先行事例

TikTokhttps://note.com/tiktok/n/n0ae5b3d314af

Voicy

https://note.com/ogaken/n/n099eda398b1a2

embedのデザインサンプル

embedをデザインする上での例として、noteの記事を埋め込んだ場合を想定したサンプルを用意しました。

本ガイドラインでは、主にこのサンプルをもとにしてembedのデザインについて説明します。

言語化できない体験は口コミを呼ぶ
高橋ともや
2020/04/07 10:02

今回はどうして人気テーマパークのアトラクションがあそこまで人を惹きつけるのか分析してみたいと思います。突然ですが、サム…
記事をみる
note.com3目次
P5〜: 1.基本原則
embedをデザインする上で、準拠いただきたい点をまとめていますP13〜: 2.レスポンシブデザイン
さまざま環境で意図した表示になるよう、注意点をまとめていますP19〜: 3.カラー
embed上で使用する色について、準拠いただきたい点をまとめていますP23〜: 4.ディテール
embed内の余白や文字サイズなど、細かなTIPSをまとめていますP28〜: 5.禁止事項
embedをデザインする上での禁止事項をまとめています4

1. 基本原則
5embedの動作はシンプルにしましょう

embed上で操作できる要素はなるべく少なくし、読者が迷わない形にしてください。

言語化できない体験は口コ…

言語化できない体験は口コ…

2020/04/07 10:02
今回はどうして人気テーマパークのアトラクションがあそこまで人を惹きつけるのか分析してみたいと思います。突然ですが、サムネイル
画像にある…

2020/04/07 10:02 プロフィールをみる
今回はどうして人気テーマパークのアトラクションがあそこまで人を惹きつけるのか分析してみたいと思います。突然ですが、サムネイル画像にある…

高橋ともや

記事をみる

高橋ともや

拡大する

記事をみる

6

クリックエリアを大きくとりましょう

クリック可能なエリアはなるべく広くとることを推奨します。

ボタンに限らず、embed全体をクリック可能にすることで操作感が向上します。

特にページ遷移等、シンプルなアクションの場合におすすめです。

言語化できない体験は口コ…

言語化できない体験は口コ…

2020/04/07 10:02
1
今回はどうして人気テーマパークのアトラクションがあそこまで人を惹きつけるのか分析してみたいと思います。突然ですが、サムネイル画像にある…

2020/04/07 10:02
今回はどうして人気テーマパークのアトラクションがあそこまで人を惹きつけるのか分析してみたいと思います。突然ですが、サムネイル画像にある…

高橋ともや

記事をみる

embed全体がクリック可能

高橋ともや

記事をみる

ボタンだけがクリック可能

7embed内のアニメーションは必要最小限にしましょう

マウスオーバー時など、読者の操作に応じた適切なインタラクションを設定してください。

激しい点滅や無意味なアニメーションなど、読者の体験を阻害するものは設定しないでください。

言語化できない体験は口コ…
高橋ともや

2020/04/07 10:02
今回はどうして人気テーマパークのアトラクションがあそこまで人を惹きつけるのか分析してみたいと思います。突然ですが、サムネイル
画像にある…

記事をみる

8

コンテンツの出自を明確にしましょう

読者にたいして、コンテンツがどのサービスのものか明確にするため、サービスのロゴを置くことを推奨します。

言語化できない体験は口コミを呼ぶ
高橋ともや
2020/04/07 10:02

今回はどうして人気テーマパークのアトラクションがあそこまで人を惹きつけるのか分析してみたいと思います。突然ですが、サム…
記事をみる*embedの右下にprovider_urlで設定されたURLを表示しますが、どのサービスなのかより分かりやすくなるため、ロゴの設置をおすすめします。

note.com9

ロゴの大きさやカラー、配置位置についてサイズやカラーは以下の規定に従ってください。

ロゴの位置はembed内の左下に設置すること原則とします。

最大80pxLOGOTYPE#999999 もしくはそれよりも明るいグレースケールカラー

最大20pxLOGOTYPE
ダークカラーが背景の場合は#666666 を上限とする
10

コンテンツが公開停止・削除された場合は理由を明示しましょう
なんらかの理由でコンテンツの閲覧が不可能になった場合は、なるべくその理由が読者に分かるような表示・文言を表示してください。

このコンテンツは投稿者によって削除されました

404 NOT FOUND

伝わりやすい文言

なぜ見れないのか分かりにくい

11

EC系サービスの場合は、価格情報などを必要以上に強調しないでください
価格やセールなどの記載は、あくまで情報の一つとしてあつかってください。

noteのノート¥1000（20%OFF)¥1000（20%OFF)

note公式ストア

購入する！
特価

noteのノート

note公式ストア

購入する

12

2. レスポンシブデザイン
13

レスポンシブ、またはリキッドデザインを意識してください
noteの記事はスマートフォンで表示される際、ディスプレイのサイズ・解像度によって表示幅が可変します。

どんな画面幅でも破綻しないレイアウトを心がけてください。

言語化できない体験は口コ…

言語化できない体験は口コミ

2020/04/07 10:02
今回はどうして人気テーマパークのアトラクションがあそこまで人を惹きつけるのか分析してみたいと思います。突然ですが、サムネイル画像にある…

今回はどうして人気テーマパークを惹きつけるのか分析してみたい

高橋ともや

高橋ともや
2020/04/07 10:02

記事をみる

14

レスポンシブデザインサンプル
言語化できない体験は口コ…

言語化できない体験は口コ…

高橋ともや

2020/04/07 10:02
今回はどうして人気テーマパークのアトラクションがあそこまで人を惹きつけるのか分析してみたいと思います。突然ですが、サムネイル画像にある…

高橋ともや

2020/04/07 10:02
今回はどうして人気テーマパークのアトラクションがあそこまで人を惹きつけるのか分析してみたいと思います。突然ですが、サムネイル画像にある…

記事をみる
PC・タブレット

記事をみる
スマートフォン

*上記はあくまでサンプルです。

扱うコンテンツにより最適なレイアウトは変わるので、必ずしもこの例に沿う必要はありません。

15noteの記事内におけるembedのwidthの範囲
PC・タブレット: 620px（最大）スマートフォン: 画面幅から32px（左右margin）を引いた値*今後note側のアップデートで上記の数値の変動する可能性があります。

その点を踏まえて、余裕を持った柔軟なレイアウトにしてください。

16

レスポンシブ対応の例

widthの指定方法により2パターンの表示方法が選択できます。

縦幅を固定するパターン

アスペクト比を固定するパターン

スマートフォン表示時は横幅はデバイスによって可変し、縦幅はPC・スマートフォン・タブレットともにheightで指定した値を維持します。

スマートフォン表示時は横幅に応じて縦幅も縮小されます。

PC時の最大横幅はwidthで指定した値、スマートフォン時は100% - 32pxとなります。

width: 100% / height: 整数値

width: 整数値 / height: 整数値

17embedの縦横比率
縦に長いembedは、読者の環境によっては画面内に収まりきらなくなる可能性があります。

そのため横長のデザインを推奨します。

横長のレイアウト

縦長のレイアウト*縦長にする場合は、横幅に対する縦幅の比率が150%以内に収まる形を目安にデザインしてください。

*最大縦幅に関しては審査時に確認させていただく場合があります。

18

3. カラー19

noteでは白を基調としたデザインを推奨します
コーポレートカラー等はアクセントレベルでの使用を推奨します。

強い色を全面に使用するとnoteの記事内で浮いてしまうのでご注意ください。

言語化できない体験は口コ…

言語化できない体験は口コ…

2020/04/07 10:02
今回はどうして人気テーマパークのアトラクションがあそこまで人を惹きつけるのか分析してみたいと思います。突然ですが、サムネイル画像にある…

2020/04/07 10:02
今回はどうして人気テーマパークのアトラクションがあそこまで人を惹きつけるのか分析してみたいと思います。突然ですが、サムネイル
画像にある…

高橋ともや

記事をみる

コーポレートカラー等をアクセントとして使用する

高橋ともや記事をみる

全面に使用する20

例外

動画や各種ビューアー等の背景色として黒、または濃いカラーを使用する場合は問題ありません。

131221

適切な文字カラーを設定してください

コントラストが高すぎて目に痛い、低すぎて読みにくい。といった状態がないようにしてください。

また、特に理由がない場合はグレースケールを推奨します。

言語化できない体験は口コ…

言語化できない体験は口コ…

2020/04/07 10:02
今回はどうして人気テーマパークのアトラクションがあそこまで人を惹きつけるのか分析してみたいと思います。突然ですが、サムネイル
画像にある…

2020/04/07 10:02
今回はどうして人気テーマパークのアトラクションがあそこまで人を惹きつけるのか分析してみたいと思います。突然ですが、サムネイル
画像にある…

高橋ともや

記事をみる

高橋ともや

記事をみる

22

4. ディテール
23

適切な余白を設定しましょう

embed内では一貫したルールに基づき、適切なmargin・paddingを設定しましょう。

noteではGoogleのMaterial Designを参考に、8の倍数でレイアウトを構成しています。
R 4px

16px

言語化できない体験は口コミを呼ぶ
高橋ともや
2020/04/07 10:02

8px

今回はどうして人気テーマパークのアトラクションがあそこまで人を惹きつけるのか分析してみたいと思います。突然ですが、サム…
記事をみる*特に理由がなければ、同じルールに沿っていただいた方がnoteのデザインと調和するのでおすすめです。

24

適切な文字サイズを設定しましょう

読みやすい文字サイズを心がけてください。最小10px〜最大18pxの文字サイズを推奨します。
文字サイズ参考例:

18px: コンテンツタイトル

14px: ボタンのラベル、本文 など

12px: 作者名、小さめのボタンのラベル など

10px:

補足情報、注記 など
25

embed内の情報量に注意してください

スペースいっぱいにあらゆる情報を詰め込むようなレイアウトは控えてください。

収まりきらない情報は遷移先のページなどに記載しましょう。

言語化できない体験は口コ…
高橋ともや

2020/04/07 10:02
今回はどうして人気テーマパークのアトラクションがあそこまで人を惹きつけるのか分析してみたいと思います。突然ですが、サムネイル
画像にある…

記事をみる

言語化できない体験は口コミ…
高橋ともや

2020/04/07 10:02
今回はどうして人気テーマパークのアトラクションがあそこまで人を惹きつけるのか分析してみたいと思います。突然ですが、サムネイル画像にあるアトラクションの面白さを誰でも分かるように説明することはできますか？きっと簡単ではないはずです。説明で...

記事をみる

26

適切な文字サイズを設定しましょう

embed内で画像を使用する場合は、Retinaディスプレイなどの高解像度に対応できる形にしてください。

単純な形状であればSVG形式にすることも推奨します。

27

5. 禁止事項28

広告および広告と受け取られる要素の配置

embed内に広告、および広告と受け取られる要素を配置することは禁止します。

クリエイター名バーゲンセール！

29embedとコンテンツの乖離

embed内で示す情報や促す行動と、遷移先の内容とが大きく乖離した形とることは禁止します。

必ずembedと遷移先のコンテンツとが関連づいた形にしてください。

30

noteの意匠の利用

読者に誤解を与えないために、embed内でnoteの意匠を使うことは禁止します。

・ noteのロゴおよびシンボル・ noteのブランドカラー*もしブランドカラーがnoteのものと近い色味であれば、使用いただいても構いません

・ note（サイト、アプリ等）で使用しているイラスト、画像類

31note embed design guideline

version 1.04

©note inc.