Figma入門：基礎からWebサイトデザインまで

デザインシステム構築能力は、もはや選択ではなく就職と実務における必須スキルです。この講座では、デザインシステムの概念から、Figma Variables・トークン・コンポーネント・レスポンシブ設計まで、入門から始めて専門的なスキルを身につけることができます。 総合実践プロジェクトでは、モバイル、タブレット、デスクトップのすべてを網羅するデザインシステムを構築し、サービスページを作成します。初心者の方なら、この講座を完走した頃には、面接官が「すぐに実務に投入できる」と感じるような差別化された競争力を備えることができるでしょう。開発者や個人起業家の方なら、デザインシステムを自ら構築できる基盤を固め、一貫性のある高品質なプロダクトを作れるようになるはずです。

デザインは難しく、Figmaは複雑そうだと思っていませんでしたか？ 今は非デザイナーでも直接画面を作れる時代！ 図形・テキスト・マスクなどの基本機能から、 背景削除、AI画像生成、UI自動制作まで、 FigmaのAI機能を実務の流れの中で自然に活用する方法を学びます。 詳細ページの制作からショッピングモールのUI画面構成まで、 デザイナーの助けを借りずに成果物を完成させることができる 実践的なFigma活用法を体験してみてください。 Point 1. Figmaの核心機能さえ身につければ、自分で画面を作れる - フレーム・図形・テキスト・マスクなど、必須の描画機能のみを実習中心に学習 - 詳細ページの全セクションを最初から最後まで直接制作し、成果物の完成を経験 Point 2. Figma AIを活用して作業スピードを大幅に短縮 - 背景削除、画像生成、レイヤー整理などのAI機能を実務の流れの中で自然に活用 - 単なる機能紹介ではなく、実際のデザイン作業につながる活用法を中心に構成 Point 3. ショッピングモールUIまで作る実務型デザイン感覚を身につけよう - オートレイアウト・コンポーネント・Make Designs機能でUI画面セットを制作 - 非デザイナーでも一人で画面を設計し、完成させることができる実践感覚を学習

基礎から実務まで、Figma一つで完結するUIデザインオールインワンクラス! オートレイアウト・コンポーネントの核心機能から、レスポンシブデザイン、効率的なハンドオフ、コラボレーションまで実務スキルを完璧にマスターします。今すぐ始めて、あなたのデザイン力をワンランクアップグレードしましょう!

After Effects中級以上、実務で活用できる技術を説明します。 CC2023で説明しますが、バージョンに関係なく基本原理を中心にしました。 ツール説明で時間を無駄にせず、能動的な研究ができる材料を用意しました。

きれいな画面100個より、動くプロトタイプ1個！Figmaの条件付きロジックで本物のように動作するプロトタイプを作成し、AI時代でも揺るがないデザイン思考力を養いましょう。

FigmaのオートレイアウトとVariablesを活用し、1つのデザインをさまざまなSNSプラットフォームに合わせて素早く変形する方法を学びます。繰り返しの修正がしやすいコンテンツ制作システムを構築し、Instagramカルーセル・Facebook投稿・Instagramストーリー用の3種類のテンプレートを自分で完成させます。

HTML、CSS、JavaScript(jQuery)の基礎知識はありますか？ しかし、Webサイト全体をどのように作ればよいのか分からない方もいるでしょう。そんな方は、デザインを参考にしながらショッピングモールのメインページの実装に挑戦してみてください。完成したデザインを参考に、企画意図やデザインの詳細を把握し、Webサイトを実装するノウハウをお伝えします。

実装したいアプリ/ウェブアイデアはあるが、アプリサービス企画経験がなく、どのように始めなければならないのか幕を開けたスタートアップ代表、短期間に企画を体系的に学びたい実務者、キャリアの企画業務プロセスとノウハウを学びたいジュニア企画者とも専門家ができるようにフィグマを活用した新しい企画方式とPM 17年次の業務スキルを基礎からじっくりお知らせします。

リサーチの自動化からバックエンドのデータ連携、さらには実際のライブ動的ウェブをデプロイする過程までを網羅し、個人が製品のライフサイクル全体を主体的にリードできるフルスタックの視点を養うことを目的としています。AI時代の競争力を強化したい方々に、アイデアを具現化する強力なエンジンとして活用する力を提供します。

画像生成AIの代表的なツール、ミッドジャーニー！ 基本的な使い方から、実際のデザインプロジェクト実習を通して実務への応用まで、一度に！

