【GIG勉強会Vol.23】「スマートフォンアプリ開発におけるディレクション」と「React.jsでサービスを作った話」|東京のWEB制作会社「株式会社GIG」

【GIG勉強会Vol.23】「スマートフォンアプリ開発におけるディレクション」と「React.jsでサービスを作った話」

【GIG勉強会Vol.23】「スマートフォンアプリ開発におけるディレクション」と「React.jsでサービスを作った話」
News

こんにちは!GIG社員で編集の松竹(しょうちく)です。2018年12月からジョインした、ピッチピチの新入社員です!GIGの一大勢力「華の93年組」の一員なのですが、老けているので誰も信じてくれません。

今は先輩のもとで、編集とは何たるかをイチから学んでいます。このGIGブログこそ一流Web編集者への登竜門だと信じて、全力で取り組みます!

それでは、第23回社内勉強会として行われたライトニングトークの様子をお届けします。

 

 

前半のテーマは「スマートフォンアプリ開発におけるディレクション」

最初の登壇者は、ディレクターの菅原靖之さん。

菅原 靖之(すがわら やすゆき):ディレクター。アプリ紹介サイト運営会社に勤務したのち、2018年5月にGIGにジョイン。委託元の兼松グランクスでは、『Clipbox QR』をはじめとした新規事業の競合調査・企画・ディレクション・外注管理などに従事。

現在は業務委託元の兼松グランクス株式会社でiOSアプリの開発を行なっています。

今回はその経験を踏まえ、スマートフォンアプリ開発のディレクションを「Web制作のディレクションとどう違うのか」という視点から解説してくれました。

当日使用したスライドは以下からご覧いただけます。

スマートフォンアプリ開発におけるディレクション from GIG inc.

 

 

まずはアプリ開発の流れ

まずはアプリ開発の一般的な流れを説明。それぞれの段階で大切なことを教えてくださいました。

  1. 企画
  2. 要件定義
  3. デザイン
  4. 開発
  5. 検証
  6. 申請
  7. リリース

 

1. 企画段階で大切なこと

 
企画段階でディレクターがすることは、

  • 企画背景の理解、整理
  • 競合調査
  • 特徴の検討
  • マネタイズ方法の検討
  • 企画書作成(できれば簡単に画面遷移図とワイヤーフレームも作る)

の5つ。

企画書を作成する際には、

  • どのような目的のアプリか
  • どのようなターゲットを狙うのか
  • どのような機能にするのか

といった要素を細かく決定し、要件定義に落とし込むことが大切です。

 

2. 要件定義で大切なこと

 
要件定義段階ですることは、

  • 企画内容の要約
  • 機能・仕様の決定
  • 担当者振り分け
  • 開発、制作スケジュールの決定
  • 使用ツールの選定〜決定

の5つ。

機能や仕様、バナー広告を入れる位置などはデザインに大きく影響するので、要件定義の段階でほぼ確定させておく必要があります。

 

3. デザインで大切なこと

 
デザイン段階ですることは、

  • 機能のデザイン化
  • 細かな仕様の決定〜仕様書の作成
  • チュートリアルのデザイン制作
  • 申請用素材の制作

の4つ。

細かな仕様が決まったら、各画面のレイアウト・機能・画面遷移などを指定する「画面仕様書」を作成します。デザインが確定すると、ようやく開発に入ります。

菅原さんはデザインサンプルの共有に、デザインツールのFigmaを利用しているそうです。

アプリの本機能だけでなく、チュートリアルのデザインやApp Storeに申請するための素材も同時に作っていきます。

 

4. 開発で大切なこと

 
開発段階ですることは、

  • 機能の開発
  • 仕様の最終調整

の2つ。

菅原さんいわく、開発にプロジェクト全体の工数の半分以上が費やされるそうです。

 

5. 検証で大切なこと

 
検証段階ですることは、

  • DeployGateを使って検証端末へインストール
  • デバッグ・修正
  • ヘルプ内容の決定
  • 翻訳

の4つ。

