ホームページでイラスト(アイソメトリック)が活用されるのはなぜ?

ホームページ制作

最近、B2B企業サイトでイラストの活用が広がっています。B2B企業サイトでも、よくみかけるようになったイラスト表現が「アイソメトリック」です。この記事では、アイソメトリックイラストの特徴と、B2B企業サイトで使いたい素材サイトをいくつか紹介します。

B2B企業サイトで進むイラスト活用

ホームページにアクセスすると、イラストを活用したB2B企業サイトをよく目にするようになりました。その理由には以下の三つが考えられます。

一つ目は、ストックフォトを使う企業が増え、どこも似たような画像を使うようになったことです。オリジナルイラストを使えば、他社と同じ画像が自社サイトで使われるのを回避できます。

二つ目は、B2B企業がサイトを使って情報発信することが当たり前になり、デザイン・表現上の差別化が必要になったことです。「親近感」「親しみやすさ」を打ち出す方法の一つとして、イラストを使う企業が増えたことがあげられます。

三つ目は、イラストは専門的な内容でも分かりやすく伝えられることです。そのため、専門性が高い商材を扱うB2B企業では、イラストを活用することで、難しい内容でも直感的に情報を理解してもらえやすくなります。

アイソメトリックなイラストがトレンド

17図1.png

2019年頃からのホームページでのイラスト表現のトレンドが「アイソメトリック」です。
アイソメトリックは、isometric projectionの略で、「等角投影図法」ともいわれます。アイソメトリックイラストは、直交する3軸がそれぞれ120°になるように描きます。
この手法で描かれたイラストは、対象物を斜め上から見下ろすような視点になり、平面的な印象になりがちなホームページに、立体感と奥行きを与えることができます。


アイソメトリックイラストを使ったホームページ10選

それでは実際に、どんな風にアイソメトリックイラストが使われているか見ていきましょう。

TDK株式会社|こんなところにTDK

17図2.png

つながる科学研究所

17図3.png

株式会社DRIVE LINE

17図4.png

株式会社ツムラ|バーチャル漢方記念館

17図5.png

パシフィックシステム株式会社

17図6.png

株式会社村上製作所

17図7.png

河合電器制作所

17図8.png

株式会社DK-Power

17図9.png

株式会社トレンド・オン

17図10.png

株式会社ホクリクコム

17図11.png

ホームページに使いたい素材サイト10選

ここでは、ホームページに使いたい素材サイトを紹介します。アイソメトリックイラストをはじめ、様々なスタイルのイラストがみつかります。

amanaimages

写真・動画・イラストがみつかる日本最大級のストック素材販売サイトです。
イラストレーターが日本人の好みにあわせて制作した限定オリジナル作品があります。写真は、日本人が被写体のものが多く、シーンにあった日本人イメージの選択が可能です。歴史的写真や美術写真も豊富に取り扱っています。イメージの写真やイラストがない場合は、撮影やイラスト描き起こしの依頼にも対応しています。

 

Shutterstock

画像・動画・音楽素材の提供サイトです。ベクター画像では、イラストを拡大縮小可能なEPS形式で入手できます。他にも、素材選定や編集で使えるツールも提供しています。

AndroidやiOS用のモバイルアプリを使えば、外出先から素材を検索、お気に入りの保存と共有、購入とダウンロードができます。Sutterstock Editorは、Photoshopなどのアプリを使わなくても、簡単な画像編集と加工ができるオンラインエディターです。編集・加工した画像はオンラインエディターからSNSに投稿できます。制作ツールの機能を拡張するプラグインや画像サイズ変更ツールなどもあります。

 

PIXTA

写真・イラスト・動画・音楽の素材提供サイトです。
写真では、プロカメラマンによる出張撮影サービスや、国内外のフォトプロダクションによる有名ブランド素材「ブランドコレクション」があります。他にも、PIXTAの写真やイラストをオンライン上で編集・加工できる無料のPIXTAエディターを提供しています。

 

iStock

写真・イラスト・映像素材の他にも、作業効率が向上する無料ツールを提供しています。
iStockエディターは、オンライン上で選択した写真やイラストの加工や編集ができるツールです。Adobe Creative Cloudプログラムで使えるAdobe Creative Cloudプラグインや、SketchやPhotoshopの画面内で検索・カンプ・ダウンロードを簡単に行えるCraft Stockプラグインもあります。

 

Unsplash

無料で写真を何枚でもダウンロードして、商用・非商用で利用できる写真素材提供サイトです。一定のスキルがあり、解像度が3メガピクセル以上の画像を提供できる写真家の作品しか受けつけていないので、高品質で高解像度の写真がみつかります。ただし、海外サイトのためキーワードを英語に訳して検索する必要があります。iOSアプリも提供しています。

 

BURST

無料で高解像度の写真がダウンロードできるサイトです。商用・非商用で利用できます。
サイトの運営は、ネットショップ作成サービスを提供するShopifyです。小売向けのイメージ以外にも、いろいろなイメージの写真がカテゴリと検索から探せます。

 

Isometric Love

200個を超えるアイソメトリックな3Dアイコンがみつかります。角ばったアイコン・スムースラインのアイコン・アニメーションアイコンの3種類があります。個人利用は無料ですが、著作権表示とIsometriclove.comへのリンクが必要です。有料で商用向けのロイヤリティフリーライセンスがあります。

 

ManyPixels

無料でイラストをダウンロードして、商用および非商用で利用できます。
イラストは、カラースライダーで色調を変えられます。配置するホームページの配色にあう色調にしたり、印象を変えられるので便利です。SVGとPNGのファイル形式があります。

ManyPixelsでは、イラストやグラフィックデザインに関する有料サービスもオンラインで提供しています。有料サービスでは、オリジナルイラストやデザインが依頼できます。

 

IRA Design

MITライセンスの規定に従うことで、無料で商用および非商用でイラストをダウンロードして利用できます。MITライセンスでは、著作権表示とライセンス表示の記載が必要です。イラストの構成要素は、人物・オブジェクト・背景で、背景以外は、パープル系・ブルー系・グリーン系・オレンジ系・ピンク系の5つの色調から色を変化させられます。ファイル形式は、SVGとPNGです。

 

DrawKit

イラストをダウンロードして商用・非商用で利用できます。テーマにそってパックになったイラストとアイコンが、みつかります。ファイル形式は、AI、SVG、EPS、AE、JSON、PNG、JPGです。イラストにはアニメーションイラストも含みます。

イラストはB2B企業サイトに好相性

イラストは、写真に比べて独自の世界観を表現しやすく、難しい内容もわかりやすく伝えられます。そのため、他社サイトとのイメージの差別化が課題のB2B企業サイトや、専門的なサービスや商材を扱うB2B企業サイトには好相性といえるでしょう。

素材提供サイトを利用すれば、イラストをホームページに活用するハードルはさがります。素材提供サイトにはたくさんの種類があり、扱う素材の傾向やサービスも様々です。そんな中、どんな素材サイトを使う時にも気をつけたいのが、利用範囲とライセンスです。著作権や肖像権に関するトラブルを防ぐ意味でも、必ず規約に目を通してから利用することが大切です。

素材提供サイトには、イメージにあう写真やイラストがない場合は、新規で制作依頼の相談に乗ってくれるところもあります。他社サイトとのストックフォト重複やイメージの差別化に悩んでいた方は、ぜひイラストの活用を検討してみてはいかがでしょうか。