ハロウィンWebデザインまとめ 2016

ここ数年で、日本でもすっかりおなじみのイベントとなってきたハロウィン。会場参加型のイベントの他にも、ハロウィン限定のグッズやSNSでのキャンペーンなど、手軽に参加できるものも増えてきました。

時期はいよいよハロウィン目前。サイトまるごとハロウィン仕様の特設サイトも続々と公開されています。
おどろおどろしかったり、ポップだったり、ゆるかったり…いろいろ見てみると、それは意外と多種多様。
この時期ならではのハロウィンサイトを、ぜひお楽しみください。

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

アイスの実 みんなでしちゃってみハロウィン|グリコアイス

11

http://cp.glico.jp/icenomi-calendar/halloween/

Twitterハッシュタグで参加する、アイスの実のレシピ投稿イベント。スクロールに合わせて回るジャック・オー・ランタン(アイスの実)や、がくがく不気味に揺れる写真フレーム、ぶるるっと震えるボタンなど、楽しい動きがたくさん。
普段のサイトだと、使うのにちょっと躊躇してしまうような動きも、このようなイベントサイトだと賑やかな演出にとてもいいですね。

サンリオのハロウィーンパーティスペシャルサイト

07_01

http://www.sanrio.co.jp/special/halloween/2016/

サンリオキャラクターたちが仮装でお出迎え。アメリカンコミック調の雰囲気が可愛らしいです。
ちなみに10/25にサイトを訪れたら「クロミちゃん」のサイトジャックのイベント開催中でした。ハロウィン当日まで、こういったお楽しみがあるのがいいですね。

ハロウィンフェスタ2016|Yahoo ショッピング

05

http://topics.shopping.yahoo.co.jp/special/halloween/

ところどころにパララックススクロールを適用し、立体的な演出がされています。にゅっと覗いてるようなリアルなモチーフは、ちょっとホラー…。
仮装をまとったメインビジュアルのお二人の、ビフォーアフターがまた楽しいです。

HALLOWEEN TOKYO|東京ブランド公式サイト

15

https://andtokyo.jp/halloween/

ジャック・オー・ランタン柄のゴミ袋を片手に行われる、東京のクリーンイベント。去年はきゃりーぱみゅぱみゅさんが広告塔となって開催されていました。
黒とオレンジのハロウィンカラーを基調としたシンプルなデザインで、ジャックのアイコンが可愛らしいアクセントになっています。

コメダでフォトコン|珈琲所コメダ珈琲店

09

http://www.komeda.co.jp/halloween/

こちらは、TwitterまたはInstagramのハッシュタグで参加するフォトコンテスト。
コメダ珈琲のロゴでおなじみのキャラクターも、ハロウィン仕様…!なんだかとてもしっくりきています。よくみるキャラクターの別の顔に出会えるのも、ハロウィンイベントの楽しみのひとつかもしれませんね。

KAKIで今夜はPARTY|JAグループ和歌山

14

http://kakine-chan.com/halloween/

かぼちゃではなく、あえて「柿」をテーマにしているのが、インパクト抜群です。(確かに大きさやお値段を考えると、手軽でいいのかも…?)
和歌山のキャラクターと、「DJみそしるとMCごはん」さんの織りなす、ゆる〜い雰囲気のハロウィンサイト。柿のパーティーレシピや「KAKI知識」なる柿情報を、これまたゆる〜く紹介されています。

モンシェールのハロウィン Happy Halloween  2016

03

http://www.mon-cher.com/halloween2016/

堂島ロールでおなじみ、モンシェールのハロウィン特設サイト。暗いオレンジのグラデーションがとても上品で、しっとりと大人向けなハロウィンです。
ギザギザのラインや手書きの英字を取り入れた、ハロウィンらしい遊び心も。

サッポロ 男梅サワー妖怪カメラ|サッポロビール

08

http://otokoume-youkaicamera.com/

こちらは浮世絵と妖怪をモチーフにした、和製ハロウィン。
写真をアップロードすると、般若や化け猫などの妖怪に変身できるというコンテンツです。変身後の写真はマウスに合わせてグリグリ動くので、ちょっと人に見せたくなるかもしれません。

2016 マルイのハロウィン|マルイ

01

http://www.mon-cher.com/halloween2016/

ファッションモールマルイの、イベント情報特設サイト。
暗めの配色にもかかわらず、絵本のようなタッチのイラストで、どこか暖かな印象のデザインです。

 

終わりに

いかがでしたでしょうか。

このほかにも、AGN Webチームでは気になったWebデザインを、下記のサイトでまとめてご紹介しています。

00

Web Site Clips
http://agn-websiteclips.tumblr.com/

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


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

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

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

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

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

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

16
http://www.gyokusendo.com/

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

燕三条 TSUBAMESANJO organic lifestyle creations JAPAN

08

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

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

株式会社昭和洋樽製作所

