鮪缶の@ハチワレデザイン
banner
maguro-hachi.bsky.social
鮪缶の@ハチワレデザイン
@maguro-hachi.bsky.social
・WEBデザイン/制作
・印刷物/WEB画像デザイン
・イラスト制作
出来ることをなんでも武器にしたいです。Affinityシリーズ愛用中。
→HTML/CSS/JavaScript/TypeScript/Sass/WordPress/Vue.js/Astro/Storybook
ご連絡はこちらからどうぞ→[email protected]
GitHub→https://github.com/magurokanno
祝Affinity新バージョン!
ということで、以前Xに投稿していたtipsを再掲していきます。

【スタイルリストは便利】
汎用や特定のプロジェクトで使い回すテキストスタイルを作っておくと便利です。
・1つのファイルにスタイルリストのセットを作成、affinityファイルで保存
・スタイルリストタブから「スタイルをインポート」を選択、affinityファイルを選択するとそのファイル中にあるスタイルリストを読み込める
・見出しレベル、テキストの種別ごとに該当のテキストスタイルを割り当て
・プロジェクトごとのスタイルを設定→スタイルを更新すると一括で反映!
・使わない項目は一括削除可能
November 19, 2025 at 12:23 PM
AffinityV3を試してみる。
・サクサク動く。軽量。
・統合アプリでスライスができる!これは嬉しい!
・まずはワークスペースのカスタマイズからですね。
・ベクター(Designer)でもページウィンドウを置けるようになってる!アートボードタブが便利!これは嬉しい!
・ソフトごとに異なっていたウィンドウが、全スタジオ共通になってるんですね。これはワークスペースの作り込みが捗る。スタジオごとにワークスペースが変わるのでそれぞれ最適化させたい。
・AI機能はV2で使えた「オブジェクト選択」は無課金で使えるようです。設定>機械学習で王冠がついているもの以外は無料枠。
October 31, 2025 at 10:44 AM
AffinityV3のウェブサイトを読んでみてのメモ。
・アイコンが変更。Pub橙、D青、Ph青とは被らない緑!V2と並べて置いてもわかりやすい!(V2とV1は紛らわしかった)
・従来の3本立てが1つに。(元々PubがあればSuiteとして行き来できた。しかしPhの書き出しペルソナ等使えない機能もあった気がする)
・画像トレース機能!?これってラスター画像をベクターに変換してくれるという、噂の……?欲しい機能5本指に入ってたのがしれっと追加されていた……これはすごく嬉しい。使ってみるのが楽しみ。
・(ベクター画像にラスターブラシで質感を追加した場合、出力後どうなるかよくわかっていない)
October 31, 2025 at 7:58 AM
実際、発表直前に2.6.5へのアプデは入ったようなので。
October 31, 2025 at 7:35 AM
Affinity2.nの更新も続いていくとのことで。こっちはまた別な進化をしていくのかな?どうなんでしょう。
October 31, 2025 at 7:34 AM
Affinityの新発表来ましたね!サブスク化も覚悟して、ある程度の価格ならば受け入れる……と考えていたのですが。まさかの無料化!これはあまりにも嬉しいサプライズ。
無料化でユーザー数が増える→需要が増加→Tipsやテクニック、素材の共有が進む、となってくれたら嬉しいです。
October 31, 2025 at 7:31 AM
GEMINI CLIがすごい!データ整理が一瞬で、複雑かな?と思えるものも難なく行えました。

