作成メンバー

私が担当したのは海洋酸性化についての調査と動画制作です。

私が海洋酸性化に興味を持ったのは、動画コンテストに応募したことがきっかけです。

そのコンテストはテーマが海の環境問題でした。海の環境について調べていたら、それまで知らなかった海洋酸性化というキーワードを知りました。二酸化炭素が地球温暖化を起こしていることは授業でも勉強しましたが、海を酸性にしていることは知らなかったので驚きました。

動画はあえて白黒で、メッセージを伝えることを考えています。内容はコンテストの後も調べて、世界の状況や海の生物の影響を検索して調べました。

海洋酸性化がそれぞれの生き物ごとにどのような影響があるか、という情報は海外のものの方が詳しかったので、英語は苦手ですが、翻訳ソフトやChatGPTを使って読みました。

すごく難しい英語のレポートは、コーチに教わってNotebook LMというサイトで要約してもらい、質問を英語に直して回答をまた日本語に直して理解しました。

今回、私達は全員違う学校で、LINEやチャットで相談しながら進めました。

遠藤南々帆さんは私のいとこで、絵がとてもうまいのでデザインをお願いしました。また、炭酸イオンのことは習っていなかったので、高校で習っている遠藤南々帆さんに聞きました。

伊藤りんさんは私の小学校時代の友達で、今でも一緒にディズニーランドに行く仲です。客観的な意見や、かわいいイラストを提案してもらいました。

今回のサイトを作るのに、一番嬉しかったのは琉球大学の栗原先生からお返事をもらえたことです。大学の先生にメールを書くのは初めてだったので緊張しましたが、丁寧なお返事をもらえてびっくりして、感激しました。

栗原先生に質問する前に、酸性化しても大丈夫、というような記事を読んでびっくりしました。大丈夫だったら海洋酸性化のサイトを作るのも意味がないのかな、と思ったからです。でも、先生に説明してもらって、そうではないということがわかりました。先生にお返事をもらえたことと、私たちがつくってきたサイトにちゃんと意味があることがわかって、ダブルで嬉しかったです。

今回のウェブサイト制作では、私は主にデザインを担当しました。全てのデバイスにおいて閲覧しやすいウェブサイトを目指し、デザインに力を入れて取り組んできました。

スマホで見ると、フリックするとあっという間に全部が見られます。これは私たちが意図したことで、全体をさっと見ることができ、興味を持った部分があれば、そこにある詳しい情報を、見る人が簡単に見られるようにしたかったのでこのようにしました。

しかし、レイアウトの調整は想像以上に難しく、特にスマートフォンでの表示においては、意図した通りのデザインを実現できずに苦労しました。

そこで、レイアウトを自動生成するサービスの利用を検討し、「Unicorn Platform」を採用しました。このサービスは部品を配置するだけでサイトがつくれ、出来上がったサイトのHTMLコードを自分のPCに保存できる機能を有しており、ウェブサイトの編集作業を効率化できる点に魅力を感じたためです。しかし、全ての機能を利用するためには有料プランへの加入が必須であり、 悩みました。

実際に「Unicorn Platform」を利用したところ、ウェブサイトの編集は比較的容易に行えることを実感しました。しかし、スマートフォンでの表示においてレイアウトが崩れるなどの問題が発生し、より適切なサービス選定を行うべきであったと反省しています。

デザイン面では、ロード時間の間にユーザーの離脱を防ぐため、可能な限り一つのページで完結するウェブサイトを目指しました。スクロールやナビゲーションバーによる情報へのアクセスを容易にすることで、ユーザーエクスペリエンスの向上を図りました。これまでの受賞作を見て感じたことは、他のページへのリンクボタンが小さかったりどこにあるか分かりにくいと、情報を見たいという気持ちが続かないということです。特にスマートフォンでは画面上の小さい場所をタップしなければならないことはとてもストレスになります。私たちが自作ではなく、スマートフォンをサポートしているサイトビルダーを使用した理由はこういったデザインへの対応です。

ただし、同プラットフォームは動画のアップロードに対応しておらず、動画の埋め込みにはHTMLコードを手動で修正する必要がありました。

間違いを修正するたびに確認が必要になって手間が取られたので自分たちのサイトの作り方をしっかり決めてからツールを選ぶべきだということを痛感しましたが、私たちがやりたいと思うことを全て満たすサービスはなかったので、今回は最善に近い選択をとったと思います。

私はいくつかのイラストと、ウェブサイトの作成に関わる作業をしました。

「どのレイアウトが使いやすいか」

「どういう順番だと読みやすいか」

「どうしたら引っ掛かりがないか」

と、考えながら、イラストの並べ方や文章の書き方を提案しました。そして、少しですが自分で描いたイラストも使ってもらいました。

どっちがいいか試したい時や、あまり自信がない時ももありました。締め切りが近い時は、遠藤南々帆さんに連絡しないで、自分で直接編集を行って、使いやすくしました。

私は、

「慣れてしまうより、新しい視点を保つことで使いやすさを決める役目が必要」

という勧めも受けていたため、サイトについては見たり使ったりするのが後半からで、正直に言うと、調べ学習や文章を書くことにはあまり貢献していません。

遠藤最さんがデータとかたくさん調べていて、すごいな、と思いました。

私が一番頑張ったと思うのは、サイトをパソコンやスマホでチェックしてちゃんと動いているかどうか調べたことです。

パソコンでもタブレットでもスマホでもちゃんとチェックするのは大変でした。

ブラウザもSafari、Chrome、Edge、Firefoxでそれぞれ試しました。

最初の締め切りの時はスマホでみるとうまくいきませんでした。画面を左側にドラッグして右側が真っ白になって、頑張ったのにスマホは推奨環境から外さないといけないのかな、と思いました。

最初の締め切りの後で、私がスマホをよく見ると、参考文献のところの文字がはみ出ていることに気がつきました。

「ここが原因かも」

と、思って直したら、スマホで見ても、前のように変な表示になったりしないで、ちゃんと見えるようになりました。

色々なブラウザで何度も見ていたので気がついたと思うので、何回も見ていて良かったなと思いました。

全部のブラウザで思った通りに見えるのを確認した時は嬉しくて、それまではちょっと面倒だったのに何回も見てしまいました。