Blog

【画像加工】古のゲーム画面風味～イラストをゲームボーイの画面っぽく～

Date : 2025.05.03

Category : 一次創作

お気づきの人はまだいないかもですが…
音楽ページを改修中です。

なんだか、古の音源をつかった曲に反響をいただくことが圧倒的に多いため…
(ありがとうございます！)
この辺の曲たちを目立たせるようにしてみました。
整理が追い付いていないのですが、まだまだ改修・追加予定です。

その改修の一環で、各曲になるべくユニークなジャケット画像を指定してあげようと思い…
とはいえ、古の音源を使った曲に、現代のバリバリ鮮明CGイラストを使うのも何か違う気がするので…
それっぽく加工してみることにしました。

ステキな変換ツールがあるよ！

手っ取り早く思いつくのが、「ファミコン風画像変換ツールふぁみこんぶ」を使用させていただくこと。
画像を読み込み、使用する色を選択すると、ファミコンっぽい画像に変換してくれるとてもステキなツールです。くわしい仕様・使い方については配布元で。ちなみに、「ゲームボーイ用」以外の全色を指定する場合は、色パレット上の任意の場所で右クリックすればOKです (全解除はもう一度右クリック)。

D4 GATEWAY

noia.g3.xrea.com

D4U/kokola さまが作成されたソフトウェアなどが公開されているサイトです。
「ふぁみこんぶ」の入手には、「ぱら倉庫」＞「ふぁみこんぶ」とお進みください

自称代表作「sakura night」2015年版 (10年前…！) のイメージイラストも、このとおり：

テンションが上がりますね！！

D4U/kokola さま、ありがとうございます！

ただ…
「変換してみたけれど、もうちょっと調整したい…」という場合も出てくるはず。とはいえ、納得いくまで「画像調整 → ふぁみこんぶ変換」を繰り返していたのでは、時間がかかってしまいます。

というわけで、今回はゲームボーイ画面風に限りますが、次なる手を考えます。

Clip Studio Paint (クリスタ) で加工する

クリスタの各機能を使って、それっぽくしてみます。
まずは比較用に、純粋に「ふぁみこんぶ」でゲームボーイ風に変換。
ドットサイズは2ピクセル (デフォルト、ソフト作者の推奨値)。

一応雰囲気などはわかりますが、感覚としてはちょっとピンボケしてしまったような感じ…？
元画像の明るさ、コントラストあたりを調整すれば、さらに納得のいく出来になる気がします。

まずは下準備

クリスタで、「ゲームボーイ画面風の色セット」を定義します。
一口に「ゲームボーイ画面風の色」といっても、画面の状態、年数、個人の記憶・イメージ…など、いろいろなパターンがあるようです。

初代ゲームボーイの液晶の色を再現する – ゲーム作るくんのサイト

gametsukurukun.com

ゲーム作るくんさまの記事。
個人ゲーム制作者の観点から、「経年劣化した感じ」など、複数パターンのカラーセットを紹介されています。

いろいろ考えた結果、やはり「ふぁみこんぶ」で使われているカラーセットが個人的にしっくり来たので、この4色を使用させていただきます。

クリスタの「グラデーション」ツールで、このような4色パターンを新規作成します。プリセットの「3色ストライプ」などが参考になります。

作成後は名前を付けてロックをしておくと◎。念のため、アンチエイリアスも切っておきます。

位置	色
0	#42520F
25	#42520F
25	#738429
50	#738429
50	#A5AD42
75	#A5AD42
75	#D6D65A
100	#D6D65A

これで色の準備ができました。

いよいよ画像加工！

さっそく元絵に対して

「フィルター」>「効果」>「モザイク」を選択、ブロックサイズを「2.00」にして「OK」

で、2pxのドット絵もどきに変換します。

次に、先ほど保存したグラデーションマップを適用します。

「レイヤー」>「新規色調補正レイヤー」>「グラデーションマップ」を選択

一気にそれらしくなりましたが、やはり画像の調整が必要そうな感じです。
そこで、モザイク加工した元絵レイヤーとグラデーションマップのレイヤーの間に「トーンカーブ」調整レイヤーを作成します。

「レイヤー」>「新規色調補正レイヤー」>「トーンカーブ」、プレビューを見ながら調整

今回はこんな感じに調整しました。

