SEOに効果的なデザインへサイトリニューアル!【タイル型からサイト型へ(WordPresSWELL)】

こんにちは、みとかです。

ブログ運営を始めて3ヶ月が経ちました。
週1投稿を続け、現在11記事を掲載しています。

私がとても気になっていたこと…それはトップページが見にくいのではないかということ。

先日、プロにブログを見ていただく機会がありました。

ぱっと見で「なんのサイトなのか」がわからないのが惜しいですね

みとか

やっぱり、そうですよね!

そこで新しいデザインと機能を導入し、より使いやすく、魅力的なサイトに生まれ変わるべく、サイトのリニューアルをすることにしました!


これまでのデザインはこちら!
でーん!

みとか

改めてみると地味だし、何を書いているサイトなのか全然わからない!!!

SEOの観点でも「コンテンツの品質」はとても重要ですので、サイトのリニューアルをしてクオリティを上げたいと思います。

この記事では、リニューアルのポイントとそのメリットについて詳しくご紹介します。

目次

Figmaでワイヤーフレームを作る

早速、ワイヤーフレームを作ってみました!

ワイヤーフレームとは

WEBサイトのレイアウトや構成をざっくり表現する設計図のことです。

今回はFigmaという無料のデザインプラットフォームを使いました。

ワイヤフレームは手書きでもOKです!
私はこんな感じで自分の想像する構成を書き起こしてみました。

メインビジュアル

これまでのメインビジュアルはフリー素材からとってきたパソコンの画像を3枚スライドさせています。
「なんのサイトなのか」のイメージが湧きにくいので、「ワーママのWEBスキル奮闘記」の名に沿ったメインビジュアルに変更します!

ピックアップバナー

注目のコンテンツやキャンペーン情報を効果的にアピールするために、ピックアップバナーを導入することにしました!

サイドバー

現在はなんの変哲もないタイル型でブログ記事を表示させており、記事以外の情報を表示させていないため勿体ない状態です!
サイドバーをつくることで記事以外の情報も目に入るようにします!

新着記事

「新着記事」セクションを作ることで、リピーターの方にも新しい情報を提供できるようにします!

メインビジュアルでサイトの内容を一目で理解できるデザインに

まずはメインビジュアルです。

<BEFORE>

<AFTER>

いかがでしょうか?

<BEFORE>ではフリー素材の真ん中にブログタイトルを書いているだけでした。

<AFTER>ではブログタイトルである「ワーママのWEBスキル奮闘記」のイメージに一致する「女性がPCを使っている写真」に変更し、タイトルを補足説明する「WEB業界未経験の主婦がゼロからWEBスキルを磨く」という文章を追加しました。

みとか

「WEB業界未経験だけど挑戦してみたいな」と思ってサイトを見てくれた方に興味を持ってもらえるビジュアルになったのではないでしょうか!

間接的にSEOに強いピックアップバナー

続いてピックアップバナーを作成しました!

赤枠部分です。こちらはCanvaで作成しました。

Canvaの特徴

Canvaとは無料で使えるデザインツールです。
Figmaとは違うのはデザインのテンプレートがたくさんあることです。

色と文字を変えて、フリー素材を挿入すれば簡単にお洒落なオリジナルデザインを作ることができます。

このピックアップバナーを追加した理由は2つあります。

メニューに表示されないおすすめ記事を目立たせる

私の現在のカテゴリーメニューは「WEBスキルを学ぶ」「ママの働き方」「共働きのライフスタイル」となっています。

ただ、私のサイトで表示回数を多く得られているのはカテゴリーメニューは「WEBスキルを学ぶ」の子要素になっている「SEO検定」や「MOS」について書いた記事です。

ファーストビューで「SEO検定」や「MOS」などのより具体的なタイトルを表示させることで、

ユーザーがサイト内で多くのページを閲覧することを狙い、クリック率が上がることが期待できます!

ピックアップバナーの視覚的魅力とSEOへの間接効果

ピックアップバナーは視覚的に魅力的で、ユーザーの目を引き、ぱっと見て興味をひかれる情報に最小限の手順で目的にたどり着くことができます。

ユーザーがサイト内でのナビゲーションをスムーズに行えるようになると、滞在時間が延び、回遊率も上がります。これにより、検索エンジンからの評価も向上し、SEO効果が期待できます。

ピックアップバナー自体が直接SEOに強いわけではありませんが、間接的にSEOに良い影響を与えることがあります。

トップページにサイドバーを表示してユーザビリティ向上

次にトップページにサイトバーを表示させました!

赤枠部分です。ワードプレスの機能で追加しました。

人気記事を表示させることでサイトの滞在時間を延ばすことを狙っています!

例えば、訪問者が興味を持った記事を読み終えた後、サイドバーに表示された関連する人気記事に自然と目が向き、次々をページを閲覧することになります!

このようにユーザーが複数のページを閲覧することで、検索エンジンに対してサイトの価値が高いと評価され、SEOの効果が期待できます。

SEO対策に効果的な新着記事セクション

最後に新着記事セクションを作りました!

見た目もスッキリしましたが、SEO対策としてもいい点が2つあります!

頻繁な更新

新着記事セクションを設けることで、サイトが定期的に更新されていることを検索エンジンに示すことができます。検索エンジンは新しいコンテンツを好むため、頻繁な更新はSEOにプラスになります。

内部リンクの強化

新着記事セクションを通じて、他のページへの内部リンクを増やすことができます。
内部リンクは、サイト全体の構造を明確にし、検索エンジンがサイトをクロールしやすくするため、SEOに有利です。

ビフォーアフター

では最後に私のサイトがどのように生まれ変わったかご覧ください!

<BEFORE>

<AFTER>

ただのタイル型からサイト型へリニューアル!
かなりスッキリして、いい感じになりました♡

まだまだ改良の余地があるので、リニューアルしたら報告します!

私が使っているWordpressのテーマはSWELLです。
簡単に見栄えのよいサイトを作れるので、とってもおすすめ!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

求人広告会社のSEOチームでアルバイトとして働く30代の2児の母。
新卒で入社した会社に10年勤めるも小1の壁で退職を決意。
「やりがい」と「ワークライフバランス」を追い求め、
32歳からWEB制作の学習を開始し、WEBディレクターとして就職しました!

目次