BLOG

【最新v8】Swiperの使い方・実用的なデモ15個の解説 ー基礎から応用までー
投稿日:2022年4月27日

Webサイトのコーディングをするなら必修とも言えるスライダー。 スライダー実装用のJSプラグインはいろいろありますが、本記事ではその中でもSwiperを使用した実用的なカスタマイズ例をご紹介します。 デモページを見る まずはこちらのデモページをご覧ください。 片方だけはみ出しているスライ ...

手軽にリッチなサイトに変わる!3Dグラフィックを描画できるthree.js(WebGL)でサイトをアレンジしてみよう
投稿日:2021年12月16日

ブラウザ上で3次元・2次元のオブジェクトやグラフィックをレンダリングできるWebGL(Webグラフィックライブラリ)。そのWebGLを簡単に扱えるライブラリ「three.js」というものを用い、ウェブサイトに3Dオブジェクトやインタラクティブなアニメーションを取り入れ、表現を少し工夫してみようと ...

JavaScript経験者におすすめ!ウェブサイトに3Dグラフィックを描画できるthree.js(WebGL)を使ってみよう
投稿日:2021年12月7日

3Dグラフィックでの表現を用いたウェブサイトが増えてきたなあ、と思う方も多いのではないでしょうか。このグラフィックの表現は、もちろんHTMLとCSSだけでは不可能です。WebGL(Webグラフィックライブラリ)という、ブラウザ上で3次元・2次元のオブジェクトやグラフィックをレンダリングするた ...

【作業を時短!】一目でわかるPremiere Proのエフェクト集
投稿日:2021年12月3日

Premiere Proで動画を作成していく中で 「こういう動きでシーンチェンジをしたい...」 「テキストも動かしたい...」 と色々動きをつけたくなることは多いですよね。 ですが、そういった動きを付けるのに方法を探すも中々思ったような動きを見つけられず、検索ばかりに時間がかかって ...

【コピペでOK】サイトを印象的に!ホバーアニメーションまとめ【デモ・サンプルコード付き】
投稿日:2021年11月26日

ナビゲーションやボタンは、サイトを閲覧するときに必ず操作する要素ですよね。 ちょっとした要素に素敵なホバーアニメーションがついていると、細部へのこだわりが見えて、サイトの印象もよくなります。 また、ナビやボタンのホバー時のデザインはなく、コーダーにおまかせということもあります。 コ ...

【jQuery】動きのあるアコーディオンメニューまとめ(コピペ用サンプル付き)
投稿日:2021年11月12日

アコーディオンメニューとは、最初はメニューの一部だけが表示されていて、 クリックすると隠れていた部分が開閉するタイプのメニューです。 小さいスペースにコンパクトにメニューを設置できるため、スマートフォンでは特に頻繁に使われています。 コーディングをしていると、Webサイトのどこかに ...

【コピペでOK】イメージ別!サイトをリッチに見せるためのCSSアニメーションまとめ【デモ・サンプルコード付き】
投稿日:2021年1月7日

最近ではアニメーションが実装されたWebサイトも多くなり、趣向を凝らしたリッチな演出を取り入れているサイトもそう珍しくなくなってきました。 特に重要な要素を動かすことで興味を引かせたり、飽きずに読み進めてもらうためのきっかけになったり、といったメリットがありますよね。 ただ、アニメーショ ...

【デザイン段階でも動く?!】Adobe XDのプロトタイプで、デザインに動きをつけてみよう!
投稿日:2020年5月15日

ウェブデザインを製作する際、「ページを更新した時、順番に下から出てくるアニメーションを付けて欲しい…。」など、言葉で挙動の説明は難しく、伝えるためにアニメーションをデザイナー側で用意するのも大変…。 デザイン・コーディングどちらも自分が担当できる場合であれば融通が利きますが、チームでの作業 ...

