【26サイト掲載！】系統別トレンドイラストを用いたWebデザイン参考事例
イラストを使ったWebデザインの参考が欲しい時、ギャラリーサイト等で探すのは意外と時間がかかります。どういう系統・タッチ・色使いにするかを絞っていても、欲しいテイストのサイトだけを検索して集めるのは骨が折れるものです。そこで本記事では今トレンドの系統別に、イラストを扱ったWebデザインのサイトをご紹介します。
数年前から、イラストのトレンドは「ライン」「フラット」「アイソメトリック」「コミック・アート」が四大巨頭です。最近ではこれらの「複合型」タイプも出てきています。この5つの系統に分け、筆者が血眼で探した中から26サイトを厳選しました。デジタル・アナログ（手描き風）でもかなり雰囲気が違うため、各カテゴリごとに分けて掲載します。
今回はイラストデザインの特集ですが、イラストに限らずおしゃれにしたい場合は別記事もご覧ください。選りすぐりのおしゃれなデザインのサイトをまとめています。
ライン
ラインのイラストは文字通り、線をメインにして描きます。基本的に塗りは無しですが、一部に塗りのあるタイプもあります。塗りベタを置くと、ラインだけより少し華やかになります。
色を乗せる部分は、線または一部の塗り部分だけに絞られます。自然と色数も少なくなり、その結果洗練されたおしゃれな雰囲気になります。落ち着いたデザインにしたい時はラインイラストを検討すると良いでしょう。
プライムナンバーズの制作事例でラインのイラストを使用したものはこちらです。
TATELab.（たてラボ）
幾何学形をベースにした、太めの線のイラストを使用しています。情報を究極的に削ぎ落とした男性の頭のモチーフから目が離せません。サイト全体は白黒で統一されているため、イラストがカラーになる箇所がより際立っています。
ベタ塗りで表現できる影を、あえてドットにしているところが巧みです。ドットを円心形に歪ませることで、面がカーブになっているのが見て取れます。
たけだ税理士事務所
童話や昔話をモチーフに、アイソメトリックにも展開されています。塗りは無く、完全にラインだけのイラストは白黒にまとめることで、テキストの青が特に際立ちます。特に目立たせたいものがある時は、このように大事なところだけを着彩する見せ方も良いですね。
描かれているのは楽しい内容ですが、抜けのないタッチで税理士事務所の堅実・真面目な印象が表現されています。イラストは、その企業の雰囲気やイメージを「見せたいように見せる」力があります。
&sauna FARM
一部塗りベタがありますが、ベースはラインのイラストです。丁寧に描かれたフリーハンドの少し揺れた線が愛らしく、ロゴも実は手描きなのが良い具合の抜け感を演出しています。
部分だけ着色する手法はラインイラストをより華やかにしてくれます。しかし、塗りすぎは禁物です。塗り面が多くなってくると、ラインイラストというより後に紹介するコミック寄りのテイストに変化します。あくまで主役は線、塗りはサブの装飾であることに注意しましょう。
アナログ・手描き風
ラインのイラストをアナログ風・手描きにすると、まったく違う雰囲気にできます。堅めなデジタルより、もっと緩さを出したいという時にはアナログ風に加工してみると良いでしょう。
アナログで描いたように見せるには、線の表情が鍵となります。ブラシの軌跡などで線の境界をぼかしたり、かすれをつけたりすると一気に垢抜けます。親しみのある雰囲気になるため、ナチュラルなデザインにぴったりです。
生協（コープ/COOP）の宅配パルシステム
ペンが少し滲んだように、線の境界がギザギザしているところがポイントです。ところどころ途切れている線でこなれ感を出しつつも、かすれさせず素朴で丁寧な暮らしを想起させるタッチです。デジタルでは出ない、少し歪みのある緩やかな線運びは手描き特有の味になります。
躍動感がありつつもふんわりした動きの人物や、人物に混ざってジャンプしている犬などは遊び心がありますね。写真では表現するのが難しいことも、イラストなら自由自在です。
いわき靴下ラボ アンド ファクトリー
一筆書きのイラストが、ゆらゆら揺れながら流れていくのが気持ちが良いサイトです。ストーリーの繋がりと、靴下を編む動作が掛かっていて良い仕掛けです。イラストのデザインに意味があると深みが増しますね。
一筆書きはなるべく対象を忠実に描写しながらも、拾う線は取捨選択して必要最低限にすると整った画面になります。
北洞株式会社
こちらのサイトは糸をモチーフに、一筆書きをローディング画面やコンテンツ部分で扱っています。イラストは一見すると普通のラインイラストです。しかしよく見ると、線のアウトラインは糸がたくさん集まっているようにギザギザしていて、刺繍が施されているように見えてきます。糸を糸とそのまま表現しないところが技ありです。
TOPへ戻るボタンはハサミにしていて、サイトの流れを途中で切るという表現が面白いですね。
フラット
フラットなイラストは影の表現が控えめで、平面的なイラストのことを指します。この技法は、線で描くよりも塗りで表現する場合がほとんどです。
フラットと一口に言っても、情報の描きこみ具合でタイプが変わってきます。描きこみが少ないほどシンプル、逆に多いほど個性的になります。また、色使いや装飾量で無難・定番かモードかのタイプにも分けることができます。
厚沢部町認定こども園はぜる
幾何学形でどこか子供が切り貼りしたようにも見える、可愛らしさ溢れるタッチです。こども園の壁に、カラフルに貼られた折り紙などが思い出されます。大人は頭を小さめに描き、ころころとした子供との対比を明確にしています。
塗りだけで表現するフラットイラストは、このようにはっきりとした色使いにして隣り合う色との境界を分かりやすくしましょう。
株式会社キュービック キャリア採用
描写する粒度は必要最低限に留められ、抽象と具体の間くらいに収まっています。躍動感のある曲線が印象的で、新しい時代が訪れそうな気分にさせてくれます。
影はグラデーションで表現する技法を取り入れています。平面的なイラストでも、厚みが出ないように少しだけ影をつけることで奥行きが出るのです。グラデーションには少しノイズを入れることで、よりイラストの味わいが豊かになっています。
介護施設の防災・減災ガイド
犬のイメージキャラクターが可愛らしいフラットイラストです。影はベタ塗りとグラデーションを混合させています。このイラストのタイプは、顔などの描きこみが細かくシンプルで無難・定番に位置するでしょう。このサイトは様々な年齢層が見ることが予想できるため、選り好みされにくく適した雰囲気のイラストだと言えます。
イラストがコンテンツに対してリアクションをしていたり、FAQには質問者のイメージイラストが置かれています。サイトの内容と連動するイラストは、文字を追うよりも読者に伝わりやすくなります。
アナログ・手描き風
凹凸のないフラットなイラストをアナログ風にするには、テクスチャをかける、塗りのフチに表情をつける等が挙げられます。紙を破ったようなフチにすると、切り貼りの絵のように見えてアナログ感に繋がります。塗りをかすれさせるのも、手で塗ったように見えて面白いですね。アナログ風に見せる方法は沢山あるため、色々試してみると良いでしょう。
瀬戸内オーシャンズＸ
オリジナルのももたろうを題材にした、絵本のイラストを使用しているサイトです。鮮やかな色使いとザクザクとした切り貼りのタッチが目に飛び込んできます。塗りの境界ははっきりと分かれていますが、紙の質感や水彩の筆跡が豊かなので切り貼りに見えます。
よく見てみると白波の部分だけフチが粗めなのが、見事に波の勢いを表現しています。同じ色やフチのあしらいで統一するのも良いですが、狙いがあれば違いを出すのも味があって見る者を惹きつけるでしょう。
BOTANISTのサステナビリティ
柔らかな紙のようなテクスチャと緩い線の運びが、穏やかで心地よい暮らしを彷彿とさせます。影は水彩調でほんのり存在をほのめかす程度に抑えられていて、テクスチャがかかっていてもフラットの体裁を維持しています。
一番下までスクロールすると、途切れずTOPへ戻るサイトのつくりが「持続可能な社会」のテーマを連想させます。
M.E.G.トラベル株式会社
タッチを大きくゆったりと歪ませていて、テクスチャをかけなくても手描き感が演出されています。影は表現せず、ベタ塗りの中の情報を必要最低限の線で説明しています。塗りだけで描こうとすると、似た色が隣り合うこともあり境界の差が分かりにくくなりがちです。そこで、フラット感が失われない程度に少し線を用いてみるのも手です。
大き目の手足はやや今風のタッチです。現実的でない、オーバーな表現はモードな雰囲気が強めになりやすいでしょう。
アイソメトリック
アイソメトリックイラストとは、斜め上から見下ろす視点で立体的に見せたもののことをいいます。ラインでもフラットでも表現は可能ですが、立体的なぶん空間を意識して描く必要があるため難易度が上がります。
上からそのエリアに何があるのかを説明でき、町の全景やオフィスのフロア等広い範囲をイラストにする際によく使われます。分かりやすいイラストのため、何かを説明するのに向いています。例えば、フローの解説や注意する動作など、場面での切り取りで使っても良いでしょう。
プライムナンバーズの制作事例でアイソメトリックのイラストを使用したものはこちらです。
大阪（八尾）の金属加工会社DAI精工
アメリカン・コミックチックな影の付け方と、落ち着いた赤でまとめられた見やすいイラストです。線が太く色も強めで存在感があるため、アイコンのように使っても映えていますね。イメージキャラクターのロボットは、立体的なイラストでより魅力的に見えます。
立体的なアイソメトリックは、動きを付けても分かりやすく説明できます。人の導線を説明したりするのにも良いでしょう。アニメーションをつけるとイラストの活気がより増し、目を引くことができます。
新興機械工業株式会社
ベーシックなフラット技法をつかったアイソメトリックです。ベタ塗りのみで表現されており、カラフルな色使いで境界もはっきりしています。コンテンツごとに、全体のイラストから該当部分を抜き出しているのも分かりやすいです。
アイソメトリックは機械など複雑な製品も、分かりやすく説明できます。上から見下ろすように描けるのはかなり大きな強みです。位置関係がパッと見て分かるため、展示会場等の紹介にはぴったりですね。
湘南ヘルスイノベーションパーク (湘南アイパーク)
情報が細かく描写されており、建物の内部で何が行われているか分かりやすくまとめられています。淡い色は隣り合うと境界が分かりにくくなりますが、線ではっきり区別させると見やすくなります。このイラストは細い線で区切り、きれいめな色味の雰囲気を保っています。
大きいロボットの上に人が乗っていたり、六法全書の上で侍が刀を振りかざしていたりと楽しいシーンが切り取られています。実際にありえないシチュエーションを、ありそうに表現できるのはイラストの利点です。
アナログ・手描き風
デジタルで描くアイソメトリックは比較的堅くて、説明チックな雰囲気になります。一方でアナログ感が強いと途端に柔らかい印象になり、ゲームのような可愛らしさが生まれます。
アイソメトリックをアナログ風にするには、フリーハンドで線の揺れを強くしたりテクスチャをかけても良いでしょう。筆の軌跡を残して、手描きで塗ったように見せるのもワザの一つです。
PINTSCOPE（ピントスコープ）
短い等身で描かれた、個性が強めの人物たちが愛らしい独特なタッチです。描写されている情報のひとつひとつは簡略化されており、シンプルな雰囲気にまとまっています。
淡い色使いとうっすら引かれた線は、水彩のような柔らかさを引き出しています。その淡さを引き出すように、コンテンツはシンプルではっきりとしたテキストを置いて見やすい画面にされています。
テキストなどの扱いをイラストと合わせるか、対比になるようにコントラストを強めるかで違ったデザインになりそうです。
株式会社 PRODUCTION C-TIME（プロダクション シータイム）
現実味がない縦長のツリーハウスは、アイソメトリックだと受け入れやすいです。童話の挿絵のような、淡い透明感のある水彩タッチが“ファクトリー”を柔らかく表現しています。ほっこりとした温かい印象を与えられるのはイラストの利点です。
堅い内容を分かりやすく、優しい印象を与えたい時はイラストを使うと良いでしょう。
即戦力エンジニア採用 Forkwell Jobs
緩い曲線と柔らかな角が親しみのある雰囲気を演出しているイラストです。角を丸めにすると柔らかい空気を出しやすいため、おすすめです。
歯車の上で走ったり大きいタブレットで絵を描く人々が、可愛らしくも頼りになりそうです。比率を大きく変えた描写は可愛らしさを強調してくれます。カジュアルでスマートな配色は愛らしさと堅実さを感じさせますね。
コミック・アート
コミックはフラットにラインを組み合わせ、情報量を多く持たせた究極形を指します。アートは、絵画的なものから前衛的なものまでさまざまあります。タッチには流行があり、ターゲットに合わせて受け入れられそうなものを選びます。
コミックやアートなイラストは使いどころが限られます。そのため実際にサイトデザインに使用している例はそれほど多くありません。ただ、他のテイストよりも特別目を引きやすいという利点があります。とにかくキャッチ―にしたいという場合は検討してみると良いでしょう。
イラストのタッチは個性や画力が問われます。素材を探したり自力で描くことが難しい場合は、イラストレーターやアーティストに依頼するのがおすすめです。
おすすめプール＆水着がわかるスイマー診断
幾何学形のフラットをベースに、版ズレを描画技法に取り入れたイラストです。版独特のかすれとドットや格子といったパターンが重なり、味のあるタッチが個性的です。美しい幾何学形のバランスと大きい手足がモード感満載です。
人は目・鼻・口のパーツがあると、自然とそちらに目が引きつけられます。このイラストは顔のパーツが口のみですが、正円の輪郭と口になんとなく目が引き寄せられてしまいます。
和仁農園
のどかな農園…と思いきや、実はワニが紛れ込んでいます。そんな意外性も、このタッチだと和らいで違和感が薄くなります。非現実的なものを抽象的に描くのも、不思議感が出ておすすめです。水彩系のタッチは、ふんわりと温かみが演出できます。豊かさやのんびりとした雰囲気を表現する時に使用してみると良いでしょう。
ワニは二足歩行になっており擬人化されています。擬人化はイラストならではの可愛さで、ワニの凶暴さが打ち消されています。
株式会社ディンプス 採用サイト
キャッチコピーにもイラストがあしらわれていて、全体的にイラストで空気の統一感があるサイトです。飛行機が文字の間を通っていたりと、楽しいあしらいが多いのが好印象です。不思議な列車の乗り物や木の上に連なる建物は、描きこみが細かいためリアリティを増しています。
イラストをいくつかに分解して、表示のタイミングや場所等をずらしているところも良い工夫です。
複合型
ラインやフラット、アイソメトリック、コミック・アートの良さを組み合わせたものを、ここでは複合型としています。違う系統の特徴を組み合わせることで、新たなジャンルを生み出すことができます。
ラインやフラット等はしばらくトレンドに居座っています。しかし、流行は変わっていくものです。これらのタッチは今後、複合型でより多様化していくのではと筆者は考えています。
株式会社スピークバディ（SpeakBUDDY）
フラットと、少し控えめにしたアイソメトリックの組み合わせです。奥にあるビル群は平面的になっていて、自分の視点から遠い位置にあるのが分かります。
サイケデリックなグラデーションカラーにノイズを加えた配色が美しいです。多様性のある人物の違いも見ていて楽しいですね。楕円等の幾何学形は世界の誰が見てもわかる形です。ユニバーサルな雰囲気を世界共通の形で表現しているスマートなタッチです。
inadani sees
アイソメトリックとコミックの組み合わせです。まずローディング画面の黒いキャラクター2匹が、
目をキョロキョロさせて現れるのが印象的です。キャッチ―なキャラクターは目を引くため、興味を持ってもらうきっかけにすると良いでしょう。
緩いフリーハンドのタッチが牧歌的な雰囲気を醸し出しています。雲や食べ物など描きこみが多く、さらに各人物がそれぞれ違うタイミングで動いています。イラストの情報が多くても、色数を絞ると自然とまとまりが出ます。
Nici 窒素循環社会プロジェクト
アイソメトリックとフラットの組み合わせです。水彩タッチのテクスチャーが味を出しています。人物も動物も、顔の情報は少なめなためシンプルに落ち着いています。フレームから飛び出す魚や鳥が、画面に動きを出してくれます。
窒素循環がなぜ必要なのかも、イラストで説明されています。文字だけでは難しい内容でも、イラストにすると頭に入りやすくなります。
C’m
アイソメトリックとアートの組み合わせです。スケッチの勢いがあるタッチはニューヨークアートを彷彿とさせます。1つずつ動きが違うのが楽しげでワクワクしてきます。
コンテンツ名をイラスト上に載せているため、クリックエリアが分かりやすくなっています。イラストの一部をクリックさせる時は、クリックエリアがどこなのかを分かるように設計しましょう。
まとめ
皆さんの痒い所には手が届いたでしょうか。今回サイトを集めてみて、今のデザイン割合はフラット=ライン>アイソメトリック>コミック・アートだと筆者は感じました。長い間トレンドのこの4つは扱いやすいため、組み合わさって次の時代を作っていくかもしれません。はたまた、過去の流行が巡り、また新たなタッチとして生まれる可能性も充分あります。今後もトレンドから目が離せませんね。
今回取り上げたイラストタッチ以外にも、たくさんのテイストがあります。もっとイラストを扱ったWebデザインが見たい方は、こちらの記事でギャラリーサイトを集めています。
Web制作のご依頼はプライムナンバーズへ！
弊社では、イラストを使ったHP・LPやバナーなどWeb制作全般を承っております。ご要望に応じてイラストのテイストを変えることも可能です。ご相談は無料ですので、まずはお気軽にお問い合わせください。
Download
デザインからキャッチコピーまで「まるっ」と担当いたします。「成果の出る販促物」を作りたいとお考えの方は、ぜひプライムナンバーズにご相談ください！
