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コードを追加または編集する必要はありません。
画像：画像の追加は簡単です。デバイスから直接アップロードしたり、オンラインソースから挿入したりできます。多くのWYSIWYGエディターでは、画像を直接インラインで貼り付けることも可能です。
テーブル作成：データをきれいに表示する必要がありますか？WYSIWYGエディタを使用すると、Googleスプレッドシートなどの他のWebアプリケーションを操作したり、特別な埋め込みを必要としたりすることなく、コンテンツ内にテーブルを作成できます。

しかし、それだけではありません。WYSIWYGエディタには、スペルチェック、ソースコード表示などの機能も用意されています。これらの機能により、PHP、CSS、またはWebデザインを学ぶことを心配することなく、質の高いコンテンツの作成に集中することが容易になります。

WYSIWYGエディタの追加機能

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

ほとんどのWYSIWYGエディターには、スペルチェック機能が組み込まれています。この組み込みツールは非常に便利で、間違って綴られた単語を自動的に下線で示し、コンテンツの恥ずかしいタイプミスを回避するのに役立ちます。

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

HTMLコードを確認することは、トラブルシューティングが必要な場合に最適です。

これらは、画像の表示に関する問題や、コピー/ペーストによる不正確なテキストフォーマットのようなものである可能性があります。

言うまでもなく、多くのWYSIWYGエディタには、堅牢なデザインツールセットが付属しています。たとえば、WordPressのGutenbergエディタは、コンテンツの作成とテンプレートの使用を、目の前で想像できるあらゆるものを実現できる、インタラクティブなドラッグアンドドロップデザインツールです。

インターフェイスは常にユーザーフレンドリーなので、技術に詳しくなくても、数回クリックするだけでプロフェッショナルで洗練されたコンテンツを作成できます。

WordPressブロックエディター

Gutenbergエディターは2018年に導入され、WordPressでのコンテンツ作成のユーザーインターフェースを変更しました。

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

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

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

各Gutenbergブロックは個別にカスタマイズして移動できるため、コンテンツのレイアウトとデザインに対する前例のない制御が可能になります。パターンと呼ばれる既製のデザインを使用して、ブロックエディタ内で直接テンプレートを使用することもできます。

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

ただし、GutenbergはWebデザイン用の唯一のWYSIWYGエディタではありません。WordPress以外のウェブサイトビルダーであるSquarespaceはWYSIWYG編集を提供しており、SeedProdやDiviのような他のWordPressテーマやプラグインも同様です。

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

これらのツールの多くは、Gutenbergよりも高度な機能と優れたユーザーエクスペリエンスを備えているため、多くのプロユーザーは、Web開発スキルを向上させ続けるにつれてそれらを使用し始めています。

WYSIWYG編集における一般的な問題

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

書式設定の問題

一般的な問題として、フォーマットが挙げられます。例えば、テキストが正しく揃わなかったり、フォントサイズが意図した通りに調整されなかったりすることがあります。これは、コピーしたテキストに余分なHTML、CSS、あるいはJavaScriptが含まれていることが原因であることがよくあります。

これを修正するには、まずテキストをNotepad++のようなプレーンなテキストエディタに貼り付けてみてください。次に、そこからWYSIWYGエディタにコピーします。これにより、通常、追加のコードがすべて削除され、WYSIWYGエディタがテキストをより適切にフォーマットできるようになります。

これを行うと、リンクや画像も削除されるため、リッチテキストエディターまたはHTMLコードビューを使用して再挿入する必要があります。

画像が表示されない

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

たとえば、.svgのような形式を使用する場合、WordPressは正しく機能するために追加の調整が必要です。詳細については、SVGファイルをWordPressで安全に機能させる方法に関するガイドを確認してください。

予期しないコードの変更

保存後にコードが予期せず変更される場合があります。WYSIWYGエディターは完璧ではなく、意図しない追加のHTMLやCSSを追加することがあります。これにより、コンテンツの外観や雰囲気が変わる可能性があります。

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

ブラウザの互換性の問題

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

これらすべてが、コンテンツの表示方法に一貫性のない結果をもたらす可能性があります。コンテンツがどこで見られても問題なく表示されるように、Chrome、Firefox、Safari、Microsoft Edgeを含む複数のブラウザでサイトをテストしてください。

WYSIWYGエディターに関する最終的な考察

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

ドラッグ＆ドロップによるリアルタイム編集、HTMLコード表示、テンプレートなどの機能を備えたこれらのウェブデザインツールにより、コーディングに時間を費やすのではなく、コンテンツの質により集中できるようになります。

これで、WYSIWYGエディタとそのWebデザインスキルを向上させる方法について理解が深まったことを願っています。また、WordPress向けの最高のドラッグアンドドロップページビルダーの専門家による選択や、サイトに最適なWebデザインソフトウェアの選択方法に関するガイドも確認できます。

追加リソース

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。