WYSIWYGとは？～よく起こる問題点と解決策～

Webサイトの管理にCMS（Contents Management System）が組み込まれることが多くなり、HTMLに詳しくなくてもサイトの更新ができるようになりました。

CMSの投稿画面にワープロソフトのような書式ボタンがついており、見たままで編集できる機能が実装されているためです。ビジュアルエディタなどと表記されていることもありますが、この機能をWYSIWYG（ウィジウィグ）といいます。今回は、よく起こる問題点と解決策を紹介します。

WYSIWYGとは

WYSIWYGの成り立ち

WYSIWYGとは、What You See Is What You Get（見たままが得られる）の頭文字をとった言葉です。

パソコンの黎明期、MS-DOSと呼ばれる機種が全盛だった時期にユーザーインターフェースが真っ黒な画面に文字を打ち込むしかできなかった時代に、アップル社がMacintosh（Mac）を開発してマウスを使ったパソコン操作やWYSIWYGを実現し、一般の人々へのパソコンの普及に大きく影響を与えました。WYSIWYGはMacが誕生した1984年頃によく使われた言葉です。

下はイメージですが、一般的なWYSIWYGです。

CMSのWYSIWYG機能の注意点

直感的に使用できるグラフィカルなインターフェースが当たり前になった現在、あらためてここでWYSIWYGを話題にしなければならないのは、CMSのWYSIWYG機能が万能ではなく、しばしばトラブルが起こるケースが見られるためです。

CMSで提供されるWYSIWYG＝ビジュアルエディタには多様なボタンが付いていますが、そのカラクリは裏側でHTMLのタグを書き出してくれるシステムが動いているということです。しかし、その機能はごく限られおり、また、使用感に扱いづらい癖もあります。

たとえばマイクロソフトのワードやエクセルなど、別のWYSIWYGソフトで作成したデータをそのままコピー＆ペーストしてしまうと、不必要な書式や余白などのタグまでもってきてしまい、表示が乱れるといった問題がよく起こります。

そんな時、ビジュアルエディタからテキストエディタ（HTMLエディタ）に切り替えてソースを見てみると、非常に複雑なHTMLタグが書き出されていることがわかります。解読してソースコードを直接修正できる担当者はまだいいのですが、いろいろな担当者が何度も記事の編集を重ねていくうちに、不要となったタグが残ってしまい、WYSIWYG上では修正不能になることもあります。

ですので、CMSのビジュアルエディタを使う際に、他のソフトなどからコピペする場合には、なるべくシンプルにテキストデータだけをコピペし、見た目の加工は必要最小限にすることです。また、Webサイトの更新に携わる人はソースコードを読めるくらいの、HTMLタグの知識は多少なりとも持っていたほうがいいでしょう。

解決方法：ワードやエクセルからコピペできる機能を追加してもらう

このような問題の発生を避けるためには、WebサイトにCMSを組み込む際、社内で実際に使う人のスキルや環境に合わせて必要なボタンを追加や削除するなど、WYSIWYG機能を強化してもらうといいでしょう。ワードやエクセルから直接コピペできるようにする機能も、Web制作会社に依頼すれば実装できます。

スマートフォン時代のWYSIWYG

CMSのWYSIWYGはスマートフォン非対応

また最近増えているのが、パソコン画面ではきれいに見えているのに、スマートフォンで見るとレイアウトが崩れていることに管理者が気づかなかったというケースです。

CMS は基本的にパソコン向けを前提に設計されているため、スマートフォンの画面サイズに対応したWYSIWYGの編集画面は標準では付属していません。プレビュー画面もないため、スマートフォンで実際の見え方を確認しながら編集するという二度手間がかかります。スマートフォンしか持たない人も増えている今、スマートフォンユーザーのケアは重要な問題です。

WYSIWYGのスマートフォン用改修も可能

このケースでも、CMSのビジュアルエディタを使う際、あまりWISYWYGを過信してレイアウトを変更しすぎないことが大切です。決められたフォーマットに揃えることがCMSの基本機能ですので、ページごとの見た目の加工は必要最小限にとどめることです。

まとめ

スマートフォン対応に力を入れていく方針でWebサイトをリニューアルする場合は、あまりWYSIWYGに頼らないCMSを実装してもらうのも手ですので、もしそのような機会があれば、依頼する制作会社に相談して進めてはいかがでしょうか。