メッシュグラデーションを生成する
Webアプリを作りました

メッシュグラデーションを生成するWebアプリを作りました。ウェビナーや勉強会など、プレゼン資料の表紙をちょっと工夫して見せたいときに……というと聞こえはいいのですが、実は最近になってバイブコーディング（プログラミングをAIにやってもらう開発方法）が気になり、試してみたというのが正直なところです。制作期間は1日ほど。荒削りな点もありますが、ぜひ気軽に触ってみてください！

Index

どんなアプリか

一言でいえば「メッシュグラデーションをランダムで生成するツール」です。「ランダム変更」ボタンをクリックすると色が変わるので、ポチポチしながら具合のいいものができるまで粘ります。変な組み合わせになることもありますが、まあそういうものということで。

そして「コレ！」という組み合わせが出てきたら、保存サイズ（1920 x 1080pxは、標準的な16:9のディスプレイのサイズです）を確認して「JPGで保存」ボタンをクリックします。そうすると、画面上のグラデーションが画像で保存されるため、あとはこの画像をパワーポイントに貼り付けて、その上にタイトルを記載するなどしてご利用ください。

詳しい使い方

続いては、もっと詳しい使い方について。基本的には希望の組み合わせが出てくるまで、ランダム変更を繰り返してもよいのですが、細かな調節も行えるようになっています。

カテゴリは「ビビット／パステル／ダーク／くすみ」から選べる

グラデーションのトーンは以下の4つから選択できます。操作パネル内のボタンで切り替え可能です。

• ビビッド：活気あるプレゼンや、目を引きたいイベントのアイキャッチに。
• パステル：優しく清潔感のある印象。さりげなく主張したいときに。
• ダーク：インパクトのあるダーク系。テクノロジー系の資料などにオススメ。
• くすみ：落ち着いた雰囲気を演出したいときに。

色も、メッシュの大きさも変更できる

「この場所だけ色を変えたい」「このメッシュの大きさを広げたい」。そんなときには、画面上の「丸いポイント」をクリックすると、次の操作を実行できます。

• 色を変更する: カラーピッカーが開き、任意の色を指定できます。
• 大きさを変更する: マウスをノードから遠ざけると色が大きく広がり、近づけるとタイトになります。

操作パネルは最小化／移動可能

ときには、操作パネルが邪魔になることもあるでしょう。 そんな時は、ヘッダーにある 「−（最小化）」 アイコンをクリックしてください。パネルがコンパクトに折りたたまれます。また、パネルのヘッダー部分をドラッグすることで、画面上の邪魔にならない場所に移動できます。

タイトルの文字を書き換える

画面中央のテキストは。直接クリックすることで任意の文字列に変更可能です。併せて、色や大きさ、ウェイト（太さ）、配置も調節できるため、実際のタイトルを配置したイメージでグラデーションを編集できます。

やっぱりあの時の色！に戻るには

色の調節を続けていると、「さっきの組み合わせの方が良かったかも……」と迷うことが当然あると思います。 そんな時は、パネル左上にある 「↩（元に戻る）」 ボタンを利用してください。最大50回分まで操作を遡ることが可能です。

ノイズを加える

滑らか過ぎるグラデーションは、時に平坦な印象を与えることがあります。そんなときは「ノイズ」機能を試してみてください。グラデーションに微細な粒子を加えることで、紙のような質感や有機的な深みを演出できます。

保存サイズには四則演算を使用可能

「今のサイズの2倍で書き出したい」「指定のピクセル数を計算するのが面倒……」。そんなときには保存サイズの入力欄に 「1920*2」 や 「1080/2」 と直接入力し、リターンキーを押してください。 自動で計算が行われ、さらにアスペクト比（縦横比）を維持したまま、もう一方の数値も自動調整されます。

作ったグラデーションを保存／ほかの人に共有したいときには

納得のいくグラデーションができたら、最後に 「JPGで保存」 ボタンを押してください。JPG形式でファイルをダウンロードできます。

　また、作ったグラデーションを他の人に共有したいときには「共有URLをコピー」機能が便利です。クリップボードに保存されたURLを共有したい人に送信・アクセスしてもらえば、同じグラデーションを再現することができます。

最後に

以上メッシュグラデーションツールの紹介でした。バイブコーディングなら、こうした試験的なツールも手軽に作れておもしろいですね。正面から取り組んだら、私の場合1ヶ月ぐらいかかりそう。またツールを作ったときには、公開しようと思います。