デザイナーから見たProflly (月刊Proflly2022年6月号)

プロフィールビューアーサービス Proflly 開発チームでは、日々プロダクトの機能追加・改善を進めています。 このエントリでは、デザイナーから見たProfllyについて語ります。
2022.06.24

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

5月からProfllyチームにデザイナーとして加入しましたisodaです。 私たちのチームでは、 Profllyというプロフィールビューアーサービスを開発・提供しています。

これまで社内ユーザーとしてProfllyに接してきましたが、デザインする側になったことで見えてきたことについて綴っていきます。

TOPから使いたい機能へすぐアクセスできるシンプルさ

先日、お客様に使用状況をヒアリングする機会があり「シンプルで使いやすい」という感想をいただきました。私自身も諸々シンプルゆえに入社してすぐ使えるようになった記憶があります。 サイトマップもシンプルで整然としています。

サイトマップ

プロフィール閲覧機能やサンクス機能、自身のプロフィール編集まで主要な機能はTOPページから遷移してすぐ使うことが可能です。

TOP

UIもシンプル

Profllyは機能だけでなくUIもシンプルさを追求しています。UIはVuetifyというUIフレームワークを使用しております。VuetifyはGoogle提唱のMaterial Designの設計に基づいて作られているため、ヴィジュアルからモーションまで直感的で使いやすいです。Material Designを元にしているということは、GoogleのサービスやAndroidユーザーからは使い慣れたデザインということになります。 基本はVuetifyを参考にし、該当コンポーネントがない場合は1から作りますが、迷うことなく作成が可能になっています。

無料のUI Kit配布もあるので、興味ある方はダウンロードしてみてください。LightとDarkが準備されていて便利です!

vuetify UI Kit

デザインデータの管理もシンプル

デザインツールはFigmaを利用しています。 タスク管理の方法としてチーム全体でGitHubを利用しており、Figmaの作業ページもGitHubのissueと合わせています。(作業ページ名の頭にはBranchをつけています。)Masterと作業ページを分けることで事故を防ぐことができ、改修のアーカイブも保持できます。最初にこの運用方法を選択してくれたデザイナーに感謝です。さらにissueとページ名を合わせていることで、エンジニアさんとのやりとりが円滑になっている…はずです!
一番上のMasterページは最新のデザインデータを格納しています。

figmaデータ管理

ピクチャー機能が追加

以前から「マイプロフィールにプロフィール画像以外にも写真や画像を追加できたらいいのに」と言うご意見がありましたが、この度ついにピクチャー機能が実装されました! 自分の載せたい写真や画像を3枚までアップロードできます。家族の写真(子供や猫、犬の写真)をアップしたり、イラストをや写真などの自分の作品をアップしたりと自由に使うことができます。
ピクチャー機能の使い方を詳しく知りたい場合はこちら : ピクチャー機能の使い方

デザイナーとしては、ビジュアルを登録できるのは嬉しいですね!

ピクチャー機能

さいごに

シンプルで使いやすいProflly、これから携わる身としてはその良さを生かしながらさらなるユーザーの要望に応えられるサービスにしていきたいです。 より多くの企業のコミュニケーションを支えるツールとしてこれからも改善を続けていきます。今後のProfllyの改善にご期待ください!