この記事の目次
手描きイラストを取り入れたWEBデザイン
普通にPhotoshopやIllustrator等でWEBデザインを行う場合、どうしても直線的でシンプルなレイアウトやデザインとなってしまいます。
そこで、手描きイラストを各要素に取り入れることでグッと親近感の沸くWEBサイトとなります。
そんな手描きイラストを効果的に活用しているWEBサイトデザインをジャンルを問わず集めてみました。
たがみ文具店
http://www.tagami-bunguten.com/
緑を基調としたかわいい文房具・おしゃれなデザイン文具通販をしているECサイト。
ヘッダー、フッター、サイドバーに可愛らしいキャラクターの手描きイラストが添えられていて、楽し気な雰囲気を出す事に成功しています。
各見出し部分でもアイコンとしてちょっとしたイラストが活用されています。
ホームタウン吉祥寺
http://hometown.ne.jp/
吉祥寺のショップ情報を随時発信している地域密着型メディアのWEBサイト。
イラストがあることで、ヘッダー背景が賑やかな雰囲気となりますね。
各見出しアイコンでもかすれ風なデザインを用いており、WEBサイト全体が味のある個性的な吉祥寺の街を現わしているのかも？
リサとガスパール
http://www.lisagas.jp/
フランスの絵本作品『リサとガスパール』のオフィシャルWEBサイト。
絵本作品なため元のキャラクターがイラストなので、WEBサイト随所にリサとガスパールがひょこっと出てきます。
見出しや下層ページのフォントも手描き風を多用しながらも、見やすくシンプルなレイアウト構成となっています。
ベルギーワッフル マネケン
https://www.manneken-ec.co.jp/
全国でベルギーワッフルを販売しているマネケンのECサイト。
こんがりとした（？）感じの素朴な背景の上に、海外をイメージとしたキャラクターのイラスト散りばめられており、見ていて楽し気なWEBサイト。
構成自体はシンプルですが、見せ方に工夫が凝らされていて飽きないWEBデザインです。
おおやけこども園
https://www.ooyake.net/
京都市にある保育園のWEBサイト。
文字は見やすく、丸文字で親しみやすく。
動画やマウスホバーで動くアイコン等、多数のコンテンツを見やすくするこだわりが随所に見られます。
シンプルなイラストもメインコンテンツ背景やフッターに設置されていることで、更に保育園がイメージやすいようになっています。
八ヶ岳・軽井沢の住宅・別荘建築はPDO建築事務所
http://www.passivedesign.jp/
インパクトのある写真を多用した軽井沢の住宅・別荘をメインとした建築事務所のWEBサイト。
マウスオンでアニメーションをするので、触っていて楽しいWEBサイトです。
そのまま建築のコンセプト図やイラストをさりげなく背景で見せたりと、ユーザーにアピール。
お酒卸の知多善
http://www.chitazen.co.jp/
アニメーションから始まるお酒卸の会社のWEBサイト。
1枚のLP的なコーポレートサイトですが、お酒やお猪口をモチーフとしたカラフルな街並みがとても綺麗です。
また、卸売企業と言う事で、随所にトラックがアニメーションで動いていたりととても良い雰囲気。
日本レクシー株式会社
http://www.omotenashi-1.jp/
長野で温泉や観光、地域を活かしたプロジェクト推進している企業のWEBサイト。
日本昔話風な手描きイラストの背景、キャラクターたちが動いていて、訪れたユーザーが何の会社か直ぐにイメージできますね。
全ページほんわかした手描きイラストを多用しながらも、きちっとプロジェクトも見やすく紹介されていて、手描きイラストを用いたWEBデザインのお手本のようなホームページ。
みずこし動物病院
http://www.vet-mizukoshi.com/
動物病院のWEBサイト。
犬・猫のイラストを中心に、左固定のグローバルメニュー、全体の背景まで統一感のある手描きイラストでまとめられていて、とても見やすく分かりやすい。
シンプルな構成ですが、パララックスで背景を固定化したりと、細かな点までしっかりデザインされていて好感が持てます。