イラストを用いたWebデザインの特徴・効果とその参考になるサイト

sky-balloon

こんにちは、美大卒・元アパレル店員の
ゆっきー(@elcielo_design)です。

今回はイラストのWebデザインへの効果や
イラストを用いたWebサイト紹介記事です。

スポンサーリンク

イラストを用いたWebデザイン

近年は、Webデザインにイラストを
効果的に活用したものが増えてきて、
よくサイトで見るようになりました。

デザインにイラストを用いることで、
オリジナリティが目立ち印象に残る
Webデザインを作ることが可能です。

ですが、一言でイラストと言っても、
線の太さや色の使い方、テイストなど
多種多様なイラストがWebデザインに
使われているのが現状になっています。

その結果、イラストを用いる本来の
効果や役割が分かり難くなっている
感じが個人的にはしてなりません。

そこでこの記事ではイラストを用いた
Webデザインのポイントと参考サイト
この2つをまとめてみたで見て下さい。

スポンサーリンク

イラストを用いたWebデザインの特徴

「イラストを用いたWebデザインの特徴」

  • 視覚的に物事を伝えられる。

  • オリジナリティ(個性)が生まれる。

  • 親近感を持たせられる。

具体的に以下でそれぞれ説明しますね。

① 視覚的に物事を伝えられる。

イラストを上手に利用することで、
ユーザーに対して視覚的に物事を
伝えることがより可能になります。

Webへのアクセスはスマホが多くなり
小さな文字で長々と説明しても情報は
伝わり難くなってきているのが現状。

文字で表現するよりも視覚的に表現した
イラストの方が伝わる場合が多いです。

特に情報を直感的で簡単に伝える効果が
イラストの利用することにはありますね。

② オリジナリティ(個性)が生まれる。

イラストを利用することの2つ目の
特徴はオリジナリティがあること。

イラストがあるだけで、Webサイトの
雰囲気や印象がかなり変わってきます。

例えば、モノクロのイラストを使えば
クールで固い印象のデザインになったり、
ふんわりとした可愛いイラストを使えば
柔らかい感じのデザインになったりと、
全然違うWebデザインになってきますね。

取り扱うサービスや商品をよく見せたり
ブランデイングをきちんとしたい時に、
イラストで上手くいくこともあります。

③ 親近感を持たせられる。

イラストを上手く活用することにより、
ユーザーに親近感を与えることも可能。

Webサイトデザインに親近感が湧くことで
サービスや商品を身近な存在と思えると、
興味を持って頂けるきっかけをつくれたり
利用・購入ハードルを低くしたりできます。

スポンサーリンク

イラストを用いた参考Webサイト

「参考になるWebデザイン一覧」

 主なイラストの役割  Webサイト (デザイン)
 視覚的に情報を伝える。
 ① 〜 ③
 HOPPIN’ GARAGE
 Blue Apron
 un-T system
 (アンティー・システム)
 オリジナリティを出す。
 ④ 〜 ⑥
 CALAR.ink
 (カラードットインク)
 Lo Pesce
 Lucky Brothers & co.
 親近感を持たせる。
 ⑦ 〜 ⑩
 Payme (ペイミー)
 marchily
 司法書士 青木事務所
 ItsAlive

① HOPPIN’ GARAGE

hoppin-garage

HOPPIN’ GARAGEは、
ビールの色んなアイデアを募って、
実現しようというサービスのサイト。

 特徴 ・テキスト情報が少なめで、イラストと
 動画を上手に利用してサービスを紹介。
・スクロールでイラストが左右に動く
 演出も凝ったデザインとなっている。
・男性の頭の中のアイデアが形になったのが
 周りのイラストというストーリー性もある。
 その他  

HOPPIN’ GARAGE

HOPPIN’ GARAGEは、「こんなビール、できたらいいな」というあなたの空想を実現し、特別なビールを仲間とシェアできる、サービスです。

② Blue Apron

blue-apron

Blue Apronは、海外サービスの
公式サイトの1つになります。

 特徴 ・アイコン風イラスト素材が使われている。
・イラストはテキストの情報を視覚的に
 補う役割を持っている。
・シンプルですがお洒落な雰囲気を演出。
 その他 ・海外サイトではよく取り入れられる
 イラストの使い方になる。

Blue Apron

Blue Apron makes cooking fun and easy. We'll provide you with all the ingredients that you need to make a delicious meal in exactly the right proportions.

un-T system (アンティー・システム)

un-tsystem

un-T systemは、UI/UXデザインや
システムアプリケーション開発する
システム会社の1つになります。

 特徴 ・サービス紹介等にイラストが利用される。
・ポップなインフォグラフィックスの
 アニメーションが印象的なサイト。
 その他  

un-T system (アンティー・システム)

株式会社アンティー・システムのオフィシャルサイトです。デジタル領域においてユーザーと企業をつなぐさまざまなWebサービスやシステム構築、アプリ制作等を、企画・戦略から制作・運用まで行います。サービス概要や採用情報などを掲載しています。

④ CALAR.ink (カラードットインク)

calar-ink

