修学旅行専用HP制作

情報技術科 No.9 神谷琴音

①研究の背景

将来、WebページやHPの制作に携わる仕事に就きたいと思っており、その役に立つ研究がしたいと考えたからです。

また、自分が先輩の作って下さったHPを修学旅行で使った時にとても助かり、私も現二年生の有意義な修学旅行の手助けがしたいと思ったからでもあります。

②仮説とねらい

去年よりもバージョンアップしたWordPress 5.4.2を使う事で、大まかなHPの制作ができるはずです。

WordPress 5.4.2

また、WordPressにはプラグインと呼ばれる小さなプログラムがあり、それを使えば機能を拡張する事ができます。

さらに、WordPressは本文にHTMLやPHPを埋め込む事ができるため、工業基礎で作成したメールフォームなどを生かせるかもしれません。

つまり、WordPressとプラグインを上手に使う事で、HP制作は十分に可能だと言えます。

③研究内容

いきなりWordPressでHP制作を始めてはいけません。何故なら、HP制作には、HP制作前に定めておかなければならない三つの軸があるからです。

  • そのサイトは、どんなユーザ層をターゲットにしているか
  • そのサイトは、どんな状況で使われると想定されるか
  • そのユーザに、どういう行動をしてもらうのがゴールなのか

私はまず、この三つの軸について考える事から始め、以下のような結論を出しました。

 そのサイトは、どんなユーザ層をターゲットにしているか
   高校生と先生、主に高校生

 そのサイトは、どんな状況で使われると想定されるか
   修学旅行(または卒業旅行)
   修学旅行がなくなった場合、現三年生の卒業旅行のHPへと変更

 そのユーザに、どういう行動をしてもらうのがゴールなのか
  → このHPを使って修学旅行の予定を立てて欲しい
    楽に思い出の共有をして欲しい
    私のような「初めて使うもの」に弱い人でも、簡単に使って欲しい

上記を軸にどんな機能が必要かを自分なりに列挙しました。さらに、利用者である高校生や先生、他にも家族や友達といった身近な人にどのような機能があると便利かを質問し、それをもとにHPに用意する機能を決めました。

こうしてやっと、Ei3神谷琴音の研究は始まります。

そこからは、

  1. HPをデザインする
  2. 必要な機能を考える → RACEノートを活用
  3. 2で考えた機能を実現し、実際に使える機能として動くようになるまで調節や設定をする
  4. 二年生に使用してもらう
  5. アンケートを二年生に行い、結果を集計し分析する
  6. 5をもとに改善する

の流れに沿って研究を進めます。

完成品が出来たとしても、現二年生や先生に使ってもらう前に一回自分でそのHPを使ってみます。
これにより制作時には気づく事の出来なかった事に気づけます。

また、修学旅行で実際に制作したHPを使ってもらった後、現二年生と先生を対象にアンケートを実施します。
デザイン性、機能性、実用性を問うアンケートを実施する事で自分では気づく事の出来なかった欠点を知る事が出来るはずです。

④技術的知識

工業基礎でHPを作った際はHTMLとCSSを使いましたが、これらを使ってHPを制作するのは限界があります。

そこでこの研究では「WordPress」を使ってHPを作ります。
全世界のWebは、37%がWordPressで構築されていると言われており、無料で配布されている事や記事投稿が簡単な事から人気を集めています。

出典:https://digital-marketing.jp/creative/what-is-wordpress/#41WordPress

プラグイン」と呼ばれる、WordPress本体には備わっていない機能を追加できる仕組みによって、HTMLとCSSでは実現する事の難しい機能を実現します。
以下のような機能がプラグインで提供されています。

  • サイトマップ自動生成
  • 問い合わせフォーム
  • SEO対策
  • Twitter、FacebookなどのSNSとの連携機能
  • Google AdSense管理

⑤取り組んだ内容

