松村(左)

ホームページの制作の多くがWordPressを使ったものが主流となり、画面サイズに合わせて配列が自動で変更できるレスポンシブWebデザインのサイトが増えてきましたね。でも、なぜ「ブログの更新が楽な管理画面」が開発されないんだろうと、ここ数年考えてきました。

ブログの更新が楽な管理画面にも、ピンからキリまである

そこで、私はプログラマーやエンジニアではありませんので、数年前に1度だけWordPressを使ったホームページの制作会社さん数件に「投稿画面のカスタマイズ」だけを請け負ってくれないかと相談したところ、安いところでも「20万円くらいですかね」と言われたので、しばらくの間、断念していました。

笑顔(右)

しかし、技術の進歩ってすごいですね!

WordPressには「プラグイン」と呼ばれる、拡張機能を実現してくれるWordPress専用のアプリがあって、この中に無料で投稿画面をカスタマイズしてくれるプラグインがありました。確かにこの「AddQuicktag」を使うと、専門家に頼まなくてもブログの更新がかなり楽にできる投稿画面にカスタマイズすることはできるのですが、結局このプラグインを使いこなすにしてもHTMLの知識が必要だったり、CSSの知識がなければ、思うように使いこなせないのです。それだとWordPressを納品したお客様がHTMLやCSSの知識がない場合、どのボタンを押せば、どんな装飾ができるのか覚えるまでに時間がかかってしまう…
これだと意味がないと思いこのプラグインを実装することを断念しました。(HTMLやCSSの知識がある人で「PHPは苦手」という人にはとっても便利なプラグインですよ!)

ということで、実験とお勉強を開始!

すると、ブログの更新を楽にしてくれるボタンを追加することもできるようになり、そして、お客様それぞれ独自の要望を揃えた投稿画面をご提供できるようになりました。

投稿画面のカスタマイズは、ここまでカスタマイズできる

まずは、WordPressを導入しただけの投稿画面キャプチャをご覧ください。

WordPressデフォルトボタン

上図赤枠内を拡大したものがこちらです。

デフォルトボタン拡大図

はい、HTMLやCSSのことが分からなければ、ちんぷんかんぷんですよね。ですから今までは、こういったボタンは一切使わずに、文字の装飾などの方法を覚えていただいていました。

覚えていただくといっても文字全体に装飾を行う場合には<div class=”ここにスタイル”></div>で区切るということやテキストだけの場合は<p class=” ここにスタイル”></p>で区切るということ、文章の中の一部に装飾を行う場合は<span class=” ここにスタイル”></span>で区切り「ここにスタイル」と書かれている箇所には、スタイルシートにメモ書きされた装飾内容を選びながら、該当のスタイルを選んでコピーしてください、としていたのです。詳しくは下記の動画をご覧ください。

確かにこの取り組みは、クライアントさんがCSSやHTMLを学び始めるきっかけになりました。しかし、実務がある中、このようなホームページを運営するためのお勉強もしなければならないので、覚えるまでは大変です。結局、更新代行を外注したりコンテンツ制作のホームページ制作会社に依頼しなければならない企業も出てきました。これでは意味がありません。

そこで、より更新作業をスムーズに行えながらも、土台となるHTMLソースが綺麗で(SEO的にもこれは重要です)SEOをちゃんと理解して構築されているWordPress Themeを検証することを始めました。そこで、現在はいくつかの優秀なThemeにまで絞り込んで、適宜、目的に合わせご提案しホームページ制作のご依頼時に採用させていただいています。

その中のひとつを採用した際の投稿画面はこんな感じになります。

賢威デフォルトボタン

ボタンは増え「見出し(h2)」や「太字(黒)」文字1.4倍などとHTMLやCSSの知識がない人でも文字装飾が行えそうですよね。
ただ、難点はどこにどのボタンがあるのかを覚えにくいという点です。また、デフォルトボタンもそのままですし「引用セット」というのも中身を理解できていなければ使えません。加えて、この「引用セット」の隣にある「校正」は、2017年現在では日本語非対応のWordPress機能です。

必要ないボタンや、「使えないボタン」があるわけですね。

そして、このほかにも、下線を引いたり、蛍光ペンでマーキングしたりなどの文字装飾が、何種類か必要になるのではないかと思います。

このページでも何種類かの文字装飾を使用していますが、このサイトを作っているWordPress投稿画面は下記のようにカスタマイズされています。

覚えやすく直感的に操作できるWordPress投稿画面のカスタマイズ。

私が使っている投稿画面は以下のようにカスタマイズされています。