検証段階では、DeployGateを使って検証用端末にインストールし、デバッグしていきます。

シンプルな動画撮影・加工用アプリでも、検証項目は400を超えるそう!気の遠くなる作業です。

 

6. 申請で大切なこと

 
申請段階ですることは、

  • 申請用素材(ストアキャプチャ、詳細テキスト)の用意
  • ストア担当者対応

の2つ。

検証して問題がないことが確認できたら、ようやくApp Storeに申請を行います。

一般的には審査に2〜3日かかるそうですが、場合によっては1週間〜1ヶ月かかったり、逆に1日で審査が通ったりと、一概には言えません。

App Storeの対応は全て英語で行われるため、英語が苦手だとここで苦労します。

 

7. リリースで大切なこと

 
リリース段階ですることは、

  • 問い合わせ対応
  • 次回アップデート内容の検討

の2つ。

申請が通って、念願のリリース!しかしリリースはゴールではなく、あくまでスタートラインに立っただけです。問い合わせ対応と、次回アップデート内容の検討が始まります。

 

 

Webディレクションとの違い

次に「iOSアプリとWebでのディレクションの違い」を説明してくれました。それが次の5点です。

  • App Storeの存在
  • ASO(App Store Optimization)
  • スマホアプリだけであればPC版を作る必要がない
  • OS更新時の対応など、細かなアップデートが必要
  • 実機での確認・検証が必要

菅原:「工程上の大きな違いは、『App Storeに申請しなければいけない』というところです。審査基準が明らかになっていないのが厄介なポイントです」

菅原:「逆に似ているところがASO。WebサイトにおけるSEO(Search Engine Optimization)と同じように、App Storeでも検索上位をめざしてタイトルや説明文に入れるキーワードを考える必要があります」

 

 

ディレクションをする上で気をつけていること

最後に、ディレクションをする上で気をつけていることを聞いてみると…

菅原:「とにかくわかりやすい言葉で伝えることを心がけています」

と言って、菅原さんが紹介したスライドがこちら。あれ、どこかで見たことある気が……?

 

菅原:「このように、ビジネスやITの業界では横文字やカタカナ語が多用されがちです。それで伝わりやすくなればいいですが、そういうわけではありません。共有できる言葉を選んでディレクションするようにしています」

ディレクションについて非常にわかりやすい講義となりました。

 

 

後半のテーマは「React.jsでサービスを作ってみた話」

次の登壇者は、フロントエンジニアの秋津辰弥(あきつたつや)さん。

秋津 辰弥(あきつ たつや):フロントエンドエンジニア。総合学園ヒューマンアカデミーを卒業後、職業支援学校にてWeb制作を習得。その後イベント・映像制作系企業に入社し、およそ1年半自社企画のイベント告知サイトを中心に構築と運用を担当。2017年10月末、GIGにジョイン。

当日のスライドは以下でご覧いただけます。

React.jsでサービスを作ってみた話 from GIG inc.

 

前回登壇時はSPA(Single Page Application)のフレームワーク3種(Angular.js、React.js、Vue.js)を比較しながら紹介してくれました。今回は、React.jsを実際に使ってサービスを試作しての所感を話してくれました。

 

 

React.jsの特徴をおさらい

まずはReact.jsの特徴をおさらい。内容は以下の通りです。

  • Vue.jsと比較するとJSで記述していく感覚が強い
  • JSの拡張言語である「JSX」を使用
  • 他のSPAフレームワークと比べて、書き方の作法が厳しい
  • サードパーティ製のライブラリが豊富

秋津:「Vue.jsなどはフレームワーク色が強いですが、React.jsはあくまでライブラリという立ち位置です。React.jsはゴリゴリJSを書いていく感覚があって楽しいです」

 

 

社員リストを作ってみた

秋津さんはReact.jsを使って「GIGメンバー全員が所属しているSlackの日報用チャンネルから、アカウントを一覧で表示する」サービスを試作しました。

秋津:「日報を出してない人がわかる、といった機能もつけられるかもしれません。スタッフリストとしての機能を充実させていきたいです」

 

 

