WYSIWYGとは？WYSIWYG (What You See Is What You Get)です。

WYSIWYGとは、What You See Is What You Getの頭文字をとったもの。リアルタイムでコンテンツを作成/編集し、作業中にライブプレビューを見るツールに使用されます。

これらのエディターは、オンライン、特にサイトのコンテンツを作成する際に非常に便利です。ブログの投稿、メールの作成、ウェブページのデザインのいずれにおいても、WYSIWYGエディターは作業をより簡単かつ効率的にします。

なぜWYSIWYGエディターを使うのか？

WYSIWYGエディターには、コンテンツ作成プロセスを強化する多くの機能が搭載されています。WordPressサイトであろうと、他のコンテンツ管理システム（CMS）であろうと、機能や見た目は概ね同じです。

ほとんどの場合、すべて以下のような特徴を備えていることがわかるだろう：

テキストの書式設定：これらのエディターでは、ワードプロセッサーのようにテキストを太字にしたり、斜体にしたり、下線を引いたり、打ち消し線を引いたりすることができます。実際、これらのエディターは、Microsoft Wordのように使い慣れた方法でコンテンツを編集できるため、しばしばリッチテキストエディターと呼ばれます。
リンクツールバーのボタンをクリックしてURLを貼り付けるだけで、コンテンツに簡単にリンクを追加できます。コンテンツを作成するためにHTMLコードを追加したり編集したりする必要はありません。
Imagely：画像の追加も簡単です。端末から直接アップロードすることも、オンラインソースから挿入することもできます。多くのWYSIWYGエディターでは、画像を直接インラインに貼り付けることもできます。
テーブルの作成：データをきれいに表示する必要がありますか？WYSIWYGエディターなら、Google Sheetsのような他のウェブアプリケーションを扱ったり、特別な埋め込みを必要とすることなく、コンテンツ内にテーブルを作成することが有効化されます。

しかし、それだけではない。WYSIWYGエディターには、スペルチェックやソースコードビューなどの機能もあります。これらすべての機能により、PHPやCSS、ウェブデザインの学習を心配することなく、質の高いコンテンツの作成に集中することができます。

WYSIWYGエディターの追加機能

上記に加えて、WYSIWYGエディターは、コンテンツ作成プロセスを簡素化し、強化するために設計された多くの機能を備えている傾向があります。

ほとんどのWYSIWYGエディターにはスペルチェック機能がビルトインされています。このビルトインツールは非常に便利で、スペルが間違っている単語に自動的に下線を引いてくれるので、コンテンツに恥ずかしいタイプミスがないようにすることができます。

WYSIWYGのもう一つの非常に重要な部分は、HTMLコード表示です。これにより、ビジュアルデザインとマークアップビューをシームレスに切り替えることができます。

HTMLコードを見るのは、トラブルシューティングが必要なときに最適だ。

画像の問題や、コピー＆ペーストによるテキストの不正確な書式設定などです。

言うまでもなく、多くのWYSIWYGエディターには、強力なデザインツールのセットが付属している。例えば、WordPressのGutenbergエディターは、インタラクティブなドラッグ＆ドロップ式のデザインツールで、コンテンツを書いたりテンプレートを使ったりして、目の前で想像できるものを何でも作ることができる。

インターフェースは常にユーザーフレンドリーなので、技術に精通していなくても、数回クリックするだけで、プロフェッショナルで洗練されたコンテンツに仕上げることができる。

WordPressブロックエディター

2018年に導入されたGutenbergエディターは、WordPressでコンテンツを作成する際のユーザーインターフェースを大きく変えた。

Gutenbergはブロックベースのエディターで、サイトのフロントエンドでもバックエンドでも使用できます。

TinyMCEのようなリッチテキストエディターのように、1つの大きなテキストエリアに書いてデザインするのではなく、個々のブロックを使ってコンテンツを作成します。TinyMCEはオープンソースのWYSIWYGエディターで、以前のWordPressコンテンツエディター（現在はクラシックエディターと呼ばれています）のベースとして使用されていました。

段落や見出しから、画像、動画、引用、さらにはテーブルやカスタムHTMLマークアップのような複雑な要素まで、さまざまなものがあります。

