【プロトタイプを作る！】初心者でもすぐに分かるProttの使い方

プロトタイピングツールとして有名な「Prott」の使い方を紹介！Prottは作業画面からサポートまで全て日本語対応のプロトタイプ作成ツールです。作成したプロトタイプはiPhoneですぐに確認することができます。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

プロトタイピングツールとして有名な「Prott」の使い方について解説しています。

Prottは作業画面からサポートまで全て日本語対応のプロトタイプ作成ツールです。使用には専用のアカウントが必要ですが、メールアドレスとパスワードだけですぐに無料で始めることができます。

Prottを使い始める登録のところから実際にプロトタイプを作る詳細部分も載せているので、ぜひ参考にしてみてください。

なおProttは、TechAcademyのオンラインブートキャンプ UI/UXデザインコースでも使用しています。

新規アカウントを取得する

まず、下記のリンクにアクセスします。

https://prottapp.com/ja/

「無料ではじめる」をクリックします。

prott_p_1

ユーザーネームとメールアドレス・パスワードを設定します。

prott_p_2

各項目を入力し「サインアップ」をクリックすると「【Prott】アカウントを承認してください！」というタイトルのメールが設定したアドレスに届くので、「メールを確認する」をクリックすれば完了です。

prott_p_3

最初の30日間は有料の機能を全て使用することができます。
無料プランは1つのプロジェクトのみが編集可能ですが、スクリーンの数には制限がありません。

prott_p_4

プロジェクトの作成

まず、新規にプロジェクトを作成します。
管理画面から「新規プロジェクト」をクリックします。

prott_p_5

プロジェクト名を入力し、対応の形式を選択します。今回はWebとしています。

prott_p_6

[PR] UI/UXデザインで挫折しない学習方法を動画で公開中

スクリーン画像のアップロード

プロトタイプに使用するスクリーンをアップロードします。

対応の形式はJPEG・GIF・PNGの画像ファイルとなります。
画像はPCからのアップロードの他に、Dropboxから使用することもできます。

prott_p_7

スクリーンをアップロードしたら、編集を行う画像をクリックします。

prott_p_8

スクリーンからスクリーンへのリンクを作成する

スクリーン内をドラッグすることでリンクを貼る範囲を選択することができます。

prott_p_9

範囲を作成すると他画像へ紐付けするための黄色い曲線が現れるので、左のスクリーン一覧からリンク先として設定したい画像へ繋げます。

prott_p_10

また、この時「トランジション設定」からリンクを行う際のアニメーションを選択することができます。

prott_p_11

リンク箇所は後からでも範囲を拡大・縮小・移動することが可能です。

prott_p_12

prott_p_13

上メニューの「プレビュー」をクリックすると実際にどう動くか確認することができます。

prott_p_14

シェア機能・サポートの使い方

「シェア」→「共有設定をオンにする」をチェックすることで、グループのメンバー以外にも作成したプロジェクトを公開することが可能です。

prott_p_15

サポートへの問い合わせフォームは、左下のこのマークをクリックすることで表示されます。

prott_p_16

prott_p_17

以上、Prottの使い方を解説してきました。

WebのUI、アプリのUIをProttで作ってみてください。1プロジェクトであれば誰でも無料で利用できるプロトタイピングツールなので、気軽に使えますね。

[お知らせ]TechAcademyではProttを使って実践的にUI/UXデザインを学ぶオンラインブートキャンプ UI/UXデザインコースを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

近未来を感じる！インタラクションデザインとは

本稿は、Designmodeのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また本記事はCarrie Cousins氏によって投稿されました。 ...

アプリデザイン

現役のデザイナーが語る！優秀なUI/UXデザイナーに不可欠なスキルとは

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Webデザイナー・ライターのJake Rocheleau氏によ...

アプリデザイン

無料でも使える！デザインツールFlintoの使い方【初心者向け】

プロトタイプを作成するデザインツールFlintoの使い方を初心者向けに紹介しています。最初の30日間は無料で使えるツールなので、プロトタイピングを行う際...

アプリデザイン

ユーザー満足度を上げる！UXデザインで守るべき10のルール

本稿は、Designmodoのブログ記事を、Webdesigner Depotより了解を得て日本語翻訳し掲載した記事になります。 Webサイトやアプリにお...

アプリデザイン

【誰でも簡単に！】モックアップを作成できるおすすめツール5選

モックアップとは、Webデザインの作成時に外観・レイアウト等を確認するためのものです。ここではモックアップの作成を簡単な操作で行うことができる便利なツールを紹介...

アプリデザイン

スマホアプリのプロトタイピングに便利な「POP」を使ってみた

スマートフォンアプリのプロトタイプを作ろうと思うと、かなり手間がかかると思います。そんな時に便利なのが、無料で簡単にプロトタイピングが行えるスマートフォンアプリ...

アプリデザイン

あわせてよく読まれている記事

Goodpatchのプロダクトマネージャーに聞く！プロトタイピングツール「Prott」を使ったプロトタイピングの重要性とは

