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

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

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

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

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

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

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


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

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

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

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


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



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

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



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



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



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



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

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

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

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

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

2018年html5最小テンプレートとよく使うhtmlスニペット

htmlコーディングの骨組みとなるhtml5のテンプレートとコーディングを行う上でよく使うスニペットをまとめました。真夜中WEBではご依頼内容に合わせた手打ちのコーディングを行っておりますので備忘録の意味合いもあります。…続きを読む

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

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

ホームページに3DCGコンテンツを埋め込んでブラウザでグリグリ動かす1

3D

3DCGコンテンツの埋め込み方法としては、 1、sketchfabという3DCGデータ投稿・共有サービスを利用してサクッと埋め込む方法 Sketchfab – Your 3D content on web, …続きを読む

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

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

よく使うワードプレスのphp関数スニペット。随時追加

しょっちゅう使うわけではないけれど、ワードプレスを使うサイトが多くなってきたことに伴い使う頻度は増えてきたワードプレスの関数をその都度調べて記述するのもめんどくさくなってきたのでまとめてみました。 ● まずは、htmlフ…続きを読む