どうも！アルジュナ広報ノダです！
僕はウェブディレクターなので日々様々なホームページを目にする機会があります。
そこで、ここ最近、よく見かけるテイストがあります。
それは、
「イラストをつかったホームページ」です。
数年前は写真を印象的に使ったり、スライドエフェクトなどで独自性やインパクトを出していたサイトが多かったのですが、今はイラストを使って個性を表現している素敵なホームページが多くあります。
今日はそんなイラストをつかった素敵なホームページをまとめて分析してみました！
ひんやり冷たい！イラストと会社のテイストがマッチした抜群のファーストビューが魅力のホームページ
https://recruit.mayekawa.co.jp/
まずご紹介するのはMAYEKAWA様のホームページ、非常に情報量の多いファーストビューですが、ゲーム画面を彷彿とする見事な整理で見やすくなっています。
イラストのテイストの選定も素晴らしいですね。
シンプルではっきりとしたカラーリングにすることでコントラスト比が上がり情報を認識しやすくなっています。
写真とイラストとフォントの組み合わせが素敵なホームページ
続いてはグリーンパーク山東様のホームページ。
いやーかわいいですね〜こどもの写真とイラストの組み合わせはとても相乗効果があります。
レイヤーを重ねて、印象的なフォントも馴染んでいます。
こういったゴチャ可愛いデザインは結構難しくて、山の後ろから女の子がカブトムシを見ているみたいな子どもの描いた絵のような想像力が必要だったりします。
こちらの特設ページも地図のイラストを活用した素晴らしく熱量のあるコンテンツ。トップページくらい時間かかったんじゃないでしょうか・・・素晴らしい。
絵本のようなキャラクターとアニメーションに心奪われちゃうホームページ
こちらはnebane様のホームページ。
日本昔話のような味のあるイラストを活用されています。
フォントもイラストのテイストに合わせており一体感があります。
いい感じの脱力感がサイト内で伝えたいことを肩肘張らず自然に伝えることに成功していると思います。
これを写真だけで表現しようとすると、どうしてもメッセージ性が強くなりすぎたり押し付け感が生まれることもあるので、そういった場合もイラストは便利だったりします。
イラストの使い所が抜群に上手い！技ありなホームページ
https://kamikumashinrin.com/
上球磨森林組合様
オリジナルキャラクターかわいいですね。
まっくろくろすけっぽさがユニーク。
過度にイラストを前に出すことなく、デザインを際立たせるように写真と組み合わせるバランス感覚が素晴らしい。
この辺の表現なども写真とイラスト表現の一体感がすごい。こなれています。
記号的なイラストをつかった唯一無二なホームページ
https://www.benners.co.jp/
BEBBERS様
これまでのイラストとは変わって、記号的な表現のイラストです。
少ない線数で特徴を表現する技術がいいですね〜
赤と青という二色構成も単色のイラストよりも個性が生まれ目を引きます。
見出しのフォントカラーも二色の使い方を上手く使っているので一体感があります。
参考にしたい表現。
コーダーが裸足で逃げ出しそうな複雑なイラストアニメーションのホームページ
https://www.mitsui-kinzoku.com/purpose/
三井金属様
まずはファーストビューでコーダーが逃げ出しそうな複雑なイラストのアニメーションが目を引きます。
イラストだけではなく文字も複雑にアニメーションします。こりゃ大変ですわ。
スクロールしても当たり前のように様々な要素がヌルヌルとアニメーションします。
ただアニメーションしているだけではなく、動きがスムーズかつ気持ちがいい。
この辺、デザイナーとコーダーさんの連携が取れているんでしょうね・・・
とはいえ通常のデザイナーですと、こうしたアニメーション的なディレクションって難しかったりするので動的な表現に素養のある方がデザインされてるんだろうなー
それに凄まじいスキルのコーダーさんがバックについているのでしょう。羨ましい。
どこか平成を感じるy2kなイラストテイストが素敵なホームページ
https://saiyo.sme.co.jp/graduate/26/
ソニーミュージック様
ポップなイラストが主役のホームページ。どこか平成を感じさせるアイテムやファッションが今流行りな雰囲気でいい調子。
採用サイトということでy2kを意識してるのかもしれません。そのへんも上手。採用サイトという長期間掲載しないサイトだからこそ変化の激しいファッションのトレンドをあわせていくのはGoodですね。
ほぼイラストだけで構成されていて、採用サイトで写真をほとんど使わないっていうのも珍しいですね。
その結果、統一感や一体感が生まれてますね。ソニーミュージックの採用サイトは毎回ユニークでおもしろい。
2025年
https://saiyo.sme.co.jp/graduate/25/
2024年
https://saiyo.sme.co.jp/graduate/24/
切り絵のような独特なイラストが可愛すぎるホームページ
https://wallpapermagic.net/
WALLPAPER MAGIC様
とにかくイラストの世界観が素敵でかわいい！
いやー素材感があってカクカクとしたアニメーションもすごく良いです。
商材である壁紙との相性も抜群。イラストと商材の組み合わせって結構難しくて作家性が強すぎると印象が引っ張られてしまうし、無難に行こうとすると他と被ってしまったり商材を魅力的に伝える効果がいまいちだったりするので、このサイトは素晴らしいディレクションだなーと思います。
ポップなイラストと凄まじい熱量を感じるホームページ
https://www.ohtake.ac.jp/
大竹高等専修学校様
漫画風のかわいいイラストと学生さんのフレッシュな写真、そして大胆なレイアウトが絶妙にマッチングした素晴らしいサイト。
https://www.ohtake.ac.jp/openschool/
もう、とにかく狂気的な熱量で作られていて、特設ページはもちろんですが、下層ページもLPのような作り込みがされています。
全ページ集中力を切らさず創り上げる制作チームにあっぱれです！
イラストは独自に魅力をつたえる手段のひとつ
そのままの魅力を伝えるのが写真もデザインをつくる上で必須の要素なのですが、イラストは想像の中でしかありえない表現を素材としてつくりだすことができます。
キャラクターをつくってみたり、写真を組み合わせて印象を変えたり、目に見えないサービスなどをイメージ化することもできます。
そんな無限の可能性を秘めた表現を今回特集してみました！
僕もWebディレクターとしてイラスト表現頑張って挑戦していきたいと思います！