Making of “Kindolphin” | 麦 Baku
group_inou / HAPPENING group_inouとAC部のミュージックビデオ作品『HAPPENING』をWebアプリ化しました。デザインと実装は僕一人です。元のビデオがGIFアニメ縦長漫画が歌詞に合わせて自動スクロールする仕様だったので、GIFの質感をロスレスかつ自分のペースで楽しめるように、某電子書籍アプリのような体裁でインタラクションできるようにした次第です。 We have just released a Webtoon app that highlights the lyrics of group_inou's music video "HAPPENING". You can switch between Japanese/English, change colors, stop and have a close look, or just scratch and
かきかたプリントメーカーに「書き順アニメーション」という機能を実装した。 これを作る際に使ったテクニックを紹介する。スクリプトは不要。純粋なSVGだけで次ようなアニメーションが作れる。 (2021/06/16追記 : アニメーションSVGの貼り過ぎでスマホだとめちゃくちゃ重かったり表示されなかったり遅延が発生したりします。すみません。) SVGに「線を途中まで書く」という機能自体はない。そこでちょっと工夫が必要になる。 テクニックの概要はこんな感じだ。 「ものすごく荒い破線で線を表示し、破線のオフセットがちょっとずつ変化するようにする」 ステップ0 : 破線を使って「書きかけの線」を作る こちらはベジエ曲線1本で作った「の」である。 ソリッドな線で表示される。SVGのソースはこんな感じだ。 <?xml version="1.0" encoding="UTF-8" standalone="n
ブックマークコメント返信専用記事～２０２１・９月前半～ - げんこつやま/頑固なグルメやオタク記事など、雑多な内容をオリキャラ茶番で好き勝手語るブログ
どーもです。ホオズキとビワでお届け致します。 当ブログへのブックマークコメントに対する返信専用の記事です。温かいコメントいつも本当にありがとうございます！ ・ブックマークコメント返信について ・ＩＤコールについて ・Twitterお絵描記・その２２【アニメーションスペシャル！】 ・ミニミニ食の二択！ ・なんでもランキング「好きな科目と嫌いな科目」 ・「ヨーロッパ・もろもろの食べ物」ランキング・マイベスト１０ ・ドラゴンクエスト～ダイの大冒険～２０２０アニメ第４７話「いざ決戦の地へ」感想 ・雑記集リベンジ！【ブログスランプについて/今週のお題「わたしの好きな色」 /ホオズキ、ビワ、全身を公開/アケビについて…etc】 ・別館セレクション【中田翔選手のトレード移籍とそれに関するあ～だこ～だの反応に思うこと/へずまりゅうへの凸被害に思ったこと/綾瀬はるかさんの入院のアレコレに思ったこと】 ・「謎
漢字検定対策本 『漢検４級をひとつひとつわかりやすく』の特徴・活用方法 小中学生向けの本でかわいいイラストがある！ 見開き1ページずつシンプルにすすめていける いつから始めるのか？学習期間は？ 小学生が取り組んで困った点 『漢検４級分野別問題集』の特徴・活用方法 苦手な分野だけ取り組める！時間の節約に 「漢検おもしろゼミ」のお話とイラストに引き込まれる 巻末資料が優れている 『漢検４級過去問題集』の特徴・活用方法 たっぷり13回分！過去問をたくさん解くのが一番の近道 問題部分は拡大コピーすると本番に近くなり取り組みやすい 答案用紙実物大見本付き！縮小せずA4サイズにコピーする方法は？ 充実した中学漢字ポスターがない！ 対策本を使って漢字ポスターを作る 漢字検定対策アプリ 準２級はどうする？どの級までにする？ 漢字検定５級（小６レベル）を超えると、小学生はなかなか勉強しにくくないですか？ s
21年9月反省記＆21年10月度目標 - げんこつやま/頑固なグルメやオタク記事など、雑多な内容をオリキャラ茶番で好き勝手語るブログ
どーもです。ホオズキとビワでお届け致します。 ダメダメダメダメ！！！！！ ・前置き（21年９月反省記） ・今月の記事（９月） ・出番分析（９月） ・印象的な記事（９月） ・カテゴリー、その他の結果（９月）＆次月目標（１０月） ダメダメダメダメ！！！！！ ・前置き（21年９月反省記） 今月はもうなんかもうダメダメのグダグダでしてん・・・。 うむ、聞き飽きた。ボク以上に恐らく読者様が。こんなくそ記事シリーズでも毎度ブコメとか下さる読者様もいるんだぜ？生きてて恥ずかしくないの？ えろうスンマセン・・・。まぁ詳しくは後で・・・。 ・・・先月のはこちらね。まあ誰も読まんとは思いますが。 21年8月反省記＆21年9月度目標 ▲先頭へ ・今月の記事（９月） まずは今月の記事、担当キャラです。書き方は各キャラの頭文字です！ （ホ：ホオズキ、ビ：ビワ、テ：テルマ、ラ：ラリドラ、ア：アケビ、Ｃ：ＣＪ、ノ：ノブ
多くの人が一年で最初に取り組む宿題、書き初め。 書初めは一般的には1月2日に行うようですね。 今日は書初めを上達させるコツや美文字のコツをまとめていきます。 書き順を知ろう 字を書くとき、何より大事なものは書き順です。 まずは書き順を調べましょう。 ↓書き順を調べる際に私がよく見るサイトです 漢字の正しい書き順(筆順) 漢字の正しい書き順(筆順) スマートフォン版 このサイトで調べるとアニメーションで書き順を見ることができるので、実際自分が書いているようにイメージすることができます。 またフォントが毛筆ですので、”とめ”、”はらい”などを確認できます。 書き順は毛筆で字を書くために理想的な運筆ができるようできています。 書体によって書き順が違うこともありますので良くチェックしておきましょう。 きれいな字の真似をする きれいな字を書くため色々調べると、味のある文字の書き方なども出てきます。
人気漫画「鬼滅の刃」を原作にしたアニメーション映画が記録的なヒットとなる中、宮城県塩釜市の公式ホームページが意外な形で注目され、閲覧する人が急増しています。 塩釜市の「がま」の字は、「父」の下に「金」と書くようなごはんを炊く「かま」を意味する「釜」の字が、画数が少なく書きやすいことから多く使われています。 しかし、地名の由来からすると海水を煮て塩をつくる「かまど」を意味する画数の多い「竈」の字が本来の表記だということで、市は公文書などでは画数の多いほうの字を使っています。 塩釜市では、21画あるこの字を多くの人に知ってもらおうと、20年以上前からホームページで書き順などを紹介しています。 このページのアクセスはこれまで1日50件ほどでしたが、「鬼滅の刃」の映画が公開された先月中旬からはアクセス数が4倍に増えているということです。 実は、「竈」の字は、「鬼滅の刃」の主人公、竈門炭治郎の名前の
こんにちは。エンジニアのJackieです。 最近Webでよく見られるSVGのアニメーションが簡単に作れるライブラリー「Vivus.js」を紹介したいと思います。 Vivus.jsは簡単にSVG要素をアニメーション化できる軽量のJavaScriptライブラリーです。SVG画像のパスを、一つひとつの線が描いているようなアニメーションが作れるので、手書きな筆記体や複雑なラインアート・線画アニメーションには適していて、かなり手間を減らしてタイトなスケジュールがあった場合には役立ちます。 では手順を確認しましょう。 SVGを用意する。 アニメーションさせたいSVGを用意しましょう。SVG自体はいくつかの条件があります： 要素がStroke属性があることです。Fill属性は使わないです。 例：fill: "none"; stroke: "#FFF";隠れているパス要素、見えない要素をSVGに入っていな
カリグラフィーに使われる代表的な欧文書体の解説「カリグラフィー・ブック 増補改訂版：デザイン・アート・クラフトに生かす手書き文字」 - ゲームアプリのUIデザイン
こんにちは、ちょこです！ 今回、私が購入した書籍の中からゲームUIデザイナーさん向けに紹介する書籍はこちらです！ 「カリグラフィー・ブック 増補改訂版：デザイン・アート・クラフトに生かす手書き文字」 感想としてはざっくり以下です。 読み物として読むのが良いかも 歴史を知ってデザインに活かす 代表的な書体の特徴が細かく説明されている 参考文献 それではそれぞれの詳細を記載します。 読み物として読むのが良いかも 購入したのは数年前ですが、当時文字のアウトラインを加工する際に、書体の構造や成り立ちを知らないとデザインがうまくまとめにくいと感じることがあり、購入しました。カリグラフィーの教本として書かれているため、組版などの活版、DTP周りの記載はありません。 そのため、ゲームUIデザイナーとしては、技術的なハイツー本よりも読み物として読むのが丁度良いのかもしれません。 歴史を知ってデザインに活か
１．くそあぷり について くだらなくて たのしい あぷりを、おとなの ひとたちは、「くそあぷり」と いっています。 でも、よいこのみなさんは、くそ、なんていっちゃだめだよ。 みなさんは、「うんこあぷり」って、よびましょうね！ このきじは クソアプリ うんこあぷり Advent Calendar 2022 14日目 （カレンダー２）のやつです。 ２．うるさいえほん をつくってみよう さて、そんな うんこあぷり の すごいやつ うるさいえほん （ ← くりっく してね！）の しょうかい だよ！ （みんなの すごい さくひんを はやく みたい ひとは ５．にすすんで ください。） ３．こえを いれて みよう ４．ほぞん しよう。 ５．みんなの さくひんを みてみよう ここで はんのう しなくなったときは したの「ひじょうぐち」 をおして「はっぴょう」から やりなおして ください。（すみません、
See the Pen SVG Animation by Yukino Watanabe (@yukino0on) on CodePen. おっしゃれー！！！！ やってみたくなったでしょ。 わかってしまえば簡単にできるのですが、検索してもなかなか難しかったので共有致します。 用意するもの Illustratorなどのベクター画像が作れるものHTMLエディタ 私はBracketsを使ってます。AtomとかなんでもOK 仕組み A：表示したいイラストやロゴの“ベースSVG”と B：アニメーションの動きをつける“マスクSVG” という2枚の画像を重ねて、 Aを、Bで隠している状態から、Bが書き順に沿って動くことで あたかも手書きで書いているかのように見せられるものです。 ・・・おっと、じゃあBだけでええやん と思った方。 そうです。パスだけならBだけ使えばいいんですが、 この動きのベースになって
![[ビデオ解説付] CSSとSVGで手書き風のアニメーションを作る方法 | Linksbase](https://cdn-ak-scissors.b.st-hatena.com/image/square/87aaf8cc5446e03c34297c09a6d03276135d0933/height=288;version=1;width=512/https%3A%2F%2Flinksbase.net%2Fnew%2Fwp-content%2Fuploads%2Fheading.gif)
黒板、紙の教科書、ランドセル…ずっと続いてきた日本の教育風景が、変わりつつあります。教育（エデュケーション）分野に、IT技術（テクノロジー）を活用しようという取り組みを示す概念、「エドテック」。デジタル教科書、タブレット端末の導入によって、教育現場はどのように変容していくのでしょうか。本連載は、難関資格受験予備校フォーサイトの代表取締役・山田浩司氏の著書『EdTech エドテック』（幻冬舎MC）より一部を抜粋し、解説します。 デジタル機器の導入で「教育現場」はどう変わったのか 昨今の教育現場では、デジタル教科書、電子黒板、タブレット端末といったICT機器（Information and Communication Technology：情報通信技術）を公教育に導入しようとの動きが進んでいます。 例えば、タブレット端末に格納されたデジタル教科書を使えば、すべての教科書、参考書、ドリルを1台の
兎田ぺこら【エピソード集】 - ホロライブ非公式wiki
ホロライブ非公式wiki ホロライブプロダクション運営のVTuberグループ「ホロライブJP/ID(インドネシア)/EN(English)」および「hololive DEV_IS」についての非公式wiki トップページページ一覧メンバー掲示板編集 兎田ぺこら【エピソード集】 最終更新： angelic_kitten 2024年04月26日(金) 19:44:59履歴 Tweet Top > 3期生 > 兎田ぺこら > 兎田ぺこら【エピソード集】 さくらみこが関わるものはぺこみこのエピソード項にて 常闇トワ,獅白ぼたんが関わるものはPEBOTのエピソード項にて 宝鐘マリンが関わるものはぺこマリのエピソード項にて エピソード集 人見知り、コミュ障集 苦手克服集 幼少期〜学生時代ネタ 配信関連(記念配信) 配信関連(ゲーム) 配信関連(企画配信) 配信関連(その他) 不正集 のーみそ集（おバカ集
X(Twitter)用、せりふに合わせた口パク動画の作り方：9VAeきゅうべえ - dnjiro’s 9VAe blog
せりふに合わせて口パクする動画を作る方法を説明します。作業時間は１０分ぐらいです。X(Twitter)用動画、歌詞動画作成に便利。自作キャラクタを口パクさせる方法はこちら。イラストを動かす方法はこちら。歌詞動画の例。音声合成はこちら Youtubeで解説をみる。 他のアニメの作り方はこちら。 9VAeの質問はこちら。 内容：１０分程度 「１.」で書き順アニメの準備（１） せりふの文章をいれる（２） 吹き出しをいれる（３） 9VAeにSVGキャラクタを読み込む（４、５） 口パクをつける（６） アニメGIF出力（７） Twitterに投稿（８） ■ 9VAeきゅうべえのダウンロード Android / Chromebook：9VAeきゅうべえAndroid版、9VAeDangla iPad / iPhone：9VAeDanga (Apple)、9VAePro (Apple) Win / Mac
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVGで「文字を書いていくアニメーション」を作る – コーヒーサーバは香炉である
【漢検3級・4級】（中学レベル）の小学生向け楽しい教材と楽な学習方法は？ - 知らなかった！日記
【字をキレイに書くコツ】書き初めで美文字を目指そう！ - まなびのチカラを上げるブログ
「鬼滅の刃」効果で注目集める 宮城 “塩竈”の公式HP | エンタメ | NHKニュース
Vivus.jsで絵描き風のSVGアニメーションをする | 株式会社 エヴォワークス -EVOWORX-
「うるさいえほん」をつくる、うんこあぷり - Qiita
[ビデオ解説付] CSSとSVGで手書き風のアニメーションを作る方法 | Linksbase
チョークの粉は出ないが…「電子黒板」が浸透しない根本的原因 | ゴールドオンライン