見出し画像

いつか役に立つかもしれないStudio Tips動画まとめ（動画の作り方つき）

マナカ

これまでにXで投稿した、Studioを使ったチュートリアル的な8つの動画をまとめました。この動画たちは、これからStudioを使ってみたい初心者の方から、基礎的な実装ができるようになった中級者くらいの方向けに、いつか誰かの役に立てればいいなと思いながら作ったものです。

おまけとして、記事の最後に自己流Tips動画の作り方も載せています。よかったらぜひ、参考にしてください。

Tips動画まとめ

1. 背景色が左から変わるボタン

去年の夏に制作したポートフォリオで使った実装方法を、そのまま動画にしてみました。簡単な動きですが、背景と矢印の２つの動きが組み合わさると少し複雑な動きに見せることができます。


2. 文字ずつ出てくるタイトル

こちらもポートフォリオで使っていた動きです。<span>タグで囲うことで<h2>などに設定することが可能なのですが、1文字ずつわかれてしまうためアクセシビリティの観点では微妙です。日本語で小さいタイトルを添えるなど、タイトルタグは別途できると良さそうです。


3. 矢印が一周するアイコン

くるっと一周するアイコン。矢印を2つ斜めに並べて位置を調整し、左下の矢印を真ん中に、真ん中の矢印を右上に動かすことで回転している風に見せています。XとYの位置を調整するのが少し面倒なため、普段は複製して使い回しています。


4. マーカー風ハイライト

LPのデザインでよく見かけるハイライトも、カスタムコードで簡単に表現できます。マーカー風以外にも、点線などもできるはず。エディタ上では反映されないので、必ずプレビュー画面で確認してください。

<style>
#marker > p > strong {
text-decoration: underline;
text-decoration-thickness: 10px; /*マーカーの太さ*/
text-decoration-color: #FFEEB5; /*マーカーの色*/
text-underline-offset: -0.35em; /*マーカーの位置*/
text-decoration-skip-ink: none;
}
</style>


5. 帯のあとに表示されるテキスト

作った動画の中では1番初心者向けの動きだと思います。アニメーションで横幅0pxにするところを0%にしてしまって反応しなくなるのも初心者あるあるだと思います。お気をつけください！


6. CMSのデフォルト画像

Studioの「表示条件」機能を使った、ブログなどでのデフォルト画像の設定です。Studio初心者の方は機能に気づかず設定していない方もいるかもしれないと思い紹介してみました。条件付きスタイル、便利だけど最初は存在に気づきにくいです。


7. 画像の比率を保ったレスポンシブ

どんな比率の画像でも固定の値に設定したい、レスポンシブでも崩したくない、というときに使えるカスタムコードです。
カスタムコードを使わない場合は、比率固定用の画像①と表示させたい画像②をグループ化して、②を絶対配置にして表示順を上げるという方法もあります。

<style>
  #aspect img {
  aspect-ratio: 1 / 1;
  }
</style>


8. 回転するテキスト

実務で使ったことはないのですが、リクエストをもらったので挑戦しました。Lottieは無料のプランだと10個までという制限があり、Gifは画質が荒くなったり重くなる可能性があるため、カスタムコードは比較的ラクに使える手段になりそうです。

<style>
#rotate {
animation: rotate 15s linear infinite;
}

@keyframes
 rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>


おまけ：Tips動画の作り方

何人かに動画の作成方法について質問をいただいたので、私の作成方法をざっくりまとめました。動画制作にはあまり学習コストや作業時間をかけたくなかったので、結構適当です、、！

ネタ出し・表紙作り：Figma
背景用と表紙用の画像を作成します。最初はインスタで投稿しようと思っていましたが、ネタ切れのためすぐに諦めました。PC版のXではメディア一覧に画像が正方形に表示されるので、そこでの見栄えも地味に意識していました。

Figmaで作成した表紙たち
Xのメディア一覧

撮影：Studio＋Macの画面収録
Studioで操作しながら、Macの画面録画（Command+Shift+5）機能を使って撮影。毎回何度か取り直すので１番時間がかかります。

台本も簡単に作ります

編集：CupCat
簡単で直感的に使えるスマホアプリのCapCutを使います。

  1. キャプチャ動画と表紙・背景画像を読み込む

  2. BGMを追加

  3. 再生速度を1.6倍前後に変更

  4. テロップを入れる

  5. フェードイン・アウトを設定

  6. 完成

2本目以降は素材を差し替えるだけでOKです。
本当はカーソル部分をズームさせる編集なども試してみたかったのですが、時間の都合で見送りました。作業時間は1本30分〜1時間くらいです。

いつも使っているBGMは「ウキウキ、ワクワク、可愛い曲」という楽曲でした。いい名前…

おわりに

最後まで読んでいただきありがとうございます。
この記事を通して、みなさんも気軽にノウハウを発信してみようと思ってもらえたら嬉しいです。

そして、いつも知見を惜しみなく共有してくれる有識者の方々には頭が上がりません。Xでリアクションをしてくれたみなさんも、本当にありがとうございます。これからも誰かに役立つ情報を発信していけたらと思います。

ではまた！

いいなと思ったら応援しよう！