今回は、ホームページを見やすくする機能についてご紹介したいと思います。
はじめに、あなたのホームページを見てみてください。

  • ページはスッキリとまとまっていますか?
  • 見たい情報にスムーズに辿り着けますか?
  • 重要な内容がすぐ目に飛び込んできますか?

もし、上記が1つでも「いいえ」の場合、下記のような機能を取り入れることで、ユーザーにもっとわかりやすいホームページになるかもしれません。

ポップアップ機能

画面の上に新しいウィンドウを開いて、情報を表示したり、アクションを促したりする機能です。

タイトルや画像をクリックした場合や、
特定の条件を満たした場合に内容が表示されます。

クローズボタンを押すとポップアップウィンドウが閉じます。

アコーディオン機能

複数のコンテンツを折りたたんで表示する機能です。

アコーディオンは、「タイトル」と「コンテンツ」の2つのパーツから構成されます。

タイトルをクリックすると、コンテンツが展開され、再度クリックすると、コンテンツが折りたたまれます。

ポップアップやアコーディオンが


よく利用されるシーンとメリット


商品説明ページ

商品の説明をはじめから画面に表示させると、情報が多く、見にくいと感じることがあります。
ポップアップやアコーディオンを利用して、クリックしたときに商品の説明を表示させるようにすることで、スッキリとした印象になります。

ーポップアップのイメージー

Step1

商品一覧を表示させておき、もっと情報を見たい場合にクリックする

商品画像とタイトルだけを表示させておきます。
情報を見たい商品の画像やタイトルをクリックします。

Step2

商品をクリックするとポップアップで情報が表示される

このようにポップアップで詳細情報が表示されます!


ギャラリーページ

画像や動画などのギャラリーページでもアコーディオンやポップアップを使用できます
最初は少ない数で出力しておき、残りはボタンをクリックして表示させます。
ページが非常にスマートになります。


FAQページ

よくある質問(FAQ)ページは、多数の質問と回答を含むため、ページが長くなってしまいがちです。

アコーディオンを使用することで、ユーザーは必要な質問をクリックするだけで、返答を閲覧できるため、ページをスクロールしなくて済みます

ーアコーディオンのイメージー

Step1

FAQの一覧を表示させておき、回答を見たい質問をクリック

FAQの質問だけを表示させておきます。
回答を見たい質問タイトルをクリックします。

Step2

質問タイトルをクリックするとアコーディオンが開き、情報が表示される

このようにアコーディオンが開き、質問の回答が表示されます!


重要なお知らせ、広告、お問い合わせフォームなど

ポップアップを使用して、重要なお知らせやセールや特別オファーのご案内、お問い合わせページへのリンクを出現させることができます。

興味をもったユーザーがワンクリックで情報にアクセスできます。

いかがでしょうか?

ポップアップやアコーディオンは、ウェブページ上に多くの情報を取り入れられるとても便利な機能です。
見たい内容に素早くアクセスできるのも、ユーザーにとって嬉しいポイントです。

スマートフォンでのサイトの見せ方について

近年、スマホでHPを閲覧する機会も多く、小さいスクリーンの中でのスペースの活用を考えざるを得ない状況になっています。

ポップアップを利用することで、スペースを節約し、ページを見やすくできます。

お客様から、「サイトを見やすく整えたい」とご要望があり、ポップアップをご提案する機会も増えています

HPの改善を考えるにあたっての方法のひとつとして、ご参考にしていただけましたら幸いです。

弊社のLightningテーマのデモサイトで、ポップアップやアコーディオンの機能を実際にご確認いただけます!
一度、実装のイメージを確認してみてくださいね。

ポップアップ機能
トップページのACTIVITYの「ふれあう」「体験する」「食べる」「泊まる」の部分の各画像もしくはボタンをクリック

アコーディオン機能
トップページのQ&Aの部分

こちらの記事もぜひご覧ください

「クラシックエディタ」を使用してポップアップの作成をおこなっています。

サイトを開いた時にCookie利用同意のポップアップを出す方法を解説しています。

投稿者プロフィール

Mayu
Mayu
Webサイトに興味をもち、独学でHTMLやCSSの勉強を始め、その後、スクールでAdobeソフトの使い方やデザインについての知識を習得する。
同時に、様々なWebサイトがWordPressで作られていることを知り、お客さまに喜んでいただけるサイト作りができるよう、WordPressの仕組みやユーザー視点での文章表現、デザインスキルを日々学ぶ。
2022年10月より、株式会社ウェブロードに入社し、お客様のサイト制作、修正やページ追加、操作サポートを行っている。

お問合せフォームはこちら

(※営業電話が多いため留守電にしています。お急ぎの方は下記メールフォームをお使いください。)

お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。

    お問い合わせの前に下記、ご確認をお願いいたします。

    任意貴社サイトURL

    必須お問い合わせ項目

    必須制作費のご予算はどれくらいですか?

    企画・設計、デザイン、画像・文章の作成、サイト内検索システムの導入等、
    ヒアリングを元にご予算やご希望に応じたお見積りをご提案させて頂きます。
    弊社制作費の費用感につきましてはこちらの記事をご参照ください。

    必須制作目的はどうお考えですか?(複数選択可)

    どこに力を抜きどこに力を入れるのか、
    ご予算とご要望の中から最適なご提案をさせていただきます。

    必須どのような機能が必要ですか?(複数選択可)

    SSL(https://~)対応、ブログ機能、スマホ対応(レスポンシブ)、
    ログイン等セキュリティ対策、ページタグSEOの最適化は標準搭載。

    必須どのような作り方がご希望でしょうか?(複数選択可)

    WordPressでの構築になりますので、お客様のご要望に比較的柔軟にお応えすることが可能です。
    企画ご提案する前に参考にさせていただく項目です。

    必須お問い合わせ内容を教えてください

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

    任意電話番号(ハイフン無し・半角数字)