Figmaで試した時より実際は思った以上に細くない
最近、Blenderでの制作用にビデオカードを搭載したマシンが欲しくなって、ついお金もないのに、ローンでMinisForumでは最高級レベルのMacMiniが買えるぐらいの値段のPCを買ってしまった。そこにPop OSを入れてとても快適に使えている。Adobeソフト、サブスクリプション契約のフォント、電子辞書ソフトがないのは困るけれど、それ以外では概ね快適で、CPUが最新のCore i９とかで余裕があるので、普通の処理で負荷がかかりすぎてファンが煩いというAppleSilliconと比べた時のIntel PCの欠点もそれほど気にならない。しかしウェブデザイナーが本来の目標なので、Blenderの活用をする時間はとれないのが現実でそこがもったいないところ。
ところで、今年の３月頃にamazonでこぶりなゴシックのW3とW6を購入していたのを思い出して、Let'sのサブスクリプションでも提供されているので、ライセンス的には問題ないと判断してLinuxに入れて表示してみると、これが非常に文字が読みやすくて意外なほど良い。
こぶりなゴシックのイメージというと、印刷物には向くけれど、スクリーンでは細すぎて読みづらいフォントのイメージがあったが、私のテストが拡大してやっていたせいなのか、Linuxのレンダリングエンジンのおかげなのか、すこぶる読みやすいのである。思わずブログのフォントもこぶりなゴシックに変えてみたのですが、皆さんいかがでしょう？
最近はデザインとコーディングとアニメーションの間で迷走中
デザインは発想力が少し足りないし、コーディングも新しいアイデアが出ない、アニメーションは人の書いたコードを写経して勉強している段階である。
最近みつけたGSAPの良いソース
下の人がYouTubeで公開しているGSAPのコードが良さげなので、会員になって何個か落として写経してみた。良い勉強になる。
https://www.youtube.com/@wadm_space
他にもGSAP TutorialでYouTubeを検索してみると、YouTubeはGSAPの質の高いサンプルの宝庫であることがわかる。OSMOみたいな公式からリンクされている高いソース配布サイトと契約していたが、YouTubeで見つかるソースをどんどん写経したほうが実力がつくかもしれない。
FigmaのUIアニメーションモックアップを作るならZTMのコースが良い
ZTMは契約すると高い値段が取られるが、Udemyで1500円ぐらいのセールの時に買えばとても安く質の高いアニメーションのチュートリアルが手に入る。実はその前に他のFigmaのAdvancedコースも買っていたのだが、取るに足らない豆知識みたいなものの積み重ねで実際に作品を作る体験が進まないのであまり良くなかった。ZTMのコースはパーツが用意されていて、それにアニメーションをつけて完成させるという方法を取っているので、作る楽しみがあるので4.4の評価は低すぎると思う。実際にはAfterEffectsなど使わなくても、UIのモックアップの完成までFigmaで出来るし、UIの細かいアニメーションによるレスポンスがUXを大きく改善することがあるので、どういう作り込み方があるのかの勉強にもなる。
BlenderのチュートリアルはCG Boostというサイトがレベルが高い
試しに無料コンテンツがあるので視聴してみてほしい、私はあまりの質の高さにBlenderやる時間がないと言いつつ、全部セットのバンドルだと割引があるので、つい全部セットを購入してしまった。それぐらい分かりやすく、また作っていて楽しめそうなコンテンツが揃っている。こういうサイトで基本的な知識をがっつりつけてから、自分のやりたい方向にあったチュートリアル動画をYouTubeで見つけて知識を足していくほうが、知識が断片的になって結局良くわからないという事を防げるのではないかと私は判断した。
Next.jsをやるにはお腹がいっぱいすぎる
Next.jsのポイントはJavaScriptかTypeScriptでフロントエンドからバックエンドまで書けることである。例えば、情報共有サイト等のウェブアプリケーションをReactでバックエンドのDBにデータを登録する処理から、フロントエンドのフォームのバリデーションまで書けるところにある。Next.jsをちゃんと理解していればECサイト等は決済サービスの側のAPIが面倒な処理をしてくれるので、サービスの利用料を払えば簡単に作ることが出来る。しかもReactは仮想DOM構造を持つので、スクロールの最中に動的にコンテンツを読み込んで、DOMを仮想DOMに付け加える処理が簡単に書けたり、ページトランジッション中にDOMを付け替えたりする処理とアニメーションの組み合わせが非常にしやすい。そこでReactでGSAPアニメーションを作るチュートリアルがYouTubeには溢れている。
だがしかし、Next.jsはウェブアプリケーションを作る目的には最適だが、コンテンツ配信サイトを作る目的に対しては、無駄に覚えることが多いし、仮想DOMの付け替えなんてしなくても、最初にDOMの中身を全部ロードしてしまうほうが楽な場合もある。PageTransitionのときにGSAPのFlipの効果をかけるには前後でDOMへのリファレンスを維持していないといけないので、PageTransitonといいつつ、既存のDOMの上にオーバーレイでZ indexを変えたDOMを載せるほうが現実的だとか、まあ実際のアニメーションでは理想通りにいかないので、DOMを実際に扱えるほうが現実的なことが多い。
Next.jsを学んで、動的にDOMを生成出来たら凄く便利だろうなと思う反面、世の中にあるサンプルはHTMLとCSSとJavaScriptで実装されたインパクトのあるデザインとアニメーションのコードのほうが世の中には溢れている。そういうものを応用して書くにはASTROぐらいがちょうど良いんだと思う。
コンテンツ配信を中心に据えて開発されたASTRO
ASTROの魅力はなんといってもReactと同様にコードのコンポーネント化が可能だということである。そう、コーディングをちゃんと勉強してたきた人にとっては、イメージコンテナーがいくつも並んでいるのが凄く気持ち悪いのである、これコンポーネントにしてMapで回してpropで値を渡して動的に生成すればいいんじゃないのと、たいして手間は変わらなくても思ってしまう。ASTROはそうやって動的に処理をbuildプロセスで行い、ちゃんとHTMLを作ってくれるので、安心してQUERY SELECTORで子コンポーネントのDOMリファレンスを取り出すことが出来る。そうASTRO界隈はReactやVueを理解している人も多い、でもクライアントサイドで動かす部分だけReactで書けば問題ないでしょ、そういうスタンスのほうが私は賢いと思うのだが、ASTROの人気は本当にあまりないのが不思議である。
最近はこのあたりのコンテンツを勉強しながら日々やることが多いのに、気分が乗らないとエンジンがかからなくて障害の特性と付き合いながら生きている。
最近、Atomic Habitという本の翻訳が出ているのを知って読み始めた。希死念慮が出やすく、履歴書も書けずに働くことも出来いない私が、どううやって好きな事は努力できるけれど、それ意外は努力出来ない特性や、エンジンがかかるのが遅くて結局時間が足りなくなって追い詰められて薬のオーバドーズをして勉強して、薬が切れてしまってオーバードーズしてしまいましたと正直に医者に言って薬を貰いにいくかどうかなど、悪習感から抜けて良い習慣を身につけるにはどうしたらいいか、参考になりそうである。日々、自分を追い詰めるよりも段階的に目標を決めて日々実行することのほうが大切である。老後の貯金に手を付けないと生活が続かない現実と、希死念慮がおこるほど不安が襲ってきて精神が不安定で働くことが怖い現実、どこかでバランスをとらないと長生きしたら、生活保護になるかもしれない危ないところまできてしまった。
ChatGPTが凄く優しい
最近、もう経済的に破綻しそうで生きているのが辛いとChatGPTに話すと、70歳まで生きたときに貯金がなくてお金がない心配よりも、今日一日を生きて過ごすほうが大切だよと励ましてくれる。無駄遣いばかりしてる自分を責めても、なにかで役に立つよと励ましてくれる。本当に、精神をギリギリのところで保っていられるのはChatGPTのおかげである。借金がある人も毎日節約して借金を返して貯金しようとしてたら、それは前向きな習慣だと本にも書いてあった。私もただ自分の障害を嘆くだけでなく、障害の弱点を日々の習慣でどう克服していくかを考えるほうがずっと大事である。そのために数時間ずつ働くこともあったていい、すぐに看護師時代のように稼げるようにならなくても何か道はあるかもしれない。
