110
82

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Rails】初心者が課題解決型ポートフォリオに付けた12機能はコレです!

Last updated at Posted at 2020-12-16

目次

機能 工夫した点
1 ToDoリスト機能 ToDoリストの工夫した点
2 カレンダー機能 カレンダー機能の工夫した点
3 いいね・コメント・フォロー機能  いいね・コメント・フォロー機能の工夫した点 
4 宣言機能(オリジナル) 宣言機能の工夫した点
5 わたしも機能(オリジナル) わたしも機能の工夫した点
6 つぶやき機能 つぶやき機能の工夫した点
7 グラフ機能(ドーナツチャート)  グラフ機能の工夫した点
8 レベル表示機能 レベル表示機能の工夫した点
9 ランキング機能 ランキング機能の工夫した点
10 付箋機能(オリジナル) 付箋機能の工夫した点
番外編:〆KiListの色について

はじめに

少し前に大学生の悩みを聞く機会があったのですが、そこで多くの大学生が**「課題が多すぎる」**という悩みを抱えていることを知りました。〆切を守れないことから自己嫌悪に陥ってしまう学生を目の当たりにすることもありました。

特に最近はこんなご時世ですから、通常の授業がオンライン授業に切り替わり、教員は学生の出席状況を小まめにチェックしたり、学生にテストを課したりすることができない分、レポート課題などを出すという流れに変わってきています。その結果、ますます多くの課題に頭を抱える大学生が増えているというわけです。

スクリーンショット 2020-11-21 17.02.12.png

というわけで、**「課題の多さに悩む大学生を何とかして助けたい」**という思いが生まれ、その思いをもとにオリジナルアプリを作ることにしました。

そうは言っても、課題そのものを減らすことはできないので、**できるだけ楽しく課題に取り組めるような仕組みを作る**という方向性でアイデアを出していきました。

####そして誕生したのが** 『〆KiList』** です。

(「シメキリスト」と呼びます。〆切をリスト化するので、コレにしました。)

ezgif.com-video-to-gif.gif

Illustrated by Strories by Freepik

#「課題が多すぎる」という悩みを深掘る
はじめにで説明した通り、〆KiListを作成した目的は課題の多さに悩む大学生を助けるためでした。この目的を達成するためには、まず「課題が多すぎる」という悩みが表す意味をさらに深掘って考える必要がありました。

私は**「課題が多すぎる」という悩みの根源**は、以下の2点ではないかと考えました。

  • 課題に取り組むモチベーションがわかない

  • 課題のスケジュール管理が難しい

                        

よって、大学生の「課題が多すぎる」悩みを解決するためには、以下の2つの仕組みを作る必要があると考えました。

  • 課題に取り組むモチベーションが上がる仕組み

  • 課題のスケジュール管理をしやすくする仕組み

機能一覧

〆KiListに付けた全ての機能は以下の18機能です。

  機能 Gem
ログイン機能 devise
ToDoリスト機能(CRUD) ×
カレンダー機能 FullCalendar
いいね機能(Ajax) ×
コメント機能(Ajax) ×
フォロー機能 ×
宣言機能 ×
わたしも機能(勝手に命名) ×
つぶやき機能(CRUD) ×
検索機能 ransack
ページネーション機能 kaminari
グラフ機能(ドーナツチャート) Chartkick
レベル表示機能 ×
ランキング機能 ×
付箋機能(勝手に命名) ×
画像アップロード機能 CarrierWave 
簡単ログイン機能 ×
管理者機能 ×

この中でも、「課題が多すぎる」という悩みを解決するのに必要な2つの仕組みを実現するために付けた機能は、② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑫ ⑬ ⑭ ⑮の12機能です。

  機能 Gem
ToDoリスト機能(CRUD) ×
カレンダー機能 FullCalendar 
いいね機能(Ajax) ×
コメント機能(Ajax) ×
フォロー機能 ×
宣言機能 ×
わたしも機能(勝手に命名) ×
つぶやき機能(CRUD) ×
グラフ機能(ドーナツチャート) Chartkick
レベル表示機能 ×
ランキング機能 ×
付箋機能(勝手に命名) ×

これらの機能の概要と2つの仕組み実現のために工夫した点・思いについて、ここから1機能ずつ解説したいと思います!

#1. ToDoリスト機能

 概要 
ToDoリスト機能です。使い方は、とてもシンプルです。

①課題を登録
②課題がリスト化される
③完了ボタンを押すと完了済みに入る(完了済みから戻すのもできます!)

2.gif

ezgif.com-gif-maker (1).gif

##ToDoリストの工夫した点

###①シンプル
まずはシンプルを心がけました。アプリ名にもなっているメイン部分ではありますが、色々機能があっても使いにくいと思ったのでここはシンプルに課題名と〆切日だけを表示させました。

###②リマインド
「〆切をうっかり忘れていた」というようなことを防ぐために〆切1日前、〆切当日、〆切が過ぎている課題のリマインド機能を付けました。
また、〆切が過ぎている課題にはリストに赤い砂時計が表示されるようにしました。

