.png?w=420)
最近注目されているプロダクトデザイナーの実務ガイド
boldydesign
￥16,928
入門 / Figma, ProtoPie, Design System
5.0
(5)
100+
製品デザイナーの実務プロセスを一つずつ順を追って説明します。 基本的なデザイン関連用語からペルソナ、QA、デザインシステムなど、全体的なデザイン実務を完全に理解できるようになります!
入門
Figma, ProtoPie, Design System
プロトタイピングの最強者ProtoPie
基礎から実務スキルまで！ 🌠
複雑なコーディングなし
プロトタイピングが可能なProtoPie🪄
ProtoPieはデザイナーが開発者の助けを借りずに
お客様のご意見を開発前にあらかじめ適用してみることができますよ！
開発者とのシームレスなコミュニケーションツールを提供しています。
最近の非対面UI開発トレンドにもぴったりのツールです。
この講義だけの特長
📝
練習方法
🧑💻
実務中心の例
🍯
様々なチップ伝授
こんな方におすすめですよ🙋♀️
初めてプロトファイ
接する方
デザインワークを効果的に
プレゼンテーションしたい方
インタラクティブなプロトタイプ
印象的なプレゼンテーション
したい方
UIの実用性を検証するため
詳細なプロトタイピング
必要な方
🎓受講生の悩み
「最初にやってみるのはうまくできますか？」
👨🏫 受講生の悩み解決方法
入門から高級実務まで簡単に一つずつ追いながら学べます。
これを学びます📚
1. ProtoPieの紹介とページローリングUIの作成
- ProtoPieの紹介と特徴、活用範囲、画面構造、System Status Bar、プレビュー画面の紹介
- FigmaデザインをProtoPieに読み込む
- ページローリングUIの作成：チュートリアル画面の作成
2. ボタンと画面切り替えとカードローリングUIの作成
- Tabトリガーによる画面切り替え/インタラクションの追加
- 自然な動きのためのEasing値の調整
- 透明オブジェクトの活用
- カードローリングUI/垂直スクロールの作成
3. Tab ナビゲーションの作成
- スクロールとページングコンテナの重複使用
- ChainとPage Scrollコンテナを使用したTabナビゲーションの作成
4. プロトタイプ共有、ProtoPie Player Appの使い方
- Cloud 共有と Interaction Record
- ProtoPie Playerモバイルアプリの紹介と使い方
5. ヘッダーインタラクションとプルトリガー
- Chain/Dragを使用したヘッダーインタラクション
- TouchVelocityを使用したヘッダーインタラクション
- リストを押すと表示されるContextメニューを作成する
6. インタラクティブコンポーネントとの通信
- アクション領域のグループ化
- Condition を使用したチェックボックスコンポーネントの作成
- Send/Receive Triggerによる制御と通信
7. Variable 使用したインタラクション (1)
- リバースページスクロールインタラクション
- iOS Background Blur エフェクトを使う
- 変数を使用したログイン画面のパスワード入力表現
- 変化する変数値を画面に表示する
8. Variable 使用したインタラクション (2)
- スライダによって値が変化するインタラクション
- ボトムメニューマイクロインタラクション
- 3D Rotateカードインタラクション
9. Variable 使用したインタラクション (3)
- 円グラフインタラクションの作成
- 画面のスクロール値を変数に入れて表示
- Rangeを使用したインタラクション
10. Input/Return トリガーの使用と繰り返しアニメーション
- 入力ウィンドウとデバイスキーパッドの使用
- パスワード入力画面実習
- タイムラインアニメーション：繰り返し効果など
11. ビデオコントロールとベクターアニメーションの活用
- ビデオファイルコントロール
- LottiesFilesアニメーションの活用：jsonファイル
- Figmaで作成した画面切り替えのインポート：Smart Transition
12. デバイスセンサーの活用とマウス効果の使用
- マップUI
- マウスオーバー/アウト効果、マウスポインタデザイン
- 音楽検索プロトタイプ、騒音測定プロトタイプ、音声認識プロトタイプ
予想される質問 Q&A 💬
Q.この講義だけを聞くとProtoPieをマスターできますか？
この講義をすべて聞いたら、実務にすぐに使えるレベルになります。
Q.このレッスンにはProtoPieのすべての機能が含まれていますか？
この講義の実務中心のワークショップ方式で進められ、ProtoPieのすべての機能は含まれていませんが、主に使用するほとんどの機能の取り扱いがあります。
Q. ProtoPieはWindowsでも使用できますか？
ProtoPieはOSを選ばず、Mac、Windowsの両方で利用可能です。
✅受講前に確認してください
プロトファイフリープランポリシーの変更により、1つのファイルで使用できるシーンの数が2つに制限されました。下記の授業は、無料プランでは受講に制約がある可能性があることをお知らせします。
セクション2 - ProtoPieの使い方
- 2～4鋼の例ではシーンを最大4つまで使用するため、円滑な川の進行には有料プランが必要です。
- レッスン2でチュートリアル画面を一度に3つ読み込んだ部分は、無料プランでは一度に1画面ずつインポートする方法で進行する必要があります。
- 無料プランで許可されている2つのScenes（例、チュートリアル、メイン）以外の残りの部分に沿って試すには、最初に作業したScene（例、チュートリアル、フルメニュー）をクリアして進めることができます。
セクション3 - ProtoPieに慣れる
- 6章の例では、さまざまな方法でヘッダーインタラクションを実装するために3つのシーンを使用しています。
- ただし、Scene間につながるインタラクションがあるわけではなく、進行していた一つのSceneで続けていきながら授業を進めることはできます。
ツールの使い方について、細かい部分まで丁寧に説明してくださるので、とても理解しやすかったです。2025年3月現在、ProtoPieのUIが講義バージョンと細かく異なる部分もありますが、受講する上では全く問題ないので、もし受講を悩んでいる方は参考にしてみてください！
詳細に講義してくださり、とても助かりました。
ProtoPieは初めてでしたが、一歩ずつ着実に学ぶことができて良かったです。変数のような少し複雑な部分を一つのセクションだけで終わらせず、他のセクションでも再度適用しながら機能を思い出すことができたので、とても助かりました。
講義がとても有益です。26年6月に受講していますが、非常に満足しながら聴いています。
とても詳しい説明ありがとうございます。大変助かります。