WordPress投稿用カスタムボタン

あえて、赤枠での強調や拡大キャプチャを載せませんが、ボタンにはそれぞれ「覚えやすい名前」と必要最低限、確認したいソースタグの一部を掲載させています。なぜ、「必要最低限、確認したいソースタグ」をボタン名として記載しているのかというと、万が一カスタマイズに軽微なミスがあった場合、早急に気づいていただくためです。

実際には、制作段階からこの画面カスタマイズを実施して、制作にあたりますので、納品時にそのような不具合は起こりません。

しかし、納品後のご要望で新しいボタンを追加した時などは、そういったエラーが起こり得ないとは言い切れませんので、ボタンに書かれたソースタグと、実際に入力されるソースタグが異なれば「ひとまずそのボタンは使えないボタン」として、修正依頼を出していただけば速やかに対処することができるわけです。

またボタンの配色は、装飾結果と同じような装飾を施しています。パソコン上での表示形式とスマートフォンで閲覧した際の表示形式が変更される、レスポンシブWebデザインを、ご依頼者でも自由に設定できるように画面の2分割ボタンと3分割ボタンも準備しています。これらのボタンには「1/2 1つ目」「1/2 最後」として、このボタンは2つセットだと見てすぐにわかるように、ボタンを装飾しています。

実際の表示に枠線は表示されません。また、3分割ボタンに関しては、1つ目のボタンと2つ目のボタンで入力されるソースコードは同じなのですが、ミスの防止のために「1/3 1つ目」「1/3 2つ目」「1/3 最後」としています。技術的には3分の1分割と3分の2分割というレイアウトも可能なのですが、この場合表示画面の幅が端末によって変更された際に、読みづらくなってしまうので、不採用としました。

では、実際に原稿をWordPressに貼り付けて、コンテンツとして仕上げていく行程を収録した動画で確認してください。

なぜ、更新しやすい投稿画面が必要なのか?

 インターネット上には「ブログ感覚で更新ができる!」と謳ったホームページ作成支援サービスもありますし、WordPressも同じように表現されます。しかし、実際にフタを開けてみると、HTMLソースは汚かったり(←これSEO的にちょっとマイナス)、CSSのことが分かっていないと、使いこなせなかったりと、使い勝手は悪いわけです。

実際問題、無料ブログのHTMLソースが綺麗なのかといえば、すごく汚いのは事実なので「ブログ感覚」という意味では、何も嘘は言っていません。あまり認識されていることではありませんが、ウェブ業界には、こんな「屁理屈まがい」の言い回しが使われることはたくさんあります。

要素を検証

一般の人たちは、上図のようなウェブサイトの「要素の検証」や「ページのソースを表示」などのブラウザ機能を使って、各コンテンツがどのように作られているのか(HTMLがどのように書かれているのか)を確認することはありません。

このように「一般の人が気づかないこと」を「聞こえの良い言葉に変えて」表現していることは少なくありません。

松村(左)

「SEO」という言葉も、同じように一般の人たちが気付いていないことを、聞こえの良い言葉に置き換えられていることも多いと感じませんか?。

「SEOを実施すれば、検索で上位に表示される」と、よく耳にします。また「SEOで成功すれば、無料でアクセスを獲得できるようになる」なんて話もよく耳にします。

しかし、この「SEO」とは「検索エンジンに最適化させること」であって、検索の上位に表示させるためのテクニックや裏技ではありません。さらに、SEOを行ったからといって、どんなキーワードで上位表示されるかどうかは、その最適化を行った、もしくは「最適だと認められた」キーワードでしか検索の上位には表示されません。

『SEOについて』のページでもお伝えしていますが、コンテンツの「作り込み」でSEOを意識したり、外部リンク対策をしたからといって、これまた検索で上位に表示されるとは限らないのです。逆に何も意識していなくても、そんな技術的なSEOを頑張らなくても、これは『50ページ以上増やすことができないホームページサービスに驚き!』で書きましたが「バズる」と多くの場合はページのタイトルに含まれたキーワードに関連した検索キーワードで上位表示します。

このことは、仮にあなたのコンテンツに技術的なSEOを行なっていたとしても、何のSEOも行なっていないコンテンツがバズれば、ランキングが入れ替わってしまうということなのです。

結果、上位表示するかどうかは「絶対評価」ではなく「相対評価」で決まるわけなのです。

