見出し画像

新バージョンの記事編集画面が試せるベータ版を公開!ストレスフリーな創作をさらにサポート

【おしらせ】
4月12日(火)に、ベータ版として公開していた新バージョンの記事編集画面(= 新エディタ)を正式にリリースし、全クリエイターの編集画面が全面的に切り替わります!
https://note.com/info/n/nbd9ec2e0ade5 

極限までシンプルな編集機能が
さらにパワーアップ

Markdownショートカットに対応したり、小見出しや箇条書きで読みやすくしたり、他のテキストエディタからスタイルを保持してコピペしたり…。

新バージョンの記事編集画面(= 新エディタ)では、15以上の機能が新登場!みなさんのしたい表現に合わせて、十人十色の記事をつくれるようになります。ご感想、ご意見などをいただいたのち、さらなるパワーアップをしていきます。ぜひお試しください!

※ 実装される機能は予告なく変更になる可能性があります
※ ベータ版はタブレットで閲覧した場合、表示が崩れる可能性があります

新エディタ(ベータ版) 概要

■ 対象
すべてのnoteクリエイター

■ 検証できる環境
・外付けキーボード
・スマートフォンでの端末キーボード
・スクリーンリーダー(音声読み上げソフト)
iOSアプリ(バージョン5.19.0以降)
Androidアプリ(バージョン2.5.0以降)

■ 新エディタを試す方法
方法1 : 通常のエディタを開き、画面上部にある「さっそく試す」をクリックすると、ベータ版に切り替わります。
方法2 : 通常のエディタを開き、画面右上にある三点リーダ(・・・)をクリックして、「ベータ版を試す」をクリックするとベータ版に切り替わります。

■ フィードバックする方法
ベータ版のエディタを開いた状態で、さらに画面右上にある三点リーダをもう一度クリックしてください。「ベータ版のフィードバックを送る」をクリックすると、Googleフォームが開きます。

使ってみての感想やスクリーンショットを、noteやSNSでシェアいただくことも大歓迎です!その際は、ハッシュタグ#note新エディタを付けてもらえるとうれしいです。


新エディタで使える機能

※ 利用にあたっての注意
2021年10月21日に追加された新機能(箇条書き、小見出し、右寄せなど)を使って編集された記事は、Webブラウザのこれまでのエディタでは編集ができません。あらかじめご注意ください。

1. 表現力の拡充

① 小見出し(h3)

これまでの見出しが大見出し(h2)になり、新たに小見出し(h3)が追加されました。話題を変えるとき。文章を強調したいとき。いろんな場面で創作の幅が広がります。


② 箇条書き/番号付きリスト