(これは個人的な色使いの傾向・癖によるものだと思いますが、こんな感じにS字型に調整するとイイ感じになる…ことが多いです。)

なんかすごくイイ感じです！！やりました！！！🙌

まとめ

ステキなソフト「ふぁみこんぶ」を使用すると、お手軽に自分の作品をファミコン風味に変換できます。テンションが上がります！

こだわりたい場合は、クリスタで調整するとテンションが一層上がります！

なお、クリスタでの調整は「トーンカーブ」フィルターにとどまらず、加筆したり、乗算レイヤー・加算レイヤーで局所的に明暗調整をしたり、ほかにもいろいろできます。

作品のさらなる可能性・ステキな表現を模索してまいりましょう🙌

音楽ページの改修もすすめないと…💦

【WordPress】ACF PRO をつかってカスタムブロックを作成！その2

Date : 2025.04.06

Category : 一次創作/Web制作

手順とサンプルコード↓

うちのこをしゃべらせるカスタムブロックを作りました。

わぁい！

これで俺らもしゃべり放題★

やったね！

かわいいね！！勝ちです！！
✌(‘ω’✌)三✌(‘ω’)✌三(✌’ω’)✌

前回記事がなにやらそこそこ見られているらしく…。

【WordPress】ACF PRO をつかってカスタムブロックを作成！

WordPressのカスタマイズは多少わかるけど、込み入ったこととなるとちょっと…
…なほたかが、ACF PRO をつかってカスタムブロックをつくることができた！というお話です。

またなんか作ってみるかー！
というのと、あとは昔のノリでうちのこをしゃべらせようと思ったので

あらためて、ACF PRO をつかってカスタムブロックを作る手順のメモです。

⓪：下準備

前回のハマりポイント。テーマフォルダに acf-json フォルダを作成しておきます。
この状態で、ACFでフィールドを保存すると、この中にJSON形式の設定ファイルがポコポコ蓄積されていきます。(ここの中身は編集の必要なし)

①：functions.phpでカスタムブロックの登録

functions.php に書いてアップ。

/* --------------------------------------------
 * カスタムブロックの登録
 * -------------------------------------------- */
add_action('init', 'register_acf_blocks');
function register_acf_blocks()
{
  register_block_type(dirname(__FILE__, 2) . '/blocks/charaspeech'); //※１
}

/* --------------------------------------------
 * ACFブロックカテゴリーの登録 //※２
 * -------------------------------------------- */
function add_block_categories($categories, $post)
{

  $add_categories = [
    [
      'slug' => 'dp-custom-blocks',
      'title' => 'DPカスタムブロック',
      'icon' => 'star-filled',
    ],
  ];
  $categories = array_merge($add_categories, $categories);
  return $categories;
}
add_filter('block_categories_all', 'add_block_categories', 10, 2);

/* --------------------------------------------
 * ブロックを使用するときのみCSSを読み込む
 * -------------------------------------------- */
add_action('init', 'custom_block_styles');
function custom_block_styles()
{
  wp_enqueue_block_style(
    'acf/charaspeech',
    array(
      'handle' => 'dp-customblock',
      'src' => home_url('/css/customblock.css'), //※３
    )
  );
}

※１：テーマフォルダに blocks フォルダを作成、さらに charaspeech フォルダを作成して、その中にもろもろ設定ファイルを入れる構成です

※２：デフォルトのブロックリストに混ぜたくなかったので、独自のカテゴリを作成することにしました
(独自のカテゴリを作成すると、記事編集画面の左側のブロックリストには ←このような形で出てきます)

※３：blocks フォルダ > 各ブロック用のフォルダ にCSSを入れる例を見かけますが、このサイトでは、自作ブロック用のスタイルは、まとめて /css/customblock.css に入れています。
ちなみに、サイト全体が「ブロックテーマ」で作られていないと、「ブロックを使用しているときのみ読込み」はできないっぽいです…。(このサイトは、記事以外にはブロックを使わない「クラシックテーマ」タイプなので、どのページでも読み込まれてしまう模様)
とにかくカスタムブロック用のCSSの登録は必要なので、書いておきます…。
(JSONのほうに書く方法がメジャー？)

なお、管理画面のスタイルでは box-sizing: border-box; の設定がないようです。
「記事をプレビューする分には問題ないけど、編集画面で段ずれが起きる！」などなどの場合は、こいつをブロック用のCSSに含めてやるとよさそう。

