TOP

トップ

Service

事業紹介

動画配信パッケージ

LINEミニアプリ開発

Shopify開発

デザイン・開発まるっとパック

Works

実績

インタビュー

開発実績

Our Products

自社プロダクト

About

会社概要

Blog

ブログ

Recruit

採用情報

News

ニュース

FAQ

よくあるご質問

Contact

お問い合わせ

thumb image

【わかりやすい】ソフトウェア開発における画面設計書!グローバル環境でも使える画面設計書の書き方、サンプル、活用方法を公開

IT企業のWebやアプリの開発現場において、余計な手戻りを防ぐためには、プロダクトの詳細な仕様を定義し、プロジェクトメンバー全員が共通認識を持つことが大切です。しかし、仕様の詳細をドキュメントに起こし、画面設計書として上手く運用できている現場は少ないのではないでしょうか。

弊社ではベトナム人エンジニアと日本人ディレクターが協力してプロダクトを開発しており、文化の違いがある中で様々な工夫をしながら画面設計書のフォーマットや運用方法を改善してきました。

そこで今回は、前職ではエンジニアとしての経験もある弊社ディレクター竹内に、オフショア開発における画面設計書の役割や作成方法の極意、さらに運用の効率化について聞いてみました。

ディレクター竹内自己紹介 オフショア開発企業へ転職、アプリ開発のディレクターへ

インタビュアー:まずは簡単に自己紹介をお願いします。

新卒でハードウェアよりの製品の営業をした後、エンジニアに転職しモバイルアプリやWebアプリの開発をやっていました。その後、株式会社Enlytのベトナム開発拠点であるSupreme Tech Co.,Ltdに入社しました。

今までディレクターとして、大体10〜20ほどのプロジェクトに関わってきました。小規模なものは3,4人から大きなものは80人くらいまで、幅広くやってきたと思います。

倉庫の管理システム用アプリのようなBtoB向けのものや、金融系、ファッションのBtoCのアプリなど業種も様々でした。

インタビュアー:社内プロジェクトとは別に、個人でコーディングもされていると聞きました。

はい。趣味でブログ運営とアプリ開発をやっています。

基本Androidアプリで、 単語帳アプリやラジオアプリ、翻訳アプリなど、今まで30個ぐらいアプリを作ってリリースしたことがあります。

オフショア開発の流れ 企画・要件定義から納品まで

インタビュアー:Enlytでの一般的な開発の流れを教えて下さい。

アプリやWebサービスの開発において、まずはクライアントがどんなものを作りたいかのヒアリングから入ります。営業を交えてざっくりこんなものを作りたいというのを聞いたら、具体的にどういった機能が必要なのか、詳細な要件をディレクターが詰めていきます。その要件をもとにエンジニアは技術選定や実装設計を進め、開発に入っていきます。

開発が終わったら、エンジニアが単体テスト(コードレベルのテスト)を行い、次にQC(クオリティ・コントロール)が結合テスト(全体的な機能テスト)を行います。

諸々のテストが終わったら、「受け入れテスト」としてクライアントに作ったものを確認していただきます。

そこで改善点があれば修正を行い、納品・リリースとなります。

その後さらに作りたい機能があれば、運用・保守フェーズに入り、同様の流れで追加開発を行っていきます。

ざっくりした要件を受け取った段階ではエンジニアからの質問が発生することが多いので、それをうまく調整し疑問点を解消していくことによって、開発内容をクリアにしていくところが私(ディレクター)の担当業務になります。

画面設計書の役割と重要性

言語の壁があるオフショア開発現場において、品質担保のため画面設計書は必要不可欠

インタビュアー:それでは、開発において画面設計書の役割はどういったものになるのでしょう?

画面設計書は品質の高いプロダクトを作り上げるために必要なドキュメントだと思っています。

例えば、開発者はどんなプロダクトを作るのか、画面設計書を見て具体的なイメージを持ってコードを書いていけるし、品質管理のQCは画面設計書に書いてあることを正だと思って実際にプロダクトをテストします。

日本人同士だったら暗黙の了解で作れる部分があると思うんですが、オフショア開発の現場では認識齟齬が生まれやすいです。言語の違いはもちろん、生まれ育ってきた環境が違うことでお互い全く常識が異なるので、ソースコードだけでは表現できないプロダクトの文化的背景、特徴、前提条件は伝わらないと思ったほうがいい。暗黙の了解は通用しないのです。オフショア開発においては、やはり誰が見ても明確な画面設計書が必要です。

きちんと固めた仕様をベトナム人エンジニアに渡すことによって、よりお客さんのイメージに近いプロダクトをつくることができると思っています。

画面設計書があれば、人が入れ替わってもキャッチアップコストが削減できる

インタビュアー:日本の開発現場では画面設計書を使わないことも多いと聞きます。オフショア開発でのみ、必要なのでしょうか?

おそらく、日本の特に中小企業の現場だと、画面設計書があるケースはほぼないと思っています。

画面設計書は全員が見る分正確さが求められるんですけど、その正確さを保つためには相当の労力が必要になるんですよね。でも開発現場って本当に忙しくて、書いている暇もなく次々タスクが舞い込み、時間がなくて結局風化してしまうみたいなパターンがほとんど。

それでも僕は、どこの開発現場でも画面設計書は必要だと思っています。同じ人が同じプロジェクトにずっといることはなく、人の入れ替わりはどうしても発生する。

