Figmaの基本機能で簡単につくる、テキスト&あしらい表現TIPS - ICS MEDIA
リリース以来数多くのアップデートが行われ、多機能になっていくFigma。今回はそんなFigmaの基本機能を使用した、簡単なデザイン作成やあしらいづくりに活かせる表現TIPSを紹介します。 テキストの表現 マスク機能やエフェクト、そしてレイヤーのブレンドモードを使用したテキストの表現をいくつか紹介します。 TIPS：画像をテキストでマスクする マスク機能を使用して、画像をテキストの形に切り抜きます。 以下の手順で切り抜きます。 画像とテキストレイヤーを用意 画像が前面になるようにして、画像とテキストレイヤーを重ねる 両方のレイヤーを選択状態にして、右クリックメニューから［マスクとして使用］を選択（ショートカットキーは、Mac：control + command + M、Windows：Ctrl + Alt + M） マスクした後も、テキストレイヤーは編集可能です。 さらに画像をレイヤーブラー
自分だけの ESLint Config を作る
これはなに 自身のプロジェクトに適合した ESLint Config の設計および実装方法についてまとめたものです。 業務や趣味プロに関わらず、 JavaScript / TypeScript でコーディングする際に ESLint は非常に有用なツールであり、広く使われています。ほとんどの場合において ESLint 基盤はプロジェクトごとに必要なパッケージをインストールして設定ファイルを作成し、構築されます。しかしその設定内容がプロジェクト間で重複することは珍しくなく、プロジェクトの数が増えるにつれ冗長となりがちです。そこで、複数プロジェクト間で共通のルールセットを定義して単一の ESLint Config として再利用することで、メンテナンス性や再利用性の向上が期待できます。本稿では、そのような用途で使える自分だけの ESLint Config を設計・実装する方法を紹介します。 前提
Web制作の面倒におさらば、便利すぎるCSS時短ツールまとめ【2024年版】
Webサイト制作において面倒で時間のかかる作業を効率化したい方へ。 この記事は、CSSコードを手軽に生成できる便利ツールをまとめた最新版リストで、Web制作を快適、楽にしてくれるツール68個が揃っています。 以前CSS便利ツールを集めた厳選リストの公開が2021年。あれからおよそ3年のあいだに話題となったツールを中心に紹介しています。 日頃のワークフローに活用して、ストレスのないクリエイティブな制作ライフを実現しましょう。 Web制作の面倒におさらば、CSS時短ツール厳選リスト CSS pattern backgrounds ジグザグやサークル円などシンプルな幾何学模様をつかったCSSパターンをコピペで利用できるオンラインツール。 CSS Polka Dot Generator ポルカドット柄を作成、カスタマイズできるCSSツールで、影を設定するとよりレトロな印象に仕上がります。 CSS
既存プロジェクトを Tailwind CSS に段階的にマイグレーションする方法
not Tailwind CSS プロジェクトを Tailwind CSS に移行する機会があったのでアプローチを紹介します。 ポイント ベースが16px ではない場合、tailwind-pixel-perfect-preset で rem to px を行い、 Taiwlind CSS のサイズ指定(h-4など）を踏襲する tw- prefix をつけて既存スタイルの競合を回避する Tailwind CSS のノーマライズスタイルを無効にして既存スタイルへの影響を回避する ノーマライズスタイルをスコープ化して既存スタイルへの影響を防ぎつつ Tailwind CSS 正確なスタイルを実現する import { isolateForComponents, scopedPreflightStyles, } from "tailwindcss-scoped-preflight"; /** @ty
CSS のカスケードレイヤー `@layer` を使ってスタイルを階層化して管理する
CSS のカスケードレイヤー `@layer` を使ってスタイルを階層化して管理する 2024.06.30 CSS の `@layer` ルールは、カスケードレイヤーを宣言するために使用されます。カスケードレイヤーとは、スタイルの優先度をレイヤー（階層）に分けて管理する仕組みです。`@layer` ルールを使用することでスタイルの記述順や詳細度に関係なくスタイルを宣言できるため、新しい形式の CSS 設計を実現することができます。 CSS の @layer ルールは、カスケードレイヤーを宣言するために使用されます。カスケードレイヤーとは、スタイルの優先度をレイヤー（階層）に分けて管理する仕組みです。@layer ルールを使用することでスタイルの記述順や詳細度に関係なくスタイルを宣言できるため、新しい形式の CSS 設計を実現できます。 @layer ルールは CSS カスケーディングレベル
Union typesに対してPickやOmitをしたい時
タイトルの通りです。 普通（？）のオブジェクト型に対して一部のプロパティを取り出したり削除したりしたい時にはPickやOmitを使いますね。 ただPickとOmitはUnion typesに対して分配的には効きません（後述）。 そこでUnion typesに対して分配的にPickやOmitをする方法を考えていきます。 実際に作ろうと思ったときと同じ手順で説明していくので、これからGeneric typesを書いていきたい方の参考にもなればと思います。 結論 // 補助的な型 type KeyOfUnion<T> = T extends T ? keyof T : never; // 分配的なPick type DistributivePick<T, K extends KeyOfUnion<T>> = T extends T ? Pick<T, Extract<K, keyof T>> :
GCPの各種DBサービスについて理解を深めよう - Qiita
1.GCPのDBサービスの住み分け DBサービスは簡単にいうとデータを保管する場所になります。 ここでは、各種サービスについての住み分けをお伝えできればと思います。 参考：https://www.youtube.com/watch?v=FCHMVzkVPos&t=1305s 構造化データかそうでないかで分ける Cloud Strage以外のデータは基本的に構造化されたデータを格納する場所になっております。 音声データや、画像データなど、構造化されていないデータは非構造化データと言われております。 また、データ解析で用いるのか否かについて分けます。 データ解析で用いられているとされているのが、 Bigquery Big queryの利点として、複雑なクエリに対処できるという点が一番大きいです。 他の利点等は後に説明します。 2.Cloud Strage Cloud Strageを使う利点とし
React Server Componentsを理解したい
はじめに App Router はこれまでの React や Pages Router による書き方と大きく異なります。これは、React Server Components（RSC） というアーキテクチャが導入され、開発の考え方が大きく変化したからです。そのため、App Router を理解するためには RSC の理解が必要になります。 しかし、私は RSC の理解に苦戦しました。 この記事は、そんな私が RSC の理解を深めるために様々な記事から学んだ内容を言語化したものです。 まず初めに、CSR や SSR といったこれまでのレンダリング手法について復習し、これらが抱える問題を確認します。その後、その問題を解決する RSC が何者なのか？を理解します。 CSR の復習 React では CSR 戦略が用いられてきました。 CSR では、クライアントが受け取るのは次のような中身のない空
【フリーフォント】クラフト明朝 - アトリエこたつ - BOOTH
個人・商用問わず無料でご使用いただけます。 使用の際は利用規約をお読みください。 クラフト明朝は程良いかすれが特徴的な手描きの明朝体です。 投げ銭版は、ひらがな・カタカナのみの収録です。漢字は入っておりません。 収録文字 第一水準漢字（2965字）、ひらがな、カタカナ、数字、アルファベット、約物 フォントデータ形式：OpenType 印刷物・立体制作物・web・ゲーム（埋め込み可）・映像・LINEスタンプ・電子書籍などにお使いいただけます。 禁止事項 ・公序良俗に反する目的、誹謗・中傷目的での利用。 ・フォントファイルのみの再配布・販売。 フリーフォントですが、著作権は放棄しておりません。 フォントの使用により発生したと思われるいかなる損害についても責任を負いません。 本ファイルは武蔵システム（http://opentype.jp/）の（OTEdit for Mac）を使い作成しました。
Reactテスト駆動開発に一度挫折した人が、生成AIの力を借りて再挑戦する話 - Insight Edge Tech Blog
はじめに Insight EdgeのLead Engineerの日下です。 弊社ではフロントエンドのスクラッチ開発にReactを採用することが多いのですが、フロントエンドの保守性はしばしば課題となっています。 というのも、要求仕様が曖昧なPoC（Proof of Concept）の段階からMVP（Minimum Viable Product）として開発を進めることも多く、 ビジネス側ユーザの意見にも左右されながらアプリを改善していくため、画面のレイアウトやデザイン、画面遷移の変更が多発するためです。 こうした状況の中でスピードと品質を両立するためには良質なテストコードが不可欠なのはもちろん、 プロダクトコードとテストコードの双方とも、変化に対応しやすく作る必要があります。 過去にテスト駆動開発を挫折した要因 実は、筆者は過去にReactのテスト駆動開発の実践、および社内普及活動に挑戦したこ
デジタル庁が発表した「デジタル認証アプリ」でできること ざっくり整理 - Qiita
2024年6月21日にデジタル庁からデジタル認証アプリの発表がありました。 このデジタル認証アプリで何ができるのか、ざっくり整理してみました。 この記事で対象としている方 デジタル認証アプリの概要についてざっくり理解したい方 デジタル認証アプリについて今北産業してほしい方 この記事では技術的な話はなるべく避け、全体像を整理していきます。 技術的な話を理解したい方は、参考リンクより他の方が書かれた記事を参照してみてください。 「デジタル認証アプリ」はどんなものか？ 「デジタル認証アプリ」は、マイナンバーカードを使った認証や署名を、安全に・簡単にするための、デジタル庁が提供するアプリです。 （デジタル認証アプリサービスサイトより引用） デジタル認証アプリは、デジタル庁が提供するデジタル認証アプリサービスAPIと組み合わせて1つのサービス（デジタル認証アプリサービス）を構成しています。デジタル認
最新版！ Lottieアニメーションの作り方 - After Effects編 - ICS MEDIA
「Lottieロッティー」はAirbnb社が開発した、ベクター画像をアニメーションさせることができる技術・ファイルフォーマットです。 前回の記事では、Lottieの概要から、Figmaを使った作り方、LottieFilesを用いた書き出し方法を紹介しました。 本記事ではAdobe After Effectsを使ったLottieの作成方法から書き出し方、表示確認までを紹介します。 ▼Lottieの作例 サンプルを別ウインドウで開く ソースコードを確認する 作り方 - Bodymovinで書き出し After Effectsでアニメーションを作成し、After Effectsの拡張機能「Bodymovin」を使って書き出す方法と、「LottieFiles」で書き出す2種類の方法を紹介します。 ▼Lottieの作成・書き出し・実装までの一連の流れ 完成品のサンプルを別ウインドウで開く アニメーシ
JSでLottieを配置する方法 - パフォーマンスの最適化方法も紹介！ - ICS MEDIA
「Lottieロッティー」はベクター画像のアニメーションを実現できる技術・ファイルフォーマットです。 Lottieアニメーションの作り方編の記事（Figma編、After Effects編）では、Lottieの概要から作り方、ファイルの書き出し方を紹介しました。そして、実装編の前編となる記事では、HTMLメインで実装できるお手軽な実装方法を紹介しました。 実装編の後編となる本記事では、JavaScriptメインに実装する方法の基本事項、およびパフォーマンス考慮についてのポイントを紹介します。 「Lottie=軽い」と思っていませんか？ 一般的にウェブサイトの「軽い」「重い」には、読み込みデータ量の大小を指す場合と、動作負荷でのもたつきを指す場合の2つの意味があります。確かにデータ量的にはLottieは軽いといえますが、実はLottieのアニメーションは表示や動作の負荷的に重くなりがちです。
鹿野さんに聞く！ 2024年最新CSSトレンドと実践テクニック
2024/06/19 Findy主催イベント「鹿野さんに聞く！ 2024年最新CSSトレンドと実践テクニック 」で公開した資料です。 https://findy.connpass.com/event/318569/ デモのURLなどはこちらのURLからアクセスできます。 https://ton…
そのuseRef+useEffect、refコールバックのほうが良いかも？ - Qiita
Reactにおいて、useEffectのユースケースとして知られているのが、DOMノードに直接アクセスしなければいけない場合です。useRefでDOMノードをrefオブジェクトに取得し、エフェクト内からDOMノードにアクセスするというのがその場合の基本的なやり方です。 このようなuseRef + useEffect の使い方は、問題ない場合もありますが、実は別の手段を使った方がいい場合もあります。その場合に別の手段として適しているのがrefコールバックという機能です。 そこで、この記事ではどのような場合にuseRef + useEffectよりもrefコールバックが適しているのか、そしてrefコールバックを使う場合の注意点について解説します。 復習: refコールバックとは React DOMでは、組み込み要素（divなどHTMLの要素）に対してrefという特殊なpropを与えることができ
ガーリーデザインのための3つの要素とは？作例つきで深掘り解説！ | AndHA Blog
ガーリーデザインのための3つの要素とは？作例つきで深掘り解説！ 公開日 : 2024.05.27 デザイン こんにちは！アンドエイチエーのデザインチームです。 現在、アンドエイチエーのデザインチームではX（旧Twitter）アカウントを運用しており、昨年7月頃から現在までに「世界観別バナーデザインを作るための3つの要素」というテーマで30以上の投稿をしてきました。※多くの方にご覧いただいております。誠にありがとうございます！ そこで今回の記事では、特に好評だった『ガーリーなデザインを作る3つの要素』について、より詳しく深堀り解説していきます。 ガーリーなデザインを作る要素【配色編】まずは色についてのポイントを解説します。 ネットで「ガーリー」の意味を調べてみると、「女の子らしい」「少女のような」などがヒットします。よって「ガーリー」なデザインとは、女性らしさの中でも上品な印象のある「フェミ
BCSのデザイナーが学んだロゴ制作で見落としてはいけない6のこと｜saku
こんにちは、SEVEN DEXのデザイナーのさくです。 SEVENDEXではビジネス・クリエイティブ・スタジオ（通称BCS）に所属しており、最近ではロゴ制作の支援をさせていただく機会が増えました。 “戦略・設計から制作まで総合的に能力を持ち合わせるチーム”として、ロゴの制作フェーズというのはプロジェクトの終盤になってきます。 「戦略からどうロゴに繋げているの？」「意味や価値ってどうビジュアライズしているの？」と思っている方もいるのではないでしょうか。 この記事では、そういった疑問を元に巷の書籍や記事であまり見ないけどBCSに限らず全てのロゴ制作において結構大事なことなんじゃないか…？と思うことをピックアップしてまとめてみましたので、ロゴ制作のヒントにしてみてください。 会社・サービスのフェーズを理解することロゴを依頼される際、 「今のロゴがダサいからかっこよくしたい」 「まだロゴがないから
メール送信サービスのResendが日本でもまともに使えるようになったので紹介したい
API経由でメール送信をするためのサービスといえば、SendGrid, Amazon SES, Postmarkのような名前が出てくるかと思います。 そんな中、弊社(トラストハブ)でも利用しているResendというサービスがとても使いやすいので紹介します。また、記事後半でResendを日本で使うにあたり重要なアップデートがあったので、どんな点が変わったかを紹介します。 そもそもResendとはどんなサービスか Resendは後発サービスなだけあり、開発体験の良さに主眼が置かれて開発されています。テストでメールが送信できていることを確認する機能や、ログを確認する機能など、細かいところが使い勝手が良いなと感じています。 SDK・設定がシンプル 公式でたくさんの言語のSDKが用意されています。また、フレームワークごとに組み込むためのドキュメントも充実しています。 Knowledge Baseを見
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ChatGPTなどのプロンプト文例：250選
svgl
