文を直す
- キャンバスで、直したい文かボタンを押します。
- そのまま書き換えます。
- Enter で確定します。Esc を押すと、書き換える前の文に戻ります。
段落がいくつもある文と、式の入った文は、キャンバスでは直せません。右のパネルの「中身」の「文字」の欄で直します。
文の中の語を太字・リンクにする
- キャンバスで文を直し始め、太字・リンクにしたい語を選びます(キーボードでは Shift+矢印)。
- 選んだ所の上に出る「文字の操作」で「太字」(⌘B・Ctrl+B)か「リンク」(⌘K・Ctrl+K)を押します。Shift+F10 で文字の操作へ移り、←→ で選び、Esc で文へ戻ります。
- リンクは、ボタンと同じくリンク先(URL・サイトのページ・資料(PDF))を選び、「付ける」を押します。
外すときは、太字の所を選んでもう一度「太字」を押すか、リンクの所を選んで「リンクを外す」を押します。右のパネルの「中身」の「文中のリンク」の一覧でも、行き先を直したり外したりできます。
右のパネルの「文字」の欄やキャンバスで文字を直しても、前後の太字・リンクは残ります。太字・リンクの文字を全部消すと、その太字・リンクは外れます。
式の入った文は、キャンバスでは太字・リンクを付けられません。リンクは文字の色のまま下線で示します。
文字揃え・行の高さ・字間・段落ごとの色
文を選び、右のパネルの「見た目」の「文字」で変えます。
文字揃えは、左揃え・中央揃え・右揃え・両端揃えから選びます。両端揃えは、スマホの狭い列では字の間が開きます。読みにくければ、モバイルの幅に切り替えて、スマホだけ左揃えにします。
行の高さと字間を入れると、その文だけテキストスタイルから外れます。字間は文字の大きさに対する % です。「行の高さと字間をスタイルに戻す」で、PC もスマホもスタイルの値に戻ります。
行の高さは、テキストスタイルでも文ごとでも 0.8〜4 の数で入れます(0.1 刻み)。テキストスタイルの「スタイルなし」を選ぶと、ブラウザの既定の大きさで描きます。
文字の色・塗り・枠線・段落の色・選んだタブ・スクロールしたときの背景などの色の欄は、サイトの色のほかに色の値(#0f766e など)と不透明度も入れられます。背景画像の暗幕は、色を選ぶと濃さ 40% から始まり、不透明度で変えます(0% で外れます)。
段落が 2 つ以上ある文は、「色」の「段落ごとに色を変える」で、段落ごとに色を付けられます。
テキストスタイルを直す
左の「スタイル」で「テキストスタイル」に切り替え、「編集」を押します。書体・英数字の書体・字間・大きさ(PC とモバイル)・太さ・行の高さを直せます。
直すとすぐ保存され、そのスタイルを使っている全部の文とボタンが変わります。公開ページが変わるのは次の公開からです。
テキストスタイルの直しは、元に戻す(⌘Z)では戻りません。戻すときは、前の値を入れ直します。
色とスタイルの名前を変える・消す
左の「スタイル」の「カラー」で色の「編集」から名前と色を、「テキストスタイル」でスタイルの「編集」から名前と代わりの書体を直せます。直すとすぐ保存され、使っている全部の要素が変わります。元に戻す(⌘Z)では戻りません。
「消す」は、どの要素も使っていない色とスタイルだけに押せます。使っているときは、別の色やスタイルに替えてから消します。「メイン」「アクセント」の色と「本文」のスタイルは、公開ページが地の文字・塗りの無いボタン・地の文に使うので消せません。
HTML の要素とサイト共通のコードの中の参照(--nb-color-<ID>)は数えていません。消した色をそこで使っていると、その部分の色が無くなります。
消した直後に別のタブで同じ色を使うと、見つからない色を指す要素が残ることがあります。その要素は色を付けずに描かれ、公開前のチェックでも止まりません。色を選び直してください。
角丸・影・不透明度
箱・ボタン・画像を選び、右のパネルの「見た目」で変えます。箱とボタンの角丸は「塗り・角丸・枠線」、画像の角丸は「角丸・効果」、影と不透明度は「効果」(画像は「角丸・効果」)にあります。
角丸は ↑↓ で なし・S 4・M 12・L 24・丸 と段階ずつ動き、Alt を押しながらだと 1px ずつ動きます。「角ごと」を押すと、左上・右上・左下・右下を別々の値にできます。ボタンは何も入れないと 8px です。
影は なし・S・M・L から選びます。色と広がりは段階で決まります。影は要素の外に出るので、角丸の箱の中や、要素を重ねたセクションでは切れることがあります。
写真の上の白い見出しなど、文字そのものに影を付けるときは、テキストかボタンを選び、右のパネルの「見た目」の「文字の飾り」で「文字の影」を なし・S・M・L から選びます。色は黒で、段階で濃さとぼかしが増えます。全部の幅(PC・タブレット・スマホ)で共通です。影を付けても公開前チェックの読みやすさの注意は消えません(影を数えずに、文字の色と地の色で測ります)。
透明の塗りのボタンを文字のリンクに見せるときは、ボタンを選び、「文字の飾り」の「下線」に印を付けます。
不透明度を下げると、下にある物が透けて見えます。0% にしても隠したことにはならず、読み上げには残ります。見せないなら、要素を消します。ボタンを 30% より低くすると、公開前チェックで注意になります。
枠線・後ろをぼかす・回転
箱の枠線は「塗り・角丸・枠線」で、太さ(1〜8px。0 で外す)・色・種類(実線・破線・点線)・引く辺(4 辺・上・下・上と下)を選びます。見出しの下線や区切りの罫線は、下だけの細い線で作れます。
「後ろをぼかす」は、箱の後ろにある写真などをすりガラスのようにぼかします。塗りが透けているときだけ見えます。塗りが透けていないと、欄の下に知らせが出ます。
「回転」は箱と画像を −15〜15 度で傾けます。札や写真を少し傾けるときに使い、本文は傾けないほうが読みやすいです。回した要素は、キャンバスで余白のつまみを出しません。余白は右のパネルの数で直します。
枠線・後ろをぼかす・回転は、PC・タブレット・モバイルの全部の幅で共通です。
コンバージョンの名前
「CTA として数える」を入れたボタンでは、右のパネルに「コンバージョンの名前」が出ます。GA4 の `cta_click` イベントの `cta_name` に送る名前です。
同じ目的のボタンには同じ名前を付けると、まとめて数えられます。空ならボタンの文字から自動で付けます。
画像を差し替える
- キャンバスで画像を押します。
- 右のパネルの「画像を選ぶ」を押します。
- ドライブから選ぶか、「パソコンからアップロード」を押します。
- 「使う」を押します。
アップロードできるのは PNG・JPEG・WebP・GIF で、1 枚 10MB までです。
セクションの背景の写真は、セクションを選び、右のパネルの「見た目」の「背景画像」で「画像を変える」を押します。
縦横比を決めた画像は、枠からはみ出す所を切ります。顔や製品が端にある写真は、右のパネルの「見た目」の「切り抜く位置」で、上・中央・下・左・右のどこを残すかを選びます。縦横比が「元のまま」の間は切り抜かないので選べません。
「見た目」の「フィルター」で、画像を白黒にしたり、明るさ(50〜150%)を変えたりできます。導入企業のロゴを白黒でそろえて並べるときなどに使います。写真を暗くして上に文字を重ねるなら、セクションの背景画像にして暗幕を付けます(文字の読みやすさを公開前チェックが確かめます)。
LINE 追加のバナーのように、押すと移る画像にするときは、右のパネルの「画像を押したときのリンク先」で、ボタンと同じく URL・サイトのページ・資料(PDF)を選びます。外すときは「リンクを外す」を押します。
リンクのある画像は、代替テキストが読み上げのリンクの名前になります。飛び先が分かる言葉(例: LINE で友だちに追加)を書きます。空のままだと公開前チェックで止まります。リンクのある画像は『飾り(読み上げない)』にできません。流れる帯の中の画像にはリンクを付けられません。
料金や事例のカードを、カード全体で押せるようにするときは、カードの箱を選び、右のパネルの「中身」の「箱を押したときのリンク先」で飛び先を選びます。読み上げでは、箱の中の文字と画像の代替テキストがリンクの名前になります(右のパネルに「読み上げでは「…」と読みます」と出ます)。
箱の中にボタン・リンクのある画像・文中のリンク・フォーム・動画などの押せる物があると、箱のリンクは効きません(どちらを押したか分からなくなるため)。右のパネルに理由と「選ぶ」が出るので、押せる物を箱の外へ出すか消すか、箱のリンクを外します。タブ・開閉・流れる帯の箱そのものにも効きません。
電話・メールのアイコンは、アイコンを選び、右のパネルの「見た目」の「アイコンを押したときのリンク先」で tel: や mailto: を入れると、押して電話・メールができます。リンクのあるアイコンは飾りにできず、代替テキスト(例: 電話をかける)が要ります。
マウスを乗せたときの見た目
ボタンと、リンクを付けた画像は、何も変えなくても、マウスを乗せると少し暗くなります。キーボードで選んだとき(フォーカス)も同じ見た目になります。スマホにはマウスが無いので出ません。
変えるときは、ボタンかリンクを付けた画像を選び、右のパネルの「見た目」の上で「マウスを乗せたとき」に切り替えます。塗り・文字の色(ボタンだけ)・影・不透明度・少し大きくする(1.05 倍)を変えられます。変えた値だけが替わり、ほかは通常のままです。キャンバスもその見え方で描きます。
導入企業のロゴの色を抜いてそろえるときは、ロゴの画像にリンクを付け、「フィルター」の「白黒」を入れてから、「マウスを乗せたとき」の「白黒を外す(色を戻す)」を入れます。乗せたロゴだけが元の色に戻ります。
マウスを乗せたときの塗りと文字の色も、公開前チェックが読みやすさを測ります。動きを減らす設定の人には、切り替わりは一瞬で、大きくもしません。
「マウスを乗せたときの値をすべて外す」で、既定の見た目(少し暗くなる)に戻ります。画像のリンクを外すと、マウスを乗せたときの見た目も一緒に外れます。
動画を置く
- 左の「部品」の「動画」を押します。
- ドライブから選ぶか、「パソコンからアップロード」を押します。
- 「使う」を押します。
- 右のパネルの「表紙の画像」で「画像を選ぶ」を押し、表紙にする画像を選びます。
アップロードできるのは MP4(H.264)の動画で、1 本 100MB までです。H.265(HEVC)の動画は、H.264 を選んで書き出し直し、もう一度アップロードしてください。
大きい動画ほど、見る人のスマホで再生が始まるまで時間がかかり、通信量も増えます。LP の動画は短く切り、小さく書き出すのがおすすめです。
表紙の画像は、読み込みの前(自動で再生しない動画では押すまで)と、動きを減らす設定にしている人に出ます。動画の 1 コマの画面を撮り、ドライブに上げて選びます。
何も変えていなければ、公開したページでは、画面に入ると音を出さずに繰り返し再生し、画面から出ると止まります。見る人は右下のボタンで止められます。動きを減らす設定にしている人には、自動では再生しません。
右のパネルの「画面に入ったら自動で再生する」を切ると、押した人にだけ再生します。操作の棒が無ければ、公開ページで表紙(無ければ最初のコマ)と再生の印を出します。
「再生」の「繰り返す」を切ると、最後まで再生したら止まります。
「音を出す」を入れると、自動では再生せず、押した人にだけ音つきで再生します(ブラウザが音のある自動再生を止めるため)。同時に操作の棒も出します。
「操作の棒を出す」を入れると、再生・止める・音の大きさ・全画面のボタンを動画の下に出します。右下の止めるボタンは付きません。
声で説明する動画は、字幕を動画に焼き込みます。音を出さずに見る人や、聞こえにくい人にも伝わるようにするためです(Nobori には字幕の欄がありません)。
エディタのキャンバスでは動画は止まった最初のコマで描きます。音と操作の棒、動きは公開したページで確かめます。
YouTube・Vimeo・Google マップを埋め込む
- 左の「部品」の「埋め込み」を押します。
- 「URL か埋め込みのコード」に、YouTube・Vimeo の動画の URL を貼ります。地図は、Google マップの「共有」→「地図を埋め込む」で「HTML をコピー」し、そのまま貼ります。
- 「タイトル(読み上げの名前)」に、何の動画・地図かが分かる言葉を入れます。
- 「置く」を押します。
YouTube の再生リスト・チャンネル、地図の共有のリンク、X・Instagram の投稿は埋め込めません。投稿は、画面の画像と元の投稿へのリンクで代えます。ほかのサービスは HTML の要素で書けます。
公開したページでは、見る人が押すまで YouTube・Vimeo・Google マップを読み込みません。押すまで外部へ情報を送らず、ページも重くなりません。エディタのキャンバスも、押す前の見た目で描きます。
右のパネルで URL を貼り直す・タイトルを直す・「表紙の画像」を選ぶ・縦横比を変える、ができます。表紙が無いと、灰色の面にタイトルと再生の印を出します。YouTube のサムネイルは自動では使いません。
持ち主が埋め込みを禁止した動画や、消された・非公開の動画は、押したあとに再生できません。右のパネルの「YouTube で開く」で、貼った動画を確かめてください。
埋め込みを足したら、サイトに載せている外部送信の公表文に送信先を書き足してください。公開の履歴の画面の見本には、公開中のページで使っている提供元の行が出ます。
ドライブの使用量
ドライブの画面の左の列に、組織のドライブに置いた素材の大きさの合計を出します(ゴミ箱を含む)。上限はありません。
代替テキストを入れる
画像・動画を選び、右のパネルの「代替テキスト」に、中身を 1 文で書きます。動画なら何が動くかを書きます。読み上げを使う人と検索に伝わります。飾りなら『飾り(読み上げない)』に印を付けます。
スマホの見え方を直す
上の「画面の幅」で「モバイル」を選びます。ここで変えた文字の大きさや余白は、スマホにだけ効きます。
PC と同じに戻すときは、右のパネルの「PC に戻す」を押します。
保存と元に戻す
直すと、自動で保存します。下の帯に「保存済み」と出れば保存できています。
間違えたら ⌘Z(Windows は Ctrl+Z)で戻します。50 回まで戻せます。
「保存できませんでした。」と出たら、通信を確かめて「再試行」を押します。直した内容は画面に残っています。
「ほかの変更と重なりました。」と出たら、別のタブか、ほかの人か AI が先に保存しています。「再読み込み」で相手の内容を読み込むか、「自分の内容で上書き」を選びます。
「この幅では編集できません」と出たとき
エディタは、パソコンの広い画面(幅 1100px 以上)で使います。ブラウザの窓を広げてください。
この記事で説明している画面の文
〇〇 には名前や数が入ります。