Web制作学習コンテンツを提供されている「２週間で学べるコーディング基礎講座」のランディングページのコーディングを担当させていただきました。

こだわりポイント

デザインを『活かす』アニメーション

今回のプロジェクトでは、デザインに細かなアニメーション指示はなく「基本的には自由で付けてほしい」というご依頼をいただきました。
全体的なデザインがポップな印象で、デザイナー向けのコーディング教材ということもあり、敷居を低くして楽しそうな演出でコンセプトを魅せることを心がけました！

学校の授業スタイルのような展開で進められていく動画教材なので、鉛筆で書いているようなアニメーションや黒板に文字が左から右へ出現するアニメーションなどコンセプトに合わせたアニメーションを制作し、教材としての親しみやすさを表現しています。

視線誘導も意識したアニメーション設計により、ユーザーが自然に次のコンテンツへと導かれるよう工夫しました。さらに、学習教材としての特性を活かし、スピード感も大切にすることで、飽きさせない演出を心がけています。

Shopify × Liquidでの柔軟な実装

技術面では、全セクションをShopifyのセクション機能で構築することで、高い拡張性と運用性を実現しました。管理画面から動画や画像の差し替えが簡単に行えるスキーマ設定を組み込み、クライアント様が運用しやすい設計に実装しています。

Liquidテンプレートの特性を最大限活用し、コンテンツの更新や変更が直感的に行えるよう配慮しました。