ブログやSNSのコンテンツを自分で作りたいけれど、 Figmaは難しく、デザインは何から手をつければいいか分からず悩んでいませんか？ この講座では、Figmaの基本画面やフレームから、 画像・テキスト・図形・エフェクトの扱い方まで、 実際のコンテンツを作りながら段階的に身につけます。 ブログのカバーやサムネイル、CTA要素、デジタル名刺を実際に制作し、 コンポーネント・オートレイアウト・プロパティ・バリアントを活用して、 文言や画像が変わっても素早く修正できる 再利用可能なコンテンツテンプレートを完成させます。 単にきれいな画像を1枚作って終わりではなく、 ブログやSNSで継続的に活用できる 自分だけのコンテンツ制作システムを作ってみましょう。 Point 1. Figmaの基本を実際のコンテンツ制作で身につけよう フレーム・レイヤー・画像・テキスト・図形などの核心機能を実習中心に学習 ブログのカバーやサムネイルを実際に制作しながらFigmaのワークフローを理解 デザイン非専門家でも成果物を完成させながら自然に基本を習得 Point 2. 繰り返し修正可能なコンテンツテンプレートを作ろう コンポーネント・オートレイアウト・プロパティ・バリアントの核心原理を学習 文言・カラー・画像を素早く入れ替えられるサムネイルとCTA要素を制作 コンテンツを作るたびに最初から作業し直す時間を最小化 Point 3. 自分だけのコンテンツパイプラインを構築しよう ブログ・Instagramなど様々なチャネルで活用できるデザイン資産を制作 カラー・テキスト・エフェクトスタイルを登録し、一貫したチャネルイメージを構築 自作のテンプレートを繰り返し活用し、持続可能なコンテンツ制作の基盤を完成

今、AIの力で誰でも簡単にアプリを企画し、UIを描けます！ コーディングを知らなくても、UI経験がなくても大丈夫です。Claude、ChatGPTのようなAIツールがあなたのアイデアを現実のものにします。たった数回の質問だけでターゲット顧客を分析し、アプリの構造を設計し、さらにはUI画面まで自動で生成できます。 この講座では、Figmaを初めて触る方も、基礎から段階的にお伝えします。手描きでなくともHTML to Designプラグインで既存のウェブサイトUIを一括で取り込め、Google Stitchやreaddy.aiのようなAIツールで数秒で完成度の高い画面を作成できます。 起業を夢見る方、プランナーへの転身を考えている方、開発者とコミュニケーションを取りたい方、全ての方にぴったりの講座です。複雑な理論ではなく、すぐに使える実践的なノウハウだけを厳選してお伝えします。これからはアイデアさえあれば誰でもアプリサービスを企画できます！

Unreal UMG入門コースです。ゲーム業界11年目のUI/UXデザイナーLucyが直接進行し、簡単で楽しくUnreal EngineとUMGを学ぶことができます。修了後には様々なUIをWidget Blueprintに配置し、簡単なMaterialおよび演出とEventノードなどを制作できるようになります。

ソ・ジャヨン様、キキ様、カン・ヨンファ様がこれまでキャリアで経験した事例に基づいてセルフ成長法とソフトスキルについて話します。

HTMLで作ったカフェホームページをCSSで美しく装飾する実戦プロジェクト講義です。 色彩、レイアウト、タイポグラフィからFlexbox、Grid、アニメーション、レスポンシブデザインまでCSSのすべての基礎をミンジとコード先生のストーリーを追いながら自然に学ぶことができます。 4時間の学習で初心者もプロフェッショナルなWebデザインを完成させることができます。

✅ マーケター：今すぐコンテンツを作らなければならないのに、デザイナーがいないなら？ ✅ プレマーケター：最近フィグマ（Figma）が主流だというけれど、基礎を身につけたいなら？ ✅ 無料で使えて、最も簡単に始められるデザインツールを探しているなら？ 正解はフィグマです。 フィグマでコンテンツをデザインする方法について、すべてお教えします。 👏🏻

AI技術とUXデザインが結合するAX時代、プロダクトチームはどのような戦略で顧客体験を設計すべきでしょうか？ 17年キャリアの大企業責任研究員であり、HCI博士出身の知識共有者が最新トレンドと活用事例、研究結果に基づいてお教えします。

問題定義からリサーチの整理、アイディエーション、プロトタイピングまで！AIを実践パートナーとして活用し、完成度の高いUX/UIポートフォリオをスピーディーに作成します。最新のAIツールはもちろん、実務で使い続けられている検証済みのツールまで、プロジェクトに合わせて戦略的に活用できます。

ナノバナナ2でどこまで可能でしょうか？ 解像度、フォント、カラーなどを一つずつ一緒に実習してみます。 踏み石参照方式で、ロゴからバナー、映像まで実際のコンテンツを作ってみます。

マーベラスデザイナーは、基礎知識さえあればそれほど難しいツールではありません。私が実際に使っている基礎だけを凝縮して作った講座です。マーベラスデザイナーを初めて使う方や、久しぶりで使いかたを忘れてしまった方のための講座です。 さらなる講座は https://www.cgbump.com へお越しください！