先日、開発者向けのオンラインイベント「Nota Tech Conf  2021 Spring」を開催しました！

同イベントは、プロダクトに関する技術領域の取り組みを開発者の目線から伝えるカンファレンス。ゲーマーからプロのデザイナー、小規模チームから大企業まで、世界中の人々を支援し続けるNotaがどのようにサービスを提供し、ユーザーを支えているか、各プロダクトオーナーが解説しました。

今回はGyazoのプロダクトオーナー、yuisekiによるセッションの内容をご紹介します。

「今までのGyazo」と「これからのGyazo」。進化する5つのポイント

こんにちわ、Gyazoプロダクトオーナーのyuisekiです。

Gyazoはこれまで「スクリーンショットの瞬間共有ツール」として、多くのユーザーさまにご利用いただいてきました。

起動して画面上の好きな場所を範囲選択するだけで、スクリーンショットが即座にアップロードされ、さらにクリップボードのURLを送るだけで他者に共有できます。また、有料のGyazo Proユーザーになると、過去にアップロードした全画像への一覧へアクセスでき、Draw機能、OCR機能、検索機能なども利用可能です。

Gyazoは今後、既存の機能もより良いものにアップデートしながら、あらゆる画像情報を蓄積し「画像の瞬間発見」を実現できるツールを目指して、さらなる進化を続けていきます。

どんな点を進化させていくのか、具体的な施策は以下の5点です。

• 検索機能の強化
• 関連画像の「理由」を表示
• 写真のEXIF情報を活用
• タイトル・説明UIの改善
• ヘッダーUIの改善
  

ここからは一つひとつの施策についてご紹介します。

検索機能の強化

Gyazo Proのユーザーは、自分が過去にアップロードしたすべての画像を検索できます。

今後はこの検索機能を強化すべく、インクリメンタルサーチを採用することで、検索欄に文字列を入力した際、即座に検索結果が表示されるようになります。

例えば、「渋谷」で検索すると検索結果が多すぎる…そんな場合は「渋谷駅」「渋谷区」「渋谷凛」など、一文字加えるだけで検索対象に近い画像を絞って検索できるのです。

また、検索欄にカーソルを合わせた際、過去の検索履歴が表示される機能が追加されました！

「昨日検索したキーワードでもう一回検索したい」といったニーズにお応えできます。

‍関連画像の「理由」を表示

検索機能の他にも、GyazoにはProユーザー向けに「関連画像」という機能があります。

閲覧中の画像のメタデータを元に、ユーザーが過去にアップロードしたすべての画像から、関連度の高い画像が表示される機能です。

関連画像をユーザー目線でより使いやすいように表示できるよう、先日β版機能をリリースしました。

β版では、「アップロード日時が近い画像」や「タイトルが似ている画像」、「アプリケーションが同じ画像」など、関連理由ごとに画像が表示されます。

関連画像としてなぜ表示されているか、その理由がわかることで、ユーザーは納得を得られ、過去データの有効活用ができるようになるでしょう。‍

写真のEXIF情報を活用

現在のGyazoは、画像をアップロードした日時でしかソートができません。

例えば、デジカメや一眼レフで撮影した写真を後日まとめてアップロードした場合、撮影日が違う写真もすべて同じアップロード日と認識されてしまうのです。

同様にスマホでも、電波のない場所や通信の途絶した災害時に撮影した写真をあとからアップロードしたときに困ってしまいます。
この課題を解決すべく、写真画像に含まれる「EXIF情報」を活用し、撮影日時などを認識してソートができるように現在開発中です。

さらに、EXIFに含まれる位置情報を活用することで、撮影場所が近い写真も関連画像として表示させることができるでしょう。

‍

タイトル・説明欄UIの改善

以前はタイトルの下に表示されていたディスクリプション欄を、さらに有効活用してほしいという思いから、説明欄の一行目が自動的にタイトルに表示されるように変更。
タイトルをクリックすることでディスクリプション欄を編集でき、ちょっとしたメモとして活用できます。

・Before

・AfterヘッダーUIの改善

ヘッダーはGyazoの全画面に存在しています。

これからのGyazoは、ユーザーが画像の閲覧に集中できるよう、細かい操作はヘッダーに集約するとともに、全ての画面の全てのヘッダーから画像検索ができるようにしたいと考えています。

現在、細かく段階を分けて開発を進行中。

今後さらにアップデートをしていく予定です。

画像個別画面

・Before

・After

画像一覧画面

・Before

・After‍

ドッグフーディングやプロトタイピングを重視する開発スタイル

続いて、Gyazoチームにおける開発スタイルについてご紹介します。

開発を進めるうえで、前提として、ビジョンの実現へ向けた「トップダウンによる開発」と「ボトムアップによる開発」という両面の考え方があります。

「トップダウンによる開発」とは、経営者がビジョン実現のためのロードマップを引き、それに基づいてプログラマーがタスクで分解して開発を進めていくことです。

一方「ボトムアップによる開発」とは、プログラマー視点で改善や新機能の開発を進めることを指します。

Gyazoチームは「トップダウンによる開発」と「ボトムアップによる開発」を進めており、そのうえで「ドッグフーディング」や「プロトタイピング」といった考え方を大切にしています。

ちなみに先ほど紹介した検索履歴表示や写真のEXIFに含まれる位置情報の活用も、トップダウンのロードマップに含まれていたわけではなく、ボトムアップによるアイデアです。

・ドッグフーディング

開発チームのメンバーは日頃から仕事でもプライベートでも、Gyazoを使っています。

プログラマー自身が日常的にGyazoを使いながら感じるユーザー視点の改善要望が、そのままボトムアップの開発を進めるモチベーションとなっています。

・プロトタイピング

ドックフーディングで改善ポイントや新しいアイデアを思いついたら、Slackで相談してチームの許可を得るよりも先に、まずは動くものを作ります。

最初はUIの完成度を気にせず、とにかく動きが確認できるプロトタイプを作り、それを触りながらUIを詰めていくという流れです。

しかし、複数ページにわたって整合性が求められるケースなど、先にUIを検討した方がよさそうな場合は、何パターンかワイヤーフレームやモックアップを作り、それを元に議論していきます。

ちなみここでいうモックアップとは、HTML+CSS+Javascriptで実際に動くもののことです。

議論の場は、週に1回、15分～1時間程度設けています。

テーマごとにScrapboxのページを作成し、開発メンバー全員が集まって、通話をしながら議論を進めていきます。

また、いっぺんに複雑で大きな修正をするよりも、小さな修正を積み重ねるのが、最近のGyazoチームの開発スタイルです。
これはルールではありませんが、これまでの経験からベストプラクティスであると考えています。

進化し続けるGyazoチームは学生インターンを募集中！

ご清聴ありがとうございました。

最後に、Gyazoでは一緒に開発したいという学生インターンを募集しております！

ご興味がある方は、recruitment@notainc.com までメールでご連絡ください。

また、Gyazo Proの機能を1ヶ月無料で試すことができますので、気になる方はぜひ試してみてください！

https://gyazo.com/pro