WEB制作お役立ちツール1 (人型アイコン、アバター画像作成)

WEBサイト制作では、暫定的に使う、いわゆる「アテ」画像がほしいときがあります。

一言でアテといっても、写真ぽいアテ、無地画像のアテなど案件によって様々です。

このような画像は「ダミー画像」などで検索するとたくさん出てくるのですが、アテ画像の中でも、フレームワークやデザインカンプ作成時に人物画像(アバター画像)がほしいなということは意外と多いものです。

例えば会社様のサイトで従業員やスタッフさんの紹介項目などがある場合には、フレームワークなどでもそのようなアテ画像があればお客様とのやり取りの際にサイトイメージを伝えやすくなりますが、人物画像などはイメージに合ったものは見つけるのは骨の折れる作業です。

今回ご紹介する「human icon creator」はそのような需要に答えてくれます。

などと、まるで真夜中WEBと無関係のツールであるかのように紹介していますが、真夜中WEBが運営しております
(どうぞよろしくおねがいします。)


人物画像(アバター)をオンラインで作成できるサービスは他にもいろいろあるとは思いますが、各パーツを自由にドラッグして配置して、かつ色を変えられるサービスは少ないのではないかと思い作ってみました。

背景透過画像として保存されるので使い勝手はいいとおもいます。

WEB制作お役立ちツールとしていますが、作成した画像は、私用・商用問わず著作権表示不要にてWEB、印刷物、その他様々な用途に無料でご利用いただけます。
もちろんWEB制作者様のみならず、個人様、企業様、その他各種団体様もご利用いただけます。

詳しくは利用規約をご覧ください。


作成画面はこんな感じです。



サンプルとしていくつか作ってみました。

まずはやんちゃそうなおにいさんのアバター



さらに色メガネをかけさせてみた。



会社員のおねえさんのアバター(髪の毛むらさきにしてみた)



最後にサーファー風おにいさんのアバター



使い方の詳細はこちら使い方をご覧ください。

書き出される画像サイズはPCの場合500px × 500px、スマホの場合300px × 300pxですが、スマホで作成するのはあまりおすすめしません。

各パーツや服、アイテムなどは今後も追加していく予定です。

Atom vs VSCode vs Brackets、もっとも使いやすいエディタはこれだ!…といいな

typewriter

真夜中WEBではWYSIWYGエディタを使用せず、テキストエディタを使ってホームページ制作を行っております。 具体的にはWindowsでは「サクラエディタ」を、Macでは「mi」を使用しているんですが、OSごとにエディタ…続きを読む

プラグインに頼らないでワードプレスを移転する。ドメイン変更対応

最近はサイト内にワードプレスが設置されている、またはサイト自体がワードプレスでできている、ということが多くなってきました。 それに伴って、当然のことながらサイトを設置しているサーバーの移転にはワードプレスの移転も含まれる…続きを読む

画像をグループでソート、クリックでライトボックス表示し、かつjquery3.xに対応させる

サイト内で複数の画像をまとめて表示するときに項目でソートできるjqueryのプラグイン「Shuffle.js」。 まずはデモページをご覧ください Shuffle.jsCategorize, sort, and filte…続きを読む

CSSだけで実装できる! スクロールした時に画像以外のコンテンツを挟んで背景画像を切り替える方法

タイトルを読んだだけではイマイチ分かりにくいので、下記デモページをご覧ください。 デモページを見る ご確認いただけましたか?そうです、よく見かけるやつです。 ※ただこの方法、ものすごく簡単なんですがスマートフォン(多分タ…続きを読む

WEB制作お役立ちツール1 (人型アイコン、アバター画像作成)

WEBサイト制作では、暫定的に使う、いわゆる「アテ」画像がほしいときがあります。 一言でアテといっても、写真ぽいアテ、無地画像のアテなど案件によって様々です。 このような画像は「ダミー画像」などで検索するとたくさん出てく…続きを読む

DNSサーバーを切り替える前に切り替えた後の表示を確認する方法

理由は様々ですが、既存のホームページをまるごと他のサーバーに移転したいとのご依頼を承ることがあります。 通常の静的なサイトの移転でドメインが変わらない場合には基本的にサーバーに置いてあるフォルダ・ファイル群を古いサーバー…続きを読む