Gutenbergの各ブロックは個別にカスタマイズや移動が可能で、コンテンツのレイアウトやデザインをかつてないほどコントロールすることができます。パターンと呼ばれるあらかじめ用意されたデザインを使用して、ブロックエディター内で作業するためのテンプレートを用意することもできます。

リアルタイムでブロックを移動させることができ、公開する前にブログ投稿やランディングページがどのようになるかを正確に確認することができます。

しかし、ウェブデザインのためのWYSIWYGエディターはGutenbergだけではない。SquarespaceのようなWordPress以外のサイトビルダーもWYSIWYG編集を提供しているし、SeedProdや DiviのようなWordPressのテーマやプラグインも提供している。

SeedProdのWSYIWYGインターフェースは、テキストを編集する場合でも、レイアウト全体を編集する場合でも、シンプルで直感的です。

これらのツールの多くは、Gutenbergよりも高度な機能と優れたユーザーエクスペリエンスを備えているため、多くのプロユーザーがウェブ開発スキルを向上させながら使い始めている。

WYSIWYG編集でよくある問題

WYSIWYGエディターを頻繁に使うようになると、いくつかの問題や障害に遭遇することは避けられません。しかし、心配はいりません！これらの一般的な問題のほとんどには、簡単な解決策があります。いくつか見てみましょう。

フォーマットの問題

よくある問題のひとつに、書式設定があります。例えば、テキストが正しく配置されなかったり、フォントサイズが思い通りに調整されなかったりします。これは多くの場合、コピーしたテキストにHTMLやCSS、あるいはJavaScriptが追加されていることが原因です。

これを解決するには、まずテキストをメモ帳++のようなプレーンテキストエディターにペーストしてみてください。そして、そこからWYSIWYGエディターにコピーしてください。こうすることで、追加のコードが取り除かれ、WYSIWYGエディターがテキストをうまくフォーマットできるようになります。

こうするとリンクや画像も取り除かれてしまうので、リッチテキストエディターかHTMLコード表示を使って挿入し直す必要がある。

画像が表示されない

もう1つのよくある問題は、画像が正しく表示されない、あるいはすべて表示されないというものです。これは、画像のURLが正しくないか、画像ファイルがサポートされていない可能性があります。URLが正しいかどうかを常に再確認してください。画像をアップロードする場合は、.jpg、.png、.gifなどのウェブに適した形式であることを確認してください。

例えば、.svgのような形式を使用する場合、WordPressを正しく動作させるには特別な調整が必要です。詳しくは、WordPressでSVGファイルを安全に動作させる方法をご覧ください。

予期せぬコードの変更

保存後にコードが予期せず変更されることがあります。WYSIWYGエディターは完璧ではないので、意図しないHTMLやCSSを追加してしまうことがあります。これにより、コンテンツのルック＆フィールが変わってしまうことがあります。

これを改善するには、HTMLコード表示に切り替えて、不要なコードを手動で削除すればよい。ただし、これを安全に行うには、HTMLマークアップの基本的な理解が必要なので注意してください。

ブラウザー互換性の問題

最後に、異なるブラウザーでコンテンツを表示する際に問題が発生することがあります。すべてのブラウザーがHTMLとCSSを同じように解釈するわけではありませんし、JavaScriptはシステムの設定によって動作が異なることがあります。

これらはすべて、コンテンツの表示方法の不一致につながります。Chrome、Firefox、Safari、Microsoft Edgeなど、複数のブラウザーでサイトをテストし、どこで表示されてもコンテンツが正しく表示されるようにしましょう。

WYSIWYGエディターについての最終フィードバック

WordPressのGutenbergブロックエディターや、古いオープンソースのTinyMCEクラシックエディターのようなWYSIWYGエディターは、コンテンツ作成プロセスを大幅に簡素化できる重要なツールです。

ドラッグ＆ドロップによるリアルタイム編集、HTMLコード表示、テンプレートなどの機能を備えたこれらのウェブデザインツールを使えば、コーディングよりもコンテンツのクオリティに集中することができる。

WYSIWYGエディターについて、そしてそれがウェブデザインのスキルアップにどのように役立つのか、お分かりいただけたでしょうか。WordPressに最適なドラッグ＆ドロップのページビルダーや、あなたのサイトに最適なウェブデザインソフトウェアの選び方についてのガイドもご覧ください。

その他のリソース

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

何ですか: WYSIWYG (見たままが得られる)