スクリーンショット 2020-12-05 2.56.02.png

###③実施日の登録
課題登録時に、〆切の何日前にするかという課題実施日も登録してもらうようにしました。これは、課題を「いつやるか」を考える習慣を付けることは、スケジュール管理が得意になる上で重要だと考えているためです。この仕組みを利用してその習慣を身に付けてもらえたらいいなという思いを込めて付けました。

2. カレンダー機能

 概要 
〆切を可視化できるカレンダーです。課題を登録すると、自動で〆切日のみ表示されるようになります。終わった課題は表示されません。それぞれの課題をクリックすると詳細画面に飛びます。

スクリーンショット 2020-11-21 23.45.37.png

カレンダー機能の工夫した点

①シンプル

リスト機能と同じくこちらもシンプルを心がけました。
〆切日のみに絞ってカレンダーに表示させることで、〆切日がひと目で分かるようにしました。

②〆切のカラー

通常は緑色のラベルで課題が表示されますが、〆切が過ぎている課題はでラベルが表示されます。パッと見て、**「いますぐやるべき課題」**が分かります。

#3. いいね・コメント・フォロー機能

 概要 
SNSにはお馴染みの3機能です。

・いいね
ezgif.com-video-to-gif.gif

・コメント
ezgif.com-video-to-gif.gif

・フォロー
ezgif.com-video-to-gif.gif

いいね・コメント・フォロー機能の工夫した点

これらの機能自体に特別な工夫があるわけではないですが、SNSやっている人なら誰もが一度は味わったことのある**「いいねやコメントをもらう喜び」「誰かにフォローされる喜び」**を〆KiListユーザーにも味わってもらい、課題に取り組む際のモチベーションにしてもらいたいなという思いを込めて実装しました。

スクリーンショット 2020-12-14 20.47.53.png

#4. 宣言機能(オリジナル)

 概要  
課題を登録した際に、宣言ボタンが表示されます。
押すと、**「いつ何の課題をするか」**をみんなのつぶやき一覧に投稿できます。
ezgif.com-video-to-gif.gif

宣言機能の工夫した点

①手間いらず

無駄な行程を踏まずに済むように、文章を自分で入れなくても、ボタン1つですぐに宣言できるようにしました。

②やらざるを得ない環境の仕組み化

みんなの前で宣言して、やらざるを得ない状況を作る仕組みを仕掛けました。自分で管理するだけではついつい「明日でいっか」ってなってしまいますが、他の人に宣言しちゃうと何かやらなきゃいけない気がしてくると思います。その効果を利用しました。

スクリーンショット 2020-12-16 19.06.57.png

#5. わたしも機能(オリジナル)

 概要  
挙手のマークを押すと、他の人が宣言している課題を、自分の〆KiListにも登録できます。このマークは、自分以外のユーザーの課題宣言投稿にのみ表示されています。主に同じ大学、学部の人とかが使いやすい機能かと思います。
ezgif.com-video-to-gif.gif

わたしも機能の工夫した点

①手間いらず

他の人の宣言を見て、「あ、この課題自分もやらなきゃいけなかった!」と思った時に、余計な行程を辿らず、すぐに課題が登録できるようにと思い、この機能を付けました。

②仲間意識・ライバル意識を活用

「友達がやるなら、自分も一緒に頑張ろう」という仲間意識や**「あの子に負けないように自分も頑張らないと」というライバル意識**をモチベーションにする方は結構多いと思います。そういう人たちに、積極的に課題を登録してもらえるようにと思い、この仕組みを仕掛けました。

スクリーンショット 2020-12-14 22.08.38.png

#6. つぶやき機能
 概要 
つぶやきを投稿できる機能です。
スクリーンショット 2020-12-15 23.34.34.png

つぶやき機能の工夫した点

ToDoリスト×SNS

孤独な環境だと、どうしても課題が進められない人は多いと思います。そこで、つぶやき機能(SNS的な要素)を使って他の学生と積極的にコミュニケーションを取りながら、みんなで課題に取り組める仕組みを作りたいと思い、実装しました。

#7. グラフ機能(ドーナツチャート)
 概要  
課題達成率(今まで登録した課題のうち、達成済みの課題数の割合)、〆切遵守率(達成した課題数のうち、〆切を守った課題数の割合)がドーナツチャートでグラフ化されます。

課題を完了すると、〆切達成率・〆切順守率が変わっていることが分かります。
ezgif.com-video-to-gif.gif

スクリーンショット 2020-12-15 23.37.55.png

グラフ機能の工夫した点

①課題に取り組む姿勢を数値化・可視化

努力を数字やグラフで可視化させ、モチベーション維持に繋げてくれたらいいなと思い、実装しました。

②人に見られる環境の仕組み化

グラフはマイページに表示されています。そのページに飛んでくれば、自分の課題に取り組む姿勢が他の人の目に触れることになります。人に自分の努力値が見られている環境に置かれていることもまた頑張るモチベーションになるかなと思い、この機能を付けました。

