はじめまして。圧縮おにぎりです。普段はデータ入力と、たまにホームページのパーツ作成と称としてHTMLやCSSをいじったり、画像をいじったりしています。
今回はWEB用の背景素材の色の組み合わせで色々試したことについて簡単に書いていきたいと思います。
①雰囲気を察知する
今回いただいたコンセプトは「タロットカード占い」だったので、
私の『タロットカード＝ヨーロッパのちょっとミステリアスなやつ』という偏見を基に、
西洋風の背景画像を用意するべく素材サイトさんをはしごすることにしました。
②素材を探す
最新鋭の素材サイトさんや、
なぜか生き残っている一部の人は心臓がキュッとするかもしれない20年くらい前の素材サイトさんまでいろいろめぐりましたが、
最終的には最近の素材サイトさんでいろいろ試すことにしました。
↓利用した素材サイトさんです↓
Bg-Patterns様
https://bg-patterns.com/
③いろいろ試す
ここの素材サイトさんはパターンの大きさと、パターンを構成する色を自分で変えられるのが魅力ですね。
配色を決めるのは苦手分野なのでめちゃくちゃいじり倒しました。
というわけでいただいてきた背景素材を一部掲載します。
※利用規約の関係上、この記事にある画像はダウンロード等はしないで眺めるだけにしてくださいね。
作成時に考えていたことは、上から順に
「魔法の薬草っぽくていいな」
「黒魔術寄りのミステリアスっていいな」
「西欧の亡国のエンブレムみたいなやつはどうかな」
です。最後はもはやミステリアスに関係ないですね。
しかし、ベースになる画像がかっこいいのは当たり前なので配色さえ何とかなれば勝てます。
元がいいものは徹底的に使い倒すのです。
④ブラッシュアップ
これら3点を含んだ6～7点をコンセプトイラスト担当の方に見ていただき、
イラストとの相性を考慮しつつ、
いくつか意見をいただいて最終的に決まった画像がこちら。
先ほど挙げた一番上の画像パターンに、
真ん中の画像の色を指定したものです。
これにこの画像を背景にしてもチカチカしなさそうな文字色のサンプルを添えてコーディング担当の方にお渡ししました。
⑤Mission Complete!!
時々余計なことを考えていましたがなんとかなりました。
余談：コンセプトイラストとの組み合わせ案を提示する際に、
背景画像サンプルを敷き詰めるのが面倒くさくて、
・コンセプトイラスト
・背景画像サンプル
・おすすめ文字色
をWEBページにまとめて背景画像と文字色を差し替えていたのですが、
JavaScriptが本当にできないので、差し替えの際はその都度背景画像と文字色のHTMLを編集するという暴挙に出ていました。
差し替え1回ごとに数十秒かかるのでおすすめしません。
あと④の段階でお分かりかと思いますが、趣味・仕事にかかわらず、
誰かに頼まれて何かを作る・いじる系の分野はほぼ確実に自分以外の人の意見を聞いて反映する作業が入るので、
よほどの理不尽な仕打ちでない限りは自分の意見が通らなかったからといってブチ切れてはいけません。
窓を開けて新しい風を入れましょう。
そうやって人は経験値を積むのです。
ではまた。