②：JSONを登録

テーマファイル内の blocks/charaspeech/ の中に、block.json を作成します。

{
  "name": "acf/charaspeech", //※１
  "title": "キャラトーク",
  "description": "うちのこの会話を表示します",
  "category": "dp-custom-blocks", //※２
  "icon": "format-chat",
  "keywords": ["会話, chat, うちのこ"],
  "acf": {
    "mode": "auto",
    "renderTemplate": "render.php"
  },
  "supports": { //※３
    "align": false,
    "anchor": true,
    "className": true
  },
  "example": { //※４
    "attributes": {
      "mode": "preview",
      "data": {
        "__is_preview": true
      }
    }
  }
}

※１：nameにはアンスコがつかえないっぽいのでご注意ください～
(自動出力スクリプトのIDなどで、アンスコはハイフンに変換されてるので、そのあたりの関係？？)

※２：先ほど functions.php で作成した独自カテゴリに含めるようにします

※３：編集画面右に出てくる「高度な設定」で、もろもろサポートするかどうか？の設定。
いちおう、カスタムのID (anchor) とクラス (ClassName) は設定できるようにしました。

※４：example の項目は、編集画面のブロックリストでカーソルを当てた時に表示されるサンプル画像に関する設定だったと思います。いちおうサンプル画像 (thumb.png) も作ったので書いておきます。

③：ACF PRO でフィールドを登録

キャラ＋吹き出し１つに対して１つのブロック…でもよいのですが、今回はPRO版の醍醐味「繰り返しフィールド」を使いました。

フィールド全体の設定

ロケーションルール

ブロック・等しい・キャラトーク

繰り返しフィールド

全般 > フィールドタイプ	繰り返し
全般 > フィールドラベル	キャラ会話
全般 > フィールド名	`cb_cspeech`
全般 > レイアウト	テーブル　※

※：テーブルが一番、高さを取らずコンパクトな表示だったので…

繰り返しサブフィールド①

全般 > フィールドタイプ	選択
全般 > フィールドラベル	キャラクター
全般 > フィールド名	`cb_cspeech_chara`
全般 > 選択肢　※	haruka : ハルカ kai : カイ
全般 > 戻り値の形式　※	両方 (配列)
検証 > 必須項目	有効

※：キャラの画像ファイル名・キャラ名の処理を両方行いたかったので、どちらも取得できるように設定

繰り返しサブフィールド②

全般 > フィールドタイプ	テキストエリア
全般 > フィールドラベル	セリフ
全般 > フィールド名	`cb_cspeech_speech`
検証 > 必須項目	有効
プレゼンテーション > 改行	自動的に＜br＞を追加　※

※：管理画面で入れた改行が、そのまま表で反映されるように設定

④：render.php、CSS で表示設定

テーマファイル内の blocks/charaspeech/ の中に、render.php を作成します。

<?php
//※１
if (!empty($block['data']['__is_preview'])) {
  echo '<img src="' . get_template_directory_uri() . '/blocks/charaspeech/thumb.png" alt="">';
  return;
}

//※２
$anchor = '';
if (! empty($block['anchor'])) {
  $anchor = 'id="' . esc_attr($block['anchor']) . '" ';
}

//※２
$class_name = 'cb_charaspeech__wrapper';
if (! empty($block['className'])) {
  $class_name .= ' ' . $block['className'];
}
?>
<div <?= $anchor; ?>class="<?= $class_name; ?>">
  <?php
  if (have_rows('cb_cspeech')) { //※３
    while (have_rows('cb_cspeech')) {
      the_row();
      $chara = get_sub_field('cb_cspeech_chara');
      $img = '/img/blog/chara/' . $chara['value'] . '.webp'; 
      $name = explode('_', $chara['label'], 2); //※４
  ?>
      <div class="dp_customblock cb_charaspeech__box">
        <div class="chara">
          <img src="<?= $img ?>" alt="<?= $name[0] ?>" title="<?= $name[0] ?>" width="100" height="100" loading="lazy">
        </div>
        <div class="speech">
          <?php echo get_sub_field('cb_cspeech_speech'); ?>
        </div>
      </div>
  <?php
    }
  } ?>
</div>

※１：先ほどの json で、サンプル画像の設定があったら、サムネイル画像を適用する…というもの