05

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

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

角館 伝四郎 DENSHIRO

06

http://denshiro.jp/

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

woodpecker

15

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

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

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

04

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

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

ヤヱガキ酒造株式会社

10

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

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


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

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

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

GMOペパボ株式会社

04_201604

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

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

加藤憲ホールディングス 株式会社

03_201604

2017年度新卒採用情報 -加藤憲ホールディングス株式会社
http://www.ktk-hd.com/recruit/

ちょこちょこと動く文房具モチーフの遊園地が可愛い!
マウスオーバーのアニメーションなど、細かいところまでこだわりを持って作られているのを感じました。
色使いもカラフルで、キャッチコピーのとおり「ワクワク」したサイトになっています。

中央電力株式会社

02_201604

MAKE | 中央電力株式会社 採用サイト
http://www.denryoku.co.jp/recruit/

直線的な幾何学模様で、一見シャープに見えがちですが、ロゴカラーの「緑」や「黄色」をベースにした配色や、手書き文字を使用することで、ほどよい柔らかさのある親しみやすいデザインになっています。

エイム株式会社

06_201604

エイム株式会社新卒採用サイト
http://www.aim-info.co.jp/recruit/

紺色を基調とした、シンプルでシャープなデザイン。
マウスオーバーなどのアニメーションからスピード感も感じました。
業務の1つとして自動車開発があるので、そこから派生した「動きのデザイン」なのでしょうか。

NTTデータ先端技術株式会社

11_201604

新卒採用情報 | NTTデータ先端技術株式会社
http://www.intellilink.co.jp/recruit/index.html

斜めのラインを用い、こちらもシャープなイメージのデザインです。
メインに使用されている写真が影が強調されているもので、まさに「GEEK Fiters」という「仕事人」のかっこよさが出ています。
短いのであっという間ですが、トップ表示時のアニメーションもかっこいい!

株式会社東急エージェンシー

05_201604

東急エージェンシー 2017採用サイト | Tokyu Agency Inc.
http://www.tokyu-agc.co.jp/recruit/2017/special/top.html

三角形を組み合わせで、文字やあしらいを表現。
くしゃっと崩れて再生される文字が、みていて気持ちいいです。

株式会社LITALICO(りたりこ)

01_201604

株式会社LITALICO 新卒採用情報2017
http://litalico.co.jp/recruit2017/

こちらも三角形をモチーフにしたデザイン。カラフルな色使いで全体的にポップな雰囲気になっています。

株式会社 アサツーディ・ケイ

08_201604

ADK RECRUIT 2017
https://www.adk-recruit.jp/

本来選ばれる方の応募者が、逆に面接官を選んでしまうという「相棒採用」なる、ユニークな採用方法がとられています。
写真を隙間なく配置したトップは、インパクト大!

株式会社 ニチイ学館

10_201604

ニチイ学館 新卒採用サイト
http://nichii-saiyo.com/2017/

サイトのコンセプトになっている矢印はトップはもちろん、ページのいたるところに用いられています。
トップのだんだん接近していく、スクロールでのページ変化はダイナミック!
ほぼ全てのページがそのページ独自のレイアウトになっているので、すみずみまで見応えがありました。

株式会社クラーチ

09_201604

株式会社クラーチ | 2017年度新卒採用 | Kuraci Recruit 2017
http://www.kuraci.co.jp/recruit/

金と紺をポイントに使用した、上品なイメージです。
コンテンツの背面に淡い色をさりげなく引いてあるのも素敵。
枠にとらわれていない文字や写真のレイアウトは、まるで「動く雑誌」のようです。

ソニーミュージック

12_201604

ソニーミュージック新卒採用2017
http://saiyo.sme.co.jp/graduate_17/#(´-`).。

ちょっと変わったURL…ぜひサイトにいってその変化をみてほしいです。
多数使用していても、そこまでチカチカしない配色は参考になります!


素敵なレスポンシブサイトのまとめ

スマートフォンなどPC以外から閲覧する方向けに、レスポンシブ対応のWebデザインをすることが増えてきました。
デザインをする前に参考にさせていただいた、素敵なサイトのブックマークがたまってきたので、今回ご紹介いたします。

12五島感動しま旅!

手描き風のイラストや色使いが、あたたかいイメージ。
スマートフォン用レイアウトでは、イラストなど表示を簡略化してはありますが、大きく配置したロゴとイラストで、決してさみしい感じに見せていません。

続きを読む 素敵なレスポンシブサイトのまとめ


お正月特設サイトのまとめ

2015年になって、早一ヶ月…
年々時が過ぎるのが早くなっている気がします。

2月になってしまう前に、ご紹介!
年始のご挨拶や初売りの告知、などなど
素敵なデザインのお正月限定Webサイトを集めてみました。

※ご紹介したサイトは、非公開になっている場合があります。ご了承ください。

4772298038968320初売りLAFORET 福袋