我が家の猫ちゃんの日々の日記と記録。Androidアプリを使って毎日コツコツ書いていたのですが、CSV出力機能が上手く動作しなかったんですね。開発を終了したのかアプリページも消えてしまい……
端末移行時用の.dbだけは出力できまして。データベースの知識はないのですが、調べた結果AndroidアプリはSQLiteのデータベース機能が多いということでソフトを導入。収められているデータの確認に成功しました。
これをCSV出力。
August 17, 2025 at 12:39 PM
Eagleでの画像素材管理にAI Autotaggerを導入してみました。便利!フォルダ分けはやっているのですが、数が膨大なのでタグ付けまではきっちりできておらず……Geminiに聞きながらなんとか設定成功できました。自力では無理だった……
・プラグイン検索時は言語設定を英語にしておく
・Geminiの場合、モデル1.5がデフォになっているので2.5を使いたいときはカスタムを選択してモデル名入力をする(Xで「eagle ai tagger」と検索すると制作者さんのモデル指定スクショが見られる)
・各ルール設定のdescriptionで基本定義、exampleに具体的なタグ例を列挙
June 20, 2025 at 4:06 PM
BiomeV2!HTML対応が進んでAstroでの実装もそろそろ!と喜んでいた矢先に今度はAstroも5.10にアップデート!嬉しい悲鳴です。画像レスポンスのあたりが柔軟になったとか?リリースノートは明日読みます。楽しみ。
June 19, 2025 at 6:27 PM
Biome V2正式リリース!おめでとうございます!
公式Blogを読んでのざっくりメモ。自分の使い方に特に関係ありそうな部分のみ。
・単体ファイルではなく複数ファイル、プロジェクト全体を見渡して型チェック。→TypeScriptコンパイラなしで厳密な型推論。
・プラグインはもうちょっと待っててね
・import文の整頓能力が向上。
・HTML対応!ただし.htmlファイル内のもののみ。htmlファイル内のJSやCSSも未対応。2.0ではまだテスト段階でデフォルトオフ。
・今後はまずHTML部分の拡充(Astro対応含む)、Markdown対応など。
June 18, 2025 at 4:35 PM
どちらもまだまだ使いこなせていなかったり、知らない機能があったり。Perplexityのスペース機能を今日知った。
Perplexityのリサーチ(高度な分析)には感動して、これは課金してもいいかもしれないと思いました。が、今決め打つと他のツールを使わなくなってしまいそうなのでまだまだ使い比べてみたい。
May 20, 2025 at 3:25 PM
PerplexityとChatGPTを両方使ってみての実感。(どちらも無料プランの範囲内)
・web検索の延長のような使い方ならばソースが明記されるPerplexityが検証までしやすい
・高度な調査はPerplexityの方が深く広く調べてくれる。無料プランのリセット回数的にも気軽に使える。
・対話を重ねて考えを煮詰めていくタイプにはChatGPTがやりやすい。ただし、A→A'→で更にA''に発展してもらおうと思ったらAに戻ったりすることがあるので要研究
・↑に対して、Perplexityは過去の対話の流れをぶった切った別話題として回答されることがある。
May 20, 2025 at 3:22 PM
今はポートフォリオサイト制作に向け、コンテンツとなる文章の作成をしています。ChatGPTの練習も兼ねつつ。
使ってみて実感したことメモ
・コンテンツ作りを手動するのはあくまでも人間側
・まずは「文章制作のための具体的な情報」をAI側に伝える、そのために人間からの出力が必要。
・辞書を引く工程や文法的な違和感を正す試行錯誤は楽になる
・対話を重ねる中で急に話が戻ったり全く別な方向に飛ぶこともあるので軌道修正が必要
・「元の文章と別なニュアンスになっていないか?」「この部分上から目線では?」「なんかおかしい?」と、疑問を持てる力が必要。
May 13, 2025 at 1:26 PM
漫画制作に明け暮れていた2ヶ月でした……もう少し効率化したい。マルチタスクをこなせるようになりたい。複数タスクの洗い出し、進行状況確認のためにガントチャート手帳の導入をしました。少しずつ、習慣化。
May 13, 2025 at 1:19 PM
Affinity2.6が来ましたね!色々な機能が追加されました。「オブジェクト選択ツール」は思わず声が出るくらいすごかったです。かなり手数を減らせそう。
我が家の猫ちゃんの写真で検証。我が家の猫ちゃんとぬいぐるみ猫ちゃんは常に同一オブジェクトとして扱われていました。一心同体。嬉しい。
February 22, 2025 at 8:59 AM
準備に時間をかけ過ぎてしまっています……が、ひとまずポートフォリオサイトに必要なだけのAstroコンポーネントは作り終えました。コンテンツ内容も改めて練り直す必要がありますが……進んでいきます。
February 15, 2025 at 4:03 PM
Astroサイトでのコンテンツ管理。(HTMLとコンテンツテキストを極力分離させたいという前提で)JSONに打ち込んで読み込むというアプローチを主に考えていましたが。シンプルな見出し+テキスト+画像を少々くらいならばMarkdownでも差し支えないんですね。と、ふと気づきました。別にMarkdownはブログコンテンツ用というわけでもなく。
February 15, 2025 at 4:01 PM
pnpmの管理をcorepackから切り離そうとした話。
・従来はcorepackでpnpmを管理していた
・将来的にnodeからcorepackが切り離される+pnpmが自身でバージョン管理ができるようになったらしい
・pnpm自身での管理に移行しようとした。
・まずはcorepack disable pnpmで関係を切ろうとしたが、コマンドを入力しても反応がない(開発者として起動している)
・関係は切れたのかとnpm install -g pnpmしようとするが、voltaを使えとエラー(nodeとnpmはvoltaで管理)
January 10, 2025 at 1:10 PM
ポートフォリオサイトに使用するUIパーツのAstroコンポーネントを作成中。サイトの軽量化のために極力JavaScriptを入れずに作りたいです。様々な技術ブログから勉強させていただいています。CSSの進化によって変わっていることが多いですね。
・従来はJSが必要だったが今はCSSだけで実現可能
・やはりJSは必要
・JSは必要だがCSSの新機能を組み込める
自分が作りたいものはどれに該当するのか、どう実装するのが合っているのか。
January 5, 2025 at 3:36 PM
あけましておめでとうございます。アウトプットを増やせる一年にしていきたいです。まずは自分のポートフォリオサイト作りから。今年もよろしくお願いします。
January 1, 2025 at 1:21 PM
JSONの記述が増えますが、
・各段落ごとにスタイル設定
・リンクテキスト
・リスト
に対応したバージョンも。
December 22, 2024 at 1:42 PM
これをやりたくてずっと遠回りし続けていた気がする……(→Vue.js→非同期通信?→Astro)昔メモ帳にベタ打ちしてHTMLを書いていた頃から、HTML要素と文章が混在するのがしっくり来なくて。当時は<pre>を使っていたり。HTML要素とコンテンツ情報の部分をきっちり切り分けたくて堪らないだけの人生でした。
December 22, 2024 at 1:39 PM
JSONで配列にした文章から、各値を<p>に入れたHTMLを動的に出力するAstroコンポーネント!できました!
長文でもHTML要素が混在することなく比較的簡単にコンテンツの編集ができる……と思います。HTMLをいじらなくても「"",」の"内に文章を書き込むだけでOKな仕組み。
December 22, 2024 at 1:39 PM
エラーが出る場合と出ない場合があって、両者を見比べても挙動には関係ない値部分の違いしかない。こういうときは結構な時間立ち止まってしまいます。今日は型アサーションで解決。場数を踏んでいくしかないです。
December 20, 2024 at 3:58 PM
外出先での待ち時間で初めて読む雑誌を手に取ってきました。デザイン的に学ぶところがたくさんあってすごかったです。生のデザインをインプットするのは大事ですね。
気になったところメモ
・基本はグリッドに沿いつつ、各コンテンツごとに角版写真を自由に配置して動きを出している
・要所要所に手書きフォントを使用して気さくなおしゃれ感
・細かく見てみると多くのあしらいがある。けれど全体で見てみると一つ一つには気づかないくらいのさり気なさ
・サブ特集ページは地の色とグリッド数だけを変えて違いを出しつつも統一感
December 20, 2024 at 3:50 PM