Hタグは、「見出し」です。
うっかり「文字を大きくするため」に使ってしまっているサイトも見かけますが、ヘッダをうまく使うと、検索(SEO)に対しても非常に有利に働きます。
最近、条件を満たすと、Google 検索で、見出し(Hタグ)が検索結果に列ぶことがあります。
検索結果は常に改良が続いているので、今同じ結果が得られるかどうかはわかりませんが、「広島県 歴史」を検索すると、Wikipediaの「広島県」のページの「歴史」の見出しの箇所が抜粋され、「歴史 に移動」をクリックすると、その見出しの場所に直接飛ぶことができます。
一般論では、見出しを使いこなさないといけないほど詰め込みすぎたページでは、「広島県の歴史」という別のページを作った方が良いのですが、ともあれ、見出しをうまく使うことで、たくさん詰め込んだページでも、閲覧者を適切な場所に誘導できます。
Wikipedia 以外ではあまり見ない気がするので、見出しが検索結果に採用される条件はわりと厳しいのかもしれませんが、素直な構造にしておくと、将来的なデザインの変更にも強いし、検索エンジンからも高評価されます。
私も、WordPressを覚えるときに、入門書を何冊も読みましたし、Webサイトも沢山見ました。
公式ページが充実しているのもWordPressの良い所ですが、入門用として読むには少し根気が必要かもしれません。
それよりも「習うより慣れろ」で使えてしまうのが、WordPressの良い所です。
そんなWordPressですが、投稿の属性として「カテゴリー」と「タグ」を設定することができます。この2つは、幾つかの違いはありますが、記事を分類するという用途では同じ側面を多く持っています。
いろいろな本やサイトで、この「カテゴリー」と「タグ」をどのように使い分けるか、色々な解説がされていますが、どうにもしっくりくる説明がありませんでした。
ですから、私は「とりあえず、タグを設定して」とお願いしています。
タグは自由度が高く、また、幾つでも設定できるので、とりあえず設定しておけば、後から分類することも可能です。
タグをつける際は、適度に細かく分けてやると良いと思います。例えば「4K OLEDテレビ」というタグをつけるよりも「4K」「OLED」「テレビ」と3つのタグをつけた方が、後で便利だと思います。
ある程度記事が溜まってくると、よく使っているタグからトップページを自動生成できます。記事が増えるとトップページも変わってきます。逆に、自分がどこに力を入れて記事を書いているかが客観的にわかるので、力を入れたい記事を増やす目安にも使って下さい。
トップページの自動生成は、記事が5つ以上できてから、担当者にご相談下さい。
一方で「カテゴリー」のほうは、なかなか難しいです。
技術的に色々な解説があるのですが、技術的な理由はコンテンツを縛る理由にはなりません。
今、なんとなくこれかな、と思っている使い分けは、
ではないか、と思っています。
飲食店であれば「メニュー」や「お知らせ(店休日や割引きなど)」は、カテゴリーで分類して良いように思います。これは「加盟店の皆様へ」といった記事とは根本的に読者が違うからです。
ただ、お知らせの中でも「店休日のお知らせ」と「割引キャンペーンのお知らせ」は、カテゴリーを分けなくても良い気がします。どちらもお客様へのお知らせだからです。もちろん、タグには「店休日」や「割引き」「キャンペーン」のような分類をしっかり入れてください。
「カテゴリー」と「タグ」の使い分けは、考えれば考えるほど難しいです。ですから、まずはカテゴリーは忘れて「タグ」をきちんと設定することを心がけてください。
そして、もっと良い使い分けを知っている人は教えてください!
文章の中で大きな文字を使ったり、文字の色を変えたりしたくなることもあります。「メタデザイン」では、特に気をつけて頂きたいのが「文字を大きくしたい」のは目的ではなく結果である事です。文字を大きくしたいと思うとき、その目的は「文章を目立たせたい」事じゃないでしょうか。
特にワードプレスでやってしまいがちな間違いが、文字を大きくするために「見出し」を使ってしまうことです。
この「H」は「Header」のHで、メニューにも書いてありますが「見出し」の意味です。目次を作る時の「見出し」に使う文字です。もちろん見出しのつもりで書いている場合は適切なのですが、ただ「文字を目立たせたい」だけであれば…
テキストの設定から文字を大きくして下さい。
この時「カスタム」はあまりお薦めできません。将来、スマホのトレンドが変わったり、新しいデバイスが出てきたときに、標準の文字サイズが変わるかもしれません。ここで「小」や「特大」を選んでおけば、将来の環境でも「特大」が維持されます。
しかしながら、この「目的」を意識した文章作りを邪魔しているのが、他でもないWordPressのメニューなんです(2020年7月現在)。
テキスト修飾メニューでも「太字」「斜体」といった「結果」で選択するメニューが出ます。
メタデザインを突き詰めるなら、ここでは「強調」という目的を指定するようになっていて、結果として太字になるようになると良いのですが、まだWordPressもそこまで来ていませんが、HTML5 という技術的な標準規格では、数年前からこのような「目的と手段(構造と見た目)の切り離し」が行われているので、そのうちWordPressも追従してくるのではないかと考えています。
ちょっと角度の違う文字強調として「ハイライト」や「文字色」があります。
文字色も、できるだけカスタムカラーを使わず「キーカラー」などから選んで下さい。
この色は「外観」メニューの「カラー」から選択でき、以前書いたページも含めて、一度に色を調整できます。
色だけデザイナーに相談することも可能です。
(5,000円ぐらいから相談できますが、5万円ほどで、キーカラーとロゴを一緒に考えて貰うと割安かもしれません。)
この WordPress の強みの一つは、スマホアプリがとても便利という点です。早速インストールしてみましょう。
アプリを起動して、 音声入力でしゃべって記事を一通り書いちゃいます。iPhone の方はこれがとても強力なのですが、Android の方は Google 音声入力が「句読点を打てない」という重大な欠陥があるので、後から手動で編集する量が多くなります。変換精度は高いだけに残念ですね。
写真もアプリから、スマホやタブレットのカメラで撮影して直接取り込めます。PC の編集画面では、「Google フォト」から直接写真をインポートできるんです。スマホの「Google フォト」アプリは、撮った写真を自動的に保存する機能があるので、スマホで撮った写真をシームレスに貼り付けることができます。
たくさんの画像を紹介するときに使えるウィジットをいくつか紹介します。
プロパティの設定によって見た目もだいぶ変わるので、色々と試してみて下さい。
回線や端末によっては、大きな画像のアップロードに数分かかることがあります。
プロパティの「リンク先」を「メディアファイル」にすると、クリック時に拡大されます。
標準のギャラリーも、そんなに悪くないですね。画像サイズが不揃いなとき、そのまま列べるか、「画像の切り抜き」で切り抜いて列べるか選べます。
キャプションをつけると、キャプション部分は画像拡大のリンクにならないのがちょっと不便です。
プロパティの「リンク先」を「メディアファイル」にすると、クリック時に拡大されます。
すっきりと列びますが、大きさに極端な優劣が付いてしまうので、何か意味があるのか(大きな画像が重要なのか)と思わせてしまいますね。順番に意味がある場合は、重要な画像から順に選択(追加)すれば良さそうです。
WordPress の集合知デザインである twenty-twenty をベースに、日本語特有の調整を加えました。
「えっとワーク」が採用した「メタデザイン」なら、数年後に全く新しいデバイスが登場しても、Webサイトをデザインし直さなくて良いんです。
この2010年から2019年にかけて、パソコンの大画面化と手のひらサイズのスマートフォンの普及という大きな変化がありました。どれだけWebのデザインが変化していったか、WordPressの代表的テーマで見る、Webサイトのトレンドをふり返ってみましょう。
2010年はパソコンが大画面化していく途上で、広くなった横幅にカレンダーやメニューを設置していました。画面が大きかったので、文字は小さめです。今となってはほとんど使われない無駄なリンクがたくさん列んでいる印象ですが、大きくなっていく画面を無駄なく目一杯活用しようという当時のコンセプトがはっきり見えます。
2011年になると、アイキャッチの画像が重要視されるようになってきます。短冊形のメニューなどの部品が多く用意され、多くの導線を詰め込んだデザインとなっていきます。
また、画面の余白を重視し始めたことが伺えます。
2012年はWebデザインにとって大きな転換点となりました。スマートフォンやタブレットからのWebアクセスが急速に増加し、Webサイトデザイン史上、初めて「画面が小さくなる」事を経験します。画面の大きさに合わせてデザインが切り替わる「レスポンシブデザイン」が採用されてきました。この頃は、パソコン用のサイトを、スマホでも閲覧できるようにしたものでした。
まだ、全体に文字は小さめで、環境によっては文字が読みにくいこともありました。
2013年になると、メインターゲットがスマートフォンに移行します。このテーマは、特にスマートフォンファーストに大きく舵が切られています。目を引く大きなヘッダ画像と、縦長でシンプルなデザインが採用されました。まだ多くのスマートフォンは画面が小さかったため、メインコンテンツに絞った表示に回帰していきました。
2014年になると、レスポンシブデザインが洗練されてきます。スマートフォンでの閲覧性を重視しながらも、パソコンやタブレットでの大画面を活かした表示を両立できるようになりました。モバイル回線も高速化していき、多くの画像だけでなく、動画を用いた導線の活用が目を引きます。
2015年は、またシンプルなコンテンツ重視に回帰しましたが、レスポンシブデザインはより洗練され、どのような端末でもメインコンテンツとメニューがバランス良く表示されるようになりました。
2016年になると、レスポンシブデザインが定着し、好みが分かれるようになってきます。このあたりになると、2015年デザインとどちらを採用するかはターゲットの好みによるようになります。
2017年は、再びスマートフォンでの閲覧優先して、大きな画像と、おしゃれな縦スクロールアニメーションで、メインコンテンツをはっきりと示すスタイルが流行しました。もちろんレスポンシブデザインによりパソコンの大画面を活かした閲覧もできますが、スマートフォンサイトがパソコンでも閲覧できる、という「スマートフォンファースト」のスタイルに変化していきました。
2019年には、ブログ以外のサイトも考慮した、より洗練されたスマートフォン重視のレスポンシブデザインが採用されました。大きな画像を軸としたデザインは変わりませんが、ちょっとした時間でスマートフォンからコンテンツを読ませる工夫が進みました。多くのサイトでWebアクセスの8割超がスマートフォンになり、パソコンからの閲覧はおまけ程度になっていきます。
このように、この10年でWebのデザインは大きく変わっています。10年前に数百万円かけてデザインしたパソコン向けサイトを、数年前に、また同じぐらいかけてスマートフォン向けにリニューアルした方もいらっしゃると思います。
「えっとワーク」の「メタデザイン」手法なら、コンテンツはそのままに、新しく登場するデバイスに合わせたデザインに自動的に追従することができます。2010年に作った、一番上のスクリーンショットのようなサイトも、作り直すことなく、2019年のスタイルで、最新のスマートフォンに合わせた表示ができます。