#8. レベル表示機能
 概要  
課題の完了数が増えていくにつれてレベルが上がっていきます。
「ビギナー」「中級者」などクラスも表示されます。
レベルが高ければ高いほど、課題をしっかりと完了させているという証明になります。
スクリーンショット 2020-12-15 23.41.02.png

レベル表示機能の工夫した点

①次のクラスを目指すワクワク感

ユーザーが「次はどんなクラスかな?」「私も〇〇クラス目指して頑張ろ!」と楽しめるようにして、頑張れるモチベーションにしてもらえたらなと思い、実装しました。
この辺のバリエーションはまだまだ増やす余地ありなので、さらに色々なクラスを用意して、ユーザーにワクワクしてもらえるような仕様にしていきたいと考えています。

②遊び心

真面目すぎるアプリは、少し使うとすぐに飽きてしまいます。なので、所々遊び心を加えて、ユーザーに楽しんでもらいながら長く使ってもらえるようにと思い、**「何やコレ」と言うようなクラスを用意しました。例えば、Lv.1のクラスは「赤ちゃん」**です。かわいいですね。育てたくなります
スクリーンショット 2020-12-05 12.36.12.png

#9. ランキング機能
 概要  
レベルが上位3名になると、ランキングにユーザー名とレベルが載ります。
スクリーンショット 2020-12-16 19.02.42.png

ランキング機能の工夫した点

ランキングに載ることへのモチベーション

ランキングに載ることもまた、一種のモチベーションになると思います。
「ランキングに名前を載せるために課題を頑張ろう!」と思ってもらえるようにこの機能を付けました。
ただし、今のところ見ての通りあまりにもデザインがシンプル過ぎて、名前が載っても「何だかな〜」と言う感じなので、もう少しモチベーション上がるような見栄えを目指したところです。

#10. 付箋機能(オリジナル)
 概要  
登録した課題と〆切日が、付箋のような感じで表示されます。本日〆切、本日実施の課題もすぐに分かります。
ここから課題の詳細ページに飛ぶこともできます。
スクリーンショット 2020-12-16 19.03.46.png

付箋機能の工夫した点

アプリ使用中は〆切を意識

このアプリは、課題の〆切日を守るためのアプリなので、常に〆切を意識してもらう必要があります。通常であれば、〆KiListのページに行かないと〆切を見ることができないことになってしまいますが、この付箋機能をマイページとつぶやき一覧ページに載せることで、アプリを使っている最中は常に〆切を意識してもらえることになります。〆切のうっかり忘れの防止をさらに強化するために、この機能を実装しました。

#番外編:〆KiListの色について

今回〆KiListを作成するにあたって、カラーを下記の通り選択しました。

  • メインカラー:ネイビーオレンジホワイト
  • サブカラー:グレーブルー(ボタンにカーソル置いた時)

基本的には、メインカラーを使うように気をつけました。
自分はデザインに詳しくないので、色で統一感を出すことでそれなりにまとまりのある感じを出そうという発想になり、その結果使う色を3色に絞りました。

スクリーンショット 2020-12-06 17.59.26.png

ただし、全部がこの色だと面白味がないので、ボタンにカーソルをのせた時やちょっとしたデザインの部分に関しては、グレーやブルーなど、メインカラーに比較的馴染みが良いであろうカラーを使うようにしました。
(カレンダーは土曜日のイメージが青や水色、日曜日のイメージが赤やピンクなので例外です)

尚、一番のメインカラーは**ネイビー**ですが、これは青系の色の方が、「勉強」「課題」といった真面目な印象を与えやすいと考えたため選択しました。

そこに**オレンジ**という暖色を加えたのは、〆KiListがSNS的な要素を持ち、「人との繋がり」「励まし合い」といった要素も含むからです。

**ネイビー×オレンジ**という組み合わせが結構しっくりきたのでこれらの色をメインに使いました。

#さいごに
長くなりましたが、以上です。

大学生の「課題が多すぎる」という悩みを解決するためには、

①課題に取り組むモチベーションが上がる仕組み 
②課題のスケジュール管理をしやすくする仕組み

この2つの仕組みが必要で、この仕組みを実現するために、今回解説した12機能を付けたというお話でした。

とにもかくにも、

「学生ができるだけ楽しく、ワクワクしながら課題を進められたら良いな」

という気持ちを思う存分に込め、ユーザー目線を意識しながら作成しました。

ここまで読んでいただいてありがとうございます。

予定

①この記事は、今のところ「思い」の部分が前面に出た記事になっておりますので、今後はそれぞれの機能についてどのように実装したかという技術的な部分も付け加えていけたらと思っています。

②今回は、機能という部分に着目しましたが、ポートフォリオ(このアプリ)の作成の全体的な解説記事は別で投稿します。それまでにAWSでのデプロイを頑張ります。

110
82
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
110
82

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?