[お知らせ]フレーマーが5/24[フレーマー-サイト]に改編し、講義の一部コードが動作しないことを確認しました。お手数ですが、講義を聞く方はhttp://framer.com/projects/newで新しいプロジェクトを作成してください。

🤔プロトタイプを？あえて？

企画会議参加からハンドオフ、デザインアセット管理まで.. デザイナーならデザイン以外にも気にするべきことがあふれているという点、おそらくすべてのプロダクトデザイナーたちが共感すると思います。 「ユーザーの問題を把握し、よく抜けたデザインを抜くのも大変で死ぬが、プロトタイプまで？」と思うあなた、その気持ちがわかります……。だけど、この講義を見てまた考えてみてはいかがでしょうか？

👨‍💻これは.. こんなに作るのですか？

開発者だけでサービスを作成しない限り、コミュニケーションは必須です。サービスが大きければ大きいほどコミュニケーション費用も増えます。ほとんどの問題はスラックメッセージで処理できます。少し複雑な問題であれば、ズーム会議で十分でしょう。ただし、製品を完全にピボットする場合は、非常に細心の注意を払う修正であれば、問題を言葉で説明すること自体が不可能な場合は、おそらくプロトタイプを作成するのが最速のトラブルシューティング方法かもしれません。

❗️ぜひ、フレーマーを書かなければならない理由がありますか？

章 3: コードを見てみる - 参考サイト映像中

プロトファイ、インビジョン、オーブン、バルサミックなど…これまで以上にプロトタイプツールが多い時代です。ピグマやスケッチなどのデザインツールがプロトタイプ機能を競争的に追加しながら、今や単純なユーザーフローは上記のようなデザインツールで実装できます。しかし、このようなツールはGUIベースのツールであり、最終製品製作に先立ち製品をまねた模型です。開発者は完成した画面とデザイナーの説明を入れ、このモデルを再解釈する過程が必要でしょう。しかし、フレーマーはリアクトベースのプロトタイプツールです。フレーマーを通してあなたが作った製品は実際に動作する製品です。完成した製品はnetlifyのようなPaaSで配布することができ、さらに開発者がソースを覗くこともできます。これは、いつでもどこでもリアルタイムで変更できるWeb製品を作成できることを意味します！

こんな方におすすめです

• 私のデザインが開発可能なデザインかどうかをテストしたい人
• リアルタイムでプロトタイプを修正し、フィードバックを反映したい人
• コードでデザインを実装したい人

フレーマーでどんなことを作りますか？

ㄱㅈㅇ！

フレーマーはリアクトで実装できる画面は何でも作れます！ （もちろん、複雑なほど難しいということは... 😂 ） 今回は最近、世界中で多くの関心を持っている株式関連サービスを作ってみましょう。開発者の観点からアイデアを構想し、画面を描いて見て、非常に少しの🤗コーディングをしてみる時間を取る予定です。そして、ユーザーテストを通じて製品をリアルタイムで改善する過程も持っていきます。

フレーマー、あまり難しくないでしょうか…？

フレーマーウェブ公式紹介映像

フレーマーはコードベースのプロトタイピングツールですが、コーディングを全く知らなくても十分に利用可能なツールです！今回の講義では、難易度をゆっくり上げて道具を理解し、身につける過程を取る予定です。始まりが半分だと言うでしょうか？このレッスンでは、簡単かつ簡単に自分が望むプロトタイプを作成できるようにすることが目標です。興味を持ってあきらめないなら、現業で十分活用できるあなただけのスキルになります。

講義の例を挙げます。

今回の講義はピグマとフレーマーウェブを利用して制作しました。パーソナルフレーマーウェブは無料です！以下の例をあらかじめ確認して講義をご覧いただくと、一気に簡単にご覧いただけます。 😉

Figma: https://www.figma.com/file/YKbkOiYWBVSNfUZXQY6ENP/jonbeo
Framer: https://framer.com/projects/xFiRc8OAux01S6z56OMj-ephJU