Framer Course
Framerマスター講座
講座概要
基礎から学べる
全25レッスン以上
動画レッスン25本
学習期間の制限なし
Remixデータ付き
19,800円（税込）
今ならSTUDIO＋Figmaセット講座が
お得に買える✨
セット割キャンペーン実施中！
今ならSTUDIO＋Figmaセット講座がお得に買える✨
セット割キャンペーン実施中！
Figma講座とSTUDIO講座のセットが
119,800円(税込) → 99,800円(税込)
Figma講座とSTUDIO講座の
セットが
通常 119,800円(税込)
今だけ 99,800円(税込)
2024年9月7日(土) 23:59まで
※注意事項※
Figmaの2024年6月26日のアップデートによりUIがフルリニューアルされました。（現在はウェイティングリスト受付中でベータ版として触ることができます）本講座ではまだ新しいUIには対応していません。基本的な使い方は変わっていませんので学習に支障はないかと思いますが、もし困ったことがあれば講座内の質問フォームよりお問い合わせください。また今後、新しいUIに対応した講座の更新を予定しております。
Figmaマスター講座
リリース記念キャンペーン 🎉✨
Figmaマスター講座リリース記念キャンペーン 🎉✨
今だけ 49,800円(税込) → 29,800円(税込)
通常 49,800円(税込)
今だけ 29,800円(税込)
2024年4月3日(水) 〜 4月10日(水) 23:59まで！
Details of the course
これからFramerを始める人に最適
基礎を丁寧に、手を動かしながら学べる実践型講座！
これからFramerを始める人に最適
基礎を丁寧に、手を動かしながら学べる実践型講座！
この講座はこれからFramerを始めたい方、触ってみたけど独学だと不安な方にぴったりの講座です。
レイアウトの概念やフレーム・スタックといったFramerならではの基礎を丁寧に解説しながら、実際にデザインやWebサイトを一緒に作っていく実践型のカリキュラムです。
「見て終わり」ではなく、手を動かして操作に慣れながら進められるので、講座を終える頃にはFramerで0から自分のサイトが作れる状態になります。
Beginners’ issues
受講を推奨する人物像
受講を推奨する人物像
Framerに興味はあるけど、何から始めればいいかわからない
StudioやWixなど他ツールからFramerに移行したい
自分でノーコードでWebサイトを作れるようになりたい
複雑なアニメーションのサイトを作りたい
Framerの情報が英語ばかりで、日本語で体系的に学びたい
Users' Voices
実際に受講した方の声
実際に受講した方の声
Sample Video
実際の解説動画をチラ見せ！
「4-1：カード型レイアウト(ポジション)を作る」
実際の解説動画をチラ見せ！
「4-1：カード型レイアウト(ポジション)を作る」
動画のつづきは本編でお楽しみください🥳✨
Key points of this course
この講座のポイント
Framerならではの基礎概念を、日本語でわかりやすく丁寧に解説
フレーム、スタック、ボックスレイアウトなどFramer特有の概念を一つずつ丁寧に解説。
「なんとなく使える」ではなく「なぜそうなるのか」を理解できるので、応用が効く土台が身につきます。
見て終わりじゃない。手を動かしながら身につく実践型カリキュラム
デザイン制作やサイト構築を一緒に進めていく実践形式です。
操作に慣れながら自然とスキルが身につくので、講座を終えたらすぐに自分のサイト制作を始められます。
CMS・レスポンシブ・アニメーションまで、基本機能を幅広くカバー
サイトの見た目を作るだけでなく、CMSによるコンテンツ管理、レスポンシブ対応、出現アニメーションやスクロール演出まで。Framerで制作するために必要な基本機能をこの講座ひとつで一通り学べます。
公開・納品・SEO設定まで、制作の全工程を網羅
サイト設定、SEO、ドメイン接続、クライアントへの納品方法まで解説。
「作ったけど公開の仕方がわからない」とならないよう、制作から公開までの一連の流れをカバーしています。
What you will learn in this curriculum
このカリキュラムで学べること
初めてFramerに触る人でも安心！
アカウント作成や基本操作から始まり、1から学べます。
レイアウトの基本概念を理解し、Framerでゼロからデザインが組めるようになります。
コンポーネント・バリアント・CMSなど、効率的なサイト構築に欠かせない機能を実践で習得。
アニメーション・インタラクションをノーコードで実装。スクロール演出やパララックスも作れるように。
レスポンシブ対応からSEO設定、公開・納品まで。制作の全工程を一気通貫で学べます。
初めてFramerに触る人でも安心！
アカウント作成や基本操作から始まり、1から学べます。
レイアウトの基本概念を理解し、Framerでゼロからデザインが組めるようになります。
コンポーネント・バリアント・CMSなど、効率的なサイト構築に欠かせない機能を実践で習得。
アニメーション・インタラクションをノーコードで実装。スクロール演出やパララックスも作れるように。
レスポンシブ対応からSEO設定、公開・納品まで。制作の全工程を一気通貫で学べます。
Examples of work in this course
この講座内での作例
BANNER
BANNER
WEB DESIGN
Figma講座リリース記念ウェビナーで作成したバナー
Mentor
講師紹介
おかゆ
Framer Japan Community 運営 / フリーランス UIUX デザイナー
フリーランスのUIUXデザイナーとして、主にスタートアップの立ち上げフェーズにおけるプロダクトデザインやコミュニケーションデザインに携わっています。
前職のスタートアップではランディングページでの高速検証にFramerを活用し、非エンジニアでもスピーディーにデザインを変えながら検証できるFramerの魅力に感銘を受けました。
もっと多くの日本のデザイナーがFramerを活用できるようになればという思いから、日本語で情報交換や勉強会ができるコミュニティ「Framer Japan Community」をSlackで運営しています。
Curriculum Contents
カリキュラム内容のご紹介
SECTION.01 Framerの概要
01
Framerとは
02
Framerの特徴
03
他のノーコードツールとの違い
04
料金プラン
05
採用している企業
SECTION.02 Framerを使う準備
01
アカウント登録
02
デスクトップアプリのダウンロード
03
プロジェクトの作成
04
エディター画面さらっと説明
SECTION.03 基本レイアウトとフレーム
01
ボックスレイアウトとは
02
フレーム
03
絶対位置の指定の仕方
04
スタックの概念
05
スタックの使い方
06
基本操作
SECTION.04 デザインを作ってみよう
01
カード型レイアウト(ポジション)を作る
02
ヘッダーを作る
03
セクションを作る(ビジョン)
SECTION.05 サイトを作ってみよう（基礎）
01
ヘッダーを作る
02
ヘッダーとファーストビュー
03
バリューセクションまで
04
アセットの登録
05
カルチャーセクション
06
メンバーセクション
07
オフィスセクション
SECTION.06 サイトを作ってみよう（実践）
01
CMSについて
02
お知らせセクション
03
お知らせ一覧と詳細ページ
04
フッター・レイアウトテンプレート
05
エントリーフォームのページ
06
レスポンシブ1・モバイルメニュー
07
レスポンシブ2
SECTION.07 サイトを作ってみよう（応用）
01
アニメーションをつける1
02
アニメーションをつける2
SECTION.08 サイトを公開する
01
サイト設定
02
公開・納品してみよう
SECTION.09 応用例の紹介
01
リソースやAIを活用した効率的な制作
02
高度な表現の紹介
Exclusive benefits of Framer Master Course
Framerマスター講座だけの特典
講座で使うRemixデザインデータ付き
講座内で使用するプロジェクトデータを配布。自分のワークスペースにコピーして設定を確認しながら学習を進められます。
※Framerにおける「Remix（リミックス）」とは、「他の人が作ったデザインやテンプレートを、自分のアカウントに丸ごとコピーして自由に編集できるようにする機能」のことです。
Framer Japan Community への参加案内
Framerについて日本語で情報交換や質問ができるSlackコミュニティをご案内します。講座の内容でわからないことがあっても、仲間や講師に気軽に聞ける環境があります。勉強会なども開催しています。
今ならSTUDIO＋Figmaセット講座が
お得に買える✨
セット割キャンペーン実施中！
今ならSTUDIO＋Figmaセット講座がお得に買える✨
セット割キャンペーン実施中！
Figma講座とSTUDIO講座のセットが
119,800円(税込) → 99,800円(税込)
Figma講座とSTUDIO講座の
セットが
通常 119,800円(税込)
今だけ 99,800円(税込)
2024年9月7日(土) 23:59まで
TOPに戻る