朱色×白×黒の組み合わせがカッコいい!

 

4799897196822528IMJグループ 2015 年賀サイト

なんともいえない羊はもちろん、うしろに並ぶイラストもクオリティ高!
スマートフォンをお持ちの方は、360°年賀状でもほっこりしてみてはいかがでしょうか。

 

5139642691092480MUSEE PLATINUM ミュゼプラチナム

やわらかいカラーが差し込まれていて、
お正月テイストだけど、かわいらしい雰囲気。

 

5514085430984704お年賀プロジェクト2015 – 面白法人カヤック

ありそうでなかなか見ない、畳の背景が新鮮です。
メインイメージのアニメーションも楽しい

 

6231256276664320WEB制作会社 株式会社ノイ

羊をクリック!容赦なく毛を刈ってしまいましょう。
ヘッダーだけに注目しがちですが、よく見るとページ丸ごと羊使用に切り替わってます。

 

 

いかがでしたでしょうか。
同じテーマ・配色でも、それぞれのページの特色が出ていて面白いですね。


新潟グラム x CSS Nite「Webで使うIllustrator」に参加してきました

先日11月6日に、新潟グラム x CSS Niteに参加してきました。

テーマは「Webで使うIllustrator」

「WebデザインといえばまずはPhotoshop!」って入口からきて、今までPhotoshopメインでデザインしてきました。
が、もとはIllustratorを使う方が多かった自分(パスいじっているのが好き…)。
できたら、IllustratorでもWebデザインするのに、もっと活用できたらいいなってことで、今回初めて参加してみました。

気になったこと・使っていきたい機能などを、忘れない内にメモします。

新潟グラム/CSS Niteについて

【新潟グラムとは】
新潟でデザイン業務に関わる方に向けたセミナーを主催されています。

【CSS Niteとは】
株式会社スイッチの鷹野雅弘さんが主催するセミナー。CSSに限らずweb制作に関する知識を発信するセミナーです。
今回は鷹野さんが講師もされていました。

 

Web制作の動向

いままでビットマップベースで行っていたパーツの作成を
SVGWebフォントアイコンフォントなどのベクター表現や、CSS3を活用することで
マルチデバイスに対応したWebデザインをしていく。

ベクター表現が得意なIllustratorでWeb制作

Illustratorの便利な機能

時間をかけずに、編集しやすいデータをつくれるIllustratorの機能をいくつか紹介されてましたので、その中でも特に気になったものをいくつかピックアップしました。

1 ライブカラーで再配色

ハーモニーカラーをリンク。あとはホイールをぐるぐるまわすだけで簡単にカラーバリエーションができます。
別々に配色する必要のあった「塗り」と「線」も、これで一度に変更が可能に!
配色に悩んでいるときも、これで気軽に別の雰囲気の色が試せますね。

2 文字タッチツール

文字のアウトライン化をすることなく、一文字単位で文字の移動・回転ができます。
今まで文字パレットの数値でいじっていたのを、感覚的にできるのでいいですね!
しかも下位バージョンでデータを開くこともできるそう。
でも残念ながら、こちらはCCのみ対応の機能となっています。

3 段組み設定を使ったgrid対応のワイヤーフレーム作成

段組み設定でグリッド分割し、さらにその分割したオブジェクトを段組み設定で結合。
結合したオブジェクトに、ダミーの画像やテキストをアピアランスで適応
…と、ものの数分でサクサクとワイヤーフレームができあがっていく様は圧巻でした…!
段組み設定にこんな使い方があったんだなーと、一番印象に残った項目でした。

6 Layer Exporterや画像アセット(Photoshop)を使ったPNG/SVG/JPEGの書き出し

スライスを使用せず、レイヤーやフォルダ単位で画像を書き出すことができます。
しかも、レイヤー名(フォルダ名)を対応する名前に変えると、それにあわせた形式や解像度で書き出してくれるそうです!
面倒だったスライス作業がなくなると、相当な時間短縮になるのではないでしょうか。

しかしこちら、CCから対応の機能です…。本当に残念です…。

参加してみての雑感

・Illustratorのこと以外にも、「Webデザイン」制作の動向も知れて、大変ためになりました。

・鷹野さんのスライドの構成・デザインもわかりやすく、かつ遊びがあって素敵でした。
・視点誘導に使用されていたスポットライト機能(Mouseposéというそうです)も、わかりやすかったです。

Mouseposé
人前でデモしたりするときにやっておくといいこと(Mac OS編) – DTP Transit(Mac OS X, セミナー, イベント, 展示会, プレゼンテーション, ユーティリティ)

・CCの機能っていろいろあるんだなーと、新機能を試すのが今から楽しみです。

・使い慣れているつもりになっているソフトでも、知らない機能・活用方法がたくさん。まだまだ勉強しないとですね。

・次回開催されるときには、またぜひとも参加したいです。