【Webデザイナーが選んだ！】イラストを活かしたWebページ６選
はじめに
自己紹介
皆さんこんにちは。Webディレクター／Webデザイナーの竹中 智です。現在、フリーランスでWebサイト製作業務に携わりながら、専門学校日本デザイナー学院では、Webデザイン系の授業を担当しています。
私は、1998年春、新卒でカタログやパンフレットの製作を中心に行うエディトリアルデザイナーとして、デザイン製作会社に就職し、デザイン業界に足を踏み入れました。 その後、2002年にWebデザインを学び、フリーランスとして独立。その後20年以上にわたり、Webデザイン業界を中心に活動しています。
今回はPicoN!にて「Webデザイン」にまつわる記事を寄稿することになりましたので、どうぞ宜しくお願いします！
PicoN!でのWebデザイン記事について
現在の日常生活において、皆さんもインターネットに触れる機会は多いのではないかと思います。特にちょっとした調べ物や気になる情報などを、WebブラウザからGoogleなどの検索エンジンを通じ、検索結果に表示された「Webサイト（ホームページ）」から得るケースは一般的です。
このような「Webサイト」は、パンフレットや雑誌などの印刷メディア、またテレビやラジオなどの放送メディアと並び、社会に浸透している重要な情報伝達メディアのひとつとなっています。
普段、皆さんも何気なく眺めている「Webサイト」が持つさまざまな側面を、今回は製作者視点から皆さんへご紹介できればと思っています。
Webサイトで「イラストレーション」が果たす役割
Webサイトに重要な「ビジュアルイメージ」
Webサイトは大前提として情報発信ツールですから、まずは「情報（コンテンツ）」そのものが重要です。また同時に、Webサイトに訪れた閲覧者（以降：ユーザー）がWebサイトから受ける「印象」も重視されます。 この印象を強くしていく要素に「ビジュアルイメージ」があります。
サイト閲覧者に「しっかり伝わる文章」で情報を伝えていくことが大切ですが、文章に添えるビジュアルイメージの存在によって、情報に対する理解を深め、その印象を左右させることになります。ユーザーにとって良い印象につながることが、Webサイトの目的へと導いていくことの可能性も高まります。
Webサイトで利用される主な「ビジュアルイメージ」
Webサイトに利用されるビジュアルイメージには多くの要素があります。まずはその中でも皆さんがその役割を理解しやすいものとして、次の3つの要素が採り上げられるかと思います。 それは「写真」、「イラストレーション」、「アイコン」です。
写真：
「写真」は実際に存在する物、人物、風景、またはシーンを現実的に捉えます。 ユーザーに具体性と現実感を与える点に優れており、信頼性を高めることに寄与します。また「イメージカット」を用いることで感情を想起させることにも効果的なので、印象の向上にも大きく寄与します。
イラストレーション：
「イラストレーション」は芸術的な手法で描かれる図や絵で、抽象的な概念やアイデアを表現するのに適しています。 クリエイティブとしての表現範囲も広いことにより、個性を明確に示せる点が強みです。表現によって既存の類似する内容に対して差別化を図り、目的の印象へ誘導しやすくなります。 また、複雑な内容を簡潔に伝えたりすることにも大変有意です。
アイコン：
「アイコン」はシンボルやピクトグラムとして、ユーザーに対する「視覚的なわかりやすさ」として機能します。 シンプルで視認性が高く、人種を超えた国際的な理解も可能です。UI（ユーザーインターフェース）において機能性を向上させるために用いられ、ユーザーに直感的なナビゲーションを提供します。
「イラストレーション」が果たす役割
今回はこの中の「イラストレーション」にスポットを当てていきます。このイラストレーションによるビジュアルイメージの活用によって、どのような効果が期待できるでしょうか。 今回はいくつかのWebサイトをピックアップし観察することで、そのポイントを掘り下げてみたいと思います。 また、皆さんがイラストを描かれる場合、どのようにそれをWebサイトで活用できるかを想像してみると良いでしょう。
イラストレーションが活躍しているWebサイト6選
動き出すイラストが誘う、新時代のサービス体験を訴求
1, HELLO CYCLING – 好きな場所で返せるシェアサイクル
https://www.hellocycling.jp/
電動アシスト自転車によるシェアサイクリングサービスのWebサイトです。
トップページでの画面中央に大きく配置された、斜め上からの見下ろす箱庭的視点のイラストレーションが、アニメーションと共に展開していきます。
また、表示されるイラストレーションがマウス操作に連動して動く様子からも、街中での自転車移動の楽しさが伝わります。
また、サービス利用に関する手順の解説においても、同様テイストに統一されたイラストレーションによって、わかりやすくキャッチーに表現されています。
イラストを大胆に大きくアニメーションさせることで情報を目立たせることができますし、そこで得られるインパクトをそのままサービスの印象へつなげていくことができそうです。
ユーザーの「等身大」を投影する、イラストと写真のコラボ表現
2, 2023 イメージガールは河村ここあさん | 靴のＨＡＲＵＴＡ（ハルタ）公式通販サイト
https://www.haruta-shoes.co.jp/catalog/girl2023/
学校指定の通学靴ではトップシェアを誇る企業による、製品となる「ローファー」の企画コンテンツサイトです。イメージガールのモデルが誘う、サイト内でオリジナルストーリーが展開していきます。
マンガのコマ割りからの読み物として展開するストーリーの中で、イラストと実写によるコラボレーションとしてデザインされており、このサイトの閲覧するユーザーのターゲット訴求層である、女子高生の「等身大」を感じさせながら、イラストとの躍動感のある演出によって、現実とは別の「世界線」へ跨いでいく物語として展開していきます。
実写とイラストが同居するコンセプトにつながっているわけですね。
このサイトの中でも、階層に分けられたイラストが随所にアニメーションする演出のため、世界観の演出にも大きく貢献していることがわかります。
またPCで閲覧すると、メインのスクロールするスマホ画角のエリア外にもタイトルや背景の演出が入っているので、スマホで閲覧した時とは別の印象で閲覧することもできます。
鮮やかな印象の素敵なサイトだと思いました。
コンセプトを匿名性のあるイラストによって柔らかな印象で訴求していく
3, BOTANISTのサステナビリティ｜FOR A SUSTAINABLE FUTURE
https://sustainable.botanistofficial.com/
植物の恵みを健康やライフスタイルを取り入れた、ヘアケアを中心にボディケアアイテムなどを取り扱っているブランドによる、企業としてのサスティナビリティ（持続可能性）の取り組みを紹介する専用コンテンツです。
近年「SDGs」への取り組みを実践し、Webサイトを通じてその紹介していく企業が多く増えています。社会貢献としての企業活動は、情報発信によるユーザーへの周知とともに、その後の企業の将来に向けても大きな意味を持つものです。
取り組みを伝えていくうえでイメージ訴求はとても大切になります。そこで、実写による写真ではなく、匿名性も感じさせるイラスト表現によって、直接的でダイレクトな印象を少しでも柔らかく、そのうえで社会性のある普遍的なメッセージとしての印象に繋げていく表現が採り入れられています。
このサイトのトップビジュアルでは、平面的なイラストが、レイヤー（階層）に分かれてスクロール表現されています。これにより画面に奥行きを感じさせ、その世界に没入していく演出となっており、見ていてとても気持ちの良い印象につながっていくと思います。
Webサイトに採り入れられるイラスト表現においては、匿名性のある普遍的な表現イラストが多く使われる傾向があります。
その匿名性のあるイラストには、表現上の個性は入るのだけど、対象となるキャラクターそのものに強い記名性はない、という考え方で、表現に匿名性が残されることで、閲覧したユーザー各々の中での解釈の幅が広がり各々で受け止めてもらうことができます。
そういった意味合いでも、匿名性を持たせたイラスト表現には、多くの需要があります。
読み物コンテンツにやわらかい挿絵がとても効果的なイラスト表現
4, 福永あずさウェブサイト 踊
https://fukunagaazusa.jp/
編集者でコピーライターの方のオフィシャルWebサイトコンテンツです。
テキストを生業とされている方のWebサイトなので、やはり読み物として多くの情報量を扱うコンテンツであり、ボリュームがあるものです。必然的に「文字中心」になってくる読み物コンテンツに対しては、ユーザーに対してどのように読んでもらいながら、なおかつ、印象としてのイメージ付けをしていくかも重要な検討ポイントなっていきます。
このWebサイトでは、ご本人の「人となり」も表現されているのだろうと思われる、とてもユルくてかわいらしい「挿絵イラスト」的表現によって、その世界観を作り上げています。
特にトップページの演出では、イラスト、文字が、パーツとして絡み合いながら、独自の表現となっていて、サイトタイトルと共に印象の残るページになっていると思いました。
「挿絵イラスト」とはいっても、本やパンフレットなどにおける紙媒体のレイアウト以上に、Web媒体ではその配置バランスやアニメーションと絡めた動きの演出など、その表現訴求の自由度は高く、世界観の作り込みに大きく貢献させることができます。
イラストレーションの存在が、言葉以上に直感的にわかりやすく人に伝えることができる表現であることが、改めて実感できます。
将来の自分に想いを馳せる、夢を実現化していくイラスト表現
5, 新設 心理学部 心理学科｜神戸女子大学
https://www.yg.kobe-wu.ac.jp/wu/course/f-psychology/psychology.html
女子大での、新設の学科を紹介するサイト内ページコンテンツです。
大学の中で新設された1学科ということで、新しく誕生したコンテンツ内にイラストが大々的に採用されています。高校生が将来の自分を想い描く姿を躍動感のある表現で演出されており、情報と合わせて魅力的な印象につなげていると思いました。
自身が選択する専攻によって、この先どんな未来が切り拓けるか、抽象的な未来のビジョンを表現するというのは「写真」では難しい表現であるとも思いますが、そこは今回のイラストレーションによる表現力なのだと思います。
この学科のページは、1ページ内に情報が全て盛り込まれており、学科の特徴説明や、キャリア形成などの説明にもイラストを多く使用され、わかりやすく親しみやすい印象のページとしてデザインされています。
教育視点で活かされる、インパクトの強いイラストレーション
6, Scheele green
https://scheele-green.tilda.ws/en
最後は少々視点を変え、毛肌が異なる海外のWebコンテンツを紹介します。
このウェブサイトは、Webデザイナーの方が非商用コンテンツとして製作されたもので、1862年のイギリスを舞台にした歴史的な物語を伝えるコンテンツになっています。
その物語は、当時「シェーレ・グリーン」と呼ばれた緑色の顔料についての物語で、この顔料には、猛毒のヒ素が含まれていました。
当時はヒ素の毒性が知られていながらも顔料としての人気があり、壁紙や衣服、さらにはおもちゃなどさまざまなアイテムに使用された結果、広範囲にわたるヒ素中毒を引き起こしてしまった悲劇の内容を伝えています。
このサイトでは、全編にわたって、インパクトのあるイラストレーションによって一部ゲーム的な要素も含めながらその歴史的背景を伝えています。
このコンテンツは、教育的な目的で作成されており「シェーレ・グリーン」の歴史的な背景や、それがもたらした健康上のリスクについての情報を通して、過去の製品安全性の問題や、科学的発見が社会に与えた影響についての意識を高めることを目指していると思われます。
このような背景を持つWebコンテンツに、イラストを大々的に使用し、物語としての世界観を恐ろしい側面も含めて、アニメーションを絡めた独自の表現で展開をしているわけですね。
その全体的なインパクトの強さは、「シェーレ・グリーン」が孕んでいた危険性を訴求することの意味合いも十分に含まれた表現であると言えるでしょう。
まとめ
今回は「イラストレーション」が活躍している6つのサイトをピックアップして掘り下げてみました。
普段はWebサイトに対して何気なく眺めていると思いますが、今回は意識的により深く観察をすることで「イラストレーション」がWebサイトのなかでどのような役割を果たしているのか、少しでも見えてきたのではないかと思います。
そして、皆さん自身が描くイラストも、Webサイトの目的に合致させることができれば、情報発信と合わせて「なくてはならない要素」として活躍させることができるものである、ということでもあります。
これからも日々目にするWebサイトにイラストが出てきたら、その意図に着目してみましょう。
竹中 智：ディレクター、デザイナー、講師
X（旧Twitter）： @artblind
https://www.artblind.com
フリーランスのWebデザイナー。
1998年、専門学校日本デザイナー学院 グラフィックデザイン研究科卒業後、エディトリアルデザイナーとして、デザイン事務所勤務。
2003年よりWebデザイナーとして独立。これまでに大企業系から中小企業サイトまで、様々なジャンルの延べ350以上のプロジェクトに参加。
2004年〜2009年までデジタルハリウッド横浜校（当時）、2009年より専門学校 日本デザイナー学院にて非常勤講師。
↓PicoN!アプリインストールはこちら
