絵だったら一瞬で分かるのに、文章や文字ばかりだと堅苦しそう、って感じることないですか？
文字ばかりの制作物より、イラストや画像が入ってるほうが見栄えも良く、人に分かりやすく伝わります。
実は先日、職場でちょっとした掲示物を作る機会があり、そのとき利用した「ヒューマンピクトグラム 2.0」という素材サイトを利用しました。
そのサイトの素材が無料で使えて、とっても秀逸だったので紹介します。
もしあなたが、Adobe illustrator を持っていなくても、ちょっとヤル気のある方なら、色変更したり、複数のピクトグラムやアタッチメントを組み合わせて、自分が表現したい画像を作ることが可能です。
ここでは、わたしが実際に色変更や素材を組み合わせて作ったピクトグラムを紹介しながら、あなたが職場や趣味で使う際の「ヒューマンピクトグラム 2.0」の可能性についてお伝えしていこうと思います。
ちなみに、ヒューマンピクトグラムの色変更のみには Windows 10 の「ペイント ３D」を、ピクトグラムを組み合わせての画像作りは「BOXY SVG」というオンラインアプリを使いました。
ヒューマンピクトグラム 2.0はビジネス（商用）でも利用可能か?
無料素材を使用する際に、一番気になるのは、その素材を利用する際の条件です。よくよく規約を読むと、商用利用はNGだったり、素材の改変はNGだったなんてことがよくあります。
しかし、このヒューマンピクトグラム 2.0 にはビジネス（商用）使用に際して大きな制限がありません。太っ腹です。これだけの素材を無料で提供してくださるなんて著作者のTopeconHeroesダーヤマさんって凄いですね。
しかし、無料ではありますが、もしあなたがビジネス（商用）で利用する場合には、ライセンスだけは読んでおいてください。時間はかかりません。
ライセンスとQ＆A
一応、ヒューマンピクトグラム2.0に展示しているデータの著作権はTopeconHeroesダーヤマが保持しますが、基本的には無料かつ、報告無しで、WEBデザインやDTPデザイン各種資料やフライヤー、標識デザインの素材としてご使用可能です。
なお1.0のようなパブリックドメインについては私の著作権ではありません。禁止事項は下記の４つ
・素材販売サイトで、素材そのものや改変した素材を売る事は禁止です。
ライセンスとQ＆A
・このようなサイトを作って素材を再配布することは禁止です。
・ロゴなどの商標として登録されるとダーヤマ含め他のデザイナーさんが使えなくなりますので禁止です。
（その場合は原型がわからなくなるぐらい改変するか、デザインのごく一部としてご使用ください。）
・素材の直リンクはサーバーを圧迫するのでお控えください
ヒューマンピクトグラムとは
ここまで話しておいて今さらですが、そもそも「ヒューマンピクトグラム 2.0」って何!? って方がいらしたらスミマセン。念のためヒューマンピクトグラムって何ぞや!? って簡単に紹介しときますね。
そもそもピクトグラムとは、情報や指示、案内などを単純化した絵や図形で表したもので、よく非常口の天井で見かけるアレです。
文字よりも可視性がよく、一発で人に伝わりますよね。
「ヒューマンピクトグラム 2.0」は、この非常口の人をモチーフに色々なシチュエーションを描いたグリーンのシルエット素材集です。
一覧を見るだけで愉快なシチュエーションが多く、思わずクスッって笑ってしまいます。中には、こんなのどこで使うんだ！ってツッコミを入れたくなるものもあります。
著作者のTopeconHeroesダーヤマさんいわく、
ヒューマン ピクトグラム2.0は、標識などで使われるピクトグラムをTopeconHeroesダーヤマの好みで私的に拡張、ストックしていくページです。
ピクトグラムはほとんどの場合、公共交通機関や、バリアフリーなどの標識に使われるため、雰囲気が真面目なものが多く、やや面白みに欠けるので、くだらないポーズなど多めにバリエーションを増やしていく事にしました。
ヒューマンピクトグラム2.0とは？
とヒューマンピクトグラム 2.0 のサイトに書かれています。楽しい場面が多いのも納得できますね。
ヒューマンピクトグラム 2.0 の使い方
使い方は簡単です。サイトにアクセスするとすぐにピクトグラムの一覧が表示されるので、気に入った素材があれば、そのピクトグラムをクリックするだけです。
もし、見ているページにお気に入りのピクトグラムがない場合は、下部にページのボタンがあるので、クリックして探しましょう。
上部にある検索窓に単語を入力して、欲しいピクトグラムを探すこともできます。
どれかひとつのピクトグラムをクリックすると、左側にカテゴリも表示されるので、そこから探すこともできます。
ダウンロードできるファイルの種類には illusutrator ai ファイル、JPGファイル、PNGファイルから選ぶことができます。
illusutrator ai を選択した場合には、すぐにファイルのダウンロードが始まります。圧縮ファイル zip 形式なので、ダウンロードしたら解凍して使います。
解凍は、zip ファイルをダブルクリックして zip フォルダーを開き、中の ai ファイルを zip フォルダーから別の場所にドラッグすれば完了です。
JPGファイルとPNGファイルは、同じピクトグラムでもいくつかのバリエーションが提供されているので、下の画像からほしいものを選択します。
ダウンロードは右クリックで表示されるメニューから「名前をつけて画像を保存」を選択します。
一応、わたしがヒューマンピクトグラム 2.0 でダウンロードするファイル種類の選択基準をお伝えしておきます。
ヒューマンピクトグラム2.0でダウンロードできるファイルの種類
illusutrator ai
Adobe illusutrator で編集可能なファイル。zip形式の圧縮ファイルにいくつかのバリエーションが一緒に収まっている。
ピクトグラムの色のみならず形やレイアウトを変更するとき、別々のピクトグラムやアタッチメントを組み合わせてひとつの画像を作るときに使用します。
JPGファイル
画像ファイル。ファイルサイズがPNGより重く、背景が白なのであまり使っていません。
PNGファイル
画像ファイル。ピクトグラムをそのまま使う場合や色のみを変更して使うとき。背景が透明なので便利。
自分の使用用途に合ったものをダウンロードしてお使いください。わたしは画像をそのまま使うときはPNGファイル、画像をある程度、加工して使う場合は illusutrator ai ファイルといった基準で使っています。
ヒューマンピクトグラム2.0の色変更の方法！
ピクトグラムの緑色を変えたい！ ってこともありますよね。しかし残念ながら、ヒューマンピクトグラム2.0のサイト内であなたが望む色に変更することはできません。
ということで、ここからは、ヒューマンピクトグラムの色変更をはじめ、私が職場の掲示物のために作ったイラストの作成方法などを紹介していきます。
わたしはデザイナーではないので、Adobe Photoshop や Illustrator などの高度なクリエイティブソフトやアプリは持っていません。普段、職場でよく使うソフトはマイクロソフトのExcel や Word のビジネスソフトの類です。
なので、今回、画像を作るためにわたしが使用したツールはすべてパソコンにもともと入っていたツールやインターネット上のサービスを使って作っています。
あと、私の使っているパソコンの OS は Windos 10 です。Mac や他のOSをご使用の方は読み替えて読んでもらえると嬉しいです。
なお、今回は背景が透明なものを使いたかったので、ファイルはPNGファイルをダウンロードして使います。
Windows 10 の「ペイント ３D」を使う
Windows 10 に標準でインストールされている「ペイント ３D」というアプリを使います。
Windows OS には以前から「ペイント」というソフトがインストールされていたのですが、こちらは背景が透過しているPNGファイルを編集して保存すると背景が白に変わってしまいます。その点、「ペイント ３D」は保存しても透明なままです。
「ペイント ３D」という名前なので３Ｄ専用のアプリと勘違いしがちです。以前までわたしもそう思っていました。しかし、２Ｄでも十分に使えます。というより、使い方を覚えればかなりのことが出来ます。
以前の Windows 標準ソフト「ペイント」では、ちょっと機能が足りないけど、わざわざ高度なソフトやアプリを起動して画像編集するまでは億劫だという機会が多い人は、ぜひ「ペイント ３D」の使い方を学んでみることをお勧めします。
では、やり方です。まず「スタートメニュー」から「ペイント ３D」を選んで起動します。
次に、画面上の「開く」を選択して、ヒューマンピクトグラム 2.0からダウンロードしてきたPNGファイルを開きます。
画面上部の「ブラシ」を選択し、画面左側のバケツの絵の「塗りつぶし」を選択します。
すると、下部で塗りつぶしたい色を選択できるようになるので、あなたが塗りつぶしたい色を選択します。
画像の上にカーソルを持っていくとカーソルが＋マーク変わるので、塗りつぶしたいところをクリックします。
画像の保存は、画面上部の「メニュー」から「名前をつけて保存」を選択します。「コピーとして保存」の「ファイル形式の選択」から「画像」を選択して保存します。
今回は Windows 10 に標準でインストールされているソフトを使いました。しかし、インターネットにはブラウザ上で画像を加工・編集できるサイトがたくさんあります。
Windows 10 以前の OS をお使いの方は、そちらをお使いいただくと便利かもしれません。わたしは「pixlr」というサイトをよく利用しています。参考までに。
ヒューマンピクトグラムのアタッチメントでキャラ変自在！
ここでは、Adobe Illustrator を使わずに気に入ったピクトグラムやアタッチメントをいくつか組み合わせて画像を作る方法をご紹介します。
ちなみにアタッチメントとは、ヘアースタイルやメガネ、帽子などピクトグラムをデコる付属品みたいなものです。アタッチメントを使うとピクトグラムにバリエーションをもたせることができます。
それではまず、わたしがどんな画像を作ったのか紹介します。完成品です。
職場の「水曜日定時退社」の張り紙を作るために作った画像です。
ヒューマンピクトグラム 2.0 の中にあるアタッチメントの「帽子」とビジネスのカテゴリ―にあった「オフィスでストレッチ」と「スマートフォン中毒」の３つの「illusutraotr ai」ファイルをダウンロードしてきて作りました。
まず、手順の全体概要です。
手順①：ヒューマンピクトグラム 2.0 のサイトで使用したい画像を選び、illustrator ai ファイルをダウンロードする（ファイルは zip ファイルで圧縮されています）。
手順②：ダウンロードした zip 形式の圧縮ファイルを解凍する。
手順③：「Convertio」というサイトで、ai ファイルを SVGファイルに変換する。
手順④：「BOXY SVG」というサイトで、ai ファイルの編集を行う。
Adobe Illustrator を持っていれば、手順③以降は Illusutraotr 内でやれますが、わたしは持っていないので③と④が必要でした。
一見すると手順が複雑そうですが、慣れればそれ程でもありません。手順①と手順②については、前の章で説明したので、ここでは手順③から説明していきます。
無料サイト「Convertio」で、ai ファイルを SVGファイルに変換
「Convertio」 はオンライン上でファイルを簡単に変換するツールです。309以上の様々なファイル形式をサポートしています。
利用に際してはアカウント登録が不要で、無料プランは１日に100MBまで利用できます。
ヒューマンピクトグラム 2.0 のひとつの aiファイルのサイズは500KB前後、100MBは100000KBなので、雑な計算でも１日500ファイルくらいはConvertioで変換できることになります。余裕です。
変換方法は、まずサイト内に変換したいファイルをドラッグ＆ドロップするか、サイト中央の赤い「ファイルを選ぶ」から選んで変換したいファイルを指定します。
次に、変換したいファイル形式を指定します。ここでは画像の中の「SVG」を選択します。もし変換するファイルを間違ってしまった場合は、ファイル名の右端にある「✕」ボタンを押しましょう。
変換したいファイルが複数ある場合は、複数のファイルをサイトにアップロードして、最後に赤い「変換」ボタンを押せば変換が始まります。
ちなみに、サインアップしないで同時変換に変換できるファイルは２つまでです。もし、あなたが３つ目以上のファイルを変換する場合は、最初の２つの変換が完了するまで待って、３つ目のファイルの「変換」を行ってください。
変換後のファイルは、画面上部の「マイファイル」をクリックすると見ることができます。
変換終了後に画面に表示される青い「ダウンロードボタン」を押して、変換されたSVGファイルをダウンロードしましょう。
オンラインサイト「BOXY SVG」で、SVGファイルを編集
いよいよ、ここから画像を作る作業です。先ほど「Convertio」でファイル変換したSVGファイルを「BOXY SVG」というサイトにアップロードして編集します。
「BOXY SVG」は Google が提供しているベクター画像制作ツールです。パソコンにインストールすることなくブラウザ上で使え、操作性がシンプルで挙動も速いので、ちょっとした図形を作るのにストレスがかかりません。
以前は無料で使えましたが、現在はサブスクリプション（定額制）になっています。最低プランの”Standard”で年間9.99USDです。日本円で年間千円ちょっとで１年間使い放題です。
Adobe illustrator のサブスクリプションは月額2,728円（2022年9月現在）なので、ゴリゴリに画像を作るという人でなければ「BOXY SVG」でも十分だと思います。
実際に使ってみたところ15日間のトライアル期間がありました。その間に画像を作って終わりにしてしまうのもアリですし、今後もずっと使いそうだと考えれば、サブスクリプションを検討してみるのも悪くありません。
今回は編集したSVGファイルをPNG形式の画像ファイルでエクスポートするので、アカウント登録が必要です。画像ファイルまでエクスポートする人は、事前にアカウント登録を済ませておいてください。
アカウント登録は、トップページ右上の「Account」をクリックして「Registor…」を選びます。
ここで、必要な情報を入力して青色の「Registor」ボタンを押してください。
登録したメールアドレス宛に、認証メールが届いているので、メールに記載されているURLをクリックして認証を行ってください。これで準備完了です。
「BOXY SVG」のトップページの「LAUNCH APP」ボタンをクリックして、キャンバスの画面を表示します。
まず、最初に使う画像をキャンバスに読み込みます。英語のメニューで尻込みしそうですが、慣れればそれほど難しくありません。
画面上部のメニュー「File」から「Import from disk」を選択して、「Convertio」からダウンロードしたSVGファイルをインポートします。
この手続きで、必要なSVGファイルをインポートしてください。インポートするといくつかのバリエーションのピクトグラムが一緒に表示されるので、必要なピクトグラムを選択して、キャンバスにもっていきましょう。
必要なピクトグラムを何回かクリックするとほしいピクトグラムの周りに青い編集ハンドルが表示されて移動・サイズ変更できるようになります。
このとき、画面左端メニューで矢印「Transform」が選択されていることを確認してください。たまに、すぐ下の「Edit」が選択されていて、うまく選択できないことがあります。
画面上部のメニュー下に現在、自分が選択しているグループの大きさの範囲を見ることができます。
また同じピクトグラムをクリックして、ピクログラムの周りに赤とオレンジの編集ハンドルを表示させると、ピクトグラムを回転させたり、歪ませたりできます。
不要なピクトグラムは、キャンバス外に置いたり、削除してしまってもかまいません。同じような手続きで、必要なピクトグラムをキャンバスにもってきましょう。
ちなみに、画面上部メニューの「View」の中に「Zoom in」や「Zoom out」、マウス操作の人は「Ctrl」キーを押しながらマウスのホイールボタンを上下に回転させるとズームアウト・ズームインが出来ます。
自分の操作しやすいサイズにキャンバスサイズを変えてみてください。
では、素材がそろったところで、絵を作っていきます。
「オフィスでストレッチ」の人を選択して削除し、その横に「スマートフォン中毒」の人をもってきます。
そして「スマートフォン中毒」の人を選択した状態（青い編集ハンドルを表示させた状態）で、画面右端のメニューより「Arrangement」を選択し、「Transform」の中の「Flip X」をクリックします。それまで左を向いていた人が右を向きましたね。
次に、「スマートフォン中毒」の人が持っていたスマホを選択して削除し、帽子を持たせます。
帽子を人の近くに移動して、数回クリックすると編集ハンドルがオレンジと赤に変わり、帽子を回転できるようになります。四隅の赤いハンドルをクリックしながらドラッグすると帽子が回転します。
回転させた帽子が大きすぎるので、また帽子をクリックし直して編集ハンドルを青くし、ドラッグして、帽子を小さくします。そして、人の手元に移動します。
今度は、絵の下の「水曜日定時退社」の文字を入れます。画面左端メニューの「Text」を２回クリックすると、文字入力と色を指定できるようになります。
ボックスの中に「Grab」と書かれたスポイトツールがあるので、わたしは、ピクトグラムの緑色を文字の色にしました。その状態で、キャンバスの任意の場所を触ると文字が置かれます。
「Text」のボックスは画面左端メニューの「Text」を、もう一度クリックすることで消えます。「Text」が青く選択されたままだと、キャンバスに触ったときにまた文字が置かれてしまうので「Transform」あたりをクリックしておくとよいです。
文字にも編集ハンドルを表示させることができるので、ピクトグラムと同じように大きくしたり、回転させたりすることができます。わたしは、上のピクトグラムのサイズに文字の大きさを変更しました。
文字に編集ハンドルを選択した状態で画面右端メニュー「Typography」を選択すると、文字のデザインを変更できます。
「Font」の中の「Family」をクリックして「LOCAL FONTS」を選択すると、自分のパソコンの中のフォントを指定できます。青文字の「Click here」をクリックしてください。
そのとき、ブラウザ上に”「boxy-svg.com」が次の許可を求めています”とメッセージが表示されるかもしれません。そのときは、ブラウザがパソコン内のフォント使用を許可するかどうか求めてきているので、問題なければ「許可する」をクリックします。
わたしは、仕事でもよく使うフォント「HGPSoeiKakupoptai」（HGP創英角ポップ体）を指定しました。
次に、私はアイコンのようにしたかったので、ピクトグラムを白抜きに、枠を現在のピクトグラムと同じ色にすることにしました。
画面左端メニューの「Rectangle」を選択して、キャンバス上のピクトグラムが隠れるくらいの大きさの四角形を描画します。
画面左端メニューの「Transform」を選択し直して、先ほど描画した四角形をクリックして、編集ハンドルを表示させます。
そのまま、画面右端メニューから「Stroke」を選び、その中の「Width」の設定のスライダーを左に動かし”0”に設定し、四角形の枠線を消します。
次に、四角形の色をピクトグラムと同じ緑色に変えます。同じ画面右端メニューから「Fill」を選び（四角形には青い編集ハンドルがついたままの状態）、カラーパレットの下にあるスポイトツールを選びます。
その状態で、ピクトグラムの絵の一部をクリックします。すると選択していた四角形の色がスポイトツールで指定した色に変わります。
今度は、ピクトグラムを白抜きにします。ピクトグラムをドラッグして青色の編集ハンドルを表示させます。
この状態で、画面左端メニューの「Fill」の中の「Paint」の設定を変更します。するとピクトグラムの色が白色に変わったので、キャンバス上から見えなくなりました。
ピクトグラムの上に後から四角形の描いたので、今は、ピクトグラムの上に四角形がかぶさっている感じです。
このかぶさっている四角形をピクトグラムの下にもっていって、上から見たときに白色のピクトグラムが緑色の四角形の上にのっているようにしなければなりません。
四角形を最背面にもっていきましょう。やり方は、緑色の四角形を選択して画面左端メニューから「Objects」を選択します。
すると「Objects」で、キャンバス上のオブジェクトの重なり具合を見ることが出来るので、一番下にある「Rectangle」をドラッグして一番上に移動します。どうですか。ピクトグラムが四角形の一部に表示されませんか。
そのまま四角形をピクトグラムと重なるいい位置に移動して、必要がある場合は四角形の編集ハンドルをドラッグして大きさを変更します。
きっちり緑色の四角形を正方形にしたい人は、画面左端メニューの「Geometry」を選択して、オブジェクトの大きさを数値で変更します。ここでは四角形を選択した状態で「Object」の「Width」と「Height」をそれぞれ”205”に指定し、正方形に設定しました。
四角形の角を少し丸めてみます。四角形をそのまま選択したまま、「Geometry」メニューの中の「Rectangle」の「Corner radius」の４つの数値をすべて”25”に設定します。
画像の完成です！ お疲れさまでした。最後に、また何かあれば編集できるように、これまで作ってきたファイルの保存と張り紙づくりで使う画像にエクスポートしましょう。
最初にも書きましたが、ファイルの保存やエクスポートにはアカウントの登録が必要です。ファイルの保存やエクスポートを行う人は速やかにアカウントを作成しましょう。
「BOXY SVG」のファイルの保存は、画面上部メニューの「File」の中の「Save」か「Save to disk as…」を選択します。初めて保存する場合は「Save to disk as…」を、上書きで保存する場合は「Save」を選択してください。
私は、Microsoft の Word や Excel で職場の張り紙を作ることが多いので、それらのソフトで使える画像に作った画像をエクスポートします。
同じく画面上部メニューの「File」の中から「Export to disk…」を選択するか、画面右端メニューから「Export」を選択してください。
エクスポートにはいろいろなファイル形式が選べますが、今回はわたしがよく利用するPNGファイルでエクスポートしてみたいと思います。
「Export」の下のファイル形式が「PNG」、「Options」メニューの「Area」を”Selection”に指定した後、キャンバス内のこれまで作ってきた画像をすべてドラッグで選択します。
画像を選択する際、四角形のみをクリックしてエクスポートすると、緑色の四角形のみの画像（中にピクトグラムなし）がエクスポートされます。
エクスポートしたい画像すべてをドラッグして選択することで、その範囲に入っているオブジェクト（絵）がすべてエクスポートされます。
また、今回は掲示物用の画像として使うので、画像サイズを大きくしてエクスポートします。「Export」メニューの中の「Options」の「Width」と「Height」をそれぞれ”205 px”から”1000 px”に設定します。
Microsoft のWord などに小さな画像を貼り付けた後、画像を大きくしようとドラッグすると、画像の輪郭にギザギザ（ジャギー）が現れます。
そのため、今回はエクスポートする際に画像サイズを大きくして、初めから画像を引き延ばす必要がないようにしました。
設定が完了したら「Export」メニューの一番下のボタンの「Export」をクリックします。画像保存先を聞いてきますので、任意の場所に保存してください。
もし、「Export」ボタンがクリックできないときは、エクスポートするオブジェクト（ぴくログラムの絵）が選択されていないことが考えられます。エクスポート対象の画像が選択されているかどうかを、今一度確認しましょう。
いかがでしたでしょうか？ ちょっと難しかったですか？
難しそうに見えても、「えい！やあ！」でやってみると、それ程でないことも多くあります。もし、あなたがピクログラムで画像を作ってみたいと思ったら、ぜひ手を動かしてみることをオススメします。
まとめ
- ヒューマンピクトグラム 2.0はビジネス（商用）でも利用可能です。
- ヒューマンピクトグラム色変更は、Windows 10 の「ペイント ３D」がオススメ。
- ヒューマンピクトグラムのアタッチメントによるキャラ変にはオンラインアプリ「BOXY SVG」を活用
ヒューマンピクトグラム 2.0はとても便利なサイトです。少しの労力で、わたしが作った画像くらいならあなたでも作ることが出来ます。
ぜひ、あなたのお仕事や趣味にヒューマンピクトグラム 2.0をご活用いただければと思います。
コメント