SEOをウェブマナーだと私たちは考えているので、俗に「特定のキーワードで検索結果の上位に表示されるような施策」のことを、私たちはSEOと区別して「上位表示対策」と呼んでいます。もう、かれこれ10年以上も前から俗にいう「SEO(私たちが言うところの『上位表示対策』)」が、何やら魅惑のテクニックのように語られているのも、一般の人たちにはわからないであろう「専門知識や技術が『そこ』(赤文字)にあると思わせているだけ」で、SEOの実体なんて、誰も把握できていないのです。

ただ、詳しくは『SEOについて』のページでお話ししているので重複しますので避けますが、基本的に「検索エンジンがコンテンツ内容を適切に読み取るための最適化」を行う約束事のような「基本項目」と呼んでいる項目はあります。そのことさえ押さえれば、あとは、より多くのトラフィックが発生するきっかけを生みやすくすることこそが「検索エンジンが使われている現状に最適化させるSEO」になるのではないかと私たちは考えているわけなのです。

より多くのトラフィックを獲得することがSEOに繋がるからこそ!

コンテンツが、閲覧者に気に入られれば、SEOにも繋がることは、ここまででお伝えした限りです。そして、検索エンジンにコンテンツの内容がはっきり伝わるようなコンテンツの作り方が身につけば、人気のコンテンツを生み出すためのきっかけにもなります。

特に具体的にどうすれば検索エンジンのGoogleがコンテンツ内容を適切に読み取ってくれるのか、もしくは読み取ってくれたのかを把握するためには、基本事項を抑え、あとはあなた自身の表現方法が、どれだけ検索エンジンに読み取られやすいのかをいち早く知ることが先決です。そのためにも、記事の原稿が出来上がれば、できる限り素早くコンテンツに変換する仕組みが必要になります。

ブログの更新を始めたばかりの時は、どうしても「下手な鉄砲」状態になりますが、検索エンジンがあなたのコンテンツに記載した内容を適切に把握できているかどうかを知るためにも、そして、何より、より多くのあなたの見込み客に、そのコンテンツが届くためにも、1記事でも多くのコンテンツがインターネット上にあったほうが、有利なことに変わりはありません。

「下手な鉄砲数打ちゃ当たる」の鉄砲はなかなか練習できませんし、正しい使い方なんてなかなか教わることもできません。しかし、検索エンジンが読み取りやすいコンテンツの基本形というのはすでに存在しています。基本形を抑えてしまえば、あとは、どのようなアプローチや表現が、どんな見込み客に届くのかを知ること。そして、そのアプローチ導線や届く見込み客の数を増やすだけのことです。そのためにも、コンテンツを足し続けることは、変化し続ける市場の欲求や人々の悩みと合わせて、情報を発信し続けることが重要になってきます。

原稿を書くことに時間をかけることはあっても、いまの時代、ウェブコンテンツに変換するための時間は極限まで短くすることができます。いや、できる限り「短時間でできる方法」を手に入れることが得策なのです。

そういった意味では、動画も人気ですが、動画を撮影する前にはシナリオや台本が必要になるでしょう。だったら、動画を撮影する前に、そのシナリオや台本を文字情報として、ウェブコンテンツ化するほうが、賢い選択なのです。その動画をどれだけの人が受け入れてくれるのかわからないのに、時間とお金をかけて動画を撮影する人なんてどこにもいません。

映画やドラマをみれば、一目瞭然です。ベストセラーになった映画や人気の漫画の映画化やドラマ化はヒットしますが、原作のない映画やドラマは凄腕監督とスタッフに恵まれなければ「えらいこっちゃ」になってしまいます。

笑顔(右)

どういった表現やどういったテーマが受け入れられるか、もしくは人気なのかをインターネットで調査できるんですから、すごい時代になったとは思いませんか?

そして、そういった調査をするためのウェブコンテンツを生み出すためにHTMLの知識もCSSのスキルも必要なく、ボタンを選んでいくだけで、出来上がるのですから、あなた好みの、あなたにとって使い勝手の良い投稿画面を手に入れない手はないと思います。

では、投稿画面のカスタマイズの料金ですが、どのくらいの金額が必要になると思いますか?数年前、私が専門家に相談した際は安くても20万円と言われました。しかし、数年経った今では無料のプラグインを導入して、あとはネットで調べながらコツコツあなた自身で作り上げていくこともできます。

ですから、その時間と労力を短縮していただくために、どんな文字装飾やデザインを実装したいかのご相談を60分間電話で応対する「無料電話相談」をセットにして7万円(税別)でご提供いたします。この料金内で掲載できるボタンの数は7万円なら20個まで、50個までも10万円(税別)です。おそらくこれ以上のボタンは必要ないと思います。あまり多くても使いにくいでしょう。オリジナルなデザインやボタンの作成、プログラムの実行など特殊なボタンに関してはオプションとなりますが、下記にあるような下線や蛍光マーカー、文字色の変更、ボタンなどは、すべて配色、大きさ、形を変更できます。