今日では、ソフトウェアやサービス、アプリ開発の現場において、必須プロセスとなっているプロトタイピング。IT業界ではこの1、2年でプロトタイピングのカルチャーが浸透し、多くの開発現場でプロトタイピングツールが導入されています。今回は、今大注目のプロトタイプを誰でも簡単に作ることができるツール「Prott（プロット）」を開発している株式会社グッドパッチのプロダクトマネージャー、岡田麻里さんにお話を伺ってきました。 2016年7月20日に画面遷移図機能がリリースされたProttを中心に、チームでのコラボレーションやプロトタイピングの重要性など、デザインの魅力満載のインタビューとなっています。お話を伺った方岡田麻里さん株式会社グッドパッチ、Product Divisionのプロダクトマネージャー。学生時代からインターンとしてプロトタイピングツール「Prott」のカスタマーサポートの業務を担当。 2015年に株式会社グッドパッチに新卒として入社と同時にプロダクトマネージャーとなり、新機能の企画開発を始め、改善の進行管理など、幅広い業務に携わっている。以下、インタビューです。 Prottの新機能「画面遷移図機能」とは ――まずは、Prottの新しい機能に関してお伺いしてもよろしいでしょうか？ Prottでプロトタイプを作るだけで自動的に画面遷移図が生成される機能です。「クライアントワークをしているとプロトタイプと合わせて画面遷移図を納品しないといけない。プロトタイプと一緒に画面遷移図もProttで作れないか」という要望を数多くいただいていました。画面遷移図は、全体を俯瞰するために使うものですが、寄りの視点をプロトタイプで確認しながら、かつ画面遷移図を出力して、引きの視点を見てプロダクト自体のデザインを確認できる、寄りと引きの視点をもってプロダクトを改善できる機能になっています。画面遷移図を最新の状態で保つのって結構面倒な作業なのですが、それが自動的にできるため、大幅な時間の削減にもなりますね。 ――具体的に作っていた期間はどのくらいでしょうか。 2016年3月頃から着手したので、リリースまでは約3ヶ月ぐらいですね。 ――何人ぐらいで実装されていたんですか。実装はエンジニア1人です。グッドパッチにはエンジニアが多く在籍していますが、開発は小さなチームで行うのが主流なんです。 [PR] UI/UXデザインで挫折しない学習方法を動画で公開中プロトタイピングが作業を効率化させる ――プロトタイピングの重要性について教えていただけますか？プロトタイピングという手法を用いることで、アイデアを素早く形にし、それを共有してアイデアが実際にユーザーにとって受け入れられるかどうかを検証することができます。一般的な開発現場で多い、ディレクターからデザイナー、エンジニアへと直線的に依頼する方法ではなく、設定されたゴールに向かって、それぞれの職種がプロトタイプを中心に議論を行い、チームとして一緒に進んでいくことができます。直線的なコミュニケーションで起きていた「これ実際できないよね？」のような議論や手戻りを削減し、作業を効率化させることができるんです。 ――そもそもProttを開発したきっかけはなんだったんでしょうか。今から約2年ほど前、Prottがリリースされた当初はIT業界ではプロトタイピングというカルチャーは浸透していませんでした。リリース当時は、プロトタイピングというカルチャーと合わせてProttを知っていただくことから始めました。実際に、グッドパッチでも当時国産のプロトタイピングツールがなかったので、海外のプロトタイピングツールを使用してプロトタイプを作成していたことがあるのですが、チームで使うには最適化されておらず、口頭や資料でいろんなことを説明したはずなのに、実装されたアプリを確認すると、意図したことと異なっていたり、非常に使いづらい仕上がりになっていることが頻繁に起こりました。最適なものがないのであれば、自分たちで使いやすいものを作ろう！となったのがきっかけですね。 ――開発のプロセスはどのようなものだったんでしょうか。開発当初は、エンジニアがいない状態からスタートしました。代表の土屋とデザイナーとで議論をしながら進め、開発から2か月後にエンジニアが入社するという、まさにスタートアップらしい始まりです。当時はノウハウなどは全くない状態でしたが、いいプロダクトをつくるために誰でも簡単い使えるプロトタイピングツールが絶対に必要だという確信があったのだそうです。代表の土屋と開発メンバーで、作ったばかりのプロトタイプを持ってユーザーの要望を聞いて回り、改善を重ねていきました。Prottを開発しているプロセスがまさにプロトタイピングそのものなんです。一人でできることが限られているからこそ、チームでのコラボレーションを ――チームでのコラボレーションの重要性に関して、どうお考えですか？やっぱり一人でできることってすごく限られているなと思っています。チームメンバーひとりひとりがプロ意識を持っているからこそ、皆それぞれの視点でぶつかり合って、意見を出し合って、結果的にそれぞれの職種の視点が取り込まれたいいものができるんです。色んな人の視点を入れてコラボレーションするっていうことがプロダクト作りにおいて本当に大切だなと思っています。 ――Prott導入後、チーム内で変化する点はどういうところにあるのでしょうか？チームでProttを使うことで、プロトタイピングのマインドがついてくるので、無駄な議論が減りやすくなりますね。プロトタイピングでは、動くものを共有できるので、言葉や絵で共有するよりも伝えられることが多いんです。そのためメンバー間での認識齟齬が減り、チームでは論点が明確な議論ができるようになった、という話もたくさん聞いています。 ――実際どういった方々がどういう場面でProttを使われているのでしょうか。現在は、日本国内のIT企業で多く導入していただいています。多くの場合は現場のデザイナーさんが主導でProttを導入を希望してくださり、そこからProttを使って共有することでエンジニアの方もプロトタイプを通してコミュニケーションをするといったケースが多いですね。最近では、営業の方が提案資料をより魅力的なものにするために、アイデアを形にするためにProttを使用していただくことも増えてきました。職種を超え、誰でも簡単に使えて、アイデアを形にして議論できるというのがProttの良いところだと思います。 ――個人で使用されている方々の使用用途はどういうものがあるのでしょうか。最近増えているフリーランスの方がクライアントと共有するために使用するケースも多いようです。あとは、UIデザインの勉強のために使っていただくことが多く、多摩美術大学の学生さんにも授業で使っていただいています。先日は、女子大生社長として有名な椎木里佳さんが好きなアプリとして取り上げてくださっていましたね。授業中に思いついたアイデアスケッチを写真に撮り、Prottにアップロードしてメンバーに共有しているそうです。とにかく自分でやってみることが大切 ――ちなみに岡田さんは、プロジェクトマネージャーということですが、デザインにはどのように携わっているのですか？広義の意味でのデザイン、ユーザーの体験部分のデザインから、それを実際にプロダクトに落としていくフェーズの細かい設計までを携わっています。ものづくりに憧れがあるので、ビジュアルデザインにもチャレンジしてみたくて、プライベートでスマートウォッチのデザインは自分で作ったりしましたね。 ――デザインしたいと思ったときに、どういったところを入り口として進めていかれるのでしょうか？デザインをするためには、どのように作られているかっていうのをまず知らなきゃいけないと思っているので、最初はエンジニアリングの仕組みの部分を結構勉強しました。そうすると、こうできるからこういう表現ができるんだっていう導線が分かったので、じゃあこういう風にデザインしようっていうのが自然と分かるようになりました。 ――未経験の方がデザイナーになりたいって思ったとき、意識すべき点などはありますか？アプリをたくさん触ると良いと思います。アプリを触ってみて、いちユーザーとして良いと思ったところや悪いと思ったところを研究していくと見えてくるものがあるのではないでしょうか。その次のステージでは、デザインのガイドライン、マテリアルデザインガイドラインをしっかり読み込んで、思想を知ると良いですね。あとは自分がよく使っているアプリを模写することで、どうやって情報設計されているのか、どうやって作られているのか知るところから初めてみるのはオススメです。すぐに実行できると思いますよ。 ――最後に、デザインの重要性が高まっていく中で、デザインをこれから勉強したいと思っている人にアドバイスがあれば教えていただけますか？私は元々、デザインを学校で学ぶ機会もありませんでしたし、一度もアプリを作ったことなかったのですが、実際に会社に入ってみて、現場でやってみることが凄く大事だと感じました。学生時代からデザインに興味があったのでずっと挑戦したいなと思っていたんですが、自分では何も進められなかったので、とにかくやらざるを得ない環境に自分を置くっていうことがすごく大切だと思っています。そういう環境に身を置いたことで、自分自身もデザインにもっと詳しくなれたし勉強できたので、とにかくやってみることが大切ですね。インタビューは以上になります。岡田さん、貴重なお話をありがとうございました。これからますます必要性が高まってくるデザイン。プロトタイピングから皆さんもぜひ、始めてみてはいかがでしょうか。初心者でも分かるProttの使い方についても合わせてご覧ください。 [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

インタビュー

【無料版OK】ChatGPTが導く企業成長戦略：限られたリソースで利益を最大化

限られた人材・資金リソースを効果的に活用し、企業の業績を最大化するための戦略立案は、現代のビジネス環境において極めて重要な課題です。特に、複数の大型プロジェクトを同時に進行させる中堅テック企業にとっては、リソースの適切な配分がプロジェクトの成否を左右する重要な要素となります。本記事では、AIを活用した効果的なリソース配分と戦略立案の方法について詳しく解説します。生成AIの実務活用スキルを磨きたい方は、無料の生成AIコミュニティ『テックアカデミーGAIナレッジベース』をご活用ください。今すぐ無料登録効果的なリソース配分のための戦略立案限られたリソースを最大限に活用し、各プロジェクトのROIを向上させるためには、綿密な分析と戦略的なアプローチが不可欠です。以下に、効果的なリソース配分のための主要な戦略を紹介します。 1. プロジェクト評価と優先順位付けまず、各プロジェクトの詳細な分析を行います。目的、予算、期待ROI、進行状況、リソース要求などの情報を総合的に評価し、企業の長期ビジョンとの整合性を確認します。この評価に基づいて、高いROIと低いリスクを持つプロジェクトを優先的に扱うことで、全体的な成果を最大化することができます。 2. リソース割り当ての最適化人材のスキルセットを適切に評価し、各プロジェクトの要求と一致させることが重要です。特に重要なプロジェクトには十分なリソースを確保し、スキルの高いリーダーシップとプロジェクト管理能力を持つ人材を配置することで、プロジェクトの成功率を高めることができます。 3. リスク管理の徹底各プロジェクトのリスクを評価し、それを最小化するための対策を立てることが不可欠です。予算管理、リソースの追加確保、スケジュール管理などを通じて、プロジェクトの遅延や品質低下のリスクを軽減します。また、コスト管理ツールの導入や定期的な進捗評価を行うことで、問題の早期発見と対処が可能になります。 4. コミュニケーションと透明性の確保プロジェクトマネージャーとの継続的なコミュニケーションを通じて、各プロジェクトの進行状況とリソース要求を正確に把握することが重要です。また、経営陣に対しても進捗状況とリソース割り当ての透明性を提供し、迅速かつ適切な意思決定をサポートします。 5. 継続的な改善プロセスの導入プロジェクトマネジメントプロセスを常に監視し、効率性を向上させるための改善策を積極的に導入します。過去のプロジェクトから得られた教訓やベストプラクティスを文書化し、将来のプロジェクトに活用することで、組織全体のプロジェクト管理能力を向上させることができます。 6. AIの活用によるデータ駆動型意思決定 AIを活用することで、プロジェクトの進行状況の監視や期待ROIとの比較を自動化し、リアルタイムでリソースの最適な割り当てを提案することが可能になります。このようなAIツールを活用することで、より効果的かつ効率的なプロジェクト管理を実現できます。これらの戦略を効果的に実施するために、AIを活用したプロンプトエンジニアリングが非常に有効です。以下に、リソース配分の最適化のためのAIプロンプトの例を示します。 #命令以下の要件を踏まえて、複数のプロジェクトが進行中の企業で、限られた人材・資金リソースを効果的に優先順位付けし、最大のROIを目指すための戦略を構築してください。 #役割あなたはプロジェクトマネジメントの専門家です。 #目的・既存の人材・資金リソースを最も効果的に利用し、企業の業績を最大化させること。・各プロジェクトのROIを向上させること。 #背景と課題・企業はITソリューションを提供する中堅のテック企業である。・現在、5つの大型プロジェクトが進行中であり、それぞれのプロジェクトマネージャーからのリソース要求が増えている。・企業の資金的・人材的リソースは有限であり、全てのプロジェクトに十分なリソースを供給することは不可能である。・過去にはリソースの不足から、プロジェクトの遅延や品質の低下が発生している。 #企業情報・業界: ITソリューションサービス・年間売上: 約300億円・従業員数: 800人・主な顧客: 金融業界、製造業界、通信業界・社内文化: 革新的で技術者主導の文化。新しい技術の導入に積極的。 #プロジェクト情報・進行中のプロジェクト: 5つ・それぞれのプロジェクトの予算、期待ROI、完了予定日、必要人材、現在の達成状況等の詳細なデータが存在する。 #条件・各プロジェクトには、その目的・背景・予算・期待ROI・進行状況・リソース要求といった詳細情報が提供される。・人材は特定のスキルセットを持っているため、そのスキルセットを考慮してプロジェクトに割り当てること。・予算や人材の不足から生じるリスクを最小化するための戦略も提案すること。このプロンプトを使用することで、AIは企業の特性やプロジェクトの詳細を考慮した上で、効果的なリソース配分と戦略立案を提案することができます。例えば、以下のような具体的な戦略が得られる可能性があります。このような状況でプロジェクトの優先順位付けとリソースの最適な配分を行うために、以下の戦略を検討できます。 1. プロジェクト評価と優先順位付け: - 各プロジェクトについて、目的、予算、期待ROI、進行状況、リソース要求を詳細に分析します。 - 各プロジェクトの戦略的重要性を評価し、企業の長期ビジョンと一致しているかどうかを確認します。 - 期待ROIとリスクの関係を評価し、高いROIと低いリスクを持つプロジェクトを優先します。 2. リソース割り当て: - 利用可能な人材スキルセットを評価し、各プロジェクトに必要なスキルセットと一致させます。 - リソースの供給と需要を調整し、特に重要なプロジェクトに十分なリソースを確保します。 - 人材のアサインメントにおいて、スキルの高いリーダーシップとプロジェクト管理能力を持つ人材を重要なプロジェクトに配置します。 3. リスク管理: - 各プロジェクトのリスクを評価し、リスクを最小化するための対策を立てます。これには、予算の適切な管理、リソースの追加確保、スケジュール管理が含まれます。 - プロジェクトが予算を超過しないように、コスト管理ツールを導入し、予算の進行状況を監視します。 - プロジェクトの進行状況を定期的に評価し、問題が発生した場合には早期に対処します。 4. コミュニケーションと透明性: - プロジェクトマネージャーとの継続的なコミュニケーションを確保し、プロジェクトの進行状況とリソース要求を把握します。 - 経営陣に対して進捗状況とリソース割り当ての透明性を提供し、意思決定をサポートします。 5. 継続的な改善: - プロジェクトマネジメントプロセスを継続的に監視し、効率性を向上させるための改善策を導入します。 - プロジェクトの成功と失敗から学び、将来のプロジェクトに適用するためのベストプラクティスを文書化します。 6. AIの活用: - AIを使用して、各プロジェクトの進行状況を監視し、期待ROIとの比較を自動化します。 - リソースの最適な割り当てをAIツールを介して提案し、リアルタイムで最適化します。これらの戦略を組み合わせて、プロジェクトの優先順位付けとリソースの最適な配分を実現し、企業の業績を最大化し、各プロジェクトのROIを向上させることができるでしょう。また、AIツールを活用してデータ駆動の意思決定をサポートすることが、より効果的なプロジェクト管理に役立つでしょう。このような詳細な戦略提案は、無料版のChatGPTでも十分に得ることができます。ただし、有料版を使用することで、より高速かつ高度な分析と提案が可能になり、より複雑な状況にも対応できるようになります。まとめ限られた人材・資金リソースを効果的に配分し、ROIを最大化するための戦略立案は、現代のビジネス環境において非常に重要です。AIを活用したプロンプトエンジニアリングを用いることで、企業の特性やプロジェクトの詳細を考慮した上で、効果的なリソース配分と戦略立案を行うことができます。プロジェクト評価と優先順位付け、リソース割り当ての最適化、リスク管理の徹底、コミュニケーションと透明性の確保、継続的な改善プロセスの導入、そしてAIの活用によるデータ駆動型意思決定など、多角的なアプローチを組み合わせることで、企業の業績を最大化し、各プロジェクトのROIを向上させることが可能となります。 AIツールを効果的に活用することで、より精度の高い分析と戦略立案が可能になり、企業の競争力向上につながります。ただし、AIはあくまでもツールであり、最終的な判断と意思決定は人間が行う必要があることを忘れてはいけません。AIと人間の知恵を適切に組み合わせることで、最適なリソース配分と戦略立案が実現できるのです。 [PR] UI/UXデザインで挫折しない学習方法を動画で公開中生成AIの実務活用で悩んでいる方へ ChatGPTなどの生成AIを業務に取り入れてみたものの、思うような結果が得られない。あるいは、ビジネスでの活用に限界を感じている。そんな方々にお勧めしたいのが、『テックアカデミーGAIナレッジベース』です。このコミュニティは、生成AIの実務活用に特化した知識と経験の宝庫です。以下のような特徴があります。 500件以上の実務で即活用できるプロンプト集プロのエンジニアに生成AIについて直接質問可能同じ関心を持つビジネスパーソンとの交流の場通常、このレベルの生成AIコミュニティには10万円程度の費用がかかります。しかし、『テックアカデミーGAIナレッジベース』は完全無料でご利用いただけます。生成AIの可能性を最大限に引き出し、ビジネスの競争力を高めたい方にとって、このチャンスを逃す手はありません。今すぐ登録して、生成AIの実務活用スキルを飛躍的に向上させましょう。今すぐ無料登録

生成AI・ChatGPT

【無料版OK】ChatGPTで簡単作成！効果的なプロジェクト報告書フォーマット

プロジェクト完了後の報告書フォーマットの作成は、プロジェクトの成果を適切に伝え、将来の改善につなげる重要なステップです。効果的な報告書を作成するためには、適切なフォーマットと内容が不可欠です。本記事では、ChatGPTを活用してプロジェクト完了後の報告書フォーマットを作成する方法をご紹介します。生成AIの実務活用スキルを磨きたい方は、無料の生成AIコミュニティ『テックアカデミーGAIナレッジベース』をご活用ください。今すぐ無料登録 ChatGPTを活用したプロジェクト完了報告書フォーマットの作成 ChatGPTを使用して、効果的なプロジェクト完了報告書のフォーマットを作成する方法をステップバイステップで解説します。 1. プロンプトの作成まず、ChatGPTに適切な指示を与えるためのプロンプトを作成します。以下は、プロジェクト完了報告書フォーマットの作成に適したプロンプトの例です。 #命令以下の要件を踏まえて、プロジェクトの完了後の報告書フォーマットの提案を行ってください。 #役割あなたはプロジェクトマネジメントコンサルタントです。 #目的・プロジェクトの結果を明確に伝えること・将来のプロジェクトでの改善点や学びを明確にすること #背景と課題・大手IT企業で新しいプロダクト開発のプロジェクトが完了した。・これまでの報告書は非常に簡素で、具体的な成果や学びが不明確だった。・プロジェクトのステークホルダーが成果を正確に把握することが難しく、改善点の検討が難しい状況となっている。 #ターゲット・プロジェクトのステークホルダー（経営層、関連部署のマネジャー等）・プロジェクトチームのメンバー #プロジェクト詳細・プロジェクト名：NextWaveサービス開発・プロジェクト期間：2022年1月 - 2023年8月・予算：2億円・チームメンバー数：30人 #報告書作成の条件・報告書はA4サイズの20ページ以内でまとめること。・グラフや図表を活用して、情報を視覚的にわかりやすく伝える。・成果だけでなく、問題点や学び、今後の改善点についても明確に記載する。 2. ChatGPTへの入力作成したプロンプトをChatGPTに入力します。無料版のChatGPTでも十分な結果を得ることができますが、有料版を使用するとより高速で質の高い回答を得ることができます。 3. 出力結果の確認と編集 ChatGPTから得られた出力結果を確認し、必要に応じて編集を行います。以下は、ChatGPTから得られた出力結果の例です。プロジェクト完了後の報告書フォーマットの提案: ## 報告書フォーマット: ### タイトルページ: - プロジェクト名: NextWaveサービス開発 - プロジェクト期間: 2022年1月 - 2023年8月 - 作成日: [報告書の作成日] - 作成者: [あなたの名前] - お問い合わせ先: [あなたの連絡先情報] ### 目次: 1. プロジェクトの概要 2. 達成した成果 3. 問題点と挑戦 4. 学びと改善点 5. 今後の展望 6. 結論 7. 付録 ### 1. プロジェクトの概要: - プロジェクトの背景 - プロジェクトの目的 - プロジェクトの対象業務 ### 2. 達成した成果: - プロジェクトの成果の概要 - 成果の詳細（数値データ、KPIの達成度） - 成果の視覚的な表現（グラフ、図表） ### 3. 問題点と挑戦: - プロジェクト実施中に発生した問題点 - 問題点の影響 - 問題解決のための取り組み ### 4. 学びと改善点: - プロジェクトから得た学び - 将来のプロジェクトでの改善点 - AIを活用したデータから得られた改善提案 ### 5. 今後の展望: - プロジェクトの成果を活用した今後の戦略 - 新たなプロジェクトへの適用 - ステークホルダーへの提言 ### 6. 結論: -

生成AI・ChatGPT

AIを活用した進捗報告テンプレートの作り方と活用法

プロジェクト管理において、効果的な進捗レポートの作成は非常に重要です。本記事では、週次/月次プロジェクト進捗レポートのテンプレート作成について、具体的な方法とポイントをご紹介します。適切なテンプレートを活用することで、プロジェクトの状況を明確に把握し、関係者間のコミュニケーションを円滑にすることができます。生成AIの実務活用スキルを磨きたい方は、無料の生成AIコミュニティ『テックアカデミーGAIナレッジベース』をご活用ください。今すぐ無料登録週次/月次プロジェクト進捗レポートのテンプレート作成の重要性プロジェクト管理において、適切な進捗レポートは以下の点で重要です。 1. 情報の一元化 2. 進捗状況の可視化 3. 課題の早期発見と対応 4. 関係者間のコミュニケーション促進これらの目的を達成するために、効果的なテンプレートの作成が不可欠です。進捗レポートテンプレートの作成手順以下に、進捗レポートテンプレートの作成手順をステップバイステップで解説します。 1. 基本情報の設定まず、レポートの基本情報を設定します。以下の項目を含めるようにしましょう。 – プロジェクト名 – レポート作成日 – 提出期間（週次または月次） 2. プロジェクトの目標と進捗率の記載プロジェクトの全体的な目標と現在の進捗率を明記します。これにより、プロジェクトの全体像を把握しやすくなります。 3. 主要タスクのステータス管理主要なタスクの進捗状況を表形式で管理します。以下の項目を含めるとよいでしょう。 – タスク名 – 進捗率 – 予定終了日 – 実際の終了日 4. 課題と対応策の記載プロジェクト遂行中に発生した課題とその対応策を記載します。これにより、問題点を明確にし、迅速な対応が可能になります。 5. 次期の予定の記載次週または次月の予定を記載することで、今後の方向性を示し、関係者間で共有することができます。 6. 視覚的なグラフ/チャートの追加進捗状況を視覚的に表現するために、グラフやチャートを活用します。例えば： – 進捗ゲージチャート：プロジェクト全体の進捗を示す – タスク進捗バー：各タスクの進捗をガントチャート形式で表示 7. 注意事項の追加レポートの作成者、対象者、提出方法などの注意事項を記載します。これにより、レポートの取り扱いが明確になります。 [PR] UI/UXデザインで挫折しない学習方法を動画で公開中AIを活用した進捗レポートテンプレートの作成 AIを活用することで、より効率的かつ効果的な進捗レポートテンプレートを作成することができます。以下に、AIを使用したテンプレート作成の例を示します。 #命令以下の要件を踏まえて、プロジェクトの週次または月次の進捗状況を可視化し、上司や関連部門への報告を効率的に行うための進捗レポートのテンプレートを作成してください。 #役割あなたは経験豊富なプロジェクトマネージャーです。 #目的・プロジェクトの進捗状況を一目で把握できるレポートテンプレートを提供し、プロジェクト関係者のコミュニケーションを円滑にする。・課題や遅延が発生した場合、迅速に対応策を議論・実施できるような情報を網羅的に含める。 #背景と課題・新規事業を展開する中堅IT企業で、多数のプロジェクトが同時進行中。・これまでの進捗レポートはExcelベースで、各プロジェクトごとにフォーマットが異なり、情報の取り扱いが非常に煩雑。・一部のプロジェクトでは進捗の遅延や課題が発生しているが、情報が散在しているため全体の把握が難しい。・早急に全プロジェクトの進捗状況を一元管理し、進捗状況や課題を明確に可視化する必要がある。 #会社情報・業界: ITサービス提供・主要製品: クラウドベースのビジネスアプリケーション・年間売上: 約500億円・従業員数: 1,500人・主要顧客: 国内の大手企業を中心としたB2B市場・社内文化: 革新的でアジャイルな開発を推進している #プロジェクト情報・進行中のプロジェクト数: 20 ・プロジェクトの規模: 小規模から大規模までさまざま・各プロジェクトのメンバー: 5人から50人・進捗レポートの提出頻度: 週次または月次 #条件・レポートテンプレートは、プロジェクトの目標、進捗率、主要なタスクのステータス、課題、次週の予定等を網羅する必要がある。・視覚的にわかりやすいグラフやチャートを活用して、情報の伝達を効果的に行う。・ExcelやPowerPointのような一般的なツールで作成このプロンプトを使用することで、AIは以下のような進捗レポートテンプレートを生成します。プロジェクトの進捗レポートのテンプレートを作成するために、以下の要件に基づいて、Excelを使用してシンプルかつ効果的なテンプレートを提供します。このテンプレートは、プロジェクトの進捗を一目で把握し、コミュニケーションを円滑にし、課題や遅延に対応するのに役立つものです。 ### プロジェクト進捗レポートテンプレート #### レポートの基本情報 - プロジェクト名: [プロジェクト名] - レポート作成日: [作成日] - 提出期間: [週次または月次] #### プロジェクトの目標 - プロジェクトの目標: [プロジェクトの目標を簡潔に記述] #### 進捗率 - 現在の進捗率: [進捗率％] #### 主要なタスクのステータス | タスク名 | 進捗率 | 予定終了日 | 実際の終了日 | |----------------|--------|------------|--------------| |

生成AI・ChatGPT

【未来のUIデザイナーへ！】初心者のためのプロトタイピングガイド

本稿は、本稿は、Web Designerdepotのブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。プロトタイピングの概念そのものは、インターネットの成立以前から存在していました。典型的な例として、新しい製品を開発をする人々は最初に製品を組み立て、次に製品が期待した通りに作動するか試します。最初のバージョンで特許を取得して、潜在的な投資家に製品を見せることもあるかもしれません。もし投資家が独自の生産ラインの設備を利用できるとしたら(例えば既存の会社で働いているなどの理由から)、製造可能なレベルのモデルが完成するまで、製品の開発が進められて、バグの修正も行われます。昔のデモディスクを覚えていますか？機能の制限されたプログラムが入っていたり、ゲームの初歩レベルあるいはゲームが2つだけ入っているようなディスクのことです。プロトタイプはデモディスクと似ている点が多くありますが、よりシンプルでさえあります。 Webサイトやアプリのプロトタイプを作成するのは、期待した通りに作動するか確かめるためです。プロトタイプの目的は、将来の顧客の獲得というよりも、より良い製品を作るのに役立てることです。 Webサイトやアプリのプロトタイプは、製品が期待通りに作動するか確かめるために作成します。またクライアントや潜在的な投資家に製品の作動を示すこともできます。最近では、Webとモバイルアプリ用のプロトタイプ作成アプリが多数登場しています。最近リリースされたデザインツールのAdobe Experience Designerは、Webとモバイルに対応したデザインアプリとしての機能と、プロトタイプ作成用のアプリとしての機能が融合されています。 Adobe社の知名度とプロ向け製品における市場シェアを考えれば、多くの人々が今まで以上にプロトタイプを実践し始めているのも当然かもしれません。今回の記事は初心者向けのガイドです。デザイン業界でどのような経験を積んできたかにかかわらず(あるいは未経験でも)、プロトタイプを日常的に使い始めた方向けに書いています。このガイドでは何よりもまず基本的な原則を説明します。もちろんその後に発展的な情報として、役立つツールやアプリをリンクとともにご案内します。ワイヤーフレーム＆モックアップ VS. プロトタイプデザイナーとしての経験が豊富な方は、すでにワイヤーフレームやモックアップを編集で利用しているかもしれません。ただ、これらは必ずしもプロトタイプとはいえません。ワイヤーフレームやモックアップで問題なのは静的なことです。製品の機能についての多くの情報を伝えることができないのです。このため、製品の動作性についてクライアントやデベロッパーに誤解を与えるおそれもあります。こうした理由から、プロトタイプとは一般的に、何かインタラクティブな要素を持つものと定義できます。ただし、例外的に静的なものにもプロトタイプと見なせるものもあります。例えば、概念的なプロトタイプや、詳細に作成された設計書などです。重要なのは単にインタラクティブであることよりも、製品に期待される機能について情報を伝えられることだからです。それでもやはり、ワイヤーフレームやモックアップは単にプロトタイプの作成によく使われているという理由だけで、誰も捨てようとはしません。いつプロトタイプが必要になるのか？何かがどのように作動するかを示す必要があるときにはいつでも、プロトタイプが必要です。わかりやすい例は、Webアプリやモバイルアプリです。アプリは、モックアップでは簡単に見たり予測したりできない機能を数多く持っている傾向があります。コンテンツ中心型の静的なWebサイトでさえプロトタイプを必要とするかもしれません。 1つの理由として例を挙げると、私は以前クライアントにシンプルなビジネスサイトのモックアップを見せたときに、クライアントから「トップページにある「概要」や「サービス」などをクリックしたら別のページに移行するのか？」、「コンタクトフォームでユーザーが「送信」をクリックしたら、私はメールを受信することになるのか？」と聞かれたことがあります。シンプルなタスクでさえ不確実性を伴うことがあり、プロトタイプは当て推量を解消するのに役立ちます。また、簡単なブラウジングの操作さえ、ユーザーやクライアントによってはわかりづらくて大変な作業となりえます。プロトタイプがあればネットワークからサインオフするときにも、当て推量する手間を省くことができます。加えて、プロトタイプはユーザーテストに役立ちます。ユーザーテストを行うときには、初期段階からプロジェクトのシミュレーションを始めるのがベストです。作業がほとんど完了した後に大きな変更をしなければならない事態は避けたいところです。 [PR] UI/UXデザインで挫折しない学習方法を動画で公開中4種類のプロトタイププロトタイピングを始める前に、どの種類を使うか決めます。ほとんどのデザイナーたちが実践しているように、どのようなプロジェクトでも複数の種類を組み合わせて使うことができます。 1. 概念的プロトタイプこのプロトタイプは、形の上では完成した製品と全く似ていません。ここでインターフェースのディテールとレイアウトは重要ではありません。インタラクションとプロセスだけに集中します。全てのプロトタイプの目的は製品の動作性を示すことです。その意味で、このプロトタイピングは原始的な形だといえます。機能性だけがテーマであり、形は問題となりません。この段階では、フローチャート、ポストイットのメモ、PowerPointのプレゼンテーション、アイコンでプロセスを説明するビデオを使ったり、身振り手振りを加えてカメラに向かって録音してもいいでしょう。要点を伝えることができれば何でもいいのです。概念的プロトタイプはプロジェクトの初期段階で使われます。プロジェクトにはまだ名前がないかもしれません。アプリやWebサイトもアイデアの段階なので、「こんな感じで作動すると思う。」と話しているかもしれません。 2. ローファイプロトタイプローファイプロトタイプでは、レイアウトやスクリーンのサイズなど具体的な対象を扱うようになります。このプロトタイプは、作られるのも破棄されるのもサイクルが速いです。ローファイプロトタイプの目的は、あなたとクライアントが基本的な部分に満足できるまで、試行錯誤を最速で繰り返すためのものです。だからプロトタイプに愛着を持つべきではありません。ほとんどのプロトタイプは使い捨てであり、それこそが長所です。「ローファイプロトタイプ」は「ワイヤーフレーム」とよく置き換えることができます。この段階では紙に書いて行うこともよくあります。アプリでローファイプロトタイプを作成するときには、他のスクリーンへのリンクやコメントの機能など、基本的なプロトタイピングの機能を備えているものを使うことがおすすめです。ワイヤーフレームのアプリはインターネットとの連携が容易であるというメリットがありますが、やや動きが遅いことも多いです。概念的プロトタイプと同じくプロジェクトの初期段階で使われますが、ビジネスモデルやプロジェクト名はすでに存在している段階でしょう。上手くいくと確信できるものが持てるまで、頭の中で思いつく無数のアイデアをえり分ける時です。 3. ミディアムファイプロトタイプ段階によっては、ローファイプロトタイプでは要点を把握しにくい一方、ハイファイプロトタイプでは十分過ぎることがあります。スタイルガイドを完全には作成していなかったり、まだグラフィカルアセットを全て作り終えていない段階です。ミディアムファイプロトタイプは、このようなデザインの初期～中間の段階で使うことができます。インタラクションのシミュレーション機能を持つプロトタイピング作成アプリによって作られることも多いです。CSSのフレームワークを利用して、HTMLとCSSによって構築することもできます。 BootstrapとFoundationが、現在存在しているプロトタイピングのツールの中ではおそらく主流です。有名ブランドのイメージがあればそれを使うべきですが、ストックイメージでも足りるでしょう。ストックタイプのUIエレメントは、模作のインターフェイスをより速く構築するために使われます。プロトタイピング作成アプリの多くは、これらのUIエレメントのライブラリを持つことが多く、作業の高速化に役立ちます。ミディアムファイプロトタイプは、リテラル思考型(Literal thinker:全体的なイメージよりも、具体的なステップや言葉の定義から考えるような人)で外観や動作の近似を見たいと思うような人に向いています。彼らにとっては、「未完成」のヘッダーの方が、Webサイトのヘッダーに全く見えないようなスケッチ風の代物よりも、まだ耐えられます。リテラル思考のクライアントには、ワイヤーフレームで素早く考えた初期のアイデアを見せる必要はないでしょう。ミディアムファイプロトタイプの段階で見せる方が、彼らに方向性を分かってもらいやすいです。 4. ハイファイプロトタイプこの段階までプロジェクトが進むと、全てのスクリーンのモックアップが完成していて、全てが立派なものになっているでしょう。製品をバックエンドのコードと統合して、人々に製品の動作性を見てもらう時です。ハイファイプロトタイプは通常、デザインに関する最終的な合意をクライアントと結ぶために使われます。ただのPSDファイルを送るだけれはなく、インタラクティブなものを提示しなければなりません。 2つの方法のうちいずれかによって行われます。1つの方法では、静的なHTMLとCSSを利用して、一部をインタラクティブな外観に仕上げます。もう1つの方法では、画像やPSDのファイル形式をインポートできるアプリを利用して、擬似インタラクティブな特性を加えることで完成品のアプリ（製品）の機能を模倣します。アプリによっては、プロトタイプのデモをWeb上(またはモバイルデバイス上)で行うことも可能です。プロトタイピングのメソッドプロトタイプの主な種類を見たところで、次にプロトタイプを実際に作るためのツールをご紹介します。基本的な使い方も含めてすでにほとんどご紹介していますが、さらに詳細を見てみましょう。あなた自身とクライアント双方にとって適合するメソッドを選びましょう。ビデオまたはプレゼンテーションのプロトタイプこれらは具体的な作業がなされる前に、アイデアを売るためによく使われます。そのため通常は、潜在的な投資家を意識したものです。クライアント向けにも使えますが、他の代替手段の方が効率的なコミュニケーションを図るには優れていることも多いです。アドバンテージは人によって異なるでしょう。ビデオとプレゼンテーションのプロトタイプで、利益率を上げるために作られたものは商業型の公式に従います。聴き手が共感できる問題を提示する。あなたの製品によってその問題がどのように解決されるかデモを示す。 (オプションとして)会社のマスコットをデジタル形式で表現して、キャッチフレーズを叫ばせながら楽しそうにダンスさせる。これらのプロトタイプの中にはアイコン、テキスト、イラストレーションを使うだけで完成するものもあります。他にはアニメーションを利用して、要点を説明するのに動きを使うこともあるでしょう。あなたのアイデアを売ることができれば、正しく使いこなせているといえます。ビデオのプロトタイプと紙のプロトタイピングを組み合わせた良い例をご紹介します。Video Prototype for Mobile Cooking App : Youtube動画よりワイヤーフレームワイヤーフレームは紙面上かアプリにおいて作成できます。ワイヤーフレームは通常ローファイプロトタイプと見なされていますが、時間をかければミディアムファイプロトタイプにアップグレードすることも可能です。もっとも労力をかけるだけの価値はほとんどありませんが。ワイヤーフレームは、作成されるのも破棄されるのも速いです。紙面上でワイヤーフレームを作成することが魅力的である理由の1つです。アプリでワイヤーフレームを作ると、より正確なデザインが可能となり、既存のワイヤーフレームから簡単に編集することもできます。しかし、あなた自身以外には誰も見ないであろうスケッチを速く作成できるという点が、やはりワイヤーフレームの長所として一番優れています。しかし、すで述べたようにアプリでワイヤーフレームを作成すると、より簡単にインターフェースの機能を模倣できるというメリットもあります。紙面上に作成したワイヤーフレームをタップしたところでトントン音が鳴るだけですから、面白いかもしれませんが、あなたの意図するところを伝えることはできません。紙のプロトタイプこれはただのスケッチではないという点で、紙面上のワイヤーフレームとは異なります。紙を利用するのは、物理的でフラットな素材でインターフェースのモデルを作るためです。先にご紹介したビデオのプロトタイプにもその例を見ることができます。インターフェースの要素は、紙にスケッチして、カットして作ります。コピーして予備を作ることもあります。そして作ったピースを他の紙の上に集めます。ある要素のサイズが間違っていれば、他の要素の並びを変えたり、新しいサイズの要素を紙をカットして作るなどの方法があります。またワイヤーフレームより「本物」らしいといえます。特に面白さはないとしても、クライアントは紙のモデルを触ることができます。この触覚に訴える方法はクライアントに多くを説明できるので、他のどんな方法より優れていることもあります。誰でも対象をより深く理解するためには、物理的なコンタクトが必要です。UXデザインの半分は、物理的なインタラクションの使い心地を、デジタルのインターフェースで作り直す作業であるといえます。アプリで作成するミディアムファイおよびハイファイプロトタイプこれらは紙のプロトタイプとの共通点が多いです。以下でご紹介するInvisionなどのアプリで作成するプロトタイプは、あらかじめデザインしたインターフェースの要素をもとに作り始め、これらのピースを集めて完成品を模倣します。異なる点は、全ての作業がスクリーン上でなされることです。完成製品のグラフィック作成やブランド化も可能であり、プロトタイプであっても完成製品のように作成することができます。その次はすでに述べたことですが、アプリによって製品のデモをブラウザやモバイルデバイス上で行うこともできます。また手で触れて感じることも可能になります。クライアントの触覚に訴えることで、もし気に入ってもらえれば、最終的な承認を得たも同然です。コードもちろんインタラクションを必要とする場合には、インターフェースのプロトタイプをコードで作るのがいい方法です。その理由もご紹介します。あなたのワークフローによく合う(とにかくブラウザ上でデザインするような場合)。作成するサイトやアプリに、ボタンなどのインタラクティブな要素が多数存在している。製品作成の最終段階でプロトタイプのコードを利用すると、時間の節約になる。インターフェースの機能性のデモを、アプリを使わずにブラウザ上で実行したい。あなたがキーを押すのが好きで、クリックするのは嫌いである。ブラウザ上でプロトタイピングを行うと、特に修正版を作成中はやや時間がかかります。製品の初期段階ではおすすめしません。ミディアム～ハイファイプロトタイプで使うのがベストです。すでにHTMLやCSSで作業を進める方法を好んでいるとしたら、完成間近のプロジェクトを提示するには最良の方法の1つです。フレームワークによるプロトタイピングフレームワークを利用すると、コードを使ったプロトタイピングのスピードを相当上げてくれます。さらに、完成製品用のフレームワークを利用するとしたら、コーディングの量も少なくて済みます。補足として、BootstrapやFoundationのような人気の高いフレームワークを利用して構築された、ドラッグ＆ドロップ形式のWebページ用エディタもあります。これらを使うことで、ローファイプロトタイプからコードを加えた完成製品まで全て作ることができます。または、これらをプロトタイプを速く作る目的だけに使い、プロジェクトの最終段階ではカスタマイズしたコードを使う方法もあります。どちらの方法でも上手くいくでしょう。プロトタイピングのツールとアプリ理論を理解したところで、プロトタイプの作成に進みましょう。紙のプロトタイプやコードだけに限定せず、アプリをどこかで使うと仮定します。良くも悪くも、多数の優良なアプリから選ぶことになります。繰り返しになりますが、結局はあなたに合うものを選ぶことが大切です。モバイルアプリのデモを実行する機能が必要か？Google DriveやDropboxなどのサービスとファイルの同期が必要か？Githubと統合させるか？ローファイ、ミディアムファイ、ハイファイのどのタイプか？アドバンストスクリプト言語(Advanced scripting)か？などから考えましょう。以下にリストアップするアプリは、これらのニーズに対応しています。何に着目すべきか分かりやすいように、アプリごとに最も関連性の高い機能をご紹介します。これらアプリの多くは主にワイヤーフレームのためのツールとして知られています。ワイヤーフレームのソフトウェアは、インタラクティブなプロトタイプに必要な機能を備えていることが一般的です。人によってこれらのアプリを使うことで得られるアドバンテージも異なります。 AdobeのExperience Design CC 現時点では最新のアプリです。このアプリの登場により、今まで飽和状態だった市場に競争を巻き起こすことになりそうです。単にワイヤーフレームのアプリまたはプロトタイピングのアプリというよりも、デザインアプリです。Sketchや開発終了したFireworksと似ていますが、デザインした全てのものからプロトタイプを作り出すことが可能な点が斬新です。今のところMacのプレビューにのみ対応していますが、2016年末までにはWindows版もリリースされる予定です。プレリリース版は無料ですが、完成版のリリース後にはAdobe Creative Cloudのプランに組み込まれます。プレゼンテーションのソフトウェア MicrosoftのPowerPoint、AppleのKeynote、LibreOfficeのImpress、GoogleのSlidesは全てプロトタイプの作成に使えます。プロトタイプについてのコンセプトはそれぞれ異なっています。スライドにリンク機能を加えるだけで、インタラクティビティを模倣できます。コンテンツ中心型のWebサイト用のプロトタイプにも向いています。またこの中のソフトの少なくとも1つは使った経験のある人も多いでしょう。もし使ったことがなければ、ImpressとSlidesは無料で使えます。 InVision InVisionも有名なアプリの1つで、ハイファイプロトタイピング向きです。バージョン管理を特色としていて、リアルタイムの連携機能やフィードバック機能を売りとしています。Marvelのアプリのように、アニメーション、プロトタイプの組込み、デバイス上でのデモ、などの機能もあります。無料プランではプロトタイプ1つまで作成できますが、それ以降は有料プランで月額15USドルかかります。 InVision Justinmind Justinmindはアプリケーションのハイファイプロトタイプを作成するのに向いているように思えます。JustinmindのサイトではレスポンシブデザインのWebサイトのプロトタイプについても言及されています。アプリ上でのデモ機能もあります。今のところ1年間の有料契約(月額換算で19USドル)からスタートできます。 Justinmind Marvel Marvel Appは有名なプロトタイプのアプリです。基本的に無料プランで、アップデートの価格も全てリーズナブルです。注目の機能は、PhotoShipとSketchのサポート、DriveとDropboxとの同期、Webページ上での組込み型プロトタイプです。これらの機能によって、プロトタイプをアニメーション付きのプレゼンテーションに仕上げることもできます。ハイファイプロトタイプの作成に向いています。 Marvel Proto.io Proto.ioはハイファイプロトタイプ向きのアプリです。複合的なインタラクション、アニメーション、ファイル形式のエクスポート、印刷、組込み、デバイスのデモンストレーションなどの機能が全てビルトインされています。15日の無料お試し期間と、月額24USドルのプランから始められます。 Proto.io POP POPが他のアプリと異なっているのは、ワイヤーフレームのスケッチとデジタル形式のプロトタイプのハイブリッドを作成できる点です。 iPhone、Androidフォン、Windowsフォンなどのカメラでスケッチの画像を取り込み、これらをインタラクティブなプロトタイプに変換します。主に紙で作業を進めるタイプの人には、データを共有するのにいいアプリです。プロジェクト2つまでは無料で利用可能で、以降は月額10USドルの有料プランになります。 POP Flairbuilder Flairbuilderはデスクトップアプリですが、プロジェクトにオンラインのビューア(閲覧用ソフトウェア)機能を利用できます。ミディアムファイのワイヤーフレームとプロトタイプに向いています。インタラクションを追加したり、デバイス上でのデモを行うことが可能で、グリッドベースのデザインにも特色があります。ワンタイム料金で99USドルと高額ですが、Axureよりも安いです。 Flairbuilder Flinto Flintoには、Macアプリ版とWeb用ライト版の2つのバージョンがあります。違いはというと、Macのバージョンの方がより複雑なアニメーション、インタラクションなどの機能をテーブル(表)に加えることができます。またSketchからファイル形式をインポートできるのも、Web用ライト版にはない機能です。ワンタイムの購入価格で99USドルかかります。ライト版(月額20USドル)だとデスクトップバージョンのライセンスも含まれるので、両方の良い部分を利用できます。 Flinto [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

アプリデザイン

作業を円滑に！エンジニアとデザイナーが衝突しない秘訣とは

本稿は、UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。記事は、エンジニア、Webデザイナー、ペンシルバニア州立大学の助教授であるJames Stone氏によって投稿されました。プロジェクトをタイトなスケジュールで進めるときには、共同作業は困難を極めます。デザイナーとエンジニアの意見を一致させるのは、非常に大変です。もし彼らが同じプロジェクトで、Webサイトを公開しようとすれば、オフィスの中は戦争状態と化すかもしれません。では、デザインを素早く完璧にこなし、かつ世界に通用するレベルのWebサイトを構築するにはどうしたらいいでしょうか？この記事では、プロジェクトの共同作業における問題を解決するためのアドバイスを紹介します。すべてのアドバイスは、私が過去10年間にWebデザイナーおよびエンジニアとして経験してきた成功と問題から引き出したものです。目次グリッドシステムをレスポンシブデザインで設計するピクセルパーフェクトなデザインを実現できるツールを使う Photoshopの代替ツールを考える値を統一するプロトタイプを使った共同作業をするデスクトップファーストの手法を排除しないことアセットの引き継ぎには十分注意を払う 1. グリッドシステムをレスポンシブデザインで設計するグリッドシステムはすでにご存知かもしれません。私がエンジニアとしてデザイナーと共同作業をしたときに直面した問題は、グリッドシステムをレスポンシブに設計するスキルが、デザイナーたちに不足していたことです。グリッドの幅を具体的に設定するまず技術的な話から始めましょう。最初に、グリッドの幅は具体的な数値で設定し、各グリッドごとにガターのサイズも正確に把握します。こうしておくことで、デザインに統一感が生まれ、またくり返し微調整する手間も省けます。開発チームへグリッドシステムを引き継ぐときにも、数値は正確に揃えておきましょう。もしパディング（padding）を15ピクセルで設定したら、厳密に15ピクセルになっていなければなりません。グリッド全体の幅を1000ピクセルで設定したときも、厳密に1000ピクセルです。レスポンシブデザインとは、あらゆるデバイスやシステムにおいてWebデザインが柔軟に機能することを意味しますが、最初の数値設定は厳密に行う必要があります。デザイナーは、モバイル端末上の表示もチェックすることモバイルビューデザインを美しく仕上げても、それで完成ではありません。モバイルビュー（モバイル端末上の表示）も忘れずにチェックしてください！もしデザイナーがモバイルビューをチェックしなければ、エンジニアはデザインの意図を汲みながら、モバイル端末上でも上手く作動するように、すべて一人で設計しなければなりません。私はエンジニアとして、こういう状況によく遭遇します。デザイナーも、グリッドシステムをレスポンシブに設計する方法について、よく理解しておくべきです。プロジェクトの共同作業を円滑に進めるためには、デザイナーは、デスクトップ版からモバイル版へ移植するときの各要素の並べ方（mobile stacking order）も考えておくといいでしょう。また時間に余裕があれば、モバイルビューのモックアップを作成しておくと大いに役に立ちます。完成製品のデザインをイメージしやすくなります。互換性の問題デスクトップ上で作成したグリッドシステムは、モバイル端末上では上手く機能しないこともあります。たとえば、サイズの大きい要素は、モバイル版のサイズに上手く縮小されないことがよくあります。デスクトップとモバイルのインターフェース間では、このようにデザインの互換性の問題が起こることがあり、タイムラインを示すUIの要素（timeline UI element）にも見られます。デスクトップ上では問題なく表示され、時間軸上の各ポイントも見やすいデザインです。しかしモバイル端末上では表示が崩れることがあります。デザイナーは、こうした問題を自力で解決する必要があります。そうでなければ、エンジニアにデザインの意図を誤解され、予想もしなかったようなおかしなデザインが生まれるおそれがあります。 [PR] UI/UXデザインで挫折しない学習方法を動画で公開中2.ピクセルパーフェクトなデザインを実現できるツールを使うショックを受けてほしくないのですが、Photoshopは現代的なWebサイトを構築するのに適したツールとはいえません。私はエンジニアとして、Photoshopで作成されたモックアップを渡されることがよくあります。残念なことに、Photoshopで作られたモックアップは、エンジニアがWebサイトを構築するときには問題となることがあります。Photoshopでは、エンジニアが必要とするレベルの精度と正確さを実現できないからです。フォントの整合性第一に、PhotoshopとWebの間で、フォントの整合性が保たれる保証はありません。 Photoshopのファイル形式でデザインされた文字は、Web上で表示が崩れてしまうこともよくあります。文字がより太くなったり、全く異なるデザインになっていたりするのです。オープンソースのフォントでさえ、Photoshopで編集すると、Web上で表示が変わることがあります。デザイナーは、ウェイト（太さ単位）を基本にして、フォントの調整を行うべきです。スクリーン上での表示を基本にしてフォントの調整を行うのは、良くありません。Webを構築したときに、デザインが歪んだり劣化する原因になるおそれがああるからです。パフォーマンスの問題ピクセルパーフェクト（px単位の正確な設計）が重要なのは、他にもデザイナーがWeb用に作成するPhotoshopのファイルには問題があるからということも理由の1つです。その1つの例がドロップシャドウです。 Photoshopは高機能なドロップシャドウなどを備えています。デザイナーは、シャドウ、マスクなどのデザイン効果を柔軟に使いこなすことができます。しかし、エンジニアがこれらのデザインをWeb用にコーディングするときには、使える選択肢がかなり限られているのです。また、エンジニアがWebサイトのフロントエンドの開発をするときには、パフォーマンスを非常に重視します。スタイリッシュなUI要素を表現するために、24bitの半透過または透過のPNG形式のサイズの大きい画像などを使うとしたら、Webサイトの読み込みに時間がかかります。もしこのような要素が100個あれば、100倍の時間がかかり、Webサイトの動きは非常に鈍くなります。解決策の1つは、ドロップシャドウを使う代わりに、CSSでコーディングすることです。 CSSを使うと、ドロップシャドウの他にも多くのデザイン効果を表現できます。もしエンジニアがCSSを使えるなら、Web上にPNG形式の画像を埋め込む代わりに、CSSを使うべきです。軽量なデザインが可能となり、要素のサイズを小さくすることができるというメリットがあります。しかしデメリットもあり、CSSで作ったタイポグラフィやドロップシャドウは、元の画像と全く同じデザインに仕上げることはできません。 2つの画像のうち、上が透過のPNG形式の画像で、下がSVG形式の画像です。見た目はほとんど同じですが、画像のサイズはPNG形式は12.3kもあるのに対して、SVG形式はわずか1.7kです。SVG形式の場合、シャドウをデザインするときには、ディテールの調整、ブレンドモードによる色の変更なども、完璧に行うことができます。一方、透過のPNG形式だと、画像の背景色を変更するときに、背景色がアルファチャンネルのデータ領域ににじんでしまって、他の要素の周りに光の輪がついたように見えることがあるのです。 Photoshopの代替ツールを考えるあなたがどのようなツールを選ぶとしても、PhotoshopがWebデザインのツールとしては最適な選択でないことは明らかです。たとえば私は、Bohemian Coding社の開発したSketch 3というデザインツールを使っています。今のところSketchにはバグや問題もあるのですが、デザインの整合性を保つためには非常に優れたツールです。まず、px単位で厳密に行う設計なデザインを素早く簡単に行うことができます。フォントやドロップシャドウも、CSSでコーディングするのと変わらない出来栄えです。 Sketchには、作成したデザインからCSSのコードを取得して、コピー&ペーストで利用できる機能もあります。そのため、一度デザインしたものを、最終的にHTMLやCSSでコーディングし直す必要もありません。ピクセルパーフェクトなデザインを可能とする現代的なツールを使えば、デザインの意図を完成製品に反映することが可能です。プロジェクトのメンバーの仕事の負担軽減にも大いに役立ちます。より詳しい活用方法をご紹介すると、私は各レイヤーのプロトタイプを作るために、Sketchで作成したモックアップをインポートして共有しています。こうすることで、同じチームのエンジニアはデザインの見た目だけではなくて、デザインの動作性も知ることができます。 3. 値を統一するマージン（margin）、フォント、行（line）の値を統一することで、プロジェクトを速いペースで進めるときにもフラストレーションの緩和に役立ちます。良いデザインを生むためには、フォントのサイズやウェイト（太さ）、文字間隔、行の高さを制限することも大切です。具体的なアドバイスは、次に示しています。マージン（margin）マージンについてのアドバイスはシンプルです。マージンとパディングの幅のpx（ピクセル）の数値は、端数を切り捨てて、5の倍数に設定します。たとえば、13、17pxなどよりも、10、15、20pxなどを使いましょう。デザインと開発の両方の観点から、5の倍数のpxを使うことには、統一感を生む効果があるといえます。行（line）の高さ行の高さを統一することで可読性が高まります。もし行の高さを出力するときに、Photoshopなどのプログラムをデフォルトとして使っているとしたら、可読性に問題が生じるおそれがあります。また、行の高さを1.2（元のフォントの1.2倍の高さ）に設定するのは、現代的なWebデザインには適していません。エンジニアやエンドユーザーが問題を抱える可能性があります。多くのWebサイトでは、可読性を最大限に高めるために、行の高さを1.5または1.6に設定しています。エンジニアが後で修正しなくてもいいように、本文（body）のテキストにはこれらの数値で統一しておくといいでしょう。もっとも、見出し（headline）のテキストは、1.2で設定しても見栄えの良いデザインになります。ただし一貫性を保つのがルールです。たとえば完成製品のデザインにおいて、見出しの行の高さを1.2、本文の行の高さを1.5とすることが目標であれば、このデザインを実現できるように、モックアップやプロトタイプの作成においても、同じ数値を一貫して使うことが大切です。フォントサイズと文字間隔使用するフォントサイズは3または4種類、最大でも5種類までに止めましょう。 BootstrapやZURBのFoundationなどのレスポンシブデザインに使えるフレームワークでは、フォントサイズが規定値になっていることがあります。さらに、モバイル版を設計するときには、見出しのフォントサイズが一回り小さな規定値になります。デザインするときには、これらの規定値を解除しておきましょう。見出しに使うフォントサイズは、端数のない数字で統一します。ページからページへ移行するときにも、デザインの統一感が保たれる効果があります。40pxと42px、または38pxと38.5pxなど不揃いな値を組み合わせて使うと、デザインの統一感が失われてしまいます。文字間隔についても、値を統一することが大切です。文字間隔には、見出しを強調して、美しいタイポグラフィを生み出す効果があります。また、もしあなたがデザイナーで、文字のデザインについてエンジニアより主導権を握りたければ、各要素ごとに文字間隔を統一して設定しておきましょう。フォントのウェイト（太さ）エンジニアの観点からいうと、デザイナーがフォントのウェイトを増やすほど、フォントの読み込みに時間がかかります。これは、Googleフォント、AdobeのTypekit、その他すべてのフォントについて当てはまります。どのくらいの時間になると思いますか？フォントのウェイトの数を2上げるごとに、ページの読み込みに2倍の時間がかかります。Webサイトの読み込み時間が長くなるほど、利用者もユーザーエクスペリエンスを遅く感じるはずです。フォントのウェイト数はなるべく控えめにすることを、私はおすすめします。デザイナーは「このデザインのフォントはもっと軽いウェイトで実現できないか？」、「5ではなくて3のウェイトでも良いのではないか？」など自問してみるべきです。ウェイトの数を小さめにすれば、プロジェクトを効率的に進めて、軽量なデザインを実現することができますし、結果としてモバイル端末や他のプラットフォーム上での読み込み時間も少なくなるので、ユーザーエクスペリエンスの質を高めることにもつながります。 4. プロトタイプを使った共同作業をするプロジェクトの共同作業を進めるときに、プロトタイプを利用しないとしたら、ミーティング、電話のやりとり、（コーヒーのしみのついた）手書きのメモなどが溢れかえり、コミュニケーションは収拾がつかなくなります。言うまでもなく、文書は管理不可能になり、プロジェクトマネジャーやデザイナーたちはデザインのコンセプトを伝えるのに苦戦するでしょう。画像：注釈を入れすぎたワイヤーフレームの悪い例次に、文書を減らして、明確なコミュニケーションを図るのに役立つステップをご紹介します。まずプロジェクトの開始時に、要件定義書などは、網羅的な文書というよりもナレッジハブ（情報の中央管理システム）として活用するよう、提案してみましょう。たとえば次の画像に示した要件定義書では、基本デザインと技術原則を定め、これにプログラムのバージョン管理のために使うツールへのリンク情報を加えただけのシンプルなものです。あとは、これらのツールを使ってデザインやバージョンをマークアップ言語で記述したときに、現場での必要性に応じて、追加の文書を作成すればいいのです。画像：Autodesk社のソフトAutoCAD 360で作成した製品の要件定義書プロジェクトの開始後には、システム全体のインタラクションを考えるために、ユーザーフローを作成します。次の画像で示すように、ユーザーエクスペリエンスにおいて重要な鍵となる部分には、コメントを追加しておきましょう。エンジニアとプロジェクトマネジャーが全体の流れを把握するのに役立ちます。画像：Autodesk社のソフトAutoCAD 360で作成したユーザーフローの図ユーザーフローについてディスカッションを重ね、イテレーションを実践したら、次はユーザーエクスペリエンスのデモを行います。ローファイのプロトタイプを作成し、エンジニアに説明するためのコメントを余白に加えておきます。 5. デスクトップファーストの手法を排除しないこと私の携わったプロジェクトの約95%は、いわゆる「デスクトップファースト」の手法で開発が進められました。デスクトップファーストは、モバイル版より先にデスクトップ版から、インターフェース、デザイン、インタラクションなどの開発を進める手法です。デスクトップファーストと対比される手法がモバイルファーストで、Web製品のモバイル版を開発するときには、とても優れた手法です。しかしながら実際に有効活用するのが難しいこともあり、デザイナーはデスクトップファーストの手法を排除するべきではありません。デスクトップファーストで開発を進めるとして、すでに製品のユーザーがいるときには、Googleアナリティクスのトラフィック分析を利用すれば、ユーザーの使っているデバイスの「画像の解像度」を知ることができるので、最適なスクリーンサイズを決定できます。プロジェクトによっては、13インチまたは15インチのMacBook Pro Retinaディスプレイモデルのスクリーンに合わせてデザインすることもあるかもしれません。おそらく、12インチの小型ノートPCなどのスクリーンに合わせてデザインすることが最も多いと思いますが。 Googleアナリティクスを利用することで、ユーザーがコンテンツをどのように見ているかを知ることも、コンテンツがスクリーン上で一番映えるにはどうデザインしたらいいかを知ることもできます。またCSSのメディアクエリ（Media Queries）とブレイクポイント（Breakpoint）を、レスポンシブデザインに上手く活用する方法を知ることも大切です。ブレイクポイントのpxの数値は、デザインが良く見えるように適切に設定します。 6. アセットの引き継ぎには十分注意を払うデザインした要素などアセットをチームのメンバーに引き継ぐときには、渡すだけで済むこともあれば、デザインを改良するためにコミュニケーションを何度も重ねなければならないこともあります。「画像はプログレッシブJPEG形式にするべきか？」、「どのくらい縮小するか？」、「SVG形式にするべきか？」、「SVG形式の画像を最適化する方法は？」、「SVG形式の画像をどのように作成するか？」などのやり取りが行ったり来たりすることもあります。たとえば、デザイナーがサイズの不揃いなアイコン一式を作成したとします。これらを引き継いだエンジニアは、SVG形式のファイルでアイコンを作成し直すことになります。SVG形式のファイルはパフォーマンスが高い一方で、そのままでは要素のサイズは不揃いなので、スクリーンの上（top）または下（bottom）に合わせて配置したたときには、統一感のないデザインになります。その結果、エンジニアはすべてのアセットを最初から作り直すか、CSSでコーディングをしてサイズを統一しなければなりません。仕事の無駄を避けるには、なるべく早い段階で、最適なファイル形式を選んでおくべきです。 [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

Webデザイン

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

【プロトタイプを作る！】初心者でもすぐに分かるProttの使い方

新規アカウントを取得する

プロジェクトの作成

スクリーン画像のアップロード

スクリーンからスクリーンへのリンクを作成する

シェア機能・サポートの使い方

関連するキーワード

あわせてよく読まれている記事

Goodpatchのプロダクトマネージャーに聞く！プロトタイピングツール「Prott」を使ったプロトタイピングの重要性とは

【無料版OK】ChatGPTが導く企業成長戦略：限られたリソースで利益を最大化

【無料版OK】ChatGPTで簡単作成！効果的なプロジェクト報告書フォーマット

AIを活用した進捗報告テンプレートの作り方と活用法

【未来のUIデザイナーへ！】初心者のためのプロトタイピングガイド

作業を円滑に！エンジニアとデザイナーが衝突しない秘訣とは

TechAcademyから
現役エンジニアの方へ
お知らせ

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

新規アカウントを取得する

プロジェクトの作成

スクリーン画像のアップロード

スクリーンからスクリーンへのリンクを作成する

シェア機能・サポートの使い方

記事を検索

関連するキーワード

関連する記事

あわせてよく読まれている記事

TechAcademyから 現役エンジニアの方へ お知らせ

TechAcademyから
現役エンジニアの方へ
お知らせ