※２：先ほどの json で、サポートを有効化した ID (anchor) とクラス (ClassName) に関する設定。記事の編集画面の「高度な設定」から入力があった場合は反映できるようにします。

※３：ここから繰り返しフィールドのループ処理。投稿のループ内ではないですが、IDの指定は不要のようです。(というか、そもそも何のIDを入れるかもわからないですし…汗)
今回、キャラもセリフも必須設定にしたので、「値があったら～～」のような処理は入れていません。

※４：今後キャラアイコンのバリエーションを増やす場合は、ACFでラベルにアンスコを入れて設定するようにしました。ラベルの1番目のアンスコの前が名前として表示されます。

例）haruka_2 : ハルカ_らぶらぶモード　とすると、表示時のキャラ名は変わらず「ハルカ」となる

あとはCSSで整えてあげればOK！
(このサイトの場合、SCSS で記述後に CSSに変換しています)

:root {
  --std-atclMgn_btm: 1.25em;
  --cb-text-main: #2c3338;
  --cb-bg-main: #fff;
}
.dp_customblock > * {
  box-sizing: border-box;
}

.cb_charaspeech__wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: calc(var(--std-atclMgn_btm) * 2) 0;
}
.cb_charaspeech__box {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 16px;
  & .chara {
    width: 80px;
    & img {
      aspect-ratio: 1 / 1;
      object-fit: cover;
      width: 100%;
      height: auto;
    }
  }
  & .speech {
    width: calc(100% - 96px);
    background: var(--cb-bg-main);
    color: var(--cb-text-main);
    line-height: 1.6;
    padding: 16px;
    border-radius: 8px;
    position: relative;
    &::after {
      content: "";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 20px 10px 0;
      border-color: transparent var(--cb-bg-main) transparent transparent;
      display: block;
      position: absolute;
      left: -12px;
      top: 30px;
      z-index: -1;
    }
  }
}

@media all and (min-width: 641px) {
  .cb_charaspeech__box {
    gap: 24px;
    & .chara {
      width: 100px;
    }
    & .speech {
      width: calc(100% - 124px);
      padding: 20px;
      &::after {
        left: -16px;
        top: 40px;
      }
    }
  }
}

完成！

これで完成です🎉

ちなみに、ディレクトリ構造はこんな感じです。

具体的なソースとともに紹介しましたが…
「自分もうちのこをブログ上でしゃべらせたい！！」
という方、その他カスタムブロックを作ってみたい方のお役に立てば幸いです。

あのね！
学園の入り口近くにクレープのキッチンカーが…！

まじ？
無茶ぶりメニューせびりに行こうぜｗｗｗ

あう

【Figma】まんがの背景効果用に、画像素材をつくってみたその2

Date : 2025.03.30

Category : 一次創作

先日の記事のつづき。
うちのこのかわいさを前面に出すべく、そんなかんじのトーンを作りためています。

【Figma】まんがの背景効果用に、画像素材をつくってみた

Figmaで、まんがの背景効果に使える画像素材をつくってみたおはなし。タイリングできるパターンや、ちょこっと置けるほわほわ系。

かわいいね！！！

✌(‘ω’✌)三✌(‘ω’)✌三(✌’ω’)✌

また、「どうせ作るなら、ちゃんと印刷まで意識したものにしよう」…ということで、こちらの記事を参考に、使用するグレーも固定しました。(前回作ったぐるぐるにも適用しておきました)
指標があるのはありがたい…感謝！

グレースケール漫画に最適なトーン濃度（%）の決め方 | hikarium

hikarium.com

＼最適なグレー（灰色）の濃度ってどれ？／というわけで、Web漫画のトーンについてまとめました。

Figma は「ローカルスタイル」によく使う色、テキストスタイルなどを保存しておけるので (クリスタのカラーパレット的な機能)、一度登録しておくとべんり。
フレームを選択すると、その中で使われている色をすべてピックアップしてくれるのもメチャクチャありがたいです。
スタイル名で「/ (半角スラッシュ)」を使うと、自動でカテゴリ分けしてくれるのも優秀👍

こんなかんじで、いろいろバリエーションを増やしていこうとおもいます(`･ω･´)

ちょっといま、絵を描くまでいくような心身状態にないので…
とはいえ、なにかつくりつづけていないと悪循環になるのはわかっているので…
しばらくは素材づくりのほうに取り組むかもです。