はてなブックマーク

neccoではウェブサイトを制作する際、Lottieアニメーションを取り入れる機会が多くあります。 アドベントカレンダー11日目はAfter Effectsで作成するnecco流のLottieアニメーションの基本から、つまずいたポイント、少し変わった使い方の応用編までご紹介します！ ウェブサイトとアプリでは対応しているアニメーションや表現が異なります。今回はウェブサイトで使えるLottieアニメーションについての内容です。 After Effectsの基本設定 Lottieアニメーションを作成する場合におすすめのAfter Effects基本設定です。 After Effectsの英語化 JSONに日本語が含まれているとグラデーションが白黒など設定とは異なる状態になってしまいます。 それを回避するため、Lottieアニメーション制作では基本的にAfter Effectsを英語版に変更してい

2023年、私はneccoでCTO兼フロントエンドエンジニアをしながら、専門学校の外部講師をつとめ、さらに本を一冊書き上げました。そのかたわら、STUDIOのユーザーフォーラムにTips記事を投稿したり、個人開発アプリをメンテナンスしたりもしていました。そして主婦として、毎日、自炊や洗濯などをこなし、老猫の介護も行っていました。私よりも忙しそうな人はたくさんいるものだとは思うものの、1日が24時間しかない中で、これらの膨大なタスクをこなすのは私にとって大変なことでした。 そんな私の支えになっていたのが「時間記録」でした。その内容はシンプルで、やるべきことをリストアップしたら、そのタスクごとにかかった時間を計測、記録していくというものです。 身体が「食べたもの」で作られるとしたら、人生は「やったこと」で作られると思っています。時間を記録していくことで、毎日の自分の行動を可視化できるようになり

こんにちは、デザイナー・モーションデザイナーの田口です（@fuyuna_design）。 「ウェブサイトで使うアイコン・イラストを動かしたい」 「Lottieを作ってみたいけど、After Effectsはむずかしそう」 そう思っている方は多いのではないでしょうか？ これまでLottieといえばAfter Effectsで作るのが主流でしたが、いまはFigmaのプロトタイプとプラグインを使って作成できます！ この記事では、Figmaを使ったLottieの作成方法を解説します。プロトタイプ機能を使ったことがない人でも簡単に作れるので、ぜひチャレンジしてみてください。 FigmaでLottieを作るメリット Lottieは軽量かつ美しいアニメーションを手軽に実装できるライブラリです。FigmaでLottieを作成することで、次のようなメリットがあります。 After Effectsを使えなくて

ウェブブラウザ「Arc」は、サイドバースタイルが特徴的な新しいブラウザです。ブックマークや複数アカウントを切り替えられるSpaceとProfile、ウェブサイトを自分好みにカスタマイズできるBoost、スクラップブックのように情報をまとめられるEaselなど、Arcを使っていて便利、快適だと感じる点をまとめました！それぞれ、具体的な使い方の例もご紹介しています。 Arc とは Arc は、the Browser Company が開発するウェブブラウザです。 Arc は、ブラウザエンジンに Chromium を採用しており、基本的には Chrome と同じように動作します。Chrome 用の拡張機能もそのまま使えます。 Chrome と異なるのは、サイドバースタイルの UI や、複数の Space やProfileを持てること、ウェブサイトの表示をカスタマイズできる Boost 機能がある

今回はFigmaとSVGatorを使ってアニメーションを作る方法をご紹介します。 手軽にアニメーションを作成してみたいと思った時に触れたSVGatorですが、アニメーションの知識があまりない、私でも簡単に作ることができました。 Lottieアニメーションをつくりたい！という方は、下記の記事もおすすめです。 After EffectsとLottieを使ったアニメーションについて、モーションデザイナーの田口さんが記事を書いています。ぜひ合わせてご覧ください。 ウェブサイトやアプリで使えるLottieアニメーションの基本。作成方法や注意点などを解説 Lottieアニメーションの作成に必要な「Bodymovin」のダウンロード・インストール方法 使ったきっかけ 私が入っているコミュニティで、「SVGatorの有料プラン1ヶ月使えるけど使ってみる？」と声をかけていただいたことがきっかけでした。 SV

