VLOG版「SHULE WORK」≫

HTMLサイトマッププラグイン「PS Auto Sitemap」13種類のスタイルからお好みのスタイルを選ぼう

[speech_bubble type=”drop” subtype=”L1″ icon=”shule.jpg” name=”Shin”]どうも、Shin(@shulework)です。[/speech_bubble]

 

皆さんはブログに、HTMLサイトマップを設定していますか?

HTMLサイトマップとは・・・

Webサイト内にあるコンテンツを一覧表示したもので、ユーザビリティを向上させます。

まだ設定していない方は、
プラグインで簡単に設定できるのでこちらの記事を是非参考にしてみてください。

HTMLサイトマップを簡単設定!「PS Auto Sitemap」の使い方を解説

 

こちらのプラグインでHTMLサイトマップを設定する際に、
スタイル(外観)を13種類から選んで設定できるので、今回はその13種類を図でご紹介します。

お好みのスタイルを探してみてください。

PS Auto Sitemap「13種類のスタイル」

①シンプル

こちらは、その名の通りシンプルなデザインです。

[speech_bubble type=”drop” subtype=”L1″ icon=”shule.jpg” name=”Shin”]わかりやすくて良いですね![/speech_bubble]

 

②シンプル2

こちらは、シンプルなデザインになっています。

[speech_bubble type=”drop” subtype=”L1″ icon=”shule.jpg” name=”Shin”]「シンプル」と比べて若干見づらさがあるように思います。[/speech_bubble]

 

③チェックリスト

こちらは、シンプルなデザインです。

[speech_bubble type=”drop” subtype=”L1″ icon=”shule.jpg” name=”Shin”]これといって特徴が無いスタイルですね。[/speech_bubble]

 

④蛍光ペン

こちらは、コンテンツに蛍光ペンで色がついているスタイルです。

[speech_bubble type=”drop” subtype=”L1″ icon=”shule.jpg” name=”Shin”]僕的には、見づらいので”ナシ”ですね。[/speech_bubble]

 

⑤ドキュメントツリー

こちらは、階層がわかりやすいスタイルです。

[speech_bubble type=”drop” subtype=”L1″ icon=”shule.jpg” name=”Shin”]タテの謎の線が無ければいいのですが・・・。[/speech_bubble]

 

⑥付箋

こちらは、階層が付箋で色分けされています。

[speech_bubble type=”drop” subtype=”L1″ icon=”shule.jpg” name=”Shin”]色分けされていてわかりやすいですね![/speech_bubble]

 

⑦音符

こちらは、かわいい音符アイコンがついたスタイルです。

[speech_bubble type=”drop” subtype=”L1″ icon=”shule.jpg” name=”Shin”]女性のブロガーやテイストがかわいい系のブログに合いそうですね![/speech_bubble]

 

⑧矢印

こちらは、矢印アイコンで階層をわかりやすく表しているスタイルです。

[speech_bubble type=”drop” subtype=”L1″ icon=”shule.jpg” name=”Shin”]シンプルでわかりやすいですね!ちなみに僕はこれにしています。[/speech_bubble]

 

⑨ビジネス

ビジネス系のブログにはこちらがおすすめです。

[speech_bubble type=”drop” subtype=”L1″ icon=”shule.jpg” name=”Shin”]まとまった印象を持つので、わかりやすいですね![/speech_bubble]

 

⑩索引

こちらは、索引風のスタイルです。

[speech_bubble type=”drop” subtype=”L1″ icon=”shule.jpg” name=”Shin”]シンプルですが、少し違ったテイストにしたい方におすすめです。[/speech_bubble]

 

⑪アーバン

こちらは、アーバン(都会風)のスタイルです。

[speech_bubble type=”drop” subtype=”L1″ icon=”shule.jpg” name=”Shin”]スタイリッシュな見た目で良いですね![/speech_bubble]

 

⑫アンダースコア

こちらは、アンダースコア(下線符号)、空白に下線が書いてあるアイコンのスタイルです。

[speech_bubble type=”drop” subtype=”L1″ icon=”shule.jpg” name=”Shin”]階層がわかりやすくていいですね![/speech_bubble]

 

⑬キューブ

こちらは、キューブアイコンを使ったスタイルです。

[speech_bubble type=”drop” subtype=”L1″ icon=”shule.jpg” name=”Shin”]かわいいキューブアイコンが男心をくすぐりますね![/speech_bubble]

最後に

いかがだったでしょうか?

[speech_bubble type=”drop” subtype=”L1″ icon=”shule.jpg” name=”Shin”]いろんな種類があって迷っちゃいますよね。[/speech_bubble]

 

もし迷って決められないのであれば、
「シンプル」や「矢印」「ビジネス」などの、シンプルで見やすいスタイルにするのがおすすめです。

あくまで、ユーザビリティ(ユーザーの使用性)を向上させるためのものなので、見やすいほうが良いですからね。

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA