2025年03月19日 WEBWebデザイン 【Illustrator】イラレのグラデーションにノイズを加えてみよう！ 昨今、ノイズ入りグラデーションを使ったデザインをよく見かける気がします。 参考：株式会社KKI様 採用サイト 参考：【栃木県宇都宮市】職員採用情報サイト ざらっとしたノイズを入れることで、ただのべた塗り・グラデーションにはない質感が生まれ、どこかレトロでありながら新鮮な印象を受けます。 業務でも取 [...]
2025年03月19日 WEBWebデザイン 【Illustrator】イラレのグラデーション機能、基礎を覚えよう！ 今回は、イラレのグラデーション機能について、「基本的な使い方」から、「透過表現の方法や文字にかけるグラデーション」「アピアランスとは何か」まで、ご紹介したいと思います。Photoshopと少し勝手が違うところもあり、つまずきやすいポイントでもありますが、知っておくといろんな表現に応用が利くため、習 [...]
2024年12月23日 WEBWebデザイン 【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【後編・書き出しまで】 前編では、Photoshopのタイムライン機能を使って、ツリー上のスターの飾りを拡大・縮小する方法をご紹介しました。 APNG・WebPアニメーションについても下記ブログで解説しています。 【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【前編】 続いて中編では、 [...]
2024年12月23日 WEBシステム開発 Google Chromeの拡張機能を作ってみよう！【入門編】 日本においてトップシェアを誇るブラウザと言えば Chrome ですが、その Chrome の拡張機能を皆様使っていますでしょうか。 私もいくつかインストールして活用しているのですが、時々こういう拡張機能があったらなぁと思うことがあります。 でもなかなか、自分のニーズに合っていなかったり、日本語に対 [...]
2024年12月04日 WEBWebデザイン 【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【中編】 前回のおさらい 前編では、Photoshopのタイムライン機能を使って、ツリー上のスターの飾りを拡大・縮小する方法をご紹介しました。 APNG・WebPアニメーションについても下記ブログで解説しています。 【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【前編】 前回 [...]
2024年11月25日 WEBシステム開発 クロスブラウザテストサービスを調査して実際に使ってみた 最新の端末やOSでの検証が求められるこの業界。 近年も勢いが衰えないスパンの早い端末やOSの世代交代に対応するのは大変です。。 そこで今回は、端末の世代交代に対応するための方法として、クロスブラウザテスト用のサービスを調査してみました。 クロスブラウザテスト用サービスについて ざっくり調べてみた感 [...]
2024年11月19日 WEBWebデザイン 【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【前編】 前回、Photoshopを使って画像の中に動画を埋め込み、mp4形式で書き出す方法をご紹介しました。 【Photoshop】画像の中に動画を埋め込んで書き出す方法（モックアップ動画の作成方法） あれからアニメーションが面白くなってきたので、今回はPhotoshopを使ってアニメーションを作成し、A [...]
2024年10月08日 WEBシステム開発 Vue3でjQueryのdatepickerを使いたい！実装手順と注意点を解説します。 皆様、ご無沙汰しております。 今回は、先日Vue3とjQueryのDatepickerを組み合わせて実装する機会があったので、その方法と、つまずいたポイントおよび解決策についてご紹介したいと思います。 要件 日付の入力欄が複数個欲しい 入力欄の個数は任意で増減させることができる それぞれの入力欄 [...]
2024年09月27日 WEBWebデザイン 【Photoshop】画像の中に動画を埋め込んで書き出す方法（モックアップ動画の作成方法） 今回は、Photoshopを使って画像の中に動画を埋め込み、mp4形式で書き出す方法をご紹介します。 なんと、Photoshopは動画編集もできたのです…。需要はニッチかもしれませんが、下記のようなPCモックアップのGIF画像を業務で作成することがあったため、備忘録として残しておこうと思います。P [...]
2024年09月27日 WEBシステム開発 話題の『ChatGPT o1』をコーディングに使ってみた（ChatGPT 4oとの比較） 昨今ではもう世間に定着してきたChatGPTですが、2024年9月12日に新しいAIモデルの『ChatGPT o1』がリリースされました。 https://openai.com/index/introducing-openai-o1-preview/ 今回のモデルに関しては思考プロセスが洗練され、 [...]
2024年09月11日 WEBWebデザイン Illustratorの3D効果「3Dとマテリアル」で、立体的な文字を作ってみよう！ 過去の記事にて、Illustratorの3D効果でアイソメトリック図の作成方法をご紹介しました。 3D効果のおさらい 立方体・直方体の作り方はこちら Illustratorの3D効果で、アイソメトリック図を作ってみよう！【立方体・直方体編】 回転体の作り方はこちら Illustratorの3 [...]
2024年08月21日 WEBシステム開発 Vue3の非同期コンポーネントを使ってみる 皆様、いかがお過ごしでしょうか。 今回はVue3の非同期コンポーネントがどんなものか使いながら理解していきたいと思います。 インストール 筆者の環境は以下の通りです。 $ node -v v22.5.1 $ npm -v 10.8.2 Viteで開発環境を構築していきます。ESLintと [...]
2024年08月21日 WEBWebデザイン Adobe間の素材の共有が簡単に！CCライブラリの使い方 Adobe製品を横断して使用しながらデザインを作成しているとき、このようなことはありませんか？ 以前Illustratorで作成した図を、XDのデザインカンプに配置したいが、どこに格納したのか忘れてしまった Photoshopで作成し、XDのデザインカンプに配置している図に変更が入ってしまっ [...]
2024年07月30日 WEBWebデザイン 【CSS】display:none に対してアニメーションを付けてみた CSSを熟知している皆さんにとって、CSSでアニメーションを作成することは簡単なことかもしれません。 しかし、私のようなまだまだ経験の浅いコーダーにとっては、慣れない作業に感じることがあります。 そこで、最近私がコーディングしたアニメーションについて、備忘録として記録しておこうと思います。 実装概 [...]
2024年07月02日 WEBWebデザイン 【流行デザイン】XD・Photoshopでニューモーフィズムデザインを作ってみよう！ 2020年頃から、一部のwebデザインで取り入れられている「ニューモーフィズム（Neumorphism）」。 ニューモーフィズムは色数が少なく、シャドウで要素の境界を表現するため、洗練された近代的なデザインを作り上げることができます。 今回は、そんなニューモーフィズムを、Adobe XD・Phot [...]
2024年06月04日 WEBWebデザイン 【Photoshopシャドウシリーズ②】写真から被写体と影を残して背景のみを合成する方法 デザインをしているとき、商品写真などから、被写体を切り抜き、別の背景に合成したい！そんなことがたまにあります。 切り抜き画像に影を付けたい場合、被写体のみを選択して切り抜き、後から被写体に対してドロップシャドウをかける方法が一般的かと思います。 右のメガネにドロップシャドウをかけた画像も、悪くは [...]
2024年05月28日 WEBシステム開発 Laravel×Inertia×Vue3でファイルアップロード機能を作ってみた 5月も後半となり初夏の訪れを感じる時期となりましたが、みなさまはいかがお過ごしでしょうか？ 私は、相変わらずバックエンドとフロントエンドを行き来するせわしない日々を送っています。 今回は、Laravel×Inertia×Vue3でファイルアップロードの機能を作ってみます。 前提 ubuntu v [...]