実際に作ってみて感じたこと

秋津さんがReact.jsでサービスを作ってみた感想は、

  • 初期の環境構築が手間
  • 日本語で書かれている参考記事が少ない
  • Routerの定義が手間
  • Reduxを導入する場合はRedux-loggerがかなり便利
  • JSを書くのが楽しい、JSの技術も高められる

という点でした。

また、React.jsをVue.jsと比較した時にハードルになりそうなのが、

  • 環境構築の手間
  • 初期学習の難しさ

の2点。

秋津:「SPA開発で必要な最低限のパッケージが簡単に手に入るVue.jsに比べ、React.jsではサードパーティ系のプラグインを自分で調査して、適応するバージョンかどうかを確認しながらStoreやRouter周りのパッケージを実装していく必要があります」

 

秋津:「調査に当たって問題になるのが、React.jsの公式ドキュメントが全文英語で書かれていること。Vue.jsは日本語ホームページもあるし、StoreやRouterも含んだパッケージを本家が用意しています」

一方で、データのやり取りが多い大規模サービスに適している印象もあるそうです。

秋津:「パッケージ化されていないということは、裏を返せばActionやRouterに関してはこちらがコントロールできるということです。データの処理やStoreとの接続をハンドリングできるので、ユーザーアクションが多いサービスを開発する上では向いているのではないでしょうか」

 

 

まとめ

秋津さんは、React.jsを使用してみての所感を以下のようにまとめてくれました。

  • Reduxの理解が深まるとReactの開発が楽しくなる。Reduxは慣れると書きやすいし、React.jsのコンポーネントの中身がシンプルになる
  • Vue.jsの勉強をすると、React-Reduxの勉強も深まる気がする
  • 引き続き、社内ツールの制作と合わせてReact.jsの大規模開発をしていきながら知見を深めたい

React.jsについての知識が深まった講義となりました。

 

 

最後にQ&A

エンジニアから、数々の質問が寄せられました。

Q1:スタッフリストの表示順はどうなってるの?

秋津:「今はランダム。ソートできないか試してみる予定。日報のジェネレータ化やSlackへの自動投稿の機能も付けたい」

 

Q2:フロントエンジニアがReact.jsを使っていく上で気をつけたほうが良いことは?

秋津:「スタイルの書き方がいくつかあること。コンポーネントごとに細かく切って書いていくことになるので、複数人で設計する場合はルールを統一したほうがよい」

 

Q3:SPAをはじめて設計する場合、Vue.jsから入るべき?それともReact.jsから?

秋津:「Vue.jsからの方が良いのではないか。導入からはじめて動かせるようになるまでの工数はVue.jsの方が短いので、達成感を得ながら理解していくことができる。Vue.jsに慣れてからReact.jsに触れることで、React.jsの構成も掴みやすくなる」

このほか「アニメーションをつけるようなリッチなUIをReact.js単体で作るのは難しい」という意見も寄せられました。

 

 

勉強会のあとは……お待ちかねの食事会!

勉強会のあとは参加者で食事を囲むのがGIG流。もはや恒例となった、シェフによる出張料理が振舞われました!(私は今回初参加なのでワクワク!)

トナカイの格好で現れたシェフ。すっかりGIG社員とも顔なじみです。

 

用意された料理はローストチキン。おいしそうな写真ですよね。もちろんおいしかったです。こんなおいしいものが食べられるなら毎日勉強会でもいいですね。

新入社員から見て、勉強会からの食事会という流れの中でフラットに情報を共有でき、かつ食事にも手を抜かないGIGは素晴らしい環境だと感じました。

 

 

GIGでは、一緒に働く仲間を募集しています

現在GIGでは「一緒に学びながら成長していきたい!」と意欲のある仲間を募集しています。

話を聞いてみたい方はコチラからどうぞ!

GIGblog編集部

株式会社GIGの社員によって構成される編集部。GIG社員のインタビューや、GIGで行われたイベントのレポート、その他GIGにかかわるさまざまな情報をお届けします。

RELATED ARTICLES