【インターン】UI改修デザインから実装まで担当して学んだこと

エキサイトでデザイナーインターンをしているさかいです! インターンで学んだこと第2弾を書いていきます!

担当した業務としては大きくわけてこの2つです。

担当したこと

  1. 相談サービス「お悩み相談室」のmeta広告のバナー制作
  2. 恋愛相談サービス「恋ラボ」のTOPページへ追加機能デザインと実装

今回は、2つ目の業務である恋ラボのTOPページへ追加機能デザイン実装について書いていきます! デザイナーさんやディレクターさんからのフィードバックをいただき、デザインからコーディング、リリースまで経験して大変勉強になりました。

やったこと

以下の順序で進めていきました!

改修の目的を明らかにする

今回は、トップページに相談員の人数を表示するというものです。 新規でサイトを訪問したユーザーに、今相談できるということを知ってもらえれば、今すぐ相談したい人の目にも留まると考えました。

デザインを作成

恋ラボのユーザーボリューム層である20代が使用しているサービスを見て、どんなUIになっているのかを調べます。 ワイヤーフレームから、デザインをおこしていきました。

改善

レビューいただき、ボタンとテキストのデザインに決定しました!

実機で実際の画面でみたときに、上部にカルーセルがあり、ボタンにイラストも付けてしまうことによって逆に目立ちづらくなります。 今回のUI改修の目的を改めて考えて、シンプルなボタンとテキストに決定しました。

コーディング〜リリース

実際にコーディングし、リリースまで経験させていただきました。 プルリクエストを出した際に共通点が多く何度も書いてしまった部分に関して、アドバイスをいただきました!

自分で気づかなかったミスなどもあり反省しました。 細かくみていただきありがとうございます。

以前は、自分でweb制作をする際にバージョン管理としてgithubをなんとなく使用していました。 業務で作業することについてずっと緊張していたのですが、画面共有して一緒に見てくださりとても安心して進められました...!

また、stg環境を使用する際にワークフロー化されており、そういった働きやすさや工夫に触れられたところも良かったです。

感想

機能追加のデザインから実装まで経験できて、実際に動く画面がリリースされたときはすごく嬉しかったです! 1ヶ月半のインターンを通して、理由のあるデザインとはなにか、効果のあるデザインとはなにか、試行錯誤する流れを学びました。

マーケティング視点をもったり、コーディングの範囲まで勤務することができて、充実したインターンになりました。 楽しく勤務させていただきありがとうございます!