【Bodymovin】コーディング苦手なデザイナーさんも、リッチなアニメーションをWebサイトで動かしてみよう!【After Effects】
投稿日:2020年5月8日

コーディングの動きの指示をする際、「このサイトのこの部分に似せて欲しい」などの具体的な指示があれば分かりやすいですが、動きを伝えるというのは難しいと思います。 また、デザイナー自身で動きが付けられるとやりとりの手間が少なくなるかと思います。 しかしJavaScriptなど、コーディングで ...

静止画は動かせるのか!?動く写真シネマグラフ
投稿日:2020年3月4日

静止画の素材を動かしたい…動かしてほしい…そんな話を受けた人がいるのではないでしょうか?  今回は静止画を動かしたいというテーマで、静止画の一部だけ動かしたシネマグラフの紹介や 静止画を動かすため、Photoshopのタイムラインを駆使し、チャレンジしてみる内容など (比較的?)簡単に動か ...

APNGでイラストやアイコンを動かそう!~AdobeAnimateの使い方~
投稿日:2020年2月6日

イラストや写真を動かして、Webサイトで見られるアニメーションといえばGIFアニメーションですよね。 ですが、近頃GIFアニメーションに代わる新しいAPNGという形式が現れました! 今回はこのAPNGについてと簡単にアニメーションを作成の過程をご紹介したいと思います。 【目次】 ...

【css】テキストにマスクをかけて途中から色を変える + 1文字ずつ動かすアニメーション [clip-path][mix-blend-mode]
投稿日:2019年10月4日

タイトルが上手くまとめられなかったのですが…そのままの内容です! 写真の上に被っているテキストだけ色が変わっているデザインのコーディングを依頼されたことがあって(最終的には別のデザインになりましたが)、もしアニメーション付けるならどうコーディングするかな?と考えた結果のサンプルです。 mix ...

GIFアニメをつくってみよう~その2~作り方編[PhotoshopCC]
投稿日:2017年12月27日

ご無沙汰しています。作り方編まで大分間が空いてしまいました! その1ではGIFの作り方についての概要を説明させてもらいましたが、今回はそれを踏まえたうえで実際の手順を詳しく説明していこうと思います。 Contents フレームアニメーションでのGIF作成 ビデオタイムラインでのG ...

GIFアニメーションをつくってみよう(サンプルPSDダウンロード)~その1~フレームアニメーションとビデオタイムライン[PhotoshopCC]
投稿日:2017年6月14日

動きのついた広告やWebサイトは目を引きますよね。 GIFアニメはHTMLをサポートしている媒体なら再生ができる手軽なデータなのでWEB広告やサイトの要素でも使われているのを見かけます。言葉や静止画では伝わりづらいことも動画ならすぐに伝わるので説明にも便利なので、選択肢として作成スキルがあ ...

SVGを動かす [cssアニメーション/クリッピングマスク/波/線を描く]
投稿日:2017年6月12日

最近SVGを使用してコーディングすることが多くなりました。 SVGとはScalable Vector Graphics(スケーラブル・ベクター・グラフィックス)、つまり伸縮自在のベクター情報で作られた画像のことです。 一つのSVGファイルで、どのサイズでも綺麗に表示させることができます。 ...

webページ作成で CSSアニメーションを具体的に使えないか試す
投稿日:2014年4月18日

CSS の animation や transition を使えるようになって久しいですが、実際の使いどころはいまいちな印象です。原因の大部分は IE にあるとおもいますけど。 そこで animation に対応しているまともなブラウザさんにはおもてなしを、 そして対応していない ...

[jQueryプラグイン]いろいろなアニメーションが用意されたコンテンツスライダー | Adaptor, a jQuery 3D content slider
投稿日:2013年1月7日

jQuery を利用したコンテンツスライダーはいろいろな方法やいろいろなプラグインがありますが、CSSの 3Dプロパティを使ったエフェクトを選べるプラグインを紹介します。 Adaptor, a jQuery 3D content slider デモページ GitHub ...