MENU
CLOSE
PROJECTSYSTEMWEB Edit : 2023.05.01 Update : 2023.05.30

FAQ・インタビュー記事・お役立ち情報をWordPressで制作。HERDAYSサイトの事例をご紹介します。

先日株式会社ウィルミナさんが運営する、オンライン診療・処方プラットフォームサービス HERDAYSのサイトのコーディングとWordpressの組み込みを担当させていただきました。

こちらのサイトは、ピル等のオンライン診療・処方プラットフォームサービスということで、サイト上で詳細の知識や、疑問点も解消できることを目的としていました。
そのために、ユーザーの疑問や不安点を解消できるコンテンツをサイト全体で取り入れる運びとなりました。

Wordpressの用途は色々とあると思うのですが、その機能や便利さを最大限に活かしたサイト制作の機会となりましたので、ご紹介させていただきます。

多くの機能は、カスタム投稿タイプという方法で作成しています。
今回、FAQ・インタビュー記事・お役立ち情報という3つの投稿パターンがあったのでそれぞれ順番に説明します。

FAQ(よくあるご質問)機能

ご要望
・FAQページを設ける
・質問と回答は、スライド式で1ページにすべてを一覧で表示できるようにする
・質問は、カテゴリごとに分類して表示
・カテゴリをクリックすると、該当のカテゴリのFAQ項目にアンカーリンク可能
・表示形式は、「Question」をクリックするとトグルで「Answer」が表示される形式

このようなご要望をもとにWorpressを組み込んだページが下記になります。

FAQ一覧ページ


管理画面のプレビュー


・こちらの編集画面で入力したタイトルを、一覧ページの「Question」に表示します。
・編集画面で入力した本文の内容が、「Question」をクリックしたときに「Answer」で表示されようにしています。

KNOWLEDGE(お役立ち情報)機能

ご要望
・KNOWLEDGE(情報記事)ページを設ける
・情報記事はカテゴリごとに分類して表示。クリックするとそれぞれのページに遷移する
・それぞれのカテゴリページでじっくり記事を読めるよう、カード形式で表示する
・情報一覧ページにはページャーを設置する

KNOWLEDGE一覧ページ

このページの管理画面内編集ページは、ほぼFAQと変わりません。
しかし、用途やユーザーのことを考え、デザインは変わっていますので、そちらにあわせてWordpressを組み込みました。

JOURNAL(インタビュー)機能

ご要望
・インタビュー記事ページを設ける
・記事が増えていった場合に、「ピックアップ記事」を設定できるようにする
・Think/Story/Diaryのカテゴリに分け、インタビュー内容を分類できるようにする

インタビュー一覧ページ

インタビューの内容や、インタビューを受けた方々の顔が見えるようなデザインとなっております。(デザインはarca inc.さん)
ピルの悩みに関係した話から働き方・SRHR(性と生殖に関する健康と権利)まで読める記事となっており、個人的にとても勉強になるし、素敵な発信だなぁと思っているページです。

管理画面のプレビュー

デザインを受けて、インタビューページで必要になりそうなパーツをご相談させていただき、簡易的なパーツンボタンを用意させていただきました。
編集画面でこちらのボタンを利用しながら記事を作成いただくことで、表示した際に、インタビュー形式のデザインが適用されて、記事として反映されます。

最後に、パーツ機能

それぞれ、各ページで利用できるようにWordpressのカスタム投稿を制作しました。
しかし、それらの投稿を「トップページの一部に表示したい」ということはよくあると思います。それがパーツとしての機能です。
今回の場合は、FAQをサイトのトップページにも表示したいということで、同じ機能を利用してデザイン違いのパーツをトップページにも組み込ませていただきました。
トップページでは、スライドでFAQが表示されるようになっています。

このように、Wordpressの取り入れ方は無限にあります✨
サイトがより更新性が高く・簡単に・管理者にもユーザーにも使い勝手の良く有意義なものとなれば嬉しく思います。

CreditDirection ― arca
Creative Director ― arca 辻愛沙子
Design ― arca 眞庭りえ
[adchord] Coding : KOHIMOTO inc.

KOHIMOTOではWordpressでサイト制作を検討中の方のご相談等も承っております。どうぞお気軽にご相談ください。

Miki Kohinata

就活時代、企業で働きたくないがゆえに将来独立することを決めエンジニアの道へ。IT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。