「-」+ 半角スペース で箇条書きリストに、「1.」+半角スペースで番号付きリストになります。左側の+ボタン内にある「箇条書きリスト」or「番号付きリスト」から設定します。話を整理したいときや、手順を説明したいときに便利です。

  • 階層は5段階まで設定できます

    • 箇条書きリストの階層を下げる場合は、

      • Tabキー

      • (Windowsの場合) ctrl + ]

      • (Macの場合)Command + ]

    • 階層を上げる場合は、

      • Shift + Tabキー

      • (Windowsの場合)ctrl + [

      • (Macの場合)Command + [


③ 右寄せ

左寄せ・中央寄せに加えて、右寄せができるようになりました。
対象文字を選択した上で、画面から右寄せに設定できます。

< たとえば

こんなふうに >

< チャット画面を再現することもできちゃいます!


④ 取り消し線

テキストに 取り消し線 を利用できるようになりました。文字を選択した状態で、出てくるメニューから設定します。また、Markdownショートカット(~~対象の文字~~)にも対応しています。あとでnoteを編集し直すときに、変更の履歴を残しておけます。


⑤ 出典元の記載

引用を利用した際、右下部分に出典元を記載できるようになりました。小説の一節や映画のセリフ、他のクリエイターが書いた記事から気に入った文章を引用するときにも使えます。なお、出典元にはURLを埋め込むことができます。出典元のURLを記載することで、情報の信頼性が上がるのでぜひ利用してみてください。

だれもが創作をはじめ、続けられるようにする。

note株式会社のミッション


⑥ 区切り線

記事内容に区切りをつけたい場合、区切り線を利用できるようになりました。左側の+ボタン内にある「区切り線」から設定します。また、Markdown記法(---)にも対応しています。


こんなふうに、記事の内容を区切りたいときに使えます。


⑦ ルビ(ふりがな)

むずか しい漢字 かんじ地名 ちめいてくる記事 きじや、どもけの記事きじ 小説しょうせつ など、文字の上部にルビふりがなをふれるようになりました。使 つかかた は、ルビをふる文字 もじ始点してん に「| 」(縦線たてせん)、終点しゅうてん に「《 》」(二重山括弧にじゅうやまかっこ ) を入力にゅうりょく し、ルビを「《 》」ない 入力にゅうりょく すればOKです。


⑧ 改行と段落替えをスムーズに

Enterを1回押すと改行、2回押すと段落替えができます。

2. 画像操作がしやすく

⑨ 複数画像の一斉アップロード

お持ちの画像をまとめてアップロードして、記事内に挿入することができます。ドラッグ&ドロップにも対応しています。GIFアニメーションのアップロードに対応しています。

⑩ ドラッグ&ドロップで見出し画像をアップロード

記事内の画像だけでなく、見出し画像も直感的にアップロードができます。


⑪ 画像の代替テキスト(alt属性)設定

画像の内容をテキストで指定することができます。何らかの問題で画像が表示されない場合や、読者がスクリーンリーダーでnoteを読むときに使用されます。


⑫ 画像の説明文(キャプション)

画像に内容を補足する説明文を記入できるようになります。説明文を入力すると、下記のように表示されます。11月19日のアップデートで、説明文の改行も自由にできるようになりました。

noteの街 イラスト
noteの街イラスト。遠近感を演出する手前のカモメは、締め切り前日の20時に書き足されたそう。←こんなふうに画像の補足情報を、本文の流れに無理なく入れられます。改行も自分の好きなところでできます

3. 書きやすさ向上

⑬ Markdownショートカット

ショートカットキーや記号の入力によって、見出しや強調などの装飾や、戻る・進むなどの操作がしやすくなります。

Markdownショートカットキー
  • ## 大見出し

  • ### 小見出し

  • __強調__

  • **強調**

  • > 引用

  • ```コード```

  • ~~取り消し線~~

⑭ ドラッグ&ドロップでテキスト・画像・各埋め込み要素を移動

文中の要素を移動させるとき、ドラッグ&ドロップでできるようになりました。テキストの場合、キーボードショートカット(Ctrl + Shift + 上下キー)にも対応し、直感的に操作が可能になります。


⑮ スタイルを保持してコピー&ペースト

Googleドキュメントなど、他エディタからスタイルを保持したまま、コピー&ペーストができるようになりました。また、Ctrl + Shift + V キーなら、スタイルを保持しないで貼り付けることも可能です。


⑯ 公開設定画面の全画面表示

ハッシュタグやマガジン追加の「設定画面」を全画面表示することで、広いスペースを使って操作できるようになります。


⑰ テキストに埋め込んだURLを編集中に表示

例えば、「noteの使い方、機能紹介」というテキストにnote公式の記事を埋め込みたいとき。新エディタで編集中に、埋め込んだURLを表示・編集できるようになりました。(※ 読者が読む際には表示されません)

また、note記事や外部サービスの埋め込みにも対応しています。(対応サービス一覧はこちら


⑱ 複数デバイスで同時編集したとき競合する下書きを提示

iOSアプリやPCなど、複数デバイスor複数タブで同時に記事を編集したときに、競合している下書き内容を提示して、上書きされる前に選べるようになりました。

同じ記事を複数のタブで開いて同時に編集すると、このようなポップアップが表示されます


⑲ キーボードショートカット

Macをお使いの方は Ctrl = Command(⌘) , Alt = Optionキー で同様の操作ができます。

ショートカットキー
  • Ctrl + Z : 戻る

  • Ctrl + Y : 進む

  • Ctrl + Shift + Z : 進む

  • Ctrl + B : 太字

  • Ctrl + Shift + > : 引用

  • Ctrl + Alt + 0 : 見出し指定なし

  • Ctrl + Alt + 2 : 見出し

  • Ctrl + Alt + \ : Code

  • Ctrl + Shift + E : 中央寄せ

  • Ctrl + Shift + L : 左寄せ

  • Ctrl + Enter : 段落内改行

  • Shift + Enter : 段落内改行

  • Ctrl + S : 保存

  • Ctrl + ] : 箇条書きの階層を下げる

  • Ctrl + [ : 箇条書きの階層を上げる

  • Ctrl + Shift + X : 取り消し線

  • Ctrl + Shift + 8 : 箇条書きリスト

  • Ctrl + Shift + 7 : 番号付きリスト

  • (テキスト選択状態で)Tab : メニューに移動

    • Tab / Shift+Tab / 矢印キー : メニュー内を移動

    • Enter : メニューを変更

    • Esc : メニューから離脱

  • Ctrl + Shift + 上下キー : 段落移動

今後の追加予定機能

  • 記事のインポート /エクスポート機能

  • 数式表現

  • 箇条書き機能

  • 小見出し(h3)

  • 取り消し線

  • コピペでのスタイル保持

  • note記事や外部サービスの埋め込み対応



ベータ版で使える機能以外にも、新エディタの機能はご意見、ご要望を参考に追加していく予定です!新着情報は、公式Twitter公式noteでどんどん発表していきます。ぜひチェックしてみてください!

・・・

私たちは、クリエイターのみなさんのご意見・ご要望を受けてカイゼン事項を検討しています。引き続き、創作活動がしやすい環境づくりを進めていきますので、ぜひご意見をお聞かせください。

機能に関するカイゼン・ご要望はnoteフィードバックから。
その他のお問い合わせはリクエスト送信フォームから。


追記内容

※ 3月10日追記 : ドラッグ&ドロップでテキストの段落移動(⑬)、キーボードショートカットの追加対応(⑰)など、新エディタの新機能を追記しました。また、見やすいように記事の構成も見直しました。

※ 11月25日追記 : すべてのクリエイターが新エディタの機能をつかえるようになったので、該当箇所を修正しました!

※ 11月19日追記 : 画像の説明文(キャプション)改行や、編集中に埋め込んだURLの表示、10MB以上の画像もアップ可能など、アップデート内容を追記しました。

※ 11月8日追記 : iOSアプリAndroidアプリでも、noteプレミアムに登録している方であれば、新エディタで編集できるようになりました!

※ 10月21日追記 : ベータ版開始時にお知らせしていた、「箇条書き/数字付きリスト」「小見出し(h3)」「画像説明文(キャプション)」「罫線」「取り消し線」などの8つの新機能を追記しました。

※ 8月27日追記 : みなさんからのご意見をもとに新エディタの内容を修正しました!内容は、中間報告の記事で紹介しています。フィードバックはまだまだ募集中です!