STACK LEARN
クリエイティブを、作りながら学ぶ
Web制作、動画編集、デザイン、アニメーションなど、制作に役立つ知識を連載形式で分かりやすく解説します。
ABOUT LEARN
このサイトで、ひとつ学んで帰る
STACK LEARNは、Web制作、動画編集、デザイン、アニメーションなどを、作例と手順で学べる実践記事です。
気になるテーマから読み進め、サンプルデータも活用しながら、ひとつずつ制作の知識を身につけられます。
ARTICLES
公開中の記事
Web制作から作品づくりまで、実例を通して考え方と作り方を紹介します。
CREATIVE / DESIGN / THINKING
クリエイティブ基礎 第3回｜思いつきを、作品のアイデアに変える方法
45年使い続けた万年筆を例に、思いつきからテーマとコンセプトを考え、短い映像作品にするまでを紹介します。
READ ARTICLE →
AI / VIDEO / CREATIVE
生成AIと作品づくり 第1回｜写真の葉を、生成AIで5秒だけ動かしてみた
iPhoneで撮影した写真をAdobe Fireflyで動画に。設定とプロンプト、生成結果を紹介します。
READ ARTICLE →
CREATIVE / DESIGN / THINKING
クリエイティブ基礎 第2回｜誰に伝えるかで、作品の方向は変わる
届けたい相手を考える3つの質問を通して、ターゲットから表現を選ぶ方法を解説します。
READ ARTICLE →
CREATIVE / DESIGN / THINKING
クリエイティブ基礎 第1回｜作品づくりを迷わないための、テーマとコンセプト
テーマとコンセプトの違いを知り、4つの質問からアイデアを具体的な表現へつなげる方法を解説します。
READ ARTICLE →
WEB / HTML / CSS / VIDEO
第5回｜Webサイトで使うHero背景動画の作り方と軽量化
Hero背景動画に適した素材、H.264での書き出し、ビットレート調整、poster画像、公開前確認までを解説します。
READ ARTICLE →
WEB / HTML / CSS / VIDEO
第4回｜Hero背景動画をスマートフォンに対応させる方法
メディアクエリを使い、Heroの高さ、文字サイズ、改行、余白、動画の表示位置をスマートフォン向けに調整します。
READ ARTICLE →
WEB / HTML / CSS / VIDEO
第3回｜背景動画の上にタイトルを重ねて表示する方法
positionとz-indexを使い、Hero背景動画の上にタイトル、説明文、リンクボタンを重ねて表示する方法を解説します。
READ ARTICLE →
WEB / HTML / CSS / VIDEO
第2回｜CSSで動画を画面いっぱいに表示する方法
100vhとobject-fit: coverを使い、動画の縦横比を保ちながら画面いっぱいのHero背景として表示する方法を解説します。
READ ARTICLE →
WEB / HTML / VIDEO
第1回｜HTMLのvideoタグで動画を表示する方法
videoタグとsourceタグを使ってMP4動画を配置し、自動再生、繰り返し再生、スマートフォンでのページ内再生を設定する方法を解説します。
READ ARTICLE →