Title: ユーザーインターフェース Author: Akira Tachibana Published: 2022年2月20日 --- # ユーザーインターフェース ## この投稿内 * [ブロックエディター](https://ja.wordpress.org/team/handbook/block-editor/explanations/user-interface/?output_format=md#%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%83%BC) * [ブロック](https://ja.wordpress.org/team/handbook/block-editor/explanations/user-interface/?output_format=md#%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF) * [設定サイドバー](https://ja.wordpress.org/team/handbook/block-editor/explanations/user-interface/?output_format=md#%E8%A8%AD%E5%AE%9A%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC) * [ブロックライブラリ](https://ja.wordpress.org/team/handbook/block-editor/explanations/user-interface/?output_format=md#%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA) [↑ ページの先頭へ戻る](https://ja.wordpress.org/team/handbook/block-editor/explanations/user-interface/?output_format=md#wp--skip-link--target) ## 󠀁[ブロックエディター](https://ja.wordpress.org/team/handbook/block-editor/explanations/user-interface/?output_format=md#%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E3%83%BC)󠁿 ブロックエディターの一般的なレイアウトでは、一番上にバー、その下にコンテンツがあり ます。 ![エディターインターフェース](https://cldup.com/VWA_jMcIRw-3000x3000.png) **ツールバー** にはドキュメントレベルのアクションがあります: 編集 / 選択モード、 保存ステータス、元に戻す (undo) / やり直す (redo) / 挿入、設定のトグル、公開オプション。 **コンテンツ領域** にはドキュメントそのものが表示されます。 **設定サイドバー** には「ブロック」タブ内に、タグ、カテゴリー、スケジュールなどの 文書やブロックの追加設定が配置されます。ツールバーの歯車ボタンをクリックすると設定 サイドバーが消え、ユーザーはより集中した執筆体験を得られます。タブレットなどの小さな 画面ではデフォルトでサイドバーは隠されます。 ## 󠀁[ブロック](https://ja.wordpress.org/team/handbook/block-editor/explanations/user-interface/?output_format=md#%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF)󠁿 ブロックは、エディターのもっとも基本的な単位です。端的に言えば、すべてがブロック です。ユーザーはブロックを使用し、裏側の HTML マークアップの縦の流れを模しながら、 投稿やページを構築します。 ドキュメントの各セクションを操作可能なブロックとして表現することで、コンテキスト 的にブロック固有の機能をも追加できます。これはデスクトップアプリケーションの慣習 に発想を得たもので、UI を重くせずに高度な機能を拡張できます。 選択したブロックでは多くのコンテキスト指向のアクションが表示されます。 ![ブロックインターフェース](https://cldup.com/3tQqIncKPB-3000x3000.png) ブロックインターフェースには基本的なアクションが含まれます。ブロックエディターの 目標として、適切で一般的なデフォルトを提供し、ユーザーが設定サイドバーの高度なアクション を使わなくても、完全なドキュメントを作成できることを目指します。 **ブロックツールバー** は、一般的に利用されるアクションをハイライトします。ブロック ツールバー内には**ブロックアイコン**があり、選択したブロックの高レベルコントロール を含みます。ユーザーはブロックを別の互換性のあるブロックタイプに変換できます。また いくつかのブロックでユーザーはブロックアイコンを使用して代替のブロックスタイルを 選択できます。 **ブロックフォーマット** オプションを使用するとブロックレベルの設定が可能です。** インラインフォーマット**オプションではブロック内の要素の配置が可能です。縦に長い ブロックでブロックツールバーは、ユーザーがページを下にスクロールしても画面の先頭 にピン止めされます。 ブロックは **ブロックの移動** アイコンを使用して上下に移動できます。また「詳細設定」 メニュー (縦の3点リーダー) からブロックアクションも利用可能です。ブロックの削除や 複製のほかに、「HTMLとして編集」や「再利用ブロックに追加」のような **高度なアクション** があります。 選択されていないブロックにはブロックツールバーやその他のコンテキスト指向のコントロール は表示されません。選択されていないブロックはコンテンツ自身のプレビューとなります。 ![選択されていないブロック](https://cldup.com/DH9HZnEgwH-3000x3000.png) 選択とフォーカスが異なる場合があることに注意してください。例えば画像ブロックはフォーカス がキャプションフィールドにある場合にも選択できます。 ## 󠀁[設定サイドバー](https://ja.wordpress.org/team/handbook/block-editor/explanations/user-interface/?output_format=md#%E8%A8%AD%E5%AE%9A%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC)󠁿 ![設定サイドバー](https://cldup.com/iAqrn6Gc8o-3000x3000.png) サイトバーには「文書」と「ブロック」の2つのタブがあります。 * **文書タブ** 編集中の投稿やページのメタデータや設定を表示する。 * **ブロックタブ** 現在選択中のブロックのメタデータや設定を表示する。 それぞれのタブには、ユーザーが開閉できる、一連の編集可能フィールド (**サイトバー セクション**) があります。 ブロックに高度な構成が必要な場合は、設定サイドバーに設定を配置してください。ブロック の基本的な操作に必要な設定をサイドバーのブロックタブ内に置かないでください。ユーザー は執筆体験に集中するためサイドバーを非表示にするかもしれません。適切なデフォルト 選択し、重要なアクションはブロックツールバーに配置してください。 サイドバーのブロックタブに置くべきアクションの例です。 * テキストのドロップキャップ * ギャラリーの列の数 * 「最新の投稿」ブロックの表示する投稿やカテゴリーの数 * 基本的なタスクを実行する際にアクセスの必要のないすべての構成 ## 󠀁[ブロックライブラリ](https://ja.wordpress.org/team/handbook/block-editor/explanations/user-interface/?output_format=md#%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA)󠁿 ![ブロックライブラリ](https://cldup.com/7QoQIoLk-A-3000x3000.png) ツールバーから、または、コンテンツ領域内のコンテキストとして、ブロックが挿入される と **ブロックライブラリ** が表示されます。内部でブロックは、折りたたみ可能なセクション 内に配置されます。ブロックライブラリの検索バーは、ユーザーの入力に応じて自動でブロック のリストをフィルターします。ユーザーは **ブロックボタン** または **ブロック名**  を選択することでブロックを選択できます。 [原文](https://github.com/WordPress/gutenberg/blob/trunk/docs/explanations/user-interface/README.md) 公開日 2022年2月20日 最終更新 2022年2月20日 [ 前へ: Styles in the Editor](https://ja.wordpress.org/team/handbook/block-editor/explanations/architecture/styles/) [ 次へ: ブロックのデザイン](https://ja.wordpress.org/team/handbook/block-editor/explanations/user-interface/block-design/)