ワードプレスで回遊率アップのためにやったこと【デザイン編】

2019年11月24日

私はwebエンジニア歴8ヶ月、勉強し始めて1年1か月とまだまだ未熟者ですが、私より初心者というより、ブロガーむけに実装しておいた方が見栄えが良い4つの機能の実装方法をまとめました。

無料テーマのLuxeritas(このブログ)のデフォルト機能とプラグインを使うことが前提での設定になりますのでご了承くださいませ。
ギリギリ無知の初心者でもわかるんじゃないかと思いますが、ワードプレスでブログを一ヵ月始めた方ぐらい向けのイメージで書きました。

それではお楽しみいただけたらと思います。

スポンサードサーチ

ワードプレスブログで回遊率UPするUXデザインを意識する

プロっぽいデザインにして読むのを楽しんでほしい【UXデザイン】

はい。
そのためにユーザーに無意識レベルで感動させる体験を提供するためのデザインにするというです。

この記事では、あくまでUXデザインを意識していきます。

UXデザインとは!?

UX(ユーエックス)は、User Experience(ユーザーエクスペリエンス)の略で、日本語では「ユーザー体験」と訳されています。ユーザー体験とは、ユーザーが製品やサービスを利用することによって受ける印象のことを指します。

難しいから無理!って人のためにあるプラグインやテーマの機能【初心者向け】

デザイン・コーディングはしなくていいです。専門知識自体は必要なく、使い方のパターンを覚えるだけでいいです。

初心者の方は、是非この記事を読んでみてください。

どうしても意味不明でしたら質問お待ちしております。

私も実際にプラグインやテーマの機能を使って、自分のブログを綺麗に使いやすくレベルアップさせながら記事を書いているもので、、

ワードプレステーマLuxeritas(ルクタレス)の機能を使う

このブログのワードプレステーマがLuxeritas(ルクタレス)です。こちらでダウンロードできます。

結構おすすめです。せっかく素晴らしいいろいろな機能がデフォルトでついているので使い方がわからないんじゃ勿体ないです。

今回は、下の3点の機能をUXデザイン向上のために説明します。

  1. もくじの自動生成機能
  2. 吹き出し機能
  3. 関連記事を表示させる
Left Caption

ぴよさく

これが吹き出し機能です。
説明をする時などに、見やすくわかりやすいですよね。
詳しい説明はこちらの記事で紹介しております。

Smart Slider 3というプラグイン

スライダーといって、画像や関連記事が右から左へとスライドしていく機能を実装して、
ユーザーを飽きさせず、関連記事にジャンプできる導線を貼りたいと思います。

もくじの自動生成機能 Luxeritas(ルクタレス)の機能

もくじはこの記事の一番上にあるやつです.


もくじ自動生成機能というのは、ワードプレスの投稿記事でh2タグ、h3タグ(h2タグの入れ子)を見出しとして、一番上に勝手に自動でもくじを生成してくれる機能です。見出しにしたい箇所をh2、h3タグで囲む必要があるということですね。

設定は簡単です。ワードプレス管理画面の左のメニューから、カスタマイズ(外観)をクリック

次のページの目次をクリック

次のページの自動で目次を挿入するにチェックを入れればok!

これなら、初心者でもできないとは言わせない!それでは関連記事表示を見てみしょう。

ちなみに僕が利用しているLuxeritasというにテーマにデフォルトでついてる機能ですが、
ついていなかったらTable of Contents Plusというプラグインが使えます。

スポンサードサーチ

関連記事を表示させる Luxeritas(ルクタレス)の機能

次に、関連記事を表示させます。
文字通りですが、記事の最下部に同じカテゴリなどの関連記事を表示させます。
これがあるだけで見栄えもよくなり、回遊が期待できます。設定は簡単です。もくじの時と同じメニューの全体レイアウトをクリックします。
次の画面で、下の方に下がって、関連記事表示にチェックを入れるだけです。
ワードプレスって便利ですね。

とにかく、知識0でまるで経験者みたいな装飾になっていきますね。もちろんこの記事の下に、関連記事がありますのでどのように表示されているかチェックしてみて下さい。

こちらもLuxeritasテーマにデフォルトでついてる機能ですが、
ついていなかったらRelated Posts for WordPressというプラグインが使えます。

Smart Slider 3というプラグイン実装してみた

ちょっとでかでかと表示されててすみません。

私も一回目でして、でも画像スライダーが下の様に表示されました。

設定方法はめちゃくちゃわかりやすい記事がありましたので、
こちらから確認してくださいm(__)m

previous arrow
next arrow
previous arrownext arrow
Slider
やはり、動いてると目が行ってしまうんじゃないかと思います。
画像がでかでかとなっちゃってますが、サイズ指定もできますし、リンクもはれます。
これこそ関連記事などをスライドさせると、ついついタップしちゃうのが心理じゃないかなと思います。

スポンサードサーチ

まとめ

お分かりかと思いますが、この記事で説明した答えがこの記事に再現されています。

そして最後にもう一度言います。

基本的なUXデザイン向上をつとめよう。
こちらの記事のように簡単にできることはやっていただくことをお勧めします。

  • もくじ自動生成
  • 関連記事の設置
  • 吹き出しでの説明
  • 画像(リンク)スライダーの設置

上記4つの方法はバッチリですか?

ワードプレスはテーマデフォルトの記事を使うことが重要です。
プラグインをホイホイインストールしていると競合して表示が崩れたり、ページが重くなったりすることがあります。

Right Caption

ぴよさく

てか、Luxeritasってテーマ魅力的じゃないですか?

でわ、またワードプレスやデザイン系記事書きます。

さようなら!