ハロウィン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/


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


一発で全天球写真が撮れるカメラのまとめ2016年10月版

ワンショットで180°ないしは360°の全天球写真を撮影できるカメラがだんだん増えてきました。
カメラ一台でその場の雰囲気をまるっと撮影できるカメラは人気も上々で新製品も増えつつあります。
一般的に魚眼レンズとセンサーを2個セットでパッケージした製品が多いです。
現在(2016年10月)、市販されていて入手しやすい全天球カメラをまとめてみました。

★リコーシータ
このジャンルの開拓者です。弊社でも使っています。(旧モデルm15)
最近はバリエーションも増えてきました。扱いやすさが魅力です。
現在はスタンダードのSCと高画質モデルのSに分かれています。
スマホからwifi接続し撮影できるので、WEB掲載用には使いやすいです。
(スマホ片手に離れた所に隠れて撮影します。)

THETA SC / THETA S

Ricoh Theta

メーカーサイト
https://theta360.com/ja/

★ニコン
10月末発売のできたて新製品です。後発だけあって使い勝手良さそうです。
GoPro的なアクションカメラのカテゴリ製品ですね。

KeyMission 360

Nikon KeyMission 360

メーカーサイト
http://www.nikon-image.com/products/action/lineup/360/

★コダック
結構前からでていますね。業務用に近い雰囲気があります。
1台で半天球、2台で全天球とちょっと特殊な運用になります。

PIXPRO SP360 4K / PIXPRO SP360

kodak PIXPRO SP360 4K

メーカーサイト
https://kodakpixpro.com/AsiaOceania/jp/cameras/actioncam/sp3604k/

★サムスン
某目玉のおやじ的な独特な球状カメラです。4K相当の高画質。
galaxyのオプション的な扱い。一時期積極的にCMもやってましたね。
スマホ+カメラ+VRゴーグルで、手軽にVRコンテンツを作成して楽しめます。
galaxyがなくても単体で撮影できます。

galaxy gear 360

サムスン Galaxy Gear 360

メーカーサイト
http://www.samsung.com/jp/consumer/mobilephone/gear/gear/SM-C200NZWAXJP

★Insta360
iPhonelightning端子で接続する専用の全天球カメラ。わりと安価です。
スマホ連携タイプはなに気に撮影時スマホと接続させるのが面倒なので、直結式はiphone単体で完結できるので便利そうですね。

nano 360°

ハコスコ  Insta 360

国内販売サイト
http://hacosco.com/insta360/




他にも、GoPro複数台で同時撮影して全天球撮影を行うソリューションとかありますが、お値段もそれなりになるので、業務ならともかく一般にはあまり関係ないですね。
現在GoProクローンのような中国製アクションカメラがたくさん出回ってきているので、今後全天球カメラにもその流れが来そうな気がします。

利用について
実際WEBサイトでの利用方法はまだ過渡期で、これといったやり方が定まっていない感じです。しかし、将来的にVRとWEBが融合すると、活用の場は一気に広がると思います。
SNSに関してはYoutubeがVR動画に対応したことで、お手軽に配信できるようになりました。
Facebookも傘下にVRシステムのOculusを持っていることもあって動画を含めた全天球コンテンツをそのまま投稿出来るようになっています。

全天球写真は長らく個人の楽しみ的な使われ方をしてきましたが、今後のVRの隆盛に大きく影響を受けそうです。
先日PSVRも出ましたし、どうなるか楽しみなジャンルです。




弊社でも全天球画像を組み込んだサイトを制作しています。よろしければどうぞ。
建築物の内部を見せるのにいいツールだと思います。

新潟浴場組合(各銭湯の浴場内を全天球写真で紹介しています。)
http://niigata268.com/
新潟浴場組合


コンタクトフォーム7で画像などファイルを送る。(添付ファイルの送信)

みんな大好きContact Form 7です。(3回目)

agnblog_20161015_02

前回はファイルの受信でしたが、逆にフォームから問い合わせてきた人に確認メールと合わせて、添付ファイルを送りたいケースもありますよね。
例えば資料請求フォームで、請求と同時にPDFファイルを自動的に送るとか。需要はあると思います。

そこでContact Form 7です。(いつもお世話になっております。)
受信だけでなく、サーバー上のファイルを添付しての送信も最初から対応しています。

受信メール設定場所
コンタクトフォームの編集→「該当のフォーム」→「メール」のタブagnblog_20161015_01 「ファイル添付」の欄に添付ファイルの場所を書きます。


[wp-contents]フォルダから下のパスを記載するか、サーバーのフルパス(絶対パス)で記載します。(httpからURLを書いてもダメです。)
フルパスがわかればサイト内の何処に置いてあるファイルでも構いません。よくわからなければ、WordPressダッシュボードのメディアでアップするのがいいでしょう。

先方の受け取り環境のこともあるので、あまり大きなファイルを添付しないようにしましょう。最大でも5MBぐらいが現実的ではないでしょうか?
フォームの作成時にその旨を記載しておくのが親切ですね。


コンタクトフォーム7で画像を送って貰う。(ファイル添付)

みんな大好きContact form 7の記事です。
(いつも使わせて頂いております。ありがとうございます。)

サイトに問合せフォームを付けたときに、画像などファイルを受け取りたいことが、あると思います。先日クライアントの工務店さんから「見積を出すのに、フォームから現場の写真を送ってもらえるようにしたいんだよね。」 などとのご要望がありまして、WordPressのフォームによる添付ファイルの送信について調べてみました。

Contact Form 7には初めから、画像を含む各種ファイル添付用のタグが用意されていますので、簡単に付けられます。まずフォームの設定(フォームタブ)画面です。

agnblog_20161014_02

ここで添付ファイルの種類とサイズに制限をかけられます。
詳しくはオフィシャルサイトで
http://contactform7.com/ja/file-uploading-and-attachment/
(…この記事不要です…)

次に受け取り設定(メールタブ)の画面です。
agnblog_20161014_03 ファイル添付のエリアにタグを書き込みます。
あとはフォームを固定ページに貼って送って貰うだけ!
agnblog_20161014_01

 受信すると、指定のアドレスにメール添付の形で画像が届きます。

注意点としては、添付ファイルは一時的にサーバーにアップロードされますが、フォルダの属性(パーミッション)などで書き込み禁止になっていると添付に失敗します。立ち上げたばかりで設定中のWordPressにありがちなミスです。


スマホの場合
・レスポンシブを意識してテーマを選んで作ればスマホ対応です。
・スマホだと画像選択時にカメラを選び、その場で撮影→添付の流れが実現できます。
(画像はandroidですが、iOSでも大丈夫。)

agnblog_20161014_04

業務によっては、画像のやり取りができると大幅に省力化に繋がることもあると思います。上手く活用したいですね♪



まずはてっとり早くWebページを作ろう。CDNとCSSフレームワークとjQueryプラグイン

自分でWebサイトを作りたい、更新は自社で行いたい、Webの勉強を独学で始めよう。
思い立ったが吉日、書店に向かい分厚いHTML辞典を買ってくる。
これ、だいたい間違いなく挫折します。
せっかくその気になったのですから、Webって楽しいを体験してほしいのです。
ですので、今回はCDNを利用して外部ファイルを読み込み、極力手数をかけずにWebページを作ってみたいなと思います。
対象はちょっとならHTMLやCSSがわかるよ、という人向けになります。

今回は前置きが長いので、面倒な人はこちらから。

もしくはデモをどうぞ。

【DEMO】


挫折のわけ


何せHTMLをたくさん掲載してある本はとても分厚いです。
Webサイトに触れた事のない人には意味不明は記号の集合体であり、自分がそれをどのように使うのかの想像が難しいです。
そしてHTMLを覚えてもレイアウトはできません。レイアウトするためにはCSSの知識が必要となります。
今度はCSS辞典を買ってくるのでしょうか?
CSSをクリアしても、自分がよく見ているかっこいいホームページにはなりません。
見た目の装飾などはCSSでOKですが、動作的な部分になるとJavascriptを利用します。
簡単なWebページにだって、こんな風にたくさんの知識やスキルが詰まっています。
覚えなくちゃいけないことがたくさんある時、少なくとも私は挫折します。

お手軽に作ってみよう


CSSフレームワーク


グリットシステムというものがWeb界を席巻してもうかなり経ちます。
また今ではたくさんのCSSフレームワークと呼ばれるものがたくさんあります。
CSSフレームワークとはちょっと乱暴なまとめかたをすれば、デザインされレイアウトの方法を決めたCSS(場合によってはJavascriptやフォントも)をあらかじめワンセットにしてあるものです。
BootstrapやFoundationなどといったところが世界的にもとても有名です。
スマートフォンを始め、モバイル端末の対応はもはや必須のものとなりました。
CSSフレームワークの多くは、レスポンシブWebデザインと呼ばれる、現在主流の方法でモバイル対応しています。
ですから、CSSフレームワークを利用することで、モバイル対応のWebページを作る事ができます。

bootstrap_ss foundation_ss

CSSフレームワークは多くの人を助けてくれました。
CSSやHTMLが不得意な人にはその形式を、デザインの不得手な人にはある程度完成されたデザインを。
今回は数あるフレームワークの中からColiss様が紹介されていたBulumaというフレームワークをチョイスしました。
(※自分の勉強がてら)
Bulumaが他と違うのは、Flexboxという新しいCSSのレイアウトをメインにしたフレームワークであるという事です。

CDNを利用する


CSSフレームワークをはじめ、かっこいい動作をさせてくれるjQuery(Javascriptのライブラリ)のプラグインなど、世界中の多くの人が共通で利用するファイルを特定のサーバにホスティングしてみんなでそこを参照して使う。
WebサイトでCDNを利用するをなんとなく説明するとそんな感じでしょうか?(厳密には違うと思う)
GoogleやMicrosoftが公開しているCDNもあります。jsDelivrcdnjsといったところもメジャーです。
先ほど名前を挙げたBootstrapもCDNで利用できます。
使いたいプラグインやフレームワークの名前+「CDN」で検索すれば、たくさんのものが見つかるでしょう。

今回利用したもの


フレームワークはBulumaを、簡単にCSSのアニメーションを利用できるanimate.cssも利用してみましょう。これらはcdnjsから読み込みました。
jQueryを利用したスライダーを入れたいので、jQuery本体(これがないと動きませんよ?)とslickというプラグインを利用します。
Slickはjsdelivrからです。
アイコンもWebサイトを作る上でとても重要な要素です。
アイコン画像をいちいち用意するのは大変なので、Font Awesomeというアイコンフォントを利用しましょう。

せっかく外部ファイルを利用するので、フォントもGoolge Fontsを利用してみましょうか。

 

Webページを作ろう


上に挙げたものをhead内に読み込みます。



今回のページの内容


あくまでサンプルですが、今回はよくある構成の1ページ完結型にしました。
はじめにスライダーを設置して動きのあるコンテンツでユーザーを惹きつけます。画面幅目一杯のサイズで行きましょうか。
それから簡単なコンセプトを説明したら、サービス内容、会社概要、お問い合わせフォームと続きます。
せっかくですからマップも入れましょう。
SNSのアイコンもいれて、ユーザーとつながりが持てるようにします。
よくある感じですね。

あとはBulumaの書式に従って、どんどんHTMLを書いていきますね。
ここではBulumaの使い方の説明ではないので細かい事は説明しません。
ドキュメントを見ながらレイアウトを作っていきます。
カラム割やカラー、フォームのパーツデザインなどもあらかじめ決まっているクラスをHTMLに付与していきます。

手なりでつくってこんな感じです。

【DEMO】


ちょっと余白がおかしいですが、それなりになんとなくそれっぽいです。
HTMLの他にCSSとjQueryをちょっとだけ書きました。



Webフォントの読み込みとスライダーの微調整、それからGoolgeマップをレスポンシブWebデザインに対応しました。



jQueryの方はモバイル用のナビメニューの動作です。それからSlickの設定をして、スムーススクロールも入れときました。
スムーススクロールは絶対に必要なものではありません。

CDNやCSSフレームワークのデメリット


こんな感じでそんなに学習コストも時間もかけずに、あるものを利用するだけでそれっぽいWebページを作ることができます。
ただし、実際のサイト制作ではCDNやCSSフレームワークを使わないことも多々有ります。
メリットがあるのと同様デメリットもあるからです。

CDNのデメリット


まず第一に他の人のサーバとソースを利用しているということでしょう。
これは、そのサーバがダウンした場合やソースの書き換えが起こった場合に対処が遅れることがあります。
意図的なことではなかったとしても、バージョンアップで自分のHTMLやJavascriptとかちあってうまく動作しなくなることも考えられます。
また、他者のサーバにアクセスするので、読み込みのスピードもそのサーバのスペックに依存することになります。(※1)

※1 ただし、CDNを利用するメリットとして、多くの利用者がいるライブラリ等であればCDNから利用する事でキャッシュを利用できて速いというものがあります。

CSSフレームワークのデメリット


これはjQueryプラグインなども同様なのですが、例えば今回のDEMOくらいであれば、はっきりいってこんなにいらないのです。
フレームワークの機能で利用していないものがたくさんあります。
ある程度知識があれば、フレームワークなどを使わなくても再現できます。
利用していなくでもファイルは全て読み込みます。読み込む量が多ければ多いほどブラウザに負荷がかかりレンダリングが遅くなります。
少しでも、コンマ何秒でも速く、ということを考えると大幅に無駄です。

また、ちょっとだけ専門的な話をすると、CSSはSassやLess何度をコンパイルして作ることが多くなっていますが、CDN経由でフレームワークを読み込むと直接CSSを読み込むので必要な部分だけ利用したいという要望に応えられません。※2
不必要なCSSを打ち消すためのCSSが必要となり、ソースコードが長くなっていきます。

※2 多くのフレームワークでは、コンポーネントや機能によって分割されたSassファイルなどをダウンロードする事ができます。

なにより、一番の問題となるのはフレームワークを利用する事によってデザイン的に似通ったものができやすいことが挙げられます。
ボタンのデザイン、タイトルやメッセージ、フレームワークは綺麗に見えるようにデザインされています。
それをそのまま使うことで、他の誰かと似たようなデザインになってしまうことがあります。

というわけで、DEMOの左上に「add CSS」というボタンを用意しました。
HTMLはもとのまま、CSSのみを追加してデザインを変えて遊ぶ趣向です。
ボタンをクリックするともとのデザインと、CSSを追加したバージョンが切り替わります。
どうでしょうか?ちょっとは違うサイトに見えますか?

まとめ


このようにまったく違うデザインをしようとするとCSSなどの専門な知識はどうしても必要になってしまします。
そのために我々のようなWeb制作者もいるわけですし。
ですが、まずは作ってみる、自分でもやれるということを体験するという点において、CDNやフレームワークは大いに活用すべきかと思います。
自分で作ったものがブラウザに表示されるって楽しいんですよ。

最後に、こういうの使うときはちゃんとライセンスの確認をすることを忘れないでください。

参考サイト



制作事例 株式会社諏訪建設様

株式会社諏訪建設

 

株式会社諏訪建設は大手ハウスメーカーとは違い施工中でもお客さまと密に話し合い、施工後も連絡を頂ければスグに対応し状態を悪化させません。
丁寧な仕事で長くお付き合いされているお客さまもいらっしゃいます。

公開 2016年9月1日
URL http://www.suwaken.com//

●制作内容
•CMSの導入
•施工実績を読みやすくイメージを感じやすくしています。
•今後の施工基準に対しての取り組みを追加。
•旧サイトよりも写真を大きくイメージしやすくしました。


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

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

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

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

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

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


痒い所に手が届く!? Chrome機能拡張



20160930kaz_top


どもっ。Kazです。
メインのウェブブラウザは何を使っていますでしょうか?
私の場合は、safariからFierfoxを経てChromeで落ち着いています。
そしてWebの制作をしていくと、アレコレと機能拡張を入れては止め、入れては捨てを繰り返すのですが
その中で、意外と使える機能拡張を紹介していきます。



ユーザーエージェントの切り替えをサクッと行える
User-Agent Switcher for Chrome

アクセスするブラウザや端末の違いで表示がどう変わるか、サクッとチェックするにはもってこいの機能拡張です。
初期のプリセットも十分ですが、ユーザーエージェントの追加もできるので入れておくと便利です。



Cookieの管理が簡単
EditThisCookie

とにかく「サクっ」とブラウザのクッキーアイコンを押せば現在のCookieの状態を確認する事ができます。
Cookieの値も簡単に変更できるし追加や検索などなど機能も豊富ですので、Cookieを使ったサイト制作には必需品になると思います。



今見ているページを上から下まで画像にしたい!!
Open Screenshot

長いランディングページや各Webページの全体を把握したい。修正指示のためにページ全体の画像が欲しいなど
ブラウザのカメラアイコンをクリックすれば「ページ全てをスクリーンショット」するのか「見たままをスクリーンショット」するのかなど選べてサクッと画像にしてくれます。
プリントアウトする時にレイアウトが変わってしまったりする時もサクッと画像にしてプリントすれば崩れる事なく出力できます。



アナリィクスのチェックも簡単。
Page Analytics (by Google)

自身でチェック可能なアナリティクスを埋め込んであるサイトにアクセスした時、解析表示がONになっているとページ上部にアナリティクスの数値とグラフをそれぞれに表示してくれます。もちろん項目は変更できるので気になる項目を簡単にチェックできます。
また「今見ているページからドコへのアクセスが多いのか?」色分けやパーセント表示でチェックする事も可能です。
アナリティクスのチェックが多い方には本当に便利な機能拡張です。




よく探してみると、困っている事を解決してくれる機能拡張があったりするので、イロイロと試してみて使いやすいツールに仕上げてみましょう。


オススメがある方は、ぜひコメント欄に!!


jQueryとCSSで遊ぼう【初級者向け】

blog160912

今回はデザイン→できる!、HTML→OK!、CSS→なんとかいけるよ。。、Javascript→なんか怖い。。。っていう人向けです。

まずはサンプルページはこちら

作っているうちに遊んでしまいました。

最初に今回のお題です。(コードだけだけど・・・)

ボタンを押すと、アニメーションします。Webサイト使っていると当たり前に見るエフェクトですね。

これをちょっと前まではどうやっていたかというと、jQueryを使ってやっていました。


いまでは、このような使い方をすることが多いです。


jQueryの仕事はクラスを付与するだけ、残りの設定はCSSでやろう、ということですね。

jQueryを使う


CSS3がガンガン使えるようになってこういうことは当たり前になっていますけど、ほんのちょっと前はこんなことしてました。

Flashが使われなくなり始め、さまざまなJavascriptのライブラリの中からjQueryが頭ひとつ抜け出し、ブラウザが新しくなってCSS3で表現できることがずっと広がった。そういう経緯です。

jQueryの場合はアニメーションに限りませんが初めにセレクタを選ぶ。「$(‘selector’)」の部分ですね。

それから、そのセレクターの動作、英語の動詞にあたるような部分を書きます。「.fadeIn()」などです。

終わりは「; (セミコロン)」です。

上記の例では初めに「.button」が「on」すると言っています。

on()は、clickやmouseenterなどの動作の時に命令を発動させます。

例では「click」イベントが起こったときに、


の2つの命令をしています。

①では500ms(ミリセカンド)、つまり0.5秒かけてフェイドインをさせています。’ease’はイージングの指定です。

②は0.5秒かけてpadding-topとpadding-leftがそれぞれ50px移動します。これによって、ターゲットは右下に広がるように見えるはずです。

CSSのアニメーションについて


CSSでアニメーションするには2通りの方法があります。

1.transitionを使う方法と2.animationを使う方法です。

transitionは自動ではスタートしません。またループもできません。

しかしサイト制作上、よく使うアニメーションはこちらを使うことが多いです。

transitionとは「遷移」のことですから、ある状態からある状態へ移行する、というイメージでしょうか。