CALAR.inkは、アート・デザインなど
様々なスキルを持ったメンバーにより
結成されたクリエイティブユニット。

 特徴 ・可愛らしいキャラクターのイラストが
 魅力的なWebサイトの1つ。
・個性なキャラクターを全面に押し出して
 オリジナリティあふれている。
・配色はポップで印象的なデザイン
 その他 ・クリエイティブ系のサイトなので、
 かなりイラストを効果的に使えている。

CALAR.ink (カラードットインク)

アート、デザイン、テクノロジー、空間など多種多様なスキルを持つメンバーによって結成されたクリエイティブユニット。リアルとバーチャルをシームレスに横断し、アートとテクノロジーを融合した世界で、観客を巻込みながら一つの物語を完成させていく、ライブペインティングショーを展開。混ざり合い、ランダムに広がっていくカラフルなインク

⑤ Lo Pesce

lo-pesce

Lo Pesceは、海外のフィッシュ
フードのWebサイト?です。

 特徴 ・サイト全体がイラストの世界観で
 デザインされている。(ロードが少し長い)
・画面全体に浮いているイラスト素材は、
 スクロールと共に浮遊しているように移動
・パララックッス効果が用いられている。
・オリジナリティがとても高い。
 その他  

Lo Pesce

Lo Pesce è il brand di prodotti ittici surgelati per chi ha sempre voglia di un buon piatto di pesce

⑥ Lucky Brothers & co.

lucky-brothers-co

Lucky Brothers & co.は、鹿児島にある
Web・アプリ制作会社のWebサイト。

 特徴 ・漫画やゲームの世界観がサイトに溢れる
 オリジナルティが高い魅力的なデザイン。
・イラストのアニメーションの完成度も
 とても高く遊び心あるWebサイト。
 その他  

Lucky Brothers & co.

株式会社Lucky Brothers & co.は鹿児島・東京を拠点に活動するWeb企画・制作会社です。コーポレートサイト制作、プロモーション、アプリ開発などを行っています。企画アイデアの発想から設計・制作までを一貫して行えることが強みです。

⑦ Payme (ペイミー)

payme

給料前払いサービスである
Paymeの公式のサイトになります。

 特徴 ・黄色を基調とするポップなデザイン
・可愛いイラストと動画を使うことで、
 とても親近感が湧くようWebサイト。
・お金に関わる固いイメージのサービスを
 誰でもわかるように表現している。
 その他

Payme (ペイミー)

「いつでも、どこでも」スマホから現金で引き出せる給与即日払いサービス。Paymeなら導入コスト少なく、簡単に給与の即日払いを企業制度に導入することができます。人材の採用や定着に高い効果を発揮!

⑧ marchily

marchily

チームビルディングを行うための
クラウドサービスmarchilyのサイト。

 特徴 ・可愛い犬のイラストをメインに使用
・サイトだけでなくサービス内にも
 犬のイラストがデザインとしてある。
・タイポグラフィとイラストに
 統一感が感じられるWebサイト。
 その他  

marchily

marchilyは、日報やタスク管理を通して、 日々の仕事、チーム全体の仕事の流れを見える化し、より良いチームビルディングを行うためのクラウドサービスです。

⑨ 司法書士 青木事務所

aoki-jimusho

司法書士 青木事務所のWebサイト。

 特徴 ・トップページのファーストビューに
 大きなイラストがあり目をひくサイト。
・モノトーンであるイラスト素材が、
 司法書士事務所という固い雰囲気を
 少し緩和する役割を果たしている。
 その他  

司法書士 青木事務所

中野市、飯山市、山ノ内町、木島平村、野沢温泉村、栄村を中心として、不動産登記・商業登記・供託・簡易裁判所における民事訴訟・裁判所提出書類の作成などの業務をうけたまわります。

⑩ ItsAlive

itsalive

Facebook上でチャットボイスが
利用できるサービスの公式サイト。

 特徴 ・Facebookを意識した青み系のイラスト
・チャットボイスという馴染みない
 サービスをイラスト素材を利用して、
 理解し易いようなデザインにしている。
 その他  

ItsAlive

Facebook Chatbot Builder everyone can use. The tool that makes Facebook Chatbots easy and fast! A chatbot Platform trusted by the best with custom services for

イラスト (アイコン) 素材の入手方法

イラスト素材は、商用利用もできる
無料 (フリー) のイラスト素材サイトから
ダウンロードして利用するのがおすすめ。

これが本当に無料とは考えられない程の
クオリティー高い素材が多く提供され、
色々なデザインの場面で使うことが可能。

最後に

以上が、イラストがWebデザインに
与える効果と参考Webサイトでした。

イラストにも様々種類やテイストがあり、
Webイメージに相応しい素材選択が必要。

配布されている無料イラスト素材では、
満足できない場合もあるかもしれません。
( 配布されている有料素材も含み。)

一からイラスト素材を作ろうとすると
かなり作業量やコスト等もかかりますが、
拘り作ったイラストを用いたデザインは
非常に魅力や価値あるものになりますね。

なので、Webデザインに
イラスト素材を是非使ってみましょう。

関連記事

スポンサーリンク

シェアする