ボタンの配置に関しては、納品後1ヶ月間に限り修正及び変更が可能になります。ホームページの制作とセットでご依頼の場合も可能ですし、この投稿画面カスタマイズのみのご依頼も可能です。極稀に、投稿画面カスタマイズが反映されないサーバーやWordPressのThemeがございますので、ご依頼を頂く前に、一度「テストボタン」を実装し、実装可能だった場合のみご依頼をお受けいたします。

なお、ホームページの制作とセットでご希望される場合には、管理画面カスタマイズに、この「投稿画面カスタマイズ」が含まれます。管理画面カスタマイズの詳細はご依頼内容によって異なります。詳しくはお問い合わせください。

サンプル装飾の例、この部分は「大見出し」ボタンが反映されています。

箇条書きは「・」(中黒リスト)と連番リストが可能です。
中黒リストというのは、このような感じになります。

  • WordPress管理画面はカスタマイズしたほうが良い
  • 投稿画面だけのカスタマイズなら7万円。ホームページの制作とセットなら、さらにお得
  • 更新が楽な投稿システムなら更新頻度を上げても苦にならない

以上が、中黒リストですが、この一文にはマーカー(黄)が採用されています。このほか私はマーカー(赤)を使いますが、他の色は使いません。

連番リストとは次のような装飾です。

  1. SEOはウェブマナーだ
  2. SEOと上位表示対策は、全くの別物である
  3. SEOのテクニックなんて、眉唾もの
  4. SEOは基本を押さえるだけで充分!SEOテクニックなんて不要
  5. WordPressで作られたホームページに更新代行サービスなんて、意味不明なサービスだ。

文章の全体または、一部の文字に下線を引くことができます。

また、ボタンには大きく分けて2種類あります。どのようなボタンのほうがよくクリックされやすく、どんな色がクリックされやすいかなど、さまざまな研究がなされているようです。しかし、ボタンを設置する前後の文章や周りの配色によっても、そのクリック率タップ率は変わりますので、鵜呑みにすると危険です。ボタンをクリックしなければ、ボタンにリンクされているページを見ることができないわけですから、ボタンをクリックして、その先のページを見たくなるような、誘導文をどうするのかを検証して見るのが一番確実だと私は思います。

文字の大きさもさまざま変更できます。私が1.6倍と1.8倍を実装しているのは、端末サイズで可読性に影響が出る場合などに微調整をしやすくするためです。例えば…

ホームページ作成でもっとも重要なこと。運営でもっとも不必要なこと
という一文があったとします。

人は「否定文を正確に認識できない」もしくは「見落としてしまう」という脳の働きがあるのですが、そのために「必要ではないこと」とせず「不必要」としています。しかし、画面サイズによって「不」のところで改行されてしまうと、次の行は「必要なこと」となってしまい、読者に誤認識を与えてしまいます。

これもコンテンツ・デザインの一種なのですが、言い回しを変更するか、文字サイズを変更するかでは、なるべくまずは、技術的要素が不必要な「言い回しを変更する」を採用します。しかし、ボタンひとつで、解決されるのなら、時間もかかりませんのでボタンを準備したというわけです。

どうしても、変更できる「よい言い回し」が思いつかなかったり、2種類の文字の大きさだけでは「おさまりが悪い」場合は、最終手段として技術的要素で修正します。

松村(左)

修正の仕方はいろいろあるけれど、どの方法で修正するかは「時間軸」で考える!ということが、大切なんですね!

そして、これが吹き出し装飾です。アイコンの設定とアイコンの位置(右か左)そして、吹き出し内の背景色を変更できます。

全てのサンプルをここで紹介しても、すごく長くなりますのでこのくらいにして、最後に文字装飾に関するとっても重要なことをご紹介しておきます。

強調したい箇所を装飾するだけじゃ意味がない!

文字の装飾には単純に強調したい場所を装飾するだけではありません。これを私たちはコンテンツ・デザインと呼んでいます。コンテンツ・デザインは非常に奥が深く、とても細かな作業になりますので、私たちも全てのコンテンツに対して、そんなデザインを実装することはありません。限られたコンテンツや人気のコンテンツ、成果にヒモつくようなサイトの中でも重要なコンテンツだけ、そのような「コンテンツ・デザイン」を実施します。コンテンツ・デザインの詳細は下記のボタンからご確認ください。