アニメイラストを使用したWebデザインの参考になる素敵サイトまとめ

アニメイラストを使用したWebデザインの参考になる素敵サイトまとめ

マチルダ

マチルダ

こんにちは。LIGでデザイナーをしています、マチルダです。

最近、ぐっと気温も下がり秋らしくなってきましたね。カロリー摂取を抑えるためご飯を豆腐に置き換えていたのですが、食欲の秋到来に伴い耐えられなくなってきました……。気を引き締めていきたいと思います。

そんなことはさておき。Webデザインをする際に、自分で写真やイラストなどの素材を作ることがありますが、案件によっては、クライアントさんから写真やイラストの素材をいただけるケースもありますよね。そんなときは、できる限り「素材」を引き立てるデザインを心がけているのですが、これがなかなか難しい……!(そして楽しい!)

ということで本日はそんなイラスト素材、それも「アニメーションイラスト」に焦点をあてて、素材を活かしつつWebサイトのデザインとしても素敵なサイトをご紹介いたします^^b

『GRAVITY DAZE』公式サイト

blog-ma-01

http://www.jp.playstation.com/scej/title/gravitydaze/ps4/

PlayStation®4のソフト『GRAVITY DAZE』の公式サイトです。重力を操る(!)という主人公の「キトゥン」を縦横無尽に操作するゲームということで、メインビジュアルで主人公がふわふわ浮いていたり、途中のコンテンツが斜めになっていたりとゲームの世界観を魅力的に表現しています。フラットデザインとグラデーションがキャラクターを引き立てており、とても素敵です^^

▼ 「重力を操る」という世界観をだす斜めのデザイン

blog-ma-02

西尾維新 公式サイト

blog-ma-03

http://ni.siois.in/

小説家・西尾維新さんの公式サイトです。アナログなイメージの原稿用紙と、デジタル感のあるアニメーションを組み合わせ、なんとも不思議で独特な世界観を演出しています。ライトノベルス界隈ではとても有名で、アニメの原作を数多く手がける作家さんということもあり、著作一覧での原稿用紙の上にキャラクターがいる表現が、作家さんの個性を引き出していて参考になります^^

▼ 原稿用紙 × キャラクター

blog-ma-05

『すべてがFになる』 公式サイト

blog-ma-07

http://www.f-noitamina.com/

TVアニメ『すべてがFになる』の公式サイトです。シリーズの累計発行部数が390万部を突破している、森博嗣さんの理系ミステリー小説が原作となっています。いきなり180°回転するメインビジュアルと、エッシャーの騙し絵を想起させる背景は、「密室殺人」がテーマとなっている本作の世界観に一気に引き込まれます。

鉛筆画調で描かれている登場人物の線があることで、サイト全体にメリハリがついていて勉強になりました^^

▼ 「密室殺人」を連想させるエッシャーの騙し絵のような背景

blog-ma-08

「Clearasil×KAGEROU PROJECT」コラボ企画サイト

blog-ma-10

http://kagerou.clearasil.jp/

スキンケアブランドのClearasilとカゲロウプロジェクトのコラボ企画サイトです。こちらのサイト、一番下までスクロールすると……なんとサイトがジャックされてしまいます! また、キャラクターたちが商品の使い方をレクチャーしてくれるのですが、普通の商品説明よりもなぜか引力があり全部読んでしまいました……。

イラストにあった配色やフラットなデザインもさることながら、こういったキャラクターを活かした企画がとっても素敵です^^

▼ だんだんサイトがジャックされていきます……!

blog-ma-11

blog-ma-12

blog-ma-13

『ピンポン』公式サイト

blog-ma-14

http://www.pingpong-anime.tv/

松本大洋さん原作の『ピンポン』のTVアニメ公式サイトです。残念ながら放送は終わってしまいましたが、サイトは残っています。横スクロールで流れるイラストがとても素敵です。キャラクターをホバーすると名前、クリックするとアニメーションがフルスクリーンで再生される、とてもダイナミックな表現で作品の魅力が伝わってきます^^

今回の記事と全然関係ないのですが、松本大洋さんの『竹光侍』も面白いので、興味のある方はぜひ。

▼ フルスクリーンで再生される、迫力たっぷりのアニメーション

blog-ma-15

まとめ

いかがでしたか? もとの素材を活かしつつ、Webならではのデザイン表現で演出しているサイトは、見ているだけでもとても勉強になりわくわくしました^^ 今後も素敵なサイトを見つけたら発信していきますので、末長くよろしくお願いいたします!

最後までお付き合いいただき、ありがとうございました。それでは、また!



【株式会社LIGについて】

わたしたちは年間150を超えるWebサイトをリリースしている、東京上野のWeb制作会社です。もちろん、アニメイラストを活かした制作実績も!Webサイト制作のご相談はこちらより、お気軽にお問い合わせください。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

デザイナーのマチルダです。 好きなお酒はビールと澤の井です。よろしくお願いいたします。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL