Webエンジニアのブログ

Premiere Proでの動画制作では、余白の背景は通常黒色で表示されますが、カラーマットを使用するとシーケンスに合わせたサイズで様々な色の背景を簡単に設定することができます。ここでは、Premiere Proで動画の余白に色を設定する...
続きを読む>>

Padletのボードでは、ウォールやタイムライン、ストーリーボード、ストリーム、マップなどのレイアウトでセクション機能が利用できます。セクション機能を活用することで、Padletのボードに表示する情報をわかりやすく整理することができます。ま...
続きを読む>>

Google トレンドは、検索キーワード需要の推移を確認することができる無料ツールで、通常のウェブ検索や画像検索などのほか、YouTubeで話題となっている事柄やトレンドのキーワード、上位の検索キーワードなども調査することができます。また、...
続きを読む>>

YouTube Studioのチャンネルアナリティクスのトレンド機能を活用することで、YouTubeチャンネルのターゲットユーザーがどのようなことに興味を持っているか、また関連する情報に何を期待しているのかが把握できます。また、AIによって...
続きを読む>>

昔と違って今の検索エンジンはユーザーファーストを目指しており、これまで皆さんが追いかけてきたのは検索エンジンのためのコンテンツ制作が多く、本当はユーザーのためにコンテンツ制作をするべきであります。ユーザーに好まれるコンテンツは様々なかたちで...
続きを読む>>

CSSで「interpolate-size: allow-keywords;」を指定することで、widthのauto、min-content、max-contentなどの値をCSSアニメーションに適用することができます。これによりCSSのみ...
続きを読む>>

YouTube ショートやHTMLのvideoタグなどで縦型動画を読み込む場合、そのまま埋め込みコードを読み込んでもレスポンシブWebデザインに対応していないので、CSSでアスペクト比の調整などが必要になります。ここでは、YouTube シ...
続きを読む>>

より良いUI/UXを意識するのであれば、JavaScriptによるプログラムの実装もユーザーの環境に合わせることが求められますが、matchMediaメソッドを使うことでメディアクエリや表示領域のリサイズの判定、hover動作のデバイスの判...
続きを読む>>

Braveブラウザは、Brave SearchのアップデートによりAIツール「Answer With AI」が搭載され、検索に「AIアンサーエンジン」機能が追加されました。これによりBraveでもAIを活用した検索が可能となり、さらにはBr...
続きを読む>>

CSSの:hover擬似クラスを利用したhoverアクションの実装は、モバイルデバイスでは予期せぬ動作を起こすことがあります。ここではhover関連のメディア特性を利用してhoverが動作するデバイスを判別し、hoverが動作するデバイスに...
続きを読む>>