2024.04.25 WEBシステム開発 Reactでフォーカス可能な要素にフォーカスを当てる方法 入力要素にフォーカスしたい 編集ボタンを押すと入力要素を表示するフォームを無性に作りたくなる時ってありますよね。 例えばこんな感じのフォームです。 キーボード操作の時に使いづらい 筆者はキーボード操作でフォームの入力を行うことが多いのですが、この場合キーボード操作だけだと使いづらいと感じます。 [...]
2024.04.18 BUSINESS仕事効率化ツール デザインセンスが無くても大丈夫！パワーポイントで分かりやすい資料を作成する4つのポイント パワポの資料作成に苦手意識はありませんか。 実は、少し意識を変えたりルールを守ったりするだけで、劇的に分かりやすい資料へ生まれ変わります。 今回は、デザインセンスが無くても分かりやすい資料を作るための、最低限守りたいポイントを4つご紹介いたします。 1. 絞る 文字を絞る まずは文字を「絞り」ま [...]
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つあるプロセスが循環している、という情報が目に入りやすいかと思います。 このことから、情報伝達において、ビジュアルという要素は重要であることがわかります。 このよ [...]
2024.03.27 WEBシステム開発 Zodを使用したバリデーション実装ではまったこと【メールアドレス必須エラー 編】 フォームを作る際のスキーマをZodを使って実装しています。 最近、メールアドレスを入力するフォームを作るにあたって、痒い所に手が届かないなと感じた点がありましたので、備忘録として残しておこうかと思います。 実際に感じたむず痒い箇所 実際にスキーマ例を作るうえで、メールアドレス入力フォームの要件を以 [...]
2024.03.25 WEBWebデザイン Google Chromeのデベロッパーツールでリアルタイム修正をしよう（HTML・CSS編） web制作において、ブラウザでコーディングを確認、修正できるデベロッパーツールは欠かせない存在です。 デベロッパーツールとはブラウザに標準で搭載しているデバッグツールで、リアルタイムでのコード編集・確認や、コンソールエラーのチェック、スマーフォンなどの携帯端末の表示をチェックできたりとその機能は多 [...]
2024.03.21 WEBアクセシビリティ 便利な文章校正ツールを使って、webサイトで読みやすい文章を実現しよう！ webサイトの原稿を、Wordなど印刷用のデータでもらってそのまま貼り付けしていませんか？ 紙媒体での読みやすさと、web媒体での読みやすさは異なります。 印刷用の原稿をそのままwebサイトに掲載すると、ウェブアクセシビリティが損なわれたり、SEOへ悪影響が出たりする可能性があります。 弊社では「 [...]
2024.03.21 WEBシステム開発 安全性、速度、並行性を兼ね備えた言語と、巷でうわさのRustを覗いてみる（スレッド編 その1） みなさまお久しぶりです。 今回も「The Rust Programming Language」を読みながら、 スレッドについて見ていきたいと思います。 参照 https://doc.rust-lang.org/book/ https://doc.rust-jp.rs/book-ja/ （日本語 [...]
2024.03.21 WEBWebデザイン CSSでもifが使いたい！:has()擬似クラスを使ってCSSセレクタに条件分岐を書く方法 CSSでコーディングをしていると 〇〇のときだけ××したい □□のときは△△してほしい といった「条件」によって「分岐」を必要とするセレクタを書く機会がたくさんあると思います。 CSSはシンプルで柔軟な言語ですので、セレクタを工夫することで大体の条件を満たすことができるのですが、シンプルがゆ [...]
2024.03.12 WEBWebデザイン Magic Designなど新機能が続々登場！Canva2023年アップデートで追加されたおすすめの新機能10選 オンラインで使える無料のグラフィックデザインツールであるCanvaは、頻繁にアップデートが行われており、日々使いやすく進化しています。 そんなCanvaですが2023年に大型のアップデートが実施され、たくさんの新機能が登場しました。 この記事では、アップデートで追加された、おすすめの新機能10選を [...]
2024.02.29 WEBWeb全般 Googleカレンダーをホームページに埋め込んでみよう！デザインも簡単にカスタマイズ！ ホームページに「お店の営業日」や「イベント情報」をカレンダー形式で表示したいと思ったことはありませんか？ Googleカレンダーは登録した情報をカレンダー形式で表示でき、簡単にホームページに埋め込むことができるため、とても便利です。 また、カレンダーの色やサイズ、枠線など自由にカスタマイズできます [...]
2024.02.29 BUSINESS仕事効率化ツール 作業効率UP！Googleドキュメントの「提案モード」で⽂章校正・修正がラクラク便利！ ドキュメントツールを使って作成した記事や文章について、社内で校正に回したり、修正依頼を行ったりする場合があるかと思います。 その際、修正内容をわざわざ印刷して紙に書き込んでいませんか？また、パワーポイントなど編集ソフトを使用して赤字を入れていませんか？その場合、書きこんだ文字が読めなかったり、修正 [...]
2024.02.27 WEBSEO・SEM Googleサーチコンソールでwebサイトにアクセスするユーザーの検索キーワードを知り、サイト改善やSEOに役立てよう！ 運営しているwebサイトやブログなどにユーザーがどのような検索キーワードでアクセスしているのかを知ることはとても重要です。 ユーザーの流入検索キーワードを知ることで、「ユーザーが求めていること」「ユーザーが知りたいこと」「ユーザーの悩み」を把握することができ、サイト改善やSEOに役立てることができ [...]
2024.02.27 WEBWebデザイン 【Figma】一気にクオリティが上がる！シェイプやテクスチャなどデザイン要素のおすすめプラグインを紹介 今回はFigmaのプラグインの中でもシェイプ、テクスチャ、その他のデザイン要素を作成するのに特に役立つプラグインを12個ご紹介します。 プラグインの導入方法 プラグインの導入方法については、下記の記事で詳しく説明していますので、よろしければこちらをご覧ください。 関連記事【Figma】デザイン [...]
2024.02.22 WEBシステム開発 Go1.21で追加された「mapsパッケージ」とは？実際にパッケージ内の関数を使うコードを書いてみた。 気づいたらGo1.22がリリースされていましたが、今回は引き続き1.21で追加されたパッケージを調べようと思います。 今回はmapsパッケージについて解説します。 mapsパッケージの概要 Package maps defines various functions useful with map [...]
