Webエンジニアのブログ

Webデザインの配色は、サイトのイメージや与える印象、そして情報の見やすさなど様々な要素が関係してきますので、ユーザーが利用する環境にも合わせる必要があります。ここでは、CSSのlight-dark()関数を使ってライトモードとダークモ...
続きを読む>>

Webで利用する画像データの形式は様々で、ロゴやアイコンそして見出しなどで使うテキストデータは、可変しても劣化しないベクターデータのSVG形式で扱っていくこともあります。ここでは書き出す際の設定も含めて、FigmaでのSVG形式の書き出し方...
続きを読む>>

Webページにアクセスした時に、コンテンツが綺麗に表示されるまでの時間が長いとユーザーにストレスを与えてしまいますが、ストレスを軽減するのにローディングアニメーションは非常に効果的です。ここでは、リソースが読み込まれるまでのローディングアニ...
続きを読む>>

Google AnalyticsはGA4から、ページビュー数の項目が表示回数という名称に変更になり、ページビュー数（PV数）の確認に少し戸惑う方も多いでしょう。ここではGoogle Analytics 4でのページビュー数の確認について、標...
続きを読む>>

無料で手軽に利用することができるデジタルホワイトボードのFigJam。iPadで利用できるFigJamアプリを活用すると、Apple Pencilなどのタッチペンが使えるので快適に作業ができます。...
続きを読む>>

Googleアナリティクス4（GA4）では、これまでの標準レポートとは別に、細かな設定でサイトを分析することができるデータ探索ツールがありますが、デフォルトの設定ではデータの保持期間が2ヶ月となっています。このデータの保持期間はGoogle...
続きを読む>>

デジタルホワイトボードのFigJamは、デザインツールのFigmaに付属している機能で、Figmaも含め基本、無料で利用することができます。ここでは、様々な用途で便利に活用できるデジタルホワイトボード「FigJam」の使い方について簡単にご...
続きを読む>>

デジタルホワイトボードのFigJamは、ホームページやブログなどのWebサイトに埋め込むことができます。ここでは必要なコードの読み込みだけでなく、レスポンシブWebデザインに対応する方法も合わせてご紹介します。...
続きを読む>>

iPadなどモバイルデバイスの画面を共有して何かを説明する場合は、同じアカウントで同時にWeb会議に参加することで、PCでWeb会議を進行しつつ、必要に応じてモバイルデバイスの画面を共有して会議を進行することができます。ここでは、PCのWe...
続きを読む>>

Photoshopの生成AI機能を利用することで、画像のアスペクト比（縦横比）を崩して縦幅や横幅を拡張した画像を生成したり、画像内にオブジェクトを追加または削除したりできます。ここでは、Photoshopの生成AI機能の「生成拡張」と「生成...
続きを読む>>