その時に、画面設計書がなかったり、あっても最新化されていなかったら、結局ソースコードを頼りにキャッチアップするしかなくなっちゃうんですよね。そうすると、学習時間が余計にかかってしまう。

キャッチアップのコストを削減するという意味でも、画面設計書はめちゃめちゃ大事だと思います。

画面設計書作成の極意

Enlytで運用しているフォーマット事例

インタビュアー:具体的にどういったフォーマットで運用しているのですか?

フォーマットは、Googleスプレッドシートないしはエクセルを使用しています。全員が参照できるよう、言語は英語です。

書く時に意識しているのは、なるべく全てのふるまいを詳細に書いていくことです。

具体的には、UIはもちろん、どういうAPIが呼ばれるかとか、どんなエラーハンドリングが必要になるのかとか、何文字まで入力を許容するのかみたいなかなり細かいレベルまで精度を上げるように気をつけながら書いています。

開発スピードを落とさないために、質問フローを整備

インタビュアー:画面設計書の運用にあたって大変なことや、工夫していることはありますか?

画面設計書に書いてないことに関する質問がめちゃめちゃ出るので、それに答えるのに時間がとられて、なかなか自分の仕事ができないことは多いですね。

それに対しては、ルールを設けるのがいいと思っていて。例えば同じアプリでiOSとAndroid両方あった時に、「現状の実装でどちらかが正しいのか、それとも画面設計書やデザインを基準にするのか」という質問が出ることはよくあります。

そうなった時は、一定のルールを決めてしまいます。例えば「ちょっとしたフォントの大きさや色の違いだったら、全部iOSに合わせるので確認はいらないよ」とか。

「この場合は画面設計書・デザイン・実装のうちのこれが正で、こういう時は僕に聞いてね」という風に柔軟にフローを変えることによって、開発スピードを落とさないようにしたっていうのは工夫したところかなと思います。

画面設計書更新の効率化について

デザインツールと画面設計書を連携させることで、更新の手間を省きたい

インタビュアー:フローの整備は大事ですね。それでもまだまだ更新の手間はかかると思います。

そうなんですよね。
・開発に必要な情報が詳細に網羅されていなければいけないこと
・常に最新の状態に保っていなければいけないこと
この2点を人力でやっていくのはかなり労力がいります。
そこをできるだけ効率化したいという思いがあって、自動化を考えるようになりました。

今のフォーマットではアプリの一画面の画像を貼って、その下にボタンやテキストだったりっていう仕様概要の情報を書いているんですけど、デザインが頻繁に変わった時に画像の更新漏れが起きやすいです。

そこで、デザインツールと画面設計書をリアルタイムで連携し、常に最新のデザインを画面設計書の中で自動表示できるようにすれば、手動で毎回画像を貼るより遥かに手間が省けるはずです。

デザイン連携が可能なWebアプリをゼロから開発へ

インタビュアー:デザインと仕様の連携ができたらかなり労力が減りそうです。実現方法はあるのでしょうか?

はい、3つのやり方があると考えています。

1つ目は、画像認識と文字認識をPythonでゼロから書いて、画像データからUIコンポーネント情報や仕様概要を解析してそれを出力するものを作るという案です。ただ、十分に文字解析ができなかったりして、サードパーティのライブラリの精度が今回の要件に会わなかったので、この案は却下になりました。

2つ目が、Googleスプレッドシートとデザインツール(Figma, Sketchなど)をGoogle Appスクリプトっていうサービスを使って連携させる方法です。でも、このスクリプトが短時間で多くのコンポーネント情報を連携させようとするとサーバがエラーを返してしまうことが分かり、この方法も実現が難しそうです。

そこで今は第3案として、サードパーティとリアルタイムで連携できるWebアプリをゼロから作りたいと思っています。サードパーティのデザインツール側がどういうAPIを持っていて、どこまでの情報を外部に連携できるのかによってできることがだいぶ変わってくるので、そこの調査をしている段階です。

リモートワークが主流となった今、画面設計書の重要性は増していく

インタビュアー:実現できることを期待しています!最後に一言お願いします。

コロナウィルスの感染状況が縮小する気配もなくリモートワークが主流になる中、コミュニケーションコストを減らす意味でも、画面設計書ってすごく重要だと思います。

正解となるものを一つ持っておくことで、離れていてもみんなが共通の認識を持って開発できます。開発現場において、今後ますます画面設計書の重要性が認知されていくのではないでしょうか。

Enlytについて

株式会社Enlytはベトナムに開発拠点SupremeTechを持ち、これまで50以上の開発プロジェクトを行ってきました。ベトナムと日本のグローバルなチームで、数多くのプロジェクトを成功に導いてきました。

お客様の納得のいくまで、共に開発させていただき、アイデアを最高のかたちにサービス化いたします。

オフショア開発についてのお悩みやご相談がございましたら、下記ボタンより気軽にお問合せください!

バナー画像 バナー画像

他の記事

View More

arrow-forward

テクノロジー

LINEミニアプリで何ができる?各機能の利用シーンと得られる効果

#LINE #サービス

テクノロジー

LINEのID連携の仕組みとは?導入のデメリットやメリットを解説

#LINE #サービス

システム開発

Shopifyのカスタマイズ方法|目的別の難易度や注意点を分かりやすく解説!

#ECサイト #サービス