Bruno Profile Work 制作の方針について Brunoが生み出すWebサイトは、文章や写真を活かすためのデザインをご提供します。訪問者へアピールするためのコンテンツがメイン。この意識のもと、適切な見せ方を追求しながら制作しております。 制作料金 基本WordPressサイトの制作となりますが、ご希望に合わせてHTMLの静的サイトの制作ももちろんお請けさせていただきます。また、デザインだけやコーディングだけといった制作工程単位でのご依頼も対応しております。 よくある質問 BrunoのWebサイト制作では、できるだけクライアント様にご不安を与えることなく、お問い合わせ時から制作完了時、その後の運用までサポートさせていただいておりますが、その際によく頂くご質問についてご紹介致します。

We are excited to present our latest update, featuring a comprehensive collection of free HTML and CSS arrow code examples. This compilation showcases a variety of arrow styles and animations that will instantly enhance your website's navigation and visual appeal. With our January 2023 update, we have scoured reputable sources like CodePen, GitHub, and other reliable platforms to bring you an arra

Result スクロールするとテキストにアニメーションしながらハイライトする、というもの。 通常のハイライトよりも目を惹く印象です。コードはVanillaとなっています。 JavaScript (function (document) { const markers = [...document.querySelectorAll('mark')]; const observer = new IntersectionObserver(entries => { entries.forEach((entry) => { if (entry.intersectionRatio > 0) { entry.target.style.animationPlayState = 'running'; observer.unobserve(entry.target); } }); }, { threshold

Animate.css Just-add-water CSS animations See animations Close list Attention seekers bounce Copy class name to clipboard flash Copy class name to clipboard pulse Copy class name to clipboard rubberBand Copy class name to clipboard shakeX Copy class name to clipboard shakeY Copy class name to clipboard headShake Copy class name to clipboard swing Copy class name to clipboard tada Copy class name t

※ CSS Animationに関してはWeb Animation APIを使うことでより簡単にJavaScriptからアニメーションを構築・制御できるようになります。2020年2月時点ではブラウザの実装が不十分でPolyfillを要するため、この記事では対象外としています。 専用ライブラリを使わずにアニメーションを作ろう 各ライブラリは特別な魔法を使っているわけではありません。 原理的にはCSS・SVG・WebGLといった各要素技術をしっかりと習得すれば、専用のライブラリと同等のことができるばかりか、より高い自由度を手に入れながら軽量化を実現できる可能性もあります。 また、専用のライブラリを利用する場合にも、基礎となる原理や各技術の得意不得意を知っていることは大きな武器となるでしょう。 Vue.jsを使ってCSSやSVGのアニメーションを書く とは言え、これらのアニメーションを土台の技術

SVGとは、XMLベースのベクターイメージ用の画像形式で、アニメーションなどをサポートしています。 Webで使われている一般的な画像（png、jpeg、gif）はビットマップ形式といって、拡大縮小すると劣化してしまうのですが、このベクター形式は画像が劣化しません。 昔からある技術ですが、スマホの普及などで高解像度のデバイスや、ディスプレイが出てきたことにより、少し前から注目され、Web上で使用されるようになってきました。 今回はこのSVGを使用して、今までgifで使用していたローディング画像を置き換えたいと思います！ 1. デモ Demo ベーシックな感じのローディング画像を用意しました。まずはデモをご覧ください。 IEでは動作しませんので、別のブラウザをお使いください。

読み込みに時間がかかってしまうページはローディングアニメーションを取り入れることによってユーザーの離脱率を抑えることができます。アニメーションとなると作るのに手間がかかってしまいそうなイメージがありますが、実はCSSだけで簡単に実装することが可能です。 今回は、ローディングアニメーションを紹介しているWebサイトをご紹介していきます！ ローディングアニメーションの基本 ローディングアニメーションを使用しているサイトと使用していないサイトがありますが、ローディングアニメーションを表示することによってどのような効果があるのか、またどういったWebサイトにローディングアニメーションが必要なのかをご紹介したいと思います。 ユーザビリティの向上 ページの読み込み時間は離脱率に最も大きく影響する要素の一つです。読み込みに時間がかかってしまうと、多くのユーザーが離脱してしまいますが、ローディングアニメー

こんにちは。sitoです。 みなさま連休の予定ばっちり決まっているのでしょうか。 sitoは連休に向けて、kourakuから教えてもらった『Beat Saber』を買うかどうかむちゃくちゃ悩んでいる今日このごろです。機材一式そろえることを考えると結構高い！ でも、たぶん、買うんだと思います。たぶん。 さて、今回は、ローディングやオープニングアニメーションがかっこいいサイトをピックアップしてみました。 LARGO Inc. https://largo.studio/ オープニングのロゴや、キャッチコピーのアニメーションがかっこいい。 ARCHI SITE MOBIUS https://asmobius.co.jp/ メインビジュアル表示のアニメーションから、その後のスライドショーまで一貫してかっこいいです。 UZU BY FLOWFUSHI https://www.uz.team/jp/ 下

The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。

SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「SVGで始めるマイクロインタラクション入門」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法（コーダー向け） コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、

CSS Filtersはトランジションで使うのがお勧め！手軽に実装するいい感じのマウスオーバー演出 CSS Filtersとはボカシや色調整などグラフィカルな効果が得られるCSSの機能です。この記事では「マウスオーバーなどの表現を作るのにCSS Filtersが便利」ということを紹介します。 CSS Filtersの使い方は簡単。CSSのfilterプロパティに適用したい種類の指定を行うだけです。たとえば、次のような指定をすると、HTML要素にエフェクトがかかった状態で表示されます。 CSS Filtersは実はアニメーションにも利用可能。多彩な表現が簡単に実現できます。今回紹介するサンプルは、マウスオーバーでエフェクトを適用するシンプルなもの。まずは次のビデオをご覧ください。 明るさを使った表現 明るさ調整のbrightness()メソッドを利用してみましょう。マウスオーバー時に写真を明

マイクロインタラクションは、ボタンのタップやポップアップの表示、フォーム入力時のアテンションなど、ユーザーの行動やトリガーによって起こるアクションです。単なるアニメーションではなく、ユーザビリティを向上させ、またユーザーに楽しい体験を与えることでWebサイトやサービスの利用を手助けします。 たとえば、FacebookやTwitterの「いいね」ボタンや、タイムラインの更新、新しい通知がある場合のアラートの表示など、さまざまなケースで使用されています。しかし、多様なマイクロインタラクションを一から自作するのは大変手間がかかるものです。 本記事ではコピー&ペーストで導入でき、改変もしやすいCSSで表現したマイクロインタラクションを紹介します。こちらは筆者が制作したもので、商用・個人問わず無償利用できるMITライセンスで公開していますので、Webサイトやコンテンツ制作にご活用ください。 「メニュ

Discover and get inspired by real app examples of UI design patterns and UX flows. Enhance your user interface with these design flow examples

ウェブサイトの制作でアイデアが欲しいとき、他のデザイナーやプログラマーが作成した作品からインスピレーションが湧いてくることがあります。 ウェブデザインに必要なパーツをカテゴリー分けし、1100種類を超えるHTML/CSS/JSスニペットをコレクションしている Free Frontend を、今回はご紹介します。 ますます重要になっているページ遷移やホバーなどのアニメーションエフェクトを筆頭に、ボタンやカード型レイアウトなどウェブサイトに必要な部品ごとに、コピー&ペーストできるHTMLスニペットをまとめられているので、制作で困ったときのアイデア出しにどうぞ。 HTMLスニペット数1100以上！ウェブ制作に必要なパーツをカテゴリごとにまとめた Free Frontend Free Frontend では、ウェブサイト制作に必要なパーツを、細かくカテゴリ分けし、コピペできるHTML/CSSスニペ

CSSアニメーションとJavaScriptアニメーションの比較 JavaScriptで作成されたアニメーションは、命令型アニメーションとも呼ばれ、CSSで作成されたアニメーションは宣言型アニメーションと呼ばれます。 CSSアニメーションは、ペイントやスタイリングを担当するメインスレッドではなく、ブラウザのコンポジットスレッドによって処理されます。したがって、そのようなアニメーションは、メインスレッドの、もっと処理に時間がかかるタスクの影響は受けません。もちろん、ペイントやレイアウトイベントをトリガーするアニメーションは、メインスレッによる処理を必要とするため、CSSアニメーションを使用する利点を打ち消してしまいます。 一方、JavaScriptは常にメインスレッドによって実行されます。しかし、JavaScriptを使用すると、アニメーションをより細かく制御できるため、状況によってはJava

普段何気なく使用しているUIのアニメーションもその仕組みや効果を理解すると、なるほどと考えされられます。 スマホアプリのUIに使用するアニメーションをGoodな良いものから、Greatな素晴らしいものに変えるUIアニメーションのさまざまなアイデアを紹介します。 Material Motion, IBM Animation Principles, The UX in Motion Manifestoのガイドラインに基づいた、気持ちのいい操作性に優れたアニメーションを楽しむことができます。 Good to great UI animation tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 タブのコンテンツをスライドさせるアニメーション カードをタップして詳細を表示するアニメーション コンテンツを表示するアニメーション コ

海外サイト Medium で公開された The ultimate guide to proper use of animation in UX by Taras Skytskyi より許可をもらい、翻訳転載しています。 最近では、UIデザインのアニメーションで感動させたり、驚くせることは難しくなってきています。画面上でのやり取りを示したり、アプリケーションの使い方を説明したり、ユーザーの注意を向けるなど、実装テクニックはさまざまです。 この記事では、UXデザインにおけるアニメーションの基本原則とルールをまとめてご紹介します。これからインターフェースデザインのアニメーションを作成したいというひとが、追加情報を探す必要がないよう、アニメーションのすべてをまとめた完全ガイドです。 アニメーションの持続時間とスピード 要素の状態や位置が変更されると、アニメーションの長さは、ユーザーに変更を通知し、