サイトロゴをつくる

イマドキは、さまざまなR&Mイラストが無料で手に入る時代です。
なので、当初はいただきものをほんのちょっと加工して使用するつもりでした。
実際、とあるアイコンイラストにすでに決めており、初日はそれをサイトロゴとしていたのです。

ですが、フツーは永く使うものであるだけに、やはりオリジナルを目指すこととし、
上の画像のような手書きロゴを作ってみました。

お手本があるのにオリジナルってなんだろ？

ごもっともな疑問です。
これについては、いずれ別記事として書く予定です。→こちらの記事で少しだけ触れました（7/12追記）

さて、このデザインで特徴的なのはパス（≒線）に沿ったグラデーションということです。
特別に珍しいわけではないですが、一般的でよく見かけるグラデーションといえば、
以下のように、色違いのゼブラ模様の台紙を希望の形で切り取ったようなものですね。

上の3つの画像は、縦縞、横縞と、ゼブラの台紙の角度こそ違いますが、ハート型でくり抜いたという点では同じです。
これはこれで綺麗ですが、ハートの形そのものを活かせていないので、少々残念な気もします。
例は掲載しませんが、少しずつハートを小さくした色違いの折り紙を重ねるようなグラデーション、
あるいは、ゼブラではなく同心円状のグラデーションの切り抜きなどは、より動きが感じられて面白いかもしれません。

ちなみに1枚目の画像（レスポンシブデザインサイトなので、デバイスによっていちばん左、もしくはいちばん上）が、
（→レスポンシブなので、この行自体をデバイスに応じて差し替えることも可能でした）
個人的には、この3つの中で最も選びたくないパターンです。
白（余白）を付けたとしても、濃すぎるというか強すぎるというか、何かが違うんです。
LGBTでよく見る配色ですが、「そういう人たちを嫌っているから」でも当然ありません。
（LGBTロゴについても、いずれ書きます）

「色数が他の2つより少ないから」でもなく、同じ6色ロゴでもAppleの旧ロゴは大好きです。
色のバランスなのだと思います。

知らなかったんですが、このロゴはすでにパブリックドメイン状態（著作権消滅）のようですね。
とはいえ、このロゴを使用した商品を販売したりすれば、それはまた別の法に抵触するでしょうが。

話を戻しますが、最も選びたくないと書いたハートロゴの他も、R&M収集の対象としてはイマイチです。
青が広すぎるからです。
でもこれは、当サイトで使用しているサイトロゴと同じスウォッチ（色や幅などの配色パターン）で作成したハートなんです。
どういうことでしょうか。

冒頭で、

特徴的なのはパス（≒線）に沿ったグラデーション

と書きました。
つまり、「一筆書き」である必要性が生じます。
流れるような筆記体も存在するアルファベットでは良いのですが、漢字を含む日本語の一筆書きはかなり困難です。

今回、書き順も無視して「つながり最優先」でデザインしましたが、「萌」が無理ゲー。
行きつ戻りつで、1字でかなりの長さを消費してしまうため、「青を広く取った」というわけです。

冒頭の引用画像には影が付いていますが、当サイトロゴにはありません。
実はギリギリまで悩んだため、影付き、ナシの両バージョンが存在しますが、実際にヘッダーに配置してみてナシを選んだということです。
冒頭の引用画像も元は影ナシでしたが、フリーグラデーション背景を追加する際に、影を追加したものです。

「え」の下部、グラデーションのフィニッシュには、茶、黒、灰、白も加えています。
R&Multi Color萌えですから。
そしてこれが、サイトのヘッダーとフッターがモノトーンである理由です。
派手なカラーがたくさん並ぶサイトになることが予想できているのですから。

ガチのデザイナーではないので、素人っぽさまる残りですが、気に入っています。
使用しているWordPressテーマのカスタマイザー（外観エディタ）がsvgロゴを受け付けず、
実寸のpng（対Retina用には別に用意できる）であることからの輪郭のアマさも、雰囲気を作るのに一役買っているように思えました。
「いらすとや」さんぽいというか、ちぎり絵っぽいというか。
とはいえ、jpgより遥かに高精細なので、svgよりはアマい、ということです。

その後、結局は輪郭のアマさが気になりだし、
CSSで背景としてsvgロゴを仕込み、pngロゴ自体は透明化という力技も試しました。
マウスホバーによる透明度変化も再現できたのですが、何をやっても左端の数ピクセルが見切れてしまう問題を解決できずに断念。
現在は、Retinaの倍相当のpngデータをカスタマイザーで設定した上で、
追加CSSでサイズを半分に抑え込むという方法で表示させています。

サイトアイコン（ファビコン）も作りました。
ブラウザのアドレスバーやブックマークに表示させる関係上、正方形に収まるデザインにする必要があり、
横長のサイトロゴでは共用することができないためです。
サイトロゴと同じスウォッチを適用した渦巻きですが、Adobeのフリー素材に似たような写真を見つけてびっくり。
この写真、なかなかにツボです。

化粧はレインボーですが、肌、目、髪色、まつ毛でマルチカラーを満たしています。
Tシャツでもあれば買いですね。
ん？　販売目的ではなく、個人でプリントTを作って楽しむ分には合法なのか。
現在は1着から作れるサービスも複数ありますし、Adobe Stockの利用規約にも違反しないはずです。
今のところ、作りませんけど。