ベン図で示したこれが私の考えた三つの軸です
具体的な内容は③の研究内容で書いていますが、これを常に意識しながらHPを制作しました。
「三つの軸を意識してHPを制作する」というのは今回の目標の一つです。

③の流れに則って、まずはHPをデザインします。デザインはWordPress内の「テーマ」を使ってデザインします。
簡単なテーマの説明をすると、テーマは以下のようなものです。

  • WordPress全体のテンプレート
  • デザインのみならず、構成や機能を変える事も可能

今回はこの「suits」というテーマを使用しました。
シンプルでごちゃっとしていないところに魅力を感じました。

次に必要な機能を列挙しました。RACEノートを活用し、

上記のようにまとめました。そしてこの中から以下のものを実現しました。

  • ログイン機能
  • 地図
  • お問い合わせフォーム
  • メールによる投稿機能

そしてこれらの機能の実装には「プラグイン」を使用しました。
プラグインの説明は④の技術的知識で説明していますので省略させていただきます。

それぞれの機能で使ったプラグインを記します。
※中にはプラグインを使っていないものもある

  お問い合わせフォーム → Contact Form 7
  メールによる投稿機能 → Postie

そして実際に二年生に修学旅行で使ってもらい、その後にアンケートを実施しました。アンケートで質問した内容は以下の通りです。

  1. サイトの総合的なデザインはどうでしたか?
  2. サイトの総合的な機能性はどうでしたか?
  3. スマートフォンのメール機能から記事を投稿する、という機能を利用しましたか?
    → 「いいえ」の人は何故使用しなかったのですか?
  4. サイトを通して良かった点を教えて下さい
  5. サイトを通して悪かった点を教えて下さい
  6. 現時点で、課題研究で「修学旅行専用サイト」の制作をしたいと思っていますか?

このアンケートの結果を分析しました。
まず、1と2の結果については8割以上の人が「とても良い」「良い」と答えてくれました。しかし3の質問では、

円グラフ画像メーカーより生成

と約半数はメールによる投稿機能を使っていない事が分かりました。使っていない人の意見としては、
「使い方が分からなかった」「WordPressから投稿した方が楽」「忘れていた」
という意見がほとんどでした。
しかし、その後に行った4の質問ではメールによる投稿機能を褒める声もあり、恐らく使ってくれた人にとっては便利な機能となったのだと思いました。

⑥結果

アンケートの結果から、今回のHPで実装した機能はどれも正解だったと言えます。本当はもっと多くの人に機能を使って欲しかったのですが、誰でも簡単に使えるというのが「WordPress」の良いところである為、WordPressからの記事の投稿もひとつの正解なのかなと考えます。

また、目標として設定していた「三つの軸を意識してHPを制作する」は達成出来たと思います。二年生に、修学旅行で、情報共有してもらう、という事はしてもらえました。

⑦考察・感想

UX(ユーザーエクスペリエンス)よりもユーザビリティを優先してしまった為、デザインが平凡になってしまいました。テーマで使用した「suits」の特徴であるシンプル、と言ってしまえば聞こえは良いですが、もっと使っていて楽しいと思えるようなものを作らなければいけないと思いました。

また、機能の使用率が上がらなかった理由として、こちらの説明不足だったというのは大きく影響していると思います。使い方の分からないものを使おうとはまず思わないし、私もそう思います。もっと早めに直接使い方を説明するべきだったと思いました。

今回の研究で、WordPressの使い方はもちろん、ニーズに合ったものを作る事の大変さを痛感しました。研究を通して、自分の作った機能をどう使ってもらうか、どうしたらユーザにとって良いものになるか、そういった事を考える視点が少しだけ持てるようになったと思います。
はっきり言って他の人よりは地味で簡単な研究なのかもしれませんが、それでもこの研究をやって良かったと思います。将来自分が何か作るときには、研究で学んだ視点を忘れずにいたいです。

コメントを残す

メールアドレスが公開されることはありません。