2024.12.23 WEBWebデザイン 【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【後編・書き出しまで】 前編では、Photoshopのタイムライン機能を使って、ツリー上のスターの飾りを拡大・縮小する方法をご紹介しました。 APNG・WebPアニメーションについても下記ブログで解説しています。 【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【前編】 続いて中編では、 [...]
2024.12.04 WEBWebデザイン 【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【中編】 前回のおさらい 前編では、Photoshopのタイムライン機能を使って、ツリー上のスターの飾りを拡大・縮小する方法をご紹介しました。 APNG・WebPアニメーションについても下記ブログで解説しています。 【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【前編】 前回 [...]
2024.11.29 WEBWebデザイン Adobe XDのコンポーネント機能とは？正しく理解して作業効率をあげよう みなさんは、Adobe XDの「コンポーネント機能」をご存じですか？ 「知ってはいるけど、うまく使いこなせない…」という方もいらっしゃるのではないでしょうか。 今回は、コンポーネント機能のご紹介と、正しい使い方について、伝授いたします。 コンポーネント機能とは デザインやワイヤーフレー [...]
2024.11.25 WEBWebデザイン :nth-child()擬似クラスをもっと便利に！ 新構文、”of <selector>”を使って選択要素をフィルタリングしよう 先日、:nth-child()擬似クラスについて下記の記事を投稿しました。 :nth-child()擬似クラスで指定した順番・範囲の要素を取得する :nth-child()擬似クラスの基本的な使い方はこちらを参考にしていただければ幸いですが、もう一つだけお伝えしたい機能がありましたので筆を執りまし [...]
2024.11.19 WEBWebデザイン 【Photoshop】アニメーション画像を作ってみよう！（APNG・WebP）【前編】 前回、Photoshopを使って画像の中に動画を埋め込み、mp4形式で書き出す方法をご紹介しました。 【Photoshop】画像の中に動画を埋め込んで書き出す方法（モックアップ動画の作成方法） あれからアニメーションが面白くなってきたので、今回はPhotoshopを使ってアニメーションを作成し、A [...]
2024.11.06 WEBWebデザイン 【jQuery】ページ内のどのコンテンツにいるのか分かるエレベーターメニューを実装してみた 最近のwebサイトではエレベーターメニューをよく見るようになりました。 LPなど長いページでの使用や、沿革ページで年ごとに区分するなど、使い方は様々です。 今回はjQueryを使って、エレベーターメニューを実装してみたいと思います。 エレベーターメニューの仕様 最初に、エレベーターメニューの仕様に [...]
2024.09.27 WEBWebデザイン 【Photoshop】画像の中に動画を埋め込んで書き出す方法（モックアップ動画の作成方法） 今回は、Photoshopを使って画像の中に動画を埋め込み、mp4形式で書き出す方法をご紹介します。 なんと、Photoshopは動画編集もできたのです…。需要はニッチかもしれませんが、下記のようなPCモックアップのGIF画像を業務で作成することがあったため、備忘録として残しておこうと思います。P [...]
2024.09.20 WEBWebデザイン :not()否定擬似クラスを使ってCSSセレクタに！（否定条件）を追加しよう CSSコーディングをしていると、 一番下の行には線をつけないでください 3つ目の要素は背景画像をとってください といったように、要素の「位置」や「順番」に応じて装飾を除外するような要求を出されることがたくさんあると思います。 CSSセレクタは原則として「当てはまる条件」を連ねて要素を絞り込ん [...]
2024.09.11 WEBWebデザイン Illustratorの3D効果「3Dとマテリアル」で、立体的な文字を作ってみよう！ 過去の記事にて、Illustratorの3D効果でアイソメトリック図の作成方法をご紹介しました。 3D効果のおさらい 立方体・直方体の作り方はこちら Illustratorの3D効果で、アイソメトリック図を作ってみよう！【立方体・直方体編】 回転体の作り方はこちら Illustratorの3 [...]
2024.09.06 WEBWebデザイン 【Canvaの使い方】簡単に画像の一部を差し替え・色の変更、追加ができる！マジック加工の使い方 過去の記事「Magic Designなど新機能が続々登場！Canva2023年アップデートで追加されたおすすめの新機能10選」で、2023年のCanvaの大型アップデートで追加された新機能をご紹介しました。 今回は、その中から「マジック加工」の使い方をご紹介します。 マジック加工は、画像の一部の差 [...]
2024.08.27 WEBWebデザイン 【bxSlider】コールバック関数を使って2つのスライダーを連動させてみた 弊社ではトップページのメイン画像をスライダーにすることが多く、jQueryプラグインのbxSliderをよく利用しています。 最近このbxSliderのコールバック関数を勉強する機会があったので、より理解度を深めるため実際の提案でもあった2つのスライダーの連動を実装してみたいと思います。 弊社ブロ [...]
2024.08.21 WEBWebデザイン Adobe間の素材の共有が簡単に！CCライブラリの使い方 Adobe製品を横断して使用しながらデザインを作成しているとき、このようなことはありませんか？ 以前Illustratorで作成した図を、XDのデザインカンプに配置したいが、どこに格納したのか忘れてしまった Photoshopで作成し、XDのデザインカンプに配置している図に変更が入ってしまっ [...]
2024.07.31 WEBWebデザイン :nth-child()擬似クラスで指定した順番・範囲の要素を取得する CSSコーディングを行っていると、要素の位置に依存したコードを書く機会は少なくないと思います。 一番下の行だけ下線をつけたい 偶数の行は背景色を〇〇にしたい 上からn番目の要素だけ△△色にしたい といった、特定の位置に配置される要素に対して特別なスタイルを適用することになりますが、HTML構 [...]
2024.07.30 WEBWebデザイン 【CSS】display:none に対してアニメーションを付けてみた CSSを熟知している皆さんにとって、CSSでアニメーションを作成することは簡単なことかもしれません。 しかし、私のようなまだまだ経験の浅いコーダーにとっては、慣れない作業に感じることがあります。 そこで、最近私がコーディングしたアニメーションについて、備忘録として記録しておこうと思います。 実装概 [...]
2024.07.24 WEBWebデザイン 【Canvaの使い方】フリーハンドで簡単に絵が描ける！お絵描き機能の使い方 Canvaは、豊富なテンプレートと直感的な操作で、誰でも簡単にバナーやチラシなどを作成できるデザインツールです。 お絵描き機能はCanvaで使える機能の1つで、画面上にフリーハンドでイラストや図形を描くことができます。 以前からお絵描き機能はありましたが、2023年のアップデートで描画アシスト機能 [...]
2024.07.02 WEBWebデザイン 【Canvaの使い方】チラシやポスター、プレゼン資料のデザインを自動生成！マジックデザイン機能の使い方 プレゼン資料やポスター、チラシなどのデザイン作成に苦手意識はありませんか？ そんな方に、今回ご紹介するCanvaの「マジックデザイン機能」がおすすめです。 「マジックデザイン機能」は画像やテキストからAIが自動的にデザインを生成してくれる機能で、2023年のアップデートにて実装されました。この記事 [...]
2024.07.02 WEBWebデザイン 【流行デザイン】XD・Photoshopでニューモーフィズムデザインを作ってみよう！ 2020年頃から、一部のwebデザインで取り入れられている「ニューモーフィズム（Neumorphism）」。 ニューモーフィズムは色数が少なく、シャドウで要素の境界を表現するため、洗練された近代的なデザインを作り上げることができます。 今回は、そんなニューモーフィズムを、Adobe XD・Phot [...]
