コアエクスペリエンス
インタラクティブな教育プラットフォーム
学習方法は人それぞれです。そのため、ライブセッション、ゲーム化されたツール、進捗状況の追跡を組み合わせて、最適な学習方法をサポートしました。
それはコンテンツ以上のものです。 これは、物事がうまくいくように設計された完全なシステムです。
ガイドするように設計されています。サポートするように構築されています。
学習を加速するツール
スマートツールと専門家主導の教育は学習プロセスにより明確になり、アイデアを探求し、複雑なテーマを理解し、自分のペースで学び続けるのに役立ちます。
インタラクティブな金融リテラシー
お金の意味を考えましょう
複雑な金融トピックを、ステップごとに探求できるものに変えましょう。インタラクティブなモジュール、ガイド付きアクティビティ、実践的な演習が、日常の金融判断の背後にある考え方を理解するのに役立ちます。
期待できること:
.step1-container {
padding-top: 20px;
max-width: 420px;
width: 100%;
height: 113px;
}
.step1-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
position: relative;
height: 40px;
}
.step1-progress-line {
width: 90%;
position: absolute;
top: 50%;
left: 4%;
right: 10%;
height: 4px;
background: rgba(255, 255, 255, 0.6);
z-index: 1;
transform: translateY(-50%);
}
.step1-progress-fill {
height: 100%;
background: linear-gradient(90deg, #169388 0%, #57D6A7 97.77%);
width: 0%;
transition: none;
border-radius: 3px;
position: relative;
}
.step1-progress-fill.animating {
transition: width linear;
}
.step1-item {
width: 24px;
height: 24px;
display: flex;
align-items: center;
position: relative;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
}
.step1-item.active {
width: 40px;
height: 40px;
}
.step1-circle {
width: 24px;
height: 24px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
color: #020617;
font-weight: bold;
font-size: 14px;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border-radius: 8px;
}
.step1-item.active .step1-circle {
background: linear-gradient(90deg, #169388 0%, #57D6A7 97.77%);
color: white;
width: 40px;
height: 40px;
border-radius: 8px;
font-size: 20px;
}
@keyframes shimmer {
0% {
transform: translateX(-20px);
}
100% {
transform: translateX(20px);
}
}
.step1-content {
text-align: left;
position: relative;
}
.step1-text {
display: none;
opacity: 0;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateY(20px);
}
.step1-text.active {
display: block;
opacity: 1;
transform: translateY(0);
}
.step1-des {
font-size: 12px;
line-height: 150%;
font-weight: 100;
font-family: "Ease Standard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #020617;
margin: 0;
}
.step1-title {
font-size: 16px;
line-height: 150%;
font-weight: 700;
font-family: "Ease Standard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #020617;
margin: 0;
}
@keyframes shimmerVertical {
0% {
transform: translateY(-20px);
}
100% {
transform: translateY(20px);
}
}
.step1-title {
font-size: 24px;
}
@media (max-width: 768px) {
.step1-title {
font-size: 16px;
}
}
class AnimatedSteps1 {
constructor(container) {
this.container = container;
this.steps = container.querySelectorAll('.step1-item');
this.stepTexts = container.querySelectorAll('.step1-text');
this.continuousProgressFill = container.querySelector('.step1-progress-fill');
this.totalSteps = this.steps.length;
this.currentStep = 0;
this.duration = 10; // 10 seconds
this.interval = null;
this.timeLeft = this.duration;
this.init();
}
init() {
this.startTimer();
}
startTimer() {
this.startProgressAnimation();
this.interval = setInterval(() => {
this.timeLeft--;
if (this.timeLeft = this.totalSteps - 1) {
// We're at the last step, reset to first step to create loop
this.resetToFirstStep();
this.timeLeft = this.duration;
setTimeout(() => this.startProgressAnimation(), 100);
} else {
// Move to next step
this.nextStep();
this.timeLeft = this.duration;
setTimeout(() => this.startProgressAnimation(), 100);
}
}
}, 1000);
}
startProgressAnimation() {
if (this.continuousProgressFill) {
// Reset progress line
this.continuousProgressFill.classList.remove('animating');
// Calculate step-to-step progress
// Show progress only up to current step, then animate to next step
const currentStepProgress = (this.currentStep / (this.totalSteps - 1)) * 100;
const nextStepProgress = ((this.currentStep + 1) / (this.totalSteps - 1)) * 100;
this.continuousProgressFill.style.width = `${currentStepProgress}%`;
this.continuousProgressFill.style.height = '100%';
// Force reflow
this.continuousProgressFill.offsetHeight;
// Start animation to next step
this.continuousProgressFill.classList.add('animating');
this.continuousProgressFill.style.transitionDuration = `${this.duration}s`;
// Only animate if we're not at the last step
if (this.currentStep {
step.classList.remove('active', 'completed');
this.stepTexts[index].classList.remove('active');
});
// Reset continuous progress line
if (this.continuousProgressFill) {
this.continuousProgressFill.classList.remove('animating');
this.continuousProgressFill.style.width = '0%';
this.continuousProgressFill.style.height = '100%';
this.continuousProgressFill.style.transitionDuration = '';
}
// Set first step as active
this.currentStep = 0;
this.steps[0].classList.add('active');
this.stepTexts[0].classList.add('active');
this.timeLeft = this.duration;
}
nextStep() {
if (this.currentStep = 0 && stepIndex {
step.classList.remove('active', 'completed');
this.stepTexts[index].classList.remove('active');
});
// Set continuous progress line based on target step
if (this.continuousProgressFill) {
this.continuousProgressFill.classList.remove('animating');
const progressPercentage = (stepIndex / (this.totalSteps - 1)) * 100;
this.continuousProgressFill.style.width = `${progressPercentage}%`;
this.continuousProgressFill.style.height = '100%';
}
// Set completed steps
for (let i = 0; i {
circle.addEventListener('click', () => {
animatedSteps.goToStep(index);
});
});
});
1
2
3
構造化モジュール
インタラクティブな活動
実用シナリオ
専門家主導の教育
この分野に詳しい人から学びましょう
理論を超えて、アイデアを具現化する教育者と共に進みましょう。ライブセッションに参加したり、ビジネス、人工知能、金融リテラシー、自己成長、マインドセットに関するオンデマンド学習も可能です。
期待できること:
.steps2-container {
padding-top: 20px;
max-width: 420px;
width: 100%;
height: 113px;
}
.steps2-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
position: relative;
height: 40px;
}
.steps2-progress-line {
width: 90%;
position: absolute;
top: 50%;
left: 4%;
right: 10%;
height: 4px;
background: rgba(255, 255, 255, 0.6);
z-index: 1;
transform: translateY(-50%);
}
.steps2-progress-fill {
height: 100%;
background: linear-gradient(90deg, #169388 0%, #57D6A7 97.77%);
width: 0%;
transition: none;
border-radius: 3px;
position: relative;
}
.steps2-progress-fill.animating {
transition: width linear;
}
.steps2-item {
width: 24px;
height: 24px;
display: flex;
align-items: center;
position: relative;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
}
.steps2-item.active {
width: 40px;
height: 40px;
}
.steps2-circle {
width: 24px;
height: 24px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
color: #020617;
font-weight: bold;
font-size: 14px;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border-radius: 8px;
}
.steps2-item.active .steps2-circle {
background: linear-gradient(90deg, #169388 0%, #57D6A7 97.77%);
color: white;
width: 40px;
height: 40px;
border-radius: 8px;
font-size: 20px;
}
@keyframes shimmer {
0% {
transform: translateX(-20px);
}
100% {
transform: translateX(20px);
}
}
.steps2-content {
text-align: left;
position: relative;
}
.steps2-text {
display: none;
opacity: 0;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateY(20px);
}
.steps2-text.active {
display: block;
opacity: 1;
transform: translateY(0);
}
.steps2-des {
font-size: 12px;
line-height: 150%;
font-weight: 100;
font-family: "Ease Standard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #020617;
margin: 0;
}
.steps2-title {
font-size: 16px;
line-height: 150%;
font-weight: 700;
font-family: "Ease Standard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #020617;
margin: 0;
}
@keyframes shimmerVertical {
0% {
transform: translateY(-20px);
}
100% {
transform: translateY(20px);
}
}
.steps2-title {
font-size: 24px;
}
@media (max-width: 768px) {
.steps2-title {
font-size: 16px;
}
}
class AnimatedSteps2 {
constructor(container) {
this.container = container;
this.steps = container.querySelectorAll('.steps2-item');
this.stepTexts = container.querySelectorAll('.steps2-text');
this.continuousProgressFill = container.querySelector('.steps2-progress-fill');
this.totalSteps = this.steps.length;
this.currentStep = 0;
this.duration = 10; // 10 seconds
this.interval = null;
this.timeLeft = this.duration;
this.init();
}
init() {
this.startTimer();
}
startTimer() {
this.startProgressAnimation();
this.interval = setInterval(() => {
this.timeLeft--;
if (this.timeLeft = this.totalSteps - 1) {
// We're at the last step, reset to first step to create loop
this.resetToFirstStep();
this.timeLeft = this.duration;
setTimeout(() => this.startProgressAnimation(), 100);
} else {
// Move to next step
this.nextStep();
this.timeLeft = this.duration;
setTimeout(() => this.startProgressAnimation(), 100);
}
}
}, 1000);
}
startProgressAnimation() {
if (this.continuousProgressFill) {
// Reset progress line
this.continuousProgressFill.classList.remove('animating');
// Calculate step-to-step progress
// Show progress only up to current step, then animate to next step
const currentStepProgress = (this.currentStep / (this.totalSteps - 1)) * 100;
const nextStepProgress = ((this.currentStep + 1) / (this.totalSteps - 1)) * 100;
this.continuousProgressFill.style.width = `${currentStepProgress}%`;
this.continuousProgressFill.style.height = '100%';
// Force reflow
this.continuousProgressFill.offsetHeight;
// Start animation to next step
this.continuousProgressFill.classList.add('animating');
this.continuousProgressFill.style.transitionDuration = `${this.duration}s`;
// Only animate if we're not at the last step
if (this.currentStep {
step.classList.remove('active', 'completed');
this.stepTexts[index].classList.remove('active');
});
// Reset continuous progress line
if (this.continuousProgressFill) {
this.continuousProgressFill.classList.remove('animating');
this.continuousProgressFill.style.width = '0%';
this.continuousProgressFill.style.height = '100%';
this.continuousProgressFill.style.transitionDuration = '';
}
// Set first step as active
this.currentStep = 0;
this.steps[0].classList.add('active');
this.stepTexts[0].classList.add('active');
this.timeLeft = this.duration;
}
nextStep() {
if (this.currentStep = 0 && stepIndex {
step.classList.remove('active', 'completed');
this.stepTexts[index].classList.remove('active');
});
// Set continuous progress line based on target step
if (this.continuousProgressFill) {
this.continuousProgressFill.classList.remove('animating');
const progressPercentage = (stepIndex / (this.totalSteps - 1)) * 100;
this.continuousProgressFill.style.width = `${progressPercentage}%`;
this.continuousProgressFill.style.height = '100%';
}
// Set completed steps
for (let i = 0; i {
circle.addEventListener('click', () => {
animatedSteps.goToStep(index);
});
});
});
1
2
3
ライブセッション
オンデマンドレッスン
多様な教科分野
AIラーニングコンパニオン
会話を続けましょう
好奇心は決まったスケジュールに従いません。質問をしたり、重要なアイデアを再検討したり、関連するトピックを探求したり、AI搭載の学習会話を通じて、いつでも学びたいときに自由に学べます。
期待できること:
.steps3-container {
padding-top: 20px;
max-width: 420px;
width: 100%;
height: 113px;
}
.steps3-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
position: relative;
height: 40px;
}
.steps3-progress-line {
width: 90%;
position: absolute;
top: 50%;
left: 4%;
right: 10%;
height: 4px;
background: rgba(255, 255, 255, 0.6);
z-index: 1;
transform: translateY(-50%);
}
.steps3-progress-fill {
height: 100%;
background: linear-gradient(90deg, #169388 0%, #57D6A7 97.77%);
width: 0%;
transition: none;
border-radius: 3px;
position: relative;
}
.steps3-progress-fill.animating {
transition: width linear;
}
.steps3-item {
width: 24px;
height: 24px;
display: flex;
align-items: center;
position: relative;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
}
.steps3-item.active {
width: 40px;
height: 40px;
}
.steps3-circle {
width: 24px;
height: 24px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
color: #020617;
font-weight: bold;
font-size: 14px;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border-radius: 8px;
}
.steps3-item.active .steps3-circle {
background: linear-gradient(90deg, #169388 0%, #57D6A7 97.77%);
color: white;
width: 40px;
height: 40px;
border-radius: 8px;
font-size: 20px;
}
@keyframes shimmer {
0% {
transform: translateX(-20px);
}
100% {
transform: translateX(20px);
}
}
.steps3-content {
text-align: left;
position: relative;
}
.steps3-text {
display: none;
opacity: 0;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateY(20px);
}
.steps3-text.active {
display: block;
opacity: 1;
transform: translateY(0);
}
.steps3-des {
font-size: 12px;
line-height: 150%;
font-weight: 100;
font-family: "Ease Standard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #020617;
margin: 0;
}
.steps3-title {
font-size: 16px;
line-height: 150%;
font-weight: 700;
font-family: "Ease Standard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: #020617;
margin: 0;
}
@keyframes shimmerVertical {
0% {
transform: translateY(-20px);
}
100% {
transform: translateY(20px);
}
}
.steps3-title {
font-size: 24px;
}
@media (max-width: 768px) {
.steps3-title {
font-size: 16px;
}
}
class AnimatedSteps3 {
constructor(container) {
this.container = container;
this.steps = container.querySelectorAll('.steps3-item');
this.stepTexts = container.querySelectorAll('.steps3-text');
this.continuousProgressFill = container.querySelector('.steps3-progress-fill');
this.totalSteps = this.steps.length;
this.currentStep = 0;
this.duration = 10; // 10 seconds
this.interval = null;
this.timeLeft = this.duration;
this.init();
}
init() {
this.startTimer();
}
startTimer() {
this.startProgressAnimation();
this.interval = setInterval(() => {
this.timeLeft--;
if (this.timeLeft = this.totalSteps - 1) {
// We're at the last step, reset to first step to create loop
this.resetToFirstStep();
this.timeLeft = this.duration;
setTimeout(() => this.startProgressAnimation(), 100);
} else {
// Move to next step
this.nextStep();
this.timeLeft = this.duration;
setTimeout(() => this.startProgressAnimation(), 100);
}
}
}, 1000);
}
startProgressAnimation() {
if (this.continuousProgressFill) {
// Reset progress line
this.continuousProgressFill.classList.remove('animating');
// Calculate step-to-step progress
// Show progress only up to current step, then animate to next step
const currentStepProgress = (this.currentStep / (this.totalSteps - 1)) * 100;
const nextStepProgress = ((this.currentStep + 1) / (this.totalSteps - 1)) * 100;
this.continuousProgressFill.style.width = `${currentStepProgress}%`;
this.continuousProgressFill.style.height = '100%';
// Force reflow
this.continuousProgressFill.offsetHeight;
// Start animation to next step
this.continuousProgressFill.classList.add('animating');
this.continuousProgressFill.style.transitionDuration = `${this.duration}s`;
// Only animate if we're not at the last step
if (this.currentStep {
step.classList.remove('active', 'completed');
this.stepTexts[index].classList.remove('active');
});
// Reset continuous progress line
if (this.continuousProgressFill) {
this.continuousProgressFill.classList.remove('animating');
this.continuousProgressFill.style.width = '0%';
this.continuousProgressFill.style.height = '100%';
this.continuousProgressFill.style.transitionDuration = '';
}
// Set first step as active
this.currentStep = 0;
this.steps[0].classList.add('active');
this.stepTexts[0].classList.add('active');
this.timeLeft = this.duration;
}
nextStep() {
if (this.currentStep = 0 && stepIndex {
step.classList.remove('active', 'completed');
this.stepTexts[index].classList.remove('active');
});
// Set continuous progress line based on target step
if (this.continuousProgressFill) {
this.continuousProgressFill.classList.remove('animating');
const progressPercentage = (stepIndex / (this.totalSteps - 1)) * 100;
this.continuousProgressFill.style.width = `${progressPercentage}%`;
this.continuousProgressFill.style.height = '100%';
}
// Set completed steps
for (let i = 0; i {
circle.addEventListener('click', () => {
animatedSteps.goToStep(index);
});
});
});
1
2
3
会話学習
明確な説明
トピック探求
免責事項
BEの製品は教育コンテンツと学習ツールのみを提供しています。財務的、投資的、専門的なアドバイスは提供せず、特定の学習や財務成果が保証されるものではありません。コンテンツや機能はサブスクリプションによって異なります。
それを学ぶ
ムーブズウィズ・ユー
必要なときには常にサポートがあり、成長の余地があります。
BEクラブ製品に関するよくある質問
BE(BE Club)はどのような商品を提供していますか?
BE(BE Club)は、インタラクティブな金融リテラシー、専門家主導教育、AI学習補助の3つのEdTech製品を提供しています。
BE(BE Club)インタラクティブ金融リテラシーとは何ですか?
これは、構造化されたモジュール、ガイド付きアクティビティ、実践的な演習を用いて、金融の概念をより深く探求し理解しやすくするデジタル学習体験です。
BE(BE)クラブの専門家主導教育とは何ですか?
ビジネス、人工知能、金融リテラシー、自己啓発、マインドセットなどの教育者が主導するライブセッションとオンデマンドレッスンを組み合わせています。
BE (BE Club) AI学習コンパニオンとは何ですか?
これはAI搭載の学習ツールで、ユーザーが質問をしたり、重要なアイデアを再訪したり、会話を通じて関連するトピックを探求したりできます。
BE(BE Club)でどんな科目を学べますか?
利用可能な科目には、ビジネス、人工知能、金融リテラシー、自己成長、マインドセットが含まれます。内容はサブスクリプションによって異なります。
BE(BE Club)製品は初心者に適していますか?
これらの製品は異なる経験レベル向けに設計されており、基礎的なトピックから自分のペースで進められるガイド付きコンテンツを備えています。
BE(BE Club)はライブ学習やオンデマンド学習を提供していますか?
はい。利用可能な学習形式には、ライブ教育者セッションやオンデマンドレッスンが含まれます。スケジュール、科目、利用可能時間はサブスクリプションによって異なります。
BE (BE Club)の製品にはどうアクセスできますか?
BE(BE Club)製品はサブスクリプションプランを通じてデジタル配信されます。アクセスの詳細は、選択したサブスクリプションが有効化された後に提供されます。
BE(BE Club)サブスクリプションには何が含まれていますか?
各サブスクリプションは、選ばれた製品、コンテンツ、機能へのアクセスを提供します。プランの詳細は、サブスクリプションや地域によって異なるため、よく確認してください。
BE(BE Club)の商品はいくらですか?
料金は選択したサブスクリプションや地域によって異なります。現在利用可能なオプションを比較するには、価格ページをご覧ください。
BE(BE Club)製品の返金はできますか?
対象となる購入は、居住地や適用される条件により7日または14日以内に返金対象となる場合があります。購入前に返金ポリシーを必ずご確認ください。
BE (BE Club) AI学習コンパニオンの回答を信頼できますか?
AIラーニングコンパニオンは学習を支援するために設計されていますが、AI生成の回答は不完全または不正確である場合があります。重要な情報は常に独立して検証されるべきです
免責事項
BE(BE Club)製品は教育目的のみを目的として提供されており、金融、投資、法的、税務に関する助言を構成するものではありません。AI生成コンテンツは不完全または不正確である可能性があり、独立して検証する必要があります。特定の学習、専門的または財務的な成果を保証するものではありません。