入社前活動でAWSを使ってWebサービス構築してみた！（前編）記事の後編です
中谷 亘佑
2025年4月入社
クラウドインテクレーション事業部配属予定
松田 陽佑
2025年4月入社
DX開発事業部配属予定
やったこと
新卒研修前のインターン活動として、２人でイベント向けリアルタイムQ&Aアプリを制作しました。
アイレットでは採用や勉強会などの発表の場が多くあり、参加者が気軽に質問を投げられるプラットフォームとして既存のシステムを利用しています。それらのシステムには使わない機能や改善したい点があり、必要な機能のみをブラッシュアップした弊社らしさのあるサイト制作するプロジェクトに参画しました。
インターン生2人で、実際の開発現場でもよく採用されている下記AWSサービスを活用して動作環境を１から構築し、アプリケーションを動作させることができました。
- AWS Lambda
- Amazon API Gateway
- Amazon S3
- Amazon DynamoDB
- Amazon CloudFront
- AWS CloudFormation
構成図
ユーザー画面
参加ページ
こだわり
・基本的なルーム入室画面で無駄な機能やデザインを入れないシンプルで分かりやすいページ構成にした
・ルームコード入力後、名前入力のフォームをモーダルで表示することで名前入力以外の操作を防ぎユーザーが次の操作は何をするのかがわかりやすい仕様にしました
・主催者が提示するQRコードを参加者に読み取ってもらうとコード入力のフォームにルームコードが入力された状態のこのページに遷移するように開発することができました。
これによりQRコードで入室してもルームコードを自分で入力して入室しても同じページから入室することができユーザーに混乱させないように開発できました
ルームページ
こだわり
・スマホから入室された場合とPCから入室された場合の両方を想定し、どちらでもデザインが崩れないようレスポンシブデザインで開発することができました
・他の参加者の方が投稿した質問にいいねをすることができる機能を実装しました。
多くの参加者が注目している質問を視覚化することができ、優先的に答えるべき質問が確認できるため運営がしやすい仕様にすることができました
・今どの質問に対応しているのかが把握しやすいよう主催者が回答するコメントをハイライト表示することができるように開発しました
・参加者の誤送信や誤字脱字に対応するため投稿したコメントを編集できる機能を実装しました。
・投稿されている質問を時間順といいね順に並び替えて表示する機能を実装しました
イベント終了ページ
管理者画面
ログインページ
こだわり
・管理者画面はアイレットの社員（採用イベント等の主催者）を想定し、簡易的なログインページを設計しました
管理ページ
こだわり
・作成したルーム一覧を表示するようにし、押下することで対象のルームの編集ページに画面遷移する機能を実装しました
編集ページ
こだわり
・Slack連携機能を実装し、投稿された質問、コメントをSlackの設定したチャンネルに転送する機能を実装しました。誰が質問に答えるかや、どういった質問が送信されているかを管理しやすくしました。
・答えた質問、コメントを回答済みとして選択する機能を実装し黒く表示することでどの質問に答えたか一目で把握できるようにしました。
ユーザー側では回答済みの質問、コメントは表示されないようになっています
デザイン面でこだわった点（デザイン事業部金沢さん）
・サポートテキストをテキストボックスの外に出したことをこだわりました。
テキストボックの中にサポートテキストが入っていると、入力途中にサポートテキストを確認したいと思った時にテキストを全て消さなければならないからです。ユーザーに少しでも使いやすいと思ってもらえるよう意識しました。
・いいねの数が１０以上あった時にハートのロゴと数字が被って表示されてしまうことを想定しました。
そのため、ハートの表示を右端にして少しスペースを空け、桁数が増えても対応できるようにデザインしました
ルームが終了した際にアイレットのパーパスを表示するのが要件でテキストはあってもなくてもどっちでもいい状態でした。
ですが、あるとアイレットっていいなって思ってもらえると考え、それによってアイレットにより興味を持ってもらえるよう挿入しました
全体を通してこだわった点
・アイレットの指定のカラーを白以外のところに適用することでアイレットが作ったサイトということがわかるようにしました
・コメントがハイライトされている表現はドロップシャドウで表現するなどし、可能な限り境目には実線は用いないことを心がけました。濃い色の線で境目をつけてしまうと、強く強調され過ぎてしまい、今回のデザインにはあまりよろしくないと感じたため意識していました。
デザイン面での改善点
・ユーザー参加ページのコメント入力のところでテキストボックスが開きすぎてしまい入力時に他の人のコメントが閲覧できない状態だったのでそれが少し不便に感じさせてしまうかもしれないのが改善点です
・ルームコードなどのエラーメッセージのところで赤のアスタリスクを実装することで記入必須ということを表現しました。
ですが、異文化の人やアスタリスクが必須という意味を表しているということを認識できない人のことを想定してアスタリスクの隣に、必須というテキストを挿入するべきでした。
・デザインのマークアップは開発側に担当してもらうということだったのですが、ボタンやテキストボックスなどをコンポーネントとして共有できていなかったので、エンジニアとの連携の部分で改善点がありました。
エンジニアの視点に立って開発しやすいように共有するべきでした
上長のコメント（第一開発事業部小谷松さん）
改善点
・いいねボタンを押した時にインタラクションが実装されていないため、ユーザーとしては押したはずなのに何も変化がないと感じてしまう瞬間があります。処理が正常に行われたかがわかりずらいところが改善点の一つだと思います。
改善案として、押した時のアニメーションがあると利用者が使っていて違和感が無いと思います。
・スマホでログインした時にコメントを記入するボックスが表示されていない状態でスマホからWEBアプリを活用することができないのが使いずらいと感じる点です。
このアプリは主に説明会や採用イベントで活用されることを想定していたため、利用されるのはPCからではなくスマホからが多く想定されるためスマホでの実装を優先するべきでした。
・処理がLambdaで非同期的に実行されるため少し時間がかかる状態ですが、読み込み中の表示などが実装されていないためそれがあるとより使いやすくなると思います。
追加でどういった機能を実装すべきか
・必要最低限の機能の実装はできていますが、アイスブレイクタイムとして活用できる機能があるとイベント運営観点からは活用しやすいです。クイズ機能やアンケート機能を実装できると、より良いシステムになるんじゃないかと思います！
インターンの進め方で良かった点・悪かった点
良かった点
・全体を通してこれが悪かったという点がなく、少ない情報の中、自分たちで自己解決をしてよくここまでやってくれたという印象でデザイン事業部の方ともうまく連携が取れていたところも良かったです
・実案件とほぼ変わらない内容・進め方をこの時期に経験することができ、ある程度形ができた状態まで進めることができたのは今後の機会にもとってもいい経験になったと思います
悪かった点
・進捗報告が最初の段階ではあまり多くなく、アウトプットができていなかった。
その日何をしていて、どういうところで詰まっているのかなどを積極的に相談してくれても良かったです
開発者のコメント（自分達の全体を通した振り返り）
入社前の段階で実案件と変わりないような実践的な開発の経験を積ませていただきありがとうございました
自分の実力と求められるスキルのギャップを実感することができ、入社前から危機感を持って自己研鑽を行うきっかけとなることができました。
エラーの対応やReduxの状態管理、他事業部の方と連携して開発を進めるなど今までやったことがないけど実際の開発現場でよく使われているスキルに触れることができたのはとてもいい経験でした。
今後の開発にもこの経験を活かしていきたいと考えております(中谷)
短い期間でしたが、いろいろな経験を積ませていただきありがとうございました！！
制作を通して、初めは不安感が多かったですが、後半になるにつれ、「また明日もやりたい！」という気持ちが大きくなりました。
唯一、課題としては報連相の頻度だと感じています。「もっと質問していいよ」という上長からのアドバイスから報連相の頻度を上げましたが、まだまだ少ないと痛感しました。
報連相の徹底と、個人で解決する時間の制限を設けることは重要なことだと個人的に考えています。
いかに短い期間で作業を行うかが重要になってくる制作だったので、時間管理などは今後にも役立つ、良い経験だった思います。（松田）
簡単30秒