デザイン - AGN Web!

サイトのイメージを上手に盛り上げる！キャラクターが主役のWebデザイン9選

固い業種のイメージをやわらげたり
特色や個性をより強調したり
意外な組み合わせでインパクトを出したり…と
イメージの印象付けに効果的なイメージキャラクター。

そんなキャラクターをうまい具合に取り入れている、9つのWebサイトをチェックしてみました。

※2017/03/31のサイトの情報です。

続きを読むサイトのイメージを上手に盛り上げる！キャラクターが主役のWebデザイン9選

Illustratorで手描き風【水彩画風の塗り】

170131_06

ブラシを使用した線を使った手描き風の表現や「不透明マスク」を使用したがさっとしたラフな塗り表現など、Illustratorを使用した手描き風の加工をこれまでご紹介してきました。
今回はIllustratorだけでできる、水彩画風の表現方法です。

170131_13

とある案件のデザインをしていたときのこと。
基本は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

http://parco.jp/gift/

油絵調のイラストに迷い込んでしまったような、可愛らしいけどちょっと不思議な世界観のデザインです。実写とイラストが混じり合う、イメージビジュアルもすてき！

アガット | 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/

よかったら、のぞいてみてくださいね！

【引き出しを増やそう！】Webデザインのインプット

Webチームでデザイン担当をしていますsakaiです。

デザインを任せていただけるようになって早数年…にも関わらず、まだまだ勉強が必要だなんて日々感じているこの頃です。

発想の幅を広げるべく、Webデザインの引き出しを増やすために見ているもの、していることを今回はあげてみました。

最近はコーディングの方もすこーしずつ勉強しているところ。初心者向けではありますが、その勉強でお世話になっているところも合わせてご紹介します。

続きを読む【引き出しを増やそう！】Webデザインのインプット

Macawでデザイン→即HTML化

どうも、Kazです。

この数日で面白そうなオーサリングソフトを見つけたので使ってみたのですが、「もしかしたら本気で使えるんじゃないか？」と思ってしまうくらいのアプリでしたので紹介したいと思います。

そのオーサリングソフトの名前は
「Macaw」
http://macaw.co/
macaw_1607_00

記事を書いている現在では、バージョンが1.6。MacとWindowsに対応しています。
過去には有料のアプリだったようですが、Download FREEとなっています。
起動してから、いろいろとメニューを探ったのですがレジスターがないようですので完全にフリーのアプリになっているようです。
このアプリを知っている方は、恐らく2014年頃からではないでようか。
日本のサイトでこのアプリを紹介している所は少なく、とても少数派なアプリです。

続きを読む Macawでデザイン→即HTML化

熟練の手仕事で作り上げる。日本の職人Webサイトまとめ

身近なカトラリーから日本の伝統工芸品まで。
熟練の手仕事で製作されている日本全国の職人たちのサイトをまとめました。

今回取り上げたサイトデザインの多くは、全体的に余白を大きくとり装飾を抑えたシンプルなレイアウトで、その分大きく配置した写真で製作物の美しさを際立てたものになっています。

またコンテンツのひとつひとつが興味深く、それは読みふけっていると時間が経つのも忘れてしまう程。
製作物はもちろん、それを作り出す職人や製造に使う道具、製造行程や現在までの歴史など…お時間あるときに、ぜひ隅から隅までご覧ください。

※以下は2016年5月31日現在の情報です。

無形文化財鎚起銅器｜玉川堂

http://www.gyokusendo.com/

新潟県燕市の鎚起銅器製造業。
銅板を金槌で打ち起こしながら形作っていく「鎚起銅器」の国内唯一の産地だそうです。
鎚起でできた鎚目のような背景パターンは時間経過でわずかに色が変化し、鎚起銅器のやわらかな輝きが表現されています。

燕三条 TSUBAMESANJO organic lifestyle creations JAPAN

http://www.tsubamesanjo-trade.com/jp/

こちらも同じく新潟から。
古くから「ものづくり」のまちとして金属加工業を営んできた、燕三条の情報発信サイトです。
緑の面と線で区切られたぱきっとしたレイアウトに、現代的なカトラリーがよく映えています。

株式会社昭和洋樽製作所

http://www.showayotal.co.jp/

兵庫県のフローリング製作業会社。
創業当初は社名の通り、洋酒用熟成樽の製造をされていて、後にその技術を活かし現在のフローリング業を営むようになったそうです。

角館伝四郎 DENSHIRO

http://denshiro.jp/

秋田県にある樺細工の製造・販売会社のサイト。
樺細工とは山桜の樹皮を使用した伝統工芸品で、風合いが独特で美しいです。
茶筒をはじめお盆や箸置きなど、伝統的なものから現代的なデザインまで様々なバリエーションで製品展開されていました。
ページ内の区切りとして使用されているパララックススクロールに、重なりを強調したシャドウがさりげなく入っていて、ページをめくるような心地よさがあります。

woodpecker

http://www.hello-woodpecker.com/

岐阜県の木製品製造・販売メーカー。
まな板・しゃもじなど、木製品を中心に作られています。
トップページの動画は必見。フリーハンドでなめらかに切り出されていくのはまさに職人技で、思わず見入ってしまいました。
白に近いベージュとチャコールグレーの優しい配色や、ぴょこっと飛び出すような楽しいアニメーションで、「人に寄り添う」ような親しみやすいサイトになっています。

SAKUZAN｜美濃焼のうつわ作山窯

http://www.sakuzan.co.jp/

岐阜県の陶磁器の窯元。
ロゴの丸いモチーフが所々に配置されていて、サイトの中のワンポイントになっています。
特に製品ページで感じたのですが、全体的にシンプルなレイアウトの中で、写真のトリミング・テキストの置き方などで各ページのコンセプトに合わせた見せ方になっているのがとても勉強になりました。

ヤヱガキ酒造株式会社

http://www.yaegaki.co.jp/sake/

兵庫県の酒造メーカー。
白い背景に大きく配置されたタイポグラフィーからはじまり、個性的にトリミングされた写真が印象的なサイトです。

2017年度版素敵な新卒採用サイトのまとめ

各企業がそれぞれに趣向をこらした採用サイト。それは普段目にするベーシックなコーポレートサイトとはひと味違い、個性的で見応え抜群です。
今年も2017年度の新卒採用が続々と公開されています！
その中でも特に印象的だったサイトをまとめてみました。

※以下は2016年4月28日現在の情報です。

GMOペパボ株式会社

04_201604

新卒採用2017 | GMOペパボ株式会社
https://pepabo.com/recruit2017/

シミュレーションゲーム形式で、実際の社員さんの一日を楽しく体験することができます。（はじめに「さようなら」を連打してしまった人は私以外にもたくさんいるはず）
この臨場感のあるサイトは、リアルな一日の流れを知りたいという、昨年の内定者の声から生まれたそうです。
そんなサイト作成の裏側が↓で公開されていますので、こちらもぜひ合わせてどうぞ！
ペパボの新卒サイトはこうして作られた！