<h1 id="runcat-%E3%81%A8%E3%81%AF">
<a class="header-anchor-link" href="#runcat-%E3%81%A8%E3%81%AF" aria-hidden="true"></a> RunCat とは</h1>
<p>Macのメニューバーでネコを飼えるアプリです。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/b5779fcca4b9-20231215.gif" alt="ネコがメニューバーを走る様子" width="600" loading="lazy" class="md-img"><br>
<em>ネコがメニューバーを走る様子</em></p>
<p>ネコは走るスピードでMacのCPU使用率を教えてくれます。</p>
<p>公式サイトにわかりやすい説明が載っています。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__eb95bf594fb36" src="https://embed.zenn.studio/card#zenn-embedded__eb95bf594fb36" data-content="https%3A%2F%2Fkyome.io%2Fruncat%2Findex.html" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://kyome.io/runcat/index.html" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://kyome.io/runcat/index.html</a></p>
<h1 id="%E8%87%AA%E4%BD%9C%E3%83%A9%E3%83%B3%E3%83%8A%E3%83%BC%E3%82%92%E4%BD%9C%E3%82%8D%E3%81%86">
<a class="header-anchor-link" href="#%E8%87%AA%E4%BD%9C%E3%83%A9%E3%83%B3%E3%83%8A%E3%83%BC%E3%82%92%E4%BD%9C%E3%82%8D%E3%81%86" aria-hidden="true"></a> 自作ランナーを作ろう</h1>
<p>これには、自作ランナー登録機能があり、PNG画像を複数フレーム作成し登録することで、アニメーションとして動かすことができます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/532be7bdd5e9-20231215.png" alt="自作ランナー登録機能" width="600" loading="lazy" class="md-img"><br>
<em>自作ランナー登録機能の紹介<sup class="footnote-ref"><a href="#fn-567d-1" id="fnref-567d-1">[1]</a></sup></em></p>
<p>私も何かアニメーションさせたくなったので、フクロウのアイコンを使っているので、フクロウをモチーフにして、自作ランナーを作ってみました。</p>
<h1 id="%E5%AE%8C%E6%88%90%E3%81%97%E3%81%9F%E3%81%AE%E3%81%8C%E3%81%93%E3%81%A1%E3%82%89">
<a class="header-anchor-link" href="#%E5%AE%8C%E6%88%90%E3%81%97%E3%81%9F%E3%81%AE%E3%81%8C%E3%81%93%E3%81%A1%E3%82%89" aria-hidden="true"></a> 完成したのがこちら</h1>
<p><img src="https://storage.googleapis.com/zenn-user-upload/5691a8bafab7-20231215.gif" alt="首が回るフクロウの自作ランナー（CPU負荷小）" loading="lazy" class="md-img"><br>
<em>首が回るフクロウの自作ランナー（CPU負荷小）</em></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/f0e4f4cef1d0-20231215.gif" alt="首が回るフクロウの自作ランナー（CPU負荷大）" loading="lazy" class="md-img"><br>
<em>首が回るフクロウの自作ランナー（CPU負荷大）</em></p>
<p>CPU負荷が高まると、ニヤリとしながら作業をしています。<br>
たまにフクロウに釣られて首を回すストレッチをしています。</p>
<h1 id="%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9">
<a class="header-anchor-link" href="#%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9" aria-hidden="true"></a> アニメーションの作り方</h1>
<p>ここからは、このフクロウのアニメーションの作り方を軽く紹介します。<br>
最終的には、以下の条件を満たすPNG画像を複数枚作ればいいので、ツールとしてはペイントツールでもなんでもよいです。</p>
<ul>
<li>画像フォーマット：PNG</li>
<li>高さ：36px</li>
<li>幅：10~100px</li>
</ul>
<p>枚数的には枚数（フレーム数という方がいい？）が多いほど、滑らかに動くので、デザインとこだわり具合次第です。<br>
私のフクロウの場合は、8フレームじゃ物足りなかったので、16フレーム分画像を作成しました。</p>
<p>私はツールとしては、「Procreate for iPad」を元々購入していたので、そちらを使用しました。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__c01932de811a5" src="https://embed.zenn.studio/card#zenn-embedded__c01932de811a5" data-content="https%3A%2F%2Fprocreate.com%2Fjp%2Fipad" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://procreate.com/jp/ipad" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://procreate.com/jp/ipad</a></p>
<p>アーティスト御用達と書いてあり恐れ多いですが、臆せず描いていきましょう。</p>
<h2 id="%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">
<a class="header-anchor-link" href="#%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> サイズについて</h2>
<p>新規キャンバスで作成するとき、サイズをどうするかですが、私は答えを持っていません😇プロに聞きたい。<br>
大きいピクセル数で描くと、最終的に「高さ：36px」に落としたときに思ったのと違う絵になるかもしれませんし、逆に最初から「高さ：36px」で描くと、ドット絵に近くなり、これはこれで難しさがあります。</p>
<p>私は大きいピクセル数で先に描いて失敗したので、2回目は「高さ：36px、幅：100px」でサイズを設定して描き始めました（幅は完成後にカットして調整）。</p>
<h4 id="%E5%A4%B1%E6%95%97%E4%BE%8B%EF%BC%88%E9%AB%98%E3%81%95360px%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%81%A8%E3%81%8D%EF%BC%89">
<a class="header-anchor-link" href="#%E5%A4%B1%E6%95%97%E4%BE%8B%EF%BC%88%E9%AB%98%E3%81%95360px%E3%81%A7%E4%BD%9C%E6%88%90%E3%81%97%E3%81%9F%E3%81%A8%E3%81%8D%EF%BC%89" aria-hidden="true"></a> 失敗例（高さ360pxで作成したとき）</h4>
<p>最初はかわいらしいスタイルでフクロウを描きました。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/38790f6a6701-20231215.gif" alt="供養" width="200" loading="lazy" class="md-img"><br>
<em>これが...</em></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/bdabde470dc9-20231215.gif" alt="小さすぎて見えないフクロウ" width="150" loading="lazy" class="md-img"><br>
<em>こうなる😇</em></p>
<p>うん、見えない。<br>
これを教訓に、2回目は最初から「高さ：36px」で描いてみました。</p>
<h2 id="procreate-%E3%81%AE%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%A2%E3%82%B7%E3%82%B9%E3%83%88%E6%A9%9F%E8%83%BD%E3%82%92%E4%BD%BF%E3%81%86">
<a class="header-anchor-link" href="#procreate-%E3%81%AE%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%A2%E3%82%B7%E3%82%B9%E3%83%88%E6%A9%9F%E8%83%BD%E3%82%92%E4%BD%BF%E3%81%86" aria-hidden="true"></a> Procreate のアニメーションアシスト機能を使う</h2>
<p>さて、アニメーションアシスト機能の使い方ですが、画像左側にあるような「アニメーションアシスト」のトグルをオンすると、画像の下方にシートが現れます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/1b1c0812cae0-20231215.png" alt="アニメーションアシスト" loading="lazy" class="md-img"><br>
<em>アニメーションアシスト機能をオンにしたときの様子</em></p>
<p>（あら、なぜか右下隅でSiriが起動してますが、全然関係ないです）</p>
<p>画像の下方のシートの右側にある「フレームを追加」ボタンを選択すると、フレームが追加されていきます。<br>
Procreateを使っている人にとっては、実態としてはいつもの「レイヤー」が増えるだけです。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/c8b84ca1756e-20231215.png" alt="複数のフレームを追加したあと" loading="lazy" class="md-img"></p>
<p>設定次第で、前のフレームを透かして表示するかが設定できたりします（オニオンスキンと呼ぶらしい）。この機能のおかげで、アニメーションが描きやすい！</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/b09eb3f44625-20231215.png" alt="設定" loading="lazy" class="md-img"></p>
<p>画像の下方のシートの左側にある「再生」ボタンを選択すると、アニメーションが再生されます。<br>
もうそろそろきもちわるいですね。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/407cdbb1eb6f-20231215.gif" alt="再生した様子" loading="lazy" class="md-img"></p>
<h2 id="png%E7%94%BB%E5%83%8F%E3%81%AE%E5%87%BA%E5%8A%9B">
<a class="header-anchor-link" href="#png%E7%94%BB%E5%83%8F%E3%81%AE%E5%87%BA%E5%8A%9B" aria-hidden="true"></a> PNG画像の出力</h2>
<p>できあがったら、各フレームをPNG画像として出力します。<br>
が、Procreateの出力機能（「共有」ボタンから可能）には、「アニメーションGIF」や「アニメーションPNG」はあるのですが、これらは、1ファイルとしてしか出力されないので、RunCatにそのまま登録することはできませんでした。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/1c40bc386e43-20231215.jpeg" alt="共有できるイメージフォーマット" width="300" loading="lazy" class="md-img"><br>
<em>共有できるイメージフォーマット</em></p>
<p>そのため、多少手間ですが、アニメーションの各フレームを１つ１つドラッグ＆ドロップでFinderにコピペします。Macのユニバーサルコントロール機能を使うといいでしょう。<br>
ひたすら16回（フレーム数分）ドラッグ＆ドロップを繰り返しました。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__41fcf6d4e0dd4" src="https://embed.zenn.studio/card#zenn-embedded__41fcf6d4e0dd4" data-content="https%3A%2F%2Fsupport.apple.com%2Fja-jp%2FHT212757" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://support.apple.com/ja-jp/HT212757" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://support.apple.com/ja-jp/HT212757</a></p>
<h1 id="%E8%87%AA%E4%BD%9C%E3%83%A9%E3%83%B3%E3%83%8A%E3%83%BC%E3%81%AE%E7%99%BB%E9%8C%B2">
<a class="header-anchor-link" href="#%E8%87%AA%E4%BD%9C%E3%83%A9%E3%83%B3%E3%83%8A%E3%83%BC%E3%81%AE%E7%99%BB%E9%8C%B2" aria-hidden="true"></a> 自作ランナーの登録</h1>
<p>あとはこのフレームをRunCatに登録するだけです。</p>
<p>メニューバーから[自作ランナー]を選択し、必要事項を入力して、フレームを追加します。<br>
フレームはFinderから全選択して一気に追加できるようです。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/9b3e27161554-20231215.png" alt="メニューバーからアプリのメニューを開く" width="200" loading="lazy" class="md-img"><br>
<em>メニューバーからアプリのメニューを開いた様子</em></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/c83599159596-20231215.png" alt="自作ランナー登録画面" loading="lazy" class="md-img"><br>
<em>自作ランナー登録画面</em></p>
<p>以上で登録完了です。お疲れさまでした。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/f0e4f4cef1d0-20231215.gif" alt="再掲:首が回るフクロウの自作ランナー（CPU負荷大）" loading="lazy" class="md-img"></p>
<h1 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h1>
<p>自作ランナーを使い始めて1日も経つと、こんなイラストでも親しみが湧いてきて面白いです。<br>
これをきっかけに他のアニメーションも描いてみたいと思いました。</p>
<h2 id="%E3%81%8A%E3%81%BE%E3%81%91">
<a class="header-anchor-link" href="#%E3%81%8A%E3%81%BE%E3%81%91" aria-hidden="true"></a> おまけ</h2>
<p>また、Procreateでアニメーションを描いてみたい方は、「Procreate アニメーションアシスト」で検索して出てくる動画を見ていくと、イメージが湧きやすいです。<br>
とはいえ、人によっては実際にツールを使ってみるのが一番早いのかもしれません。</p>
<section class="footnotes">
<span class="footnotes-title">脚注</span>
<ol class="footnotes-list">
<li id="fn-567d-1" class="footnote-item">
<p><a href="https://kyome.io/runcat/index.html" target="_blank" rel="nofollow noopener noreferrer">https://kyome.io/runcat/index.html</a> <a href="#fnref-567d-1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>


「RunCat」の自作ランナーをMacのメニューバーで動かしてみた

Procreate のアニメーションアシスト機能を使う

Kyome

みはるん

<p>ランナーを自作する際は、解像度を高さ72pxで作っておいて、36pxに縮めるのがおすすめです。ちょうどいい感じにアンチエイリアスがかかる印象があります。（デフォルメされているキャラクターなどの場合は最初から36pxの方がいいです。）</p>
<p>また、macOSのPreview.appはGIFやAPNGの各フレームを分解して閲覧可能なので、全選択してPNGとして出力することができると思います。その場合、オリジナルのファイルはAPNGがいいと思います。GIFだと色数が少ないため汚くなっちゃいます。</p>


<p>Kyome さま！コメントありがとうございます！<br>
めちゃくちゃ助かります...！次回はぜひそのように作ってみます🙌</p>


Discussion