animationはtransitionに比べ、より細かいアニメーションの設定ができます。

キーフレームごとにプロパティの設定ができるので、自分の想像に近い動きを細かくつけていくことができます。

CSSアニメーションでの注意点


CSSのアニメーションでは基本的に数値や計算式で操れるものしかアニメーションできません。
例えばtopの値が0から50pxにすることも50%にすることも5emにするのもOKです。

しかし、margin-leftの値を0からautoにする、これはアウトです。
transitionを使って、margin-rightとmargin-leftをautoにし、ボックスをアニメーションさせながら中央に寄せるということはできません。

もちろん、text-alignをleftからcenterにしてもアニメーションはしません。

数値を扱うものしか使えない、とおぼえておいてください。

先ほどのボックスをアニメーションさせながら中央に寄せる、なんていうのはJavascriptで計算しながらやってもいいです。

※marginをautoして中央寄せのアニメーションはできませんが、同じ動きならおそらく下のコードで行けると思います。


発火


これまではjQueryを使ってアニメーションしていた動きはCSSでも表現できることがわかりました。

CSSのアニメーションを使う場合は何らかの発火イベントを利用することが多くなります。

例えば上述のクリックのイベントもそうですし、当たり前によく使うのはボタンの上にカーソルがのった時、などですね。このカーソルがボタンにのる動きはCSSのセレクタ(:hover)で判定できますから、CSSだけでアニメーションを完結させることができます。

しかし、CSSのセレクタだけでは判定できないものも多くあります。
例えばお申込みフォームで、「利用条件に同意する」のチェックボックスにチェックが入っていないと、送信ボタンが押せない仕掛けはよく見るでしょう。(あれはCSSなしでjQeury(Javascript)だけで実装したりしますが)

もしくは、要素が画面の上部にスクロールしたらアニメーションが始まるという場合もありますね。

こういう時によく使う方法が、アニメーションの動き自体はCSSで設定しておく。→何らかの条件を満たした場合にjQueryを使ってその要素にクラスを付与する。→アニメーション!みたいな方法です。

上記の例でいえば、.targetにはアニメーションする前の状態とtransitionでアニメーションすることが書かれています。

そして.target.animeには、.targetに.animeというクラスが付与された場合に起こる結果が書いてあります。

例えばクリックされたときに、例えばスクロールしてきた時に、jQueryのaddClass()を使ってクラスを付与してあげれば、アニメーションがスタートするわけです。

下の例では.buttonがクリックされたときに.targetにクラスactiveが付与され、アニメーションが始まります。


また、jQueryを使うならば、toggleClass()もよく使うのでおぼえておくと便利です。
下の例では、.buttonがクリックされたときに.targetにクラスactiveがなければクラスactiveを付与、あった場合はクラスactiveを削除します。


さまざまなジェネレーターやライブラリ


自分で実装するとなると、こんがらがる部分も初めのうちは多いと思います。

そんな人でもカンタンにアニメーションができるように、ありがたいことにjQueryにせよCSSにせよいろいろなライブラリやジェネレータが出てきました。

作者さんたちに感謝しつつ、こういうのを使うのも制作スピードを上げる上では有用だと思います。

Javascriptは怖いと思ってるデザイナーさんに、今回やったのはjQueryを利用して、クラスを付けたり消したりしただけです。

たった5行。慣れると便利ですから、ちょっとずつ触っていってみてくださいね。


参考サイト



Wixの新機能を試してみました

Wix Editor
 

無料で使えるWebサイト作成ツール「Wix」。
自由度の高いレイアウトや、アニメーションなどの目を引くデザインが、コードをいっさい書かなくても簡単に実装できてしまいます。

logo
Wix.com
http://ja.wix.com/

数ヶ月前にWixでWebサイトを作ることがあった時にも、その簡単さに驚いたのですが、それからもどんどん新しい機能が追加され、より多岐にわたったデザインを作ることができるようになりました。

その新機能の中でも特に気になった2つ。8月に実装されたばかりの新しいスクロールエフェクトと、全画面に対応したカラムレイアウトについて、今回はご紹介します。

続きを読む Wixの新機能を試してみました