2019年版 爆速プロトタイピングを支えるサービス 7選

7822 ワード
AdobeXD Hugo contentful zeit Firebase Firebase テキストリンク

NewsPicksエンジニアの久保です。
コミュニティチームという、NewsPicksを利用するユーザのみなさんが、より一層毎日使っていただけるようなアプリにするために、機能の開発や改善を行うチームで働いています。

サービス作りで大事にしていること

とにかくサービスを作ることが好きで、プライベートでも様々なサービスを作っています。
普段のサービス作り（特に0→1フェーズ）で、大事にしていることが、

“最速でMVP（Minimum Viable Product）を作り、ユーザのフィードバックを取り込みながら、プロダクトを高速でブラッシュアップしていく”

です。

そのため、

・できるだけ時間をかけずにアイデアを可視化・具現化する（デザイン）
・開発する機能を限定し、極力開発工数を減らす（開発）

が重要になってきます。
そんな MVP = プロトタイプ 作りに、今年役立ったツール・サービスをご紹介できればと思います。
ではさっそく行きましょう！

まずは、デザイン・モック編

Adobe XD

  • ①ワイヤーフレーム・デザイン作成 ②プロトタイプ化（画面遷移） ③共有・コメント の3つの機能がメイン。デザイン → プロトタイプ → 認識すり合わせ → デザイン → プロトタイプ → ...のサイクルを回しやすいのが一番の魅力。
  • 今年に入ってから、Photoshopとの連携が強化され（Photoshopでの変更内容がリアルタイムで反映）、かつ共同編集機能も可能になり、ますます使いやすくなっています。
  • twitterでのアンケートでもその人気が伺えます。
  • 少人数ででデザインし、管理する分には十分。逆に、複数人で大規模に、かつ高度なデザインをする場合は、Sketch or Figma がおすすめです。

Drama

  • 基本的に、提供している機能にAdobe XDとそれほど大きな違いはないです。
  • 一番の違いは、3Dなどの高度なアニメーションが簡単に作成できる点。履歴管理もシンプルで分かりやすく使いやすいのはGoodポイントです。
  • 個人的には、Adobe XDとの棲み分けは、 より高度に複雑なプロトタイピング がしたい場合は、Drama。 シンプルに早くプロトタイピング がしたい場合は Adobe XD で使い分けています。

避けては通れない、バックエンド開発編

Firebase

  • mBaaS（mobile Backend as a Service）の雄。
  • バックエンドとして必要な機能のほとんどをFirebase1つで賄えるすごさ。
  • バックエンドAPIとしてのCloud Functions、用途別の異なるデータベース Cloud Firestore・Cloud Storage・Realtime Database、認証基盤（Firebase Authentication）、静的コンテンツのホスティング（Firebase Hosting）など。
  • そして、バックエンド開発だけではなく、アプリの品質改善のためのCrashlyticsやPeformance Monitoring、分析・予測、機械学習などなど。豊富すぎて使わない手はないです。
  • NewsPicksでは、こちらでも書いていますが、最近Firebase Predictionsも導入しました!

AWS Amplify

  • Firebaseの対となるサービス。
  • そこまでガッツリ触ったことはないけど、React、Vue、AngularのSDKもあり、Webアプリケーションの開発だとFirebaseより、Amplifyの方が良さそう。

  • スタートアップが AWS Amplify を使うべき3つの理由 で、わかりやすくまとめてくれています。

  • AWSの他のマネージドなサービスと組み合わせると、よりスピーディーに開発ができるのが、Amplifyの良さですね。

お次は、静的サイトジェネレーター編

Hugo

  • 非常にベタで、恐縮ですが、やっぱりHugo。間違いなく、最速で静的なサイトを構築できるサービスの1つ。
  • 個人的には、ReactベースのGatsbyもいいが、Themeの多さで圧倒的にHugo。

絶対に外せない、コンテンツ管理編

Contentful

  • Headless CMSの一角。
  • コンテンツ作成の管理画面も直感的で非常に使いやすい。ただし、1つのコンテンツを作るのにいくつものオブジェクトを管理画面で作成しないといけないのが、本格導入後の運用を考えるとちょっと手間で負担。
  • NewsPicksでも、 The AcademiaというNewsPicksアカデミア運営のメディアで、contentfulを利用しています。

（ex.コンテンツ作成画面）

  • SDKが提供されているが、Java SDKに関していうと、個人的にはあまりおすすめしない。Contentful独自のオブジェクトの扱いが少し厄介で、REST API経由でコンテンツを取得する方がBetter。

最後は、ホスティング編

ZEIT Now

  • とにかく無駄を排除し、洗練されている。個人的に、今年最も感動したプロダクト。
  • Githubと連携し、ボタンを数クリックするだけで、静的コンテンツやJAMStackなシステムをconfigなしでdeployできる。もちろんCLIで、簡単にdeployも可能。
  • あの、Next.js や Hyper を手掛けているZEITが開発。さすがとしか言いようがない。

最後に

以上、2019年、私が使ったサービス・ツールの中で、もっとも良かった7つをご紹介してきました。
プロダクトの、0→1フェーズには、こういったサービスを駆使して、より重要なコンセプトの検証 や サービスのコアとなる機能の開発に集中できること が一番重要ですね。限られたリソースの中で どれだけ速く、ユーザに触ってもらい、改善して いけるかが、明暗を分けるように思います。

明日は、Androidエンジニアの @masato2019 です！お楽しみに！