ウェブサイトやUIデザインの際に便利なFigmaのコンポーネント、テキストやカラーのスタイル登録。 プロジェクトの途中でスタイルが変更になったり、コンポーネントがどんどん増えたり… デザイナーやエンジニアなど、チームの誰にとっても分かりやすく整理するのって意外に大変なんです！ そこで今回は、Figmaでのコンポーネント・スタイル整理が楽になる便利なブラグインを6つご紹介します。 UIデザインを行うデザイナーが、実際に業務に使って便利だったものばかりですので、ぜひ一度試してみてください！ 1.スタイル未登録のテキストやカラーをリスト化できる「Design Lint」 スタイルが適用されていないテキストやカラー要素をリスト化してくれるプラグイン。 その場で一括選択して、スタイルを充てることもできるので便利です！ テキストやカラーの他にも、角丸やドロップシャドウなどもリスト化可能です。 未登録の

ウェブサイト・アプリで使えるLottieアニメーションの基本。作成時のポイントから注意点、活用事例まで解説 こんにちは、デザイナー・モーションデザイナーの田口です（@fuyuna_design）。 After Effectsなどで作ったリッチなアニメーションを、ウェブサイトやアプリケーションに実装できる「Lottie（ロッティー）アニメーション」をご存知ですか？ Lottieはどれだけ拡大しても高画質で、実装も簡単なアニメーションライブラリです。ウェブ制作にLottieを取り入れるメリットは多く、GoogleやMicrosoftといった大手企業も活用しているほどです。 わたしたちneccoも2020年に導入し、これまでさまざまなプロジェクトでLottieを活用してきました。 この記事では、Lottieの基本から実際の活用事例、作成方法までご紹介します。作成時の注意点もまとめているので、Lo

Faust.js + Headless WordPress + Vercel での Jamstack アーキテクチャでプレビューを実現する手順(カスタムポスト作成あり) Faust.jsとは？ Faust.jsとはについては公式サイトのトップに書いてありましたので引用します。 Faust.js is the Headless WordPress Framework. Faust.js provides a set of tools to make building front-end applications with WordPress as the headless CMS a pleasant experience for both developers and publishers. This framework consists of a WordPress plugin, a

わたしがウェブサイト制作を学び始めた頃は、CMSが必要なウェブサイトの制作手段といえばWordPressが第一選択という印象でした。 しかし近頃はヘッドレスCMSの登場やJamstackの普及によって、CMSもウェブサイトを作るフレームワークも選択肢がより豊富になってきています。 neccoではモダンな実装方法を取り入れていく方針であり、最近はNext.jsなどを使って開発する機会が増えてきました。そこで今回「microCMS + Next.jsでJamstackブログを作ってみよう」に挑戦してみました。 この記事を読んでいる方も、一度はNext.jsやmicroCMSを利用して構築されたサイトを見かけたことがあるのではないでしょうか。 Next.jsはNode.jsなどの開発環境があれば簡単に始められるのでやってみましょう！ 今回作ったサイトの構成 チュートリアルのタイトルにもあるように

年明けに個人で使っているNotionを整理したら、頭がスッキリして仕事にも生活にもいい効果がたくさんありました。（詳細はnoteに書いてます） neccoでもNotionを使用していましたが、有効活用しきれていなかったことがわかったので、いっきに整理整頓をすることにしました。 この記事では、necco の Notion をどんなふうに整理したのか、その間に何を考えていたのか、簡単に紹介したいと思います。 Slackで提案してリモートで実施 会社のみんなで使っているNotionを整理するため、まずは代表の阿部さんに許可をとりました。年末年始のおやすみ中だったのでSlackでメッセージを送信。すると、OKどころか私より先に着手してもらってました。 メッセージは途中で非表示にしてますが、このほかにもやりたいこと、つくりたいページをたくさん書いてもらってました。 「とりあえずHome」の仕組みづく

「表題の構成で自社サイトをずっと公開する」と言って全く進まず、まさかの2020年を終えようとしています。 年末にじっくり進めるべくShifter Advent Calendar 17日目を担当し、気合いをいれたいと思います。 このブログの手順どおり進められれば、 WordPress を Headless CMSとして利用可能な「Shifter Headless」とeコマースサービスである「Shopify」を使ってヘッドレスメディアコマースサイトを公開まで持っていけるはずです！ ヘッドレスメディアコマースは勝手に造語してしまってるのですが、ECサイトとブログが合わさったサイトだと思ってもらえれば幸いです。 はじめに、今回完成したデモサイトはこちらです。 https://shifter-headless-gridsome-shopify.vercel.app/ システムアーキテクチャ図はこんな