固い業種のイメージをやわらげたり
特色や個性をより強調したり
意外な組み合わせでインパクトを出したり…と
イメージの印象付けに効果的なイメージキャラクター。
そんなキャラクターをうまい具合に取り入れている、9つのWebサイトをチェックしてみました。
※2017/03/31のサイトの情報です。
続きを読む サイトのイメージを上手に盛り上げる！キャラクターが主役のWebデザイン9選
カテゴリー: デザイン
Illustratorで手描き風【水彩画風の塗り】
ブラシを使用した線を使った手描き風の表現や「不透明マスク」を使用したがさっとしたラフな塗り表現など、Illustratorを使用した手描き風の加工をこれまでご紹介してきました。
今回はIllustratorだけでできる、水彩画風の表現方法です。
とある案件のデザインをしていたときのこと。
基本はIllustratorのベクターイラストなのですが、塗り方だけ水彩画のような表現ができないかとの指示をいただきました。
なにかいい方法はないかと探していたところ、3倍早くなるためのDTP講座 様のこちらの記事で紹介されていた方法がとても参考になりました。
自分なりに試してみたものを、覚書として今回記事として残しておきます。
続きを読む Illustratorで手描き風【水彩画風の塗り】
魅力的な演出盛りだくさん！クリスマスプロモーションWebサイト 2016
ハロウィンが終わったと思ったら、次はもうクリスマス！一大イベントに向けて、早くもクリスマス仕様のWebサイトやページが続々公開されています。
普段よりも華やかにドレスアップしたWebサイト。魅力的なデザインを一足お先に、チェックしてみました。
ミキハウス クリスマスサイト
https://www.mikihouse.co.jp/christmas/
赤・白・ピンクのベースカラーのグリッドが、ぎゅっと詰め込まれたギフトボックスのよう。子ども服のブランドですが、贈る側の大人もぐっとくるシックなデザインですね〜。ギフトの詳細ページは左右2分割の縦スライダーで、くるくる互い違いに回る動きが楽しいです！
※レスポンシブデザイン
クリスマス 2016 – ロイヤルコペンハーゲンジャパンオンラインショップ
https://www.royalcopenhagen.jp/christmas2016/
ロイヤル コペンハーゲンのある風景とともにクリスマスギフトを紹介されています。メインカラーのグリーンを基調に金色をアクセントとした、全体的に高級感のあるデザイン。キャッチコピーのリボンのアニメーションが、可愛らしいアクセントになっています。
※レスポンシブデザイン
三越伊勢丹グループ「こころに太陽を呼ぶ、祝祭。」
http://cp.miguide.jp/christmas-journey/
闇に浮かぶオレンジ色の「スカイランタン」が印象的。明朝体のコピーも力強く、目を惹きつけられます。クリスマスを「こころに太陽を呼ぶ、祝祭。」とし、太陽をモチーフとしたあしらいや色彩でページを彩っています。あえてバックを暗色にさせていることで、より光が引き立っているところもまたすてきですね。コンテンツの開閉も、ちょっと楽しいアニメーションになっています。
※レスポンシブデザイン
土屋鞄のクリスマスギフトサイト｜土屋鞄製造所
http://www.tsuchiya-kaban.jp/c/2016xmas.php
シンプルなツリーに、星座がきらめくシンプルなメインイメージがすてき。クリスマスまでのカウントダウンにもわくわくしてきますね！
取り扱っているギフトは、鞄や財布などの革製品。革の絶妙な光沢が映えるような、濃紺や深緑などの落ち着いた配色でまとめられています。
※レスポンシブデザイン
Your Tree 大切なひとへ、ツリーを贈ろう。｜土屋鞄製造所
http://www.tsuchiya-kaban.jp/event/2016xmas_yourtree.php
こちらも土屋鞄製造所さんのクリスマスサイト。ランダムで作られるツリーに添えて、ちょっとユニークな一言メッセージを送れるサービスです。
ぴょこぴょこ動くサンタのおしりが可愛い！
TOKYU CHRISTMAS WONDERLAND 2016 – Disney CRYSTAL MAGIC
http://crystalmagic.jp/s/tokyu/
ラインと絶妙な濃淡で表現された、クリスタルのイメージが美しいです。
ボタンやページトップのホバーアニメーション、ゆっくりと変化するクリスタル調の背景など、細かいところまでこだわりを感じるデザインです。
※レスポンシブデザイン
あかりを灯そう マザーハウスのクリスマス2016｜MOTHERHOUSE
http://www.mother-house.jp/event-campaign/xmas/
町に立ち並ぶ家が、なんとギフトボックスに。ふわっと広がる灯りの表現や、微妙な濃淡が重なる淡い色彩が、とてもやさしいサイトです。
他にもタイトルロゴやワンポイントのツリーなど、すみずみまで可愛らしいあしらいに溢れています。
※レスポンシブデザイン
HAPPY HOLIDAY｜PARCO
油絵調のイラストに迷い込んでしまったような、可愛らしいけどちょっと不思議な世界観のデザインです。実写とイラストが混じり合う、イメージビジュアルもすてき！
アガット | agete
http://www.agete.com/2016christmas/
セピア調の繊細なタッチで描かれたイラストが美しいです。ウィンドウ内でページが完結するレイアウトで、メニューの配置がちょっと珍しく感じました。
商品ページも同じくセピア調でまとめられ、ゆっくりと降る雪のアニメーションやラインの飾り枠が、華奢で繊細なアクセサリーにとてもマッチしています。
※レスポンシブデザイン
HOLIDAY SPECIAL – Crafted by Hand ＆ Heart｜スターバックス コーヒー ジャパン
http://www.starbucks.co.jp/holiday/
動画で進んでいく、スクロールアニメーション。描くように表示されるボタンやコピー、手描き調のあしらいや、ちょっとコミカルなコマ撮りアニメーションなど。木目調の背景と相まって、全体的にほっこりと暖かいデザインイメージです。
トマムのクリスマス～雪に願いを～｜星野リゾート トマム【公式】
http://www.snowtomamu.jp/special/xmas/
雪原に広がるキャンドルの灯りと、満天の星空がとても幻想的ですね…！フルスクリーンと降雪のさりげないアニメーションで、その地の魅力をシンプルに演出しています。
※レスポンシブデザイン
西武・そごうのクリスマス｜西武・そごう
https://www.sogo-seibu.jp/christmas2016/
縦組み＆明朝体のキャッチコピーが印象的。くるくるとした曲線と交わるロゴタイプもすてきです。イラストで埋められたバックと、プレゼントを結ぶリボンを思わせるような赤色のバックがとてもにぎやか。
TOKYO KAIKAN 東京會舘 Christmas 2016
https://www.kaikan.co.jp/special/xmas/
左右2分割されたメニュー。こちらはケーキやレストランの問い合わせ先が複数あるのですが、こうして入り口から分けられていると動線がシンプルでわかりやすいですね！
赤・白・金で落ち着いた彩度の色どりで、華やかな大人のクリスマスといったイメージです。
※レスポンシブデザイン
ルピシアクリスマス 2016
http://www.lupicia.com/shop/e/eX16/
お茶のオンラインショップ「ルピシア」のクリスマスサイト。クリスマスの限定ギフトに描かれたキャラクターたちが登場する、絵本「アルチザンたちの物語」が楽しめます。メインビジュアルはパララックススクロールで、奥行きのある演出がされています。
※レスポンシブデザイン
サンリオクリスマス特集2016
https://shop.sanrio.co.jp/special/xmas2016/
クリスマスカラーにまとめられた、シンプルなキャラクターイラストがメインビジュアル。ツリーのオーナメントになったキャラクターたちも、パララックススクロールで背景を彩ります。
終わりに
このほかにも、AGN Webチームでは気になったWebデザインを、下記のサイトでまとめてご紹介しています。
Web Site Clips
http://agn-websiteclips.tumblr.com/
よかったら、のぞいてみてくださいね！
ハロウィンWebデザインまとめ 2016
ここ数年で、日本でもすっかりおなじみのイベントとなってきたハロウィン。会場参加型のイベントの他にも、ハロウィン限定のグッズやSNSでのキャンペーンなど、手軽に参加できるものも増えてきました。
時期はいよいよハロウィン目前。サイトまるごとハロウィン仕様の特設サイトも続々と公開されています。
おどろおどろしかったり、ポップだったり、ゆるかったり…いろいろ見てみると、それは意外と多種多様。
この時期ならではのハロウィンサイトを、ぜひお楽しみください。
※以下は2016年10月26日現在の情報です。
アイスの実 みんなでしちゃってみハロウィン｜グリコアイス
http://cp.glico.jp/icenomi-calendar/halloween/
Twitterハッシュタグで参加する、アイスの実のレシピ投稿イベント。スクロールに合わせて回るジャック・オー・ランタン（アイスの実）や、がくがく不気味に揺れる写真フレーム、ぶるるっと震えるボタンなど、楽しい動きがたくさん。
普段のサイトだと、使うのにちょっと躊躇してしまうような動きも、このようなイベントサイトだと賑やかな演出にとてもいいですね。
サンリオのハロウィーンパーティスペシャルサイト
http://www.sanrio.co.jp/special/halloween/2016/
サンリオキャラクターたちが仮装でお出迎え。アメリカンコミック調の雰囲気が可愛らしいです。
ちなみに10/25にサイトを訪れたら「クロミちゃん」のサイトジャックのイベント開催中でした。ハロウィン当日まで、こういったお楽しみがあるのがいいですね。
ハロウィンフェスタ2016｜Yahoo ショッピング
http://topics.shopping.yahoo.co.jp/special/halloween/
ところどころにパララックススクロールを適用し、立体的な演出がされています。にゅっと覗いてるようなリアルなモチーフは、ちょっとホラー…。
仮装をまとったメインビジュアルのお二人の、ビフォーアフターがまた楽しいです。
HALLOWEEN TOKYO｜東京ブランド公式サイト
https://andtokyo.jp/halloween/
ジャック・オー・ランタン柄のゴミ袋を片手に行われる、東京のクリーンイベント。去年はきゃりーぱみゅぱみゅさんが広告塔となって開催されていました。
黒とオレンジのハロウィンカラーを基調としたシンプルなデザインで、ジャックのアイコンが可愛らしいアクセントになっています。
コメダでフォトコン｜珈琲所コメダ珈琲店
http://www.komeda.co.jp/halloween/
こちらは、TwitterまたはInstagramのハッシュタグで参加するフォトコンテスト。
コメダ珈琲のロゴでおなじみのキャラクターも、ハロウィン仕様…！なんだかとてもしっくりきています。よくみるキャラクターの別の顔に出会えるのも、ハロウィンイベントの楽しみのひとつかもしれませんね。
KAKIで今夜はPARTY｜JAグループ和歌山
http://kakine-chan.com/halloween/
かぼちゃではなく、あえて「柿」をテーマにしているのが、インパクト抜群です。（確かに大きさやお値段を考えると、手軽でいいのかも…？）
和歌山のキャラクターと、「DJみそしるとMCごはん」さんの織りなす、ゆる〜い雰囲気のハロウィンサイト。柿のパーティーレシピや「KAKI知識」なる柿情報を、これまたゆる〜く紹介されています。
モンシェールのハロウィン Happy Halloween 2016
http://www.mon-cher.com/halloween2016/
堂島ロールでおなじみ、モンシェールのハロウィン特設サイト。暗いオレンジのグラデーションがとても上品で、しっとりと大人向けなハロウィンです。
ギザギザのラインや手書きの英字を取り入れた、ハロウィンらしい遊び心も。
サッポロ 男梅サワー妖怪カメラ｜サッポロビール
http://otokoume-youkaicamera.com/
こちらは浮世絵と妖怪をモチーフにした、和製ハロウィン。
写真をアップロードすると、般若や化け猫などの妖怪に変身できるというコンテンツです。変身後の写真はマウスに合わせてグリグリ動くので、ちょっと人に見せたくなるかもしれません。
2016 マルイのハロウィン｜マルイ
http://www.mon-cher.com/halloween2016/
ファッションモールマルイの、イベント情報特設サイト。
暗めの配色にもかかわらず、絵本のようなタッチのイラストで、どこか暖かな印象のデザインです。
終わりに
いかがでしたでしょうか。
このほかにも、AGN Webチームでは気になったWebデザインを、下記のサイトでまとめてご紹介しています。
Web Site Clips
http://agn-websiteclips.tumblr.com/
よかったら、のぞいてみてくださいね！