19年ぶりに同盟を復活しました【グラデーション同盟】20日12時追記

グラデーション同盟を作りました！
正確には、中学の頃運営していた同盟を復活させました。全く面影がない…
サーチの登録は追々……

使ってくれたら嬉しいお役立ち？な機能をひとつ作りました。
このサイトで簡単にグラデーション画像を作れます！
主張用バナーもご自分の好きな色の組み合わせで作れますので、是非楽しんで頂けたら作った甲斐があります。推し概念作り放題😊

あなたの世界に豊かな色彩を増やす一助となりましたら幸いです。

同盟はこちらのバナーからどうぞ！またはこちら

この記事ではサイトの使い方を説明します。
(立ち上げたばかりで変わる箇所もあるかもしれません)

目次

トップページ

一面のグラデーション
画面スクロールかタイトルをタップするとグラデーション作成画面になります。
画面やや下の白いボックスをタップすると色を選べて、背景やボタンが選んだ色のグラデーションに変化します。

画像作成画面：基本操作

主に使うのは色1と色2という項目になります。
色を変えると上にある画像や下にあるバナーの色が変わります。
他、細かい設定ができます。本当は二色混ぜるだけで良かったのにどうしてこうなった……

グラデーションの向きを縦または横に変更

最初縦を初期値で作っていたのですが、横の方が綺麗に混ざるかもしれないと思い初期値を変えました。（32×32の場合はキャンバスサイズが変わらないのであまり変わらないかもしれないが……）

グラデーションの色を反転

色1→色2を色2→色1に変更したい方向けです。

色をランダムに設定

色1を暗めの色で、色2を明るめの色に設定します。後述の色3や色4も変わります。アイデアが欲しい場合にどうぞ

 

画像作成：混色方法を変更他

長くなりそうだったので分けました。特に興味がない場合は読み飛ばして大丈夫です。

通常

ペイントソフトで色1→色2と色を指定しそのまま直線グラデーション機能を動かしたときと同等の描画を行うイメージです。

対称

色1→色2→色1で塗ったような動きをします。

知覚的

絵の具で塗ったような混色のイメージです。青→黄のグラデーションを指定した場合は、中間色に緑が追加されます。　色1と色2の色相を読み取り、差が激しすぎる場合は　間の色を計算して中間に色を追加しています。橙色に近い赤色→ピンク色を指定すると虹色になります🌈

かふ～による、もし値がこうだったらこうすれば色が良い感じに追加されるだろう　という計算でしかないものです。その為、色相の差が無かったり片方の彩度が低い色だったりするとうまくいかない可能性が高いです。

＋色3(中間)

グラデーションの真ん中に自分の好きな色を設定できます。

＋色4(四隅)

四隅→中央に向かってグラデーションを作成します。今風のグラデーションが欲しいと思い作りました。指定する色はパステルカラーや明るい色が良さげです

背景色変更

サイトの背景色が白じゃない方向けです
背景色を変えると自動的に文字色も変わりますが、
なんとなくの勘で設定したので見づらい組み合わせがあるかも……

同盟バナー

上で設定したグラデーションの色をバナー画像に反映します。

文字色が見づらければ自由に変える事ができます。
迷ったら濃いグレーもしくは薄いグレーにすればいい感じかも

おまけ機能：ホラー

同じ色を指定すると
勝手に中年サラリーマンの肝臓の色とかになるので
あまりやらない方が良いです
いや、是非やってみてください☺︎ホラー要素があります😊

名簿について

ハンドルネームと好きな色の主張ができます！　というかそれしかできません。
リンク集は思う事があり今のところ設置できませんでした。
管理がちょっと大変そうなのと（スパムとか貼られたら泣く）
パスワード忘れた方への対応が手間だと思ったので（やっている方は凄いと思います…頭が下がる）
もしよかったら足跡代わりに書いていってください🌟
20日12時追記：エラーが出てしまうとの事で、エラーチェックを緩和致しました。
ご迷惑をおかけして申し訳ありませんでした。
どうしても書き込めない場合はプライバシーポリシーのところにあるメアドからご連絡頂けますと幸いです。

困ったことについて

32×32バナーの文字色、何にしても見づらい問題

コントラストを激しくしないとか縦方向のグラデにするとかしか浮かばない……

タブをリロードしたタイミングだと画像がうまく出ない

再度読み込みすると多分大丈夫のはず！

でかい画像が生成できない

4,096×4,096までならセーフ！（iPhone側でエラーになったのでそれ以上は作れないように対策しました）
また、長辺は16,384pxまでになります。(1×16,384pxは生成できました。縦長or横長画像を作りたい場合は片方のサイズを落とすと行けます)それ以上はお絵かきソフトを使って頂ければ……。

自分のバナーを作りたい

縦と横のサイズを調整してグラデーションのバナーを保存願います。
（他サイトさんでは横200x縦40をよく見ます）文字入れはご自身でお願いします

お願い

画像サイズを変更する事で、イラスト、漫画、ファビコン、アイキャッチ等にもお使い頂けます。同人誌用途など、大きなサイズの出力は自己責任でお願いします。もし何らかのトラブルがあっても責任を持つことはできません。（上手く色が出ないとか端末が固まったetc…）

良識の範囲内でお使いください。これ言う必要ある？って感じですが、愚痴垢やアンチサイト等での使用はやめてください（後者は今もあるのか分かりません）

AI要素はありません

これも言う必要あるのか分からないけど、念の為……画像生成AIの仕組みは使用しておりません。
htmlとjavascriptで描画しています。どこかに送信するとかもありません。生成関連のボタンが何回押されたとかの使用状況も見ていません。何回出力しても どのようなサイズに変更しても、管理人には一切分からないので安心してお使いください。

本当は

グラデーションが好きで見るたびにテンションが上がる！！！常にテンションが上がる装置を自分でも作りたいと思い作りました。グラデを見ると嬉しくなるのは昔から変わらないです。

あと、色を何個も重ねるグラデってソフトを使って作るのに少し時間がかかるので、安心できる方法でパソコンに作ってもらえたらありがたいなと思いました。おそらく他に優秀なツールはたくさんあると思うけど、リアルタイムで画像を変えられたり疑似的に虹色が作れたりするのをやってみたかった。

canvasとjavascriptで作りましたが思ったより完成が遅くなってしまった……。PC前で何時間も作業して唸っている時間は楽しかったです。検索で出てきたリファレンスサイト様全てに感謝致します。
ソースコードやライブラリの公開、ありがたすぎる……

もの作りでも暇つぶしでも、何かの助けになれば幸甚です。

ものを作らない場合でも、頭の中の出力の補助みたいな役割ができたらいいなと思います。例えばネイルサロンとか指輪オーダーとかで「こんな感じのグラデーションでお願いしたいのですが」って言えると自分も頼みやすくなるしデザイナーさんとの齟齬も少なくなりそう

人様の好きなグラデーションも気になる！！もし良かったら名簿に書き込んで教えてくださいね！