不完全な僕を一人前にしてくれる業務効率化アプリ・拡張機能【エンジニア向け】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
画面の操作をドラッグせずにキーボード上のみでできるのがすごく便利です。 複数のモニター間の移動やウィンドウの全画面表示、オンライン会議の際に画面共有をしているモニターに見せたいウィンドウを移動するときなどに、動作がとてもスムーズにできるので重宝しています。 画面の移動の時間が格段に早くなるので、要領がとても悪い私でもなんか効率よく作業ができた気になれるのでおすすめです。 ダウンロードこちらから コピー履歴を残してくれる「Clipy」（Macのみ） コピーした履歴を30件まで記憶してくれます。 なにかとコピペが多い業務の中で、何回も同じ言葉をコピーする必要がなくなります。 キーボード操作がまだおぼつかない私はcmd+vを押そうとしてcmd+cを押してしまい、再度コピーをしにいかないといけないみたいなことが頻繁に起きるのでとても重宝しています。 また、スニペット機能があり頻繁に使うもの（メルア
コラム33：Webディレクターがよく使う便利ツール5選 | オンラインコミュニティ「集まれ！Webディレクターの森」
【つちだのプロフィール】 業界未経験で去年の5月にWebディレクターへ転職。 アニメ・ゲーム系のWebサイト制作会社に勤めています。 XやYoutubeで、新しいツールやガジェットのレビューを見るのが地味に好き。 Alt & Meta viewer https://chromewebstore.google.com/detail/jjcjblcbnjhgjlnclhficglfjedhpjhl 『Alt & Meta viewer』では、Webサイトのメタ情報とAlt表記をワンクリックで見ることができます。 サイトのタイトル・ディスクリプションを考えたり、コーダーが組み込んだ後のOGP画像の確認・Alt表示の確認をすることはないでしょうか？ そんな時に『Alt & Meta viewer』を使うと、現在のページのメタ情報を一発で取得して表示してくれるのでとても便利です。 ブラウザの検証ツー
スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張 -Scroll-Driven Animations Debugger
スクロールをトリガーにしたCSSアニメーションは、どのようにデバッグしていますか？ ブラウザの枠内で完結するアニメーションであれば、ブラウザ上ですべての挙動を確認できますが、枠外で開始や終了するアニメーションだと確認できません。 スクロールをトリガーにしたCSSアニメーションを視覚化し、デバッグが簡単にできるデベロッパーツールの機能拡張がリリースされたので、紹介します。 参考: Scroll-Driven Animations Debugger by Bramus! 記事の掲載にあたり、元サイト様にライセンスを得ています。 まずは、さっそく機能拡張のインストールから。 下記のページにChromeでアクセスし、「Chromeに追加」をクリックするだけです。起動方法や使い方は後述します。 Scroll-Driven Animations Debugger -Chrome ウェブストア この機能
無料でプロ級品質のフィルム風ムービーを作成できる「Filmbox Lite」レビュー
カメラで撮影したムービーにフィルム風の加工を施すと、いつもと雰囲気の異なるムービーやレトロ感を重視したムービーを作成できます。10万円以上するプロ向けのフィルム風加工プラグイン「Filmbox」の簡易版である「Filmbox Lite」は、無料ながら有料版と同等の品質でフィルム風ムービーを作成できるとのこと。どんなムービーに仕上げられるのか気になったので、実際にインストールして使ってみました。 Filmbox – Motion picture film emulation. For DaVinci Resolve. https://videovillage.co/filmbox/ ・目次 ◆1：DaVinci Resolveのインストール ◆2：DaVinci Resolveの日本語化 ◆3：Filmbox Liteのインストール ◆4：Filmbox Liteでフィルム風ムービーを作成す
DeepL翻訳で海外のWebサイト制作情報を読みあさろう！
2023年2月7日 便利ツール, 海外情報, 英語 DeepL（ディープエル）翻訳は、ドイツの企業が開発している機械翻訳エンジン。自然で高い品質の翻訳文が話題となっています。今回はそのDeepL翻訳を、Webデザインや制作、技術系の分野で活用していく方法を紹介します！ ↑私が10年以上利用している会計ソフト！ DeepL翻訳の使い方 DeepL翻訳の翻訳精度の高さは一度使ってみると実感できるかと思います。基本的にはDeepLのWebサイトにアクセスして、翻訳したい文章をコピペするだけ。ただ、毎回DeepL翻訳のWebサイトに文章をコピペするのって地味に面倒ですよね…。 そこでおすすめなのがDeepL翻訳のChrome拡張です。インストールしてWebサイト内の文章を選択すると、カーソル付近にDeepLマークが表示され、クリックすれば翻訳されます。 技術系ドキュメント特有の用語やコードを含んで
Figmaの制作フロー劇的改善！超簡単な11の小技とヒントまとめ
この記事では、Figmaでのデザイン制作フローを劇的にスピードアップさせる、お手軽で簡単な小技とヒントをまとめてご紹介します。 よく利用するFigmaのショートカットや、お好みに応じて機能を追加できるプラグインやツールと一緒に活用し、より快適なFimgaライフを送りましょう。 インスペクターでは、シンプルな数式を利用しよう ピクセル単位で正しい値を見つけるために、要素のサイズを手動で変更するのは避けましょう。 数値を入力するインスペクターでは、足し算や掛け算などの数式を利用することで、数秒の貴重な時間を節約できます。 まとめて色を変更したいときは、Selection Colorを利用しよう Figmaでたくさんのコンポーネントを扱っていて、複数の要素の配色を素早く変更したいとき、それぞれの要素を一つずつクリックして、色を変更していませんか。 Selection Colorにあらかじめ配色を
そろそろWebPに切り替えよう。変換方法や対応ブラウザ、使い方を解説！ | Web Design Trends
WebP（ウェッピー）は、Googleが開発している次世代画像フォーマットです。PNGやJPEGと比べてファイルサイズを抑えることができ、トラフィックの削減やページ表示速度の向上を実現することができます。 今回は、WebP（ウェッピー）の基本と、メリットやデメリット、変換方法、対応ブラウザなどをご紹介したいと思います。 WebP（ウェッピー）とは？ WebP（ウェッピー）は、Googleが開発している次世代画像フォーマットで、拡張子は「.webp」です。 WebPは、JPEGやPNGと比べ、同程度の画質の画像をより小さなファイルサイズで保存することができます。Googleの発表では、PNGよりも26%、JPEGよりも25%〜34％程度ファイルサイズを抑えることができると言われています。 また、WebPは背景透過（アルファチャンネル）や、アニメーションにも対応しています。つまり、JPEGのよ
コアウェブバイタルとは？SEO対策の方法も紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさん、Googleのコアウェブバイタル対策進めていますか？ この記事を執筆している現在（2021年7月）、Googleはページエクスペリエンスアップデートの真っ最中です。Web制作者、マーケ、Web担のみなさんは焦って対応をしたり、ドキドキしながら順位変動をウォッチしていますでしょうか。 「なんとなく知ってるけど正直よくわかっていない」や「今知ったけどなにそれ？」という人向けに、何が起きてるのか、どうすればよいのかを簡単にまとめました。 コアウェブバイタルとは？ Webサイトの計測・評価に関して、数年前からUX（ユーザーが良質な体験ができたかどうか）をスコアリングするための指標がたくさん出てきました（顧客満足度とかそっち系ではなくサイトのパフォーマンスの方です）。 正直多すぎてどれが重要なのかよくわからない状況だったのですが、去年（2020年）にGoogleが、「重要なのはこの三つ！
無料でKeePass上のアカウントから直接リモートデスクトップ接続を行える「KeePassRDP」レビュー
無料のパスワード管理ソフトウェア「KeePass」は、プラグインを導入することでGoogle Driveによるパスワード同期が可能になるなど、その機能を強化することができます。無料の「KeePassRDP」は、KeePassのアカウント情報を使ってリモートデスクトップへのアクセスを可能にするKeePass用プラグインです。 iSnackyCracky/KeePassRDP: KeePassRDP is a plugin for KeePass 2.x which adds multiple options to connect via RDP to the URL of an entry. https://github.com/iSnackyCracky/KeePassRDP リモートデスクトップとは、RDPやVNCといった、リモートPCのデスクトップ画面をローカルPCの画面に表示するシス
VS Codeの中でブラウザーを開いてCSS開発（ひとり DevTools Advent Calendar 2020 – 22日目） | Ginpen.com
22 日目の記事です。 DevToolsおれおれAdvent Calendar 2020やります。ひとりで。 VS Code はウェブ開発に便利だな～、いっそブラウザーのタブも表示できないかな～、そう考えのあなたに朗報です。できます。 題名のとおり MS Edge を使うんだけど、macOS など Edge を導入していない場合は Chrome で代用できます。 デモプロジェクト よければこちらご利用ください。昨日のに追加しました。サーバーは npm run start ないし node server.js で起動します。 ginpei/vscode-debug-web-demo 本記事に沿って設定するか、あるいは .vscode.example/ を .vscode/ へコピーすればすぐデバッグ開始できます。 Microsoft Edge Tools で VS Code 内にブラウザーの
手描きスケッチ風に仕上げるProcreateインクブラシ15個まとめ
iPadやiPhoneのお絵かき、イラストアプリは数多く存在しますが、Procreate（プロクリエイト）はあっという間に世界中のデザイナーが選ぶ人気のスケッチパッドとなっています。 ブラシスタイルを変更するだけで、ありとあらゆる質感をスタイラスペン一本で表現できる、イラストに自信がないひとにもぜひオススメしたい、魔法のようなお絵かきアプリです。 今回は、Procreateで滲んだインクを表現できる厳選プレミアムブラシ15個をまとめてご紹介します。 Procreateにデフォルトで収録されているブラシでは難しい質感やスタイルを中心に、はじめてのひとでも使いやすい有料アイテムを揃えています。 手描きスケッチ風に仕上げるProcreateインクブラシまとめ Procreate Ink Brushes 中国の墨絵をベースにしたインクブラシ36種類セット。同時に背景などに便利なスタンプブラシ9種類
お絵かきアプリProcreateでリアルな水彩ペイントを描くベストブラシ16個まとめ
iPadやiPhone、そしてスタイラスペンさえがあれば、まるで手書きしているようなスケッチやイラストを、手軽に描くことができるお絵かきアプリ「Procreate（プロクリエイト）」。 本物の筆ブラシで描いているようなレスポンス速度、筆圧に対応して太さの変化するブラシなど、イラストに自信がないひとにも人気の機能が満載です。 以下の動画では、直感的にイラストを短時間で完成させているのがよく分かります。 この記事では、水彩絵の具でペイントしたような質感をリアルに表現できるProcreate専用ブラシ素材をまとめてご紹介します。 Procreateにデフォルトで収録されているブラシでは難しい質感も、ペンをなぞるだけで簡単に仕上げることができる有料アイテムを揃えました。 お絵かきアプリProcreateでリアルな水彩ペイントを描くベストブラシ16個まとめ ■ Procreate Watercolo
無料＆Google Drive経由でKeePassのパスワードを同期できるプラグイン「KPSync for Google Drive」レビュー
無料で使えるオープンソースのパスワードマネージャー「KeePass」は、パスワード生成機能や二要素認証といった高度な機能を備えていますが、Google Drive経由でのデータベース同期にはデフォルトでは対応していません。無料のKeePass用プラグイン「KPSync for Google Drive」を使うと、KeePassのデータベースファイルをGoogle Drive経由で同期することが可能になります。なお、KPSync for Google Driveを利用するには、Windowsでバージョン2.35以上のKeePassを利用する必要があります。 KPSync for Google Drive™ | Secure sync automation with Drive. https://www.kpsync.org/ まずはプラグインのダウンロードページにアクセスして、「Downlo
在宅ワークの集中力を高めよう！環境音が聴ける作業BGM用Webサイト
2020年4月21日 フリーランス, 便利ツール このご時世、自宅でお仕事をしている人も多いかと思います。私はもう長い間在宅ワークなので慣れっこですが、在宅ワークを始めたばかりの人だと集中力の維持がひとつの課題になりますね。まったく音がない場所よりも適度にノイズがあったほうが集中しやすい環境なのだとか。そこで今回は自然の音や街の環境音、生活音などをまとめたWebサイトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ I Miss the Office 「自宅勤務やったー！」と思っていても、そろそろオフィスが恋しくなってきた人もいるのでは？I Miss the Officeはオフィスの環境音を流せるWebサイト。人が話す声や歩く音など、オフィス内でよくある音を再現しています。画面右下の数字はオフィス内の人数を表していて、好みに合わせて増減可能。画面左下のスタートボタンから音が
オンラインで手軽に画像や動画の背景を切り抜こう！remove.bgとUnscreen
2022年4月27日 便利ツール 画像や動画を加工するとき、背景を切り抜きたいことは多々ありますね。今回はオンラインでできる手間いらずなツールを紹介します。 ↑私が10年以上利用している会計ソフト！ 画像の背景を消去する remove.bgはブラウザー上で画像の背景を切り抜いてくれるツール。画像ファイルをドロップしてアップロード、または画像のURLを貼り付けるだけでOKです。どれがメインとなる対象物で、どれが背景かをAIで判断して5秒で切り抜くとのことなので、さっそく試してみましょう！ まずはこちらの画像で挑戦！Webサイトに画像をドロップすると… こんな感じで一瞬で切り抜けました！すごい！ ブラックジャックによろしく / 佐藤秀峰 写真ではなく漫画やイラストでも試してみます。 こちらも一瞬で完成！ ふわふわな毛や背景の色と同化している、ちょっと難しそうな画像でも試してみました。 毛はある
WebアニメーションはLottieがオススメ！基本の使い方完全ガイド【2020年版】
最近のウェブサイト制作では、アニメーションがますます重要になってきています。 この記事は、Lottieの使い方をまとめた基本ガイドです。Lottieの魅力はもちろん、After EffectsへのAiファイルの読み込みやアニメーション作成、プラグインを利用したJSONファイルの書き出し、Webサイトでのアニメーション表示まで一連の流れをまとめています。 Lottieを利用すれば、手軽にそして軽量に動画を貼り付けることができるので、これまでアニメーションを試したことのないひとにもオススメです。 コンテンツ目次 1. Lottie（ロッティー）って何？ 2. Lottieを利用するメリットは？ 3. Lottieアニメーション作成手順ガイド 4. After EffectsへのAiファイルの読み込み 5. After Effectsでアニメーション作成 6. Lottie JSONファイルでア
持っておきたいProcreateのオススメ無料ブラシ素材55個まとめ【2024年版】
世界中で愛用者が増えている、iPad専用のお絵かきアプリPropcreate（プロクリエイト）。 簡単な操作だけで手描きイラストを、すらすらと描くことができる、圧倒的な使いやすさは人気の大きな理由でしょう。 Procreateには、鉛筆やインクなど200種類以上のブラシが用意されており、Apple Pencilを使えばあらゆる筆使いをリアルに再現でき、自分の好みに合うブラシのカスタマイズも可能です。 「とにかく手軽にiPadで絵を描きたい」 「ペンや筆の書き心地をそのまま再現したい」 「買い切りできるイラストツールが欲しい」 そんな人にオススメしたいProcreateの無料ブラシ素材をまとめてご紹介します。 無料で試すことができるので、お気に入りのブラシを見つけてみませんか。
現役デザイナー直伝！最高のアニメーションを作成する7つの小技テクニックまとめ
アイデアをカタチにするツールはたくさんありますが、個人的に最高のアニメーションツールは引き続きAfter Effectsと言えるでしょう。ただし、利用できるプラグインが多すぎて、どれを使って良いのか迷ってしまうのが悩みどころ。 今回は、現役デザイナーがウェブサイトやアプリのアニメーション作成で実践しているプラグインやツールを、7つのシンプルな手順を追ってご紹介します。このガイドラインでは、デザイナーとデベロッパーが一緒にプロジェクトを進める効果的な方法をマスターできます。 No.1 SketchかFigmaでデザイン開始 レイヤーにきちんと名前を付けているか確認しましょう。After Effectsに取り込んでしまうと、レイヤーを見つけるのが難しくなってしまいます。 AEUXプラグインを利用することで、SketchまたはFigmaで作成したレイヤーをAfter Effectsにボタンひとつ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインが楽になる、ずるい最新ツール・素材40個まとめ
)
MailTrackerBlocker - macOS純正メールアプリのトラッキング防止プラグイン MOONGIFT