2024.06.11 WEBWebデザイン 【Canvaの使い方】重なった素材を簡単に編集！レイヤー機能の使い方 Canvaは、豊富なテンプレートと直感的な操作で、誰でも簡単にバナーやチラシなどを作成できるデザインツールです。 2023年のアップデートで素材の「重なり順」を簡単に編集できるレイヤー機能が実装されました。 Canvaのレイヤー機能では、オーバーラップというレイヤーの絞り込みのような機能も追加され [...]
2024.06.11 WEBシステム開発 Storybook の「play 関数＋ composeStories」を使用したテストで、MSW のハンドラを通らないケースの原因について 今回は Storybook に play 関数を定義して API コールをしている Story があり、その Story を composeStories 関数で再利用したテストで、時折テストが失敗する不安定なテストの原因とその対策についてです。 Storybook と MSW のバージョン S [...]
2024.06.04 WEBWebデザイン 【Photoshopシャドウシリーズ②】写真から被写体と影を残して背景のみを合成する方法 デザインをしているとき、商品写真などから、被写体を切り抜き、別の背景に合成したい！そんなことがたまにあります。 切り抜き画像に影を付けたい場合、被写体のみを選択して切り抜き、後から被写体に対してドロップシャドウをかける方法が一般的かと思います。 右のメガネにドロップシャドウをかけた画像も、悪くは [...]
2024.05.29 WEBアクセス解析 【初心者向け】Googleアナリティクス4（GA4）でwebサイトに訪問するユーザーの情報を知ろう！ Googleアナリティクス4（GA4）を使用すると、webサイトやアプリに関する多様なデータを計測でき、戦略の立案や改善に役立てることができます。しかし、取得できる情報が多すぎて、どのデータを見てどのように活用すればよいか分からず、解析を諦めてしまう方も多いのではないでしょうか。 まずは、「web [...]
2024.05.28 WEBシステム開発 Laravel×Inertia×Vue3でファイルアップロード機能を作ってみた 5月も後半となり初夏の訪れを感じる時期となりましたが、みなさまはいかがお過ごしでしょうか？ 私は、相変わらずバックエンドとフロントエンドを行き来するせわしない日々を送っています。 今回は、Laravel×Inertia×Vue3でファイルアップロードの機能を作ってみます。 前提 ubuntu v [...]
2024.05.23 WEBWebデザイン 脱Sassへの第一歩！CSSでネスト機能（Nested Rules）を使う方法 CSSコーディングを行う際にプリプロセッサのSassを利用しているコーダーは多いと思いますが、Sassの基本機能の中でも特によく使われているのは「ネスト機能（Nested Rules）」ではないでしょうか。 普段Sassを使ってコーディングを行っていると、Sassが導入されていない作業を担当したと [...]
2024.05.21 WEBアクセス解析 Googleアナリティクス4（GA4）の「ユーザー」「アクティブユーザー数」「総ユーザー数」とは？ Googleアナリティクス4（以下GA4）では、ユーザーに関する値を取得することができます。 ユーザーに関する値は、アクセス解析の基本指標ですが、Googleアナリティクス4の画面を見てみると、「ユーザー」「アクティブユーザー数」「総ユーザー数」というさまざまな表記があります。混乱されている方や間 [...]
2024.05.20 WEBWebデザイン 【Canvaの使い方】新機能「グラデーション機能」の使い方！色・向きの変更、応用まで徹底解説 Canvaは、豊富なテンプレートと直感的な操作で、誰でも簡単にバナーやチラシなどのデザインを作成できるツールです。 2023年のアップデートでグラデーション機能が実装され、より自由度の高いデザインが可能となりました。 この記事では、アップデートで追加されたグラデーション機能の使い方を解説します。 [...]
2024.05.13 WEBシステム開発 安全性、速度、並行性を兼ね備えた言語と、巷でうわさのRustを覗いてみる（スレッド編 その2） みなさまお久しぶりです。 今回も「The Rust Programming Language」を読みながら、スレッドについて見ていきたいと思います。 前回の「前回のスレッド編 その1」はこちらからご覧いただけます。 参照 https://doc.rust-lang.org/book/ http [...]
2024.05.02 WEBWebデザイン 【CSS】比較関数を使ってみよう！min()、max()、clamp()の使い方を解説！ CSSには様々な関数があります。transformプロパティで使用するtranslate()や、算術演算を行うcalc()などがなじみ深いかと思いますが、その中で複数の値を比較して値を計算する比較関数というものがあります。 今回はこの比較関数であるmin()、max()、clamp()の3つについ [...]
2024.05.02 WEBシステム開発 【Go】embedで作成した文字列を利用する機能のテストで改行に苦しめられた件 embedパッケージを使って作成した文字列を利用する機能のテストを書いていた際にテストが通らず苦しめられたので、備忘録も兼ねて記事にしました。 問題の概要 embedパッケージを利用してテキストファイルに書かれた文章を文字列として利用し、その文字列を text/template を使って加工してメ [...]
2024.05.02 WEBWebデザイン 【Photoshopシャドウシリーズ①】ドロップシャドウの使い方 「キレイに見せるコツも解説！」 Photoshopなどで文字や画像・オブジェクトに影を付けたいときによく使われる、ドロップシャドウ。 ドロップシャドウを使うと、下記のように、オブジェクトが浮き出ているように見せることができます。 一口にドロップシャドウといっても、効果のかけ方で印象がかなり変わります。 下のイメージ画像を見て [...]
2024.04.25 WEBシステム開発 Reactでフォーカス可能な要素にフォーカスを当てる方法 入力要素にフォーカスしたい 編集ボタンを押すと入力要素を表示するフォームを無性に作りたくなる時ってありますよね。 例えばこんな感じのフォームです。 キーボード操作の時に使いづらい 筆者はキーボード操作でフォームの入力を行うことが多いのですが、この場合キーボード操作だけだと使いづらいと感じます。 [...]
2024.04.17 WEBWebデザイン 【Canva Pro】写真の不要な部分を一瞬で消去！Magic Eraser（消しゴムマジック）機能の使い方 前回の記事「Magic Designなど新機能が続々登場！Canva2023年アップデートで追加されたおすすめの新機能10選」で、2023年のCanvaの大型アップデートで追加された新機能をご紹介しました。 今回は、前回の記事の中でご紹介した「Magic Eraser（消しゴムマジック）」の使い方 [...]
2024.04.15 WEBシステム開発 Laravel×Inertia×Vue3でCRUD機能を持つSPAを作ってみた 春雨に寒さを忘れる今日この頃、みなさまはいかがお過ごしでしょうか？ 私は、相変わらずバックエンドとフロントエンドを行き来するせわしない日々を送っています。 今回は、LaravelとVue3の繋ぎ役としてSPAを作る際に良きに働いてくれるInertiaをご紹介します。 Inertiaとは 公式による [...]
2024.04.15 WEBWebデザイン 【Illustratorの生成AI機能】テキストからベクターデータを生成！イラスト・アイコン・パターンを素早く作る！ 先日、弊社ブログ記事「【新機能】Photoshopの生成AI機能「生成塗りつぶし・生成拡張」がすごすぎる！使い方をご紹介します。」を公開しましたが、Photoshopの「生成塗りつぶし・生成拡張」機能と同時期に、Adobe Fireflyを活用した生成AI機能が、Illustratorにも実装され [...]
2024.03.27 WEBWebデザイン 情報を視覚的に伝える！インフォグラフィックスの使い方・作り方 突然ですが、PDCAの4つのプロセスを表す上で、どちらが分かりやすいでしょうか？ テキストを羅列しているだけのAよりも、Bのほうが、4つあるプロセスが循環している、という情報が目に入りやすいかと思います。 このことから、情報伝達において、ビジュアルという要素は重要であることがわかります。 このよ [...]
