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 [...]
2024.06.26 WEBWebデザイン 【CSS】CSSで画像をクリッピング！clip-pathの使い方を解説！ コーディングに要求されるハードルが年々上がってきていますが、その一つにデザインの複雑化が挙げられます。 単純な四角形だけではなく斜め線や三角形、正円や角丸など、様々な図形を使用したデザインが、近年では見られるようになりました。 画像で書き出すと何かと融通の利かない図形ですが、CSSで切り抜いてしま [...]
2024.06.11 WEBWebデザイン 【Canvaの使い方】重なった素材を簡単に編集！レイヤー機能の使い方 Canvaは、豊富なテンプレートと直感的な操作で、誰でも簡単にバナーやチラシなどを作成できるデザインツールです。 2023年のアップデートで素材の「重なり順」を簡単に編集できるレイヤー機能が実装されました。 Canvaのレイヤー機能では、オーバーラップというレイヤーの絞り込みのような機能も追加され [...]
2024.06.04 WEBWebデザイン 【Photoshopシャドウシリーズ②】写真から被写体と影を残して背景のみを合成する方法 デザインをしているとき、商品写真などから、被写体を切り抜き、別の背景に合成したい！そんなことがたまにあります。 切り抜き画像に影を付けたい場合、被写体のみを選択して切り抜き、後から被写体に対してドロップシャドウをかける方法が一般的かと思います。 右のメガネにドロップシャドウをかけた画像も、悪くは [...]
2024.05.23 WEBWebデザイン 脱Sassへの第一歩！CSSでネスト機能（Nested Rules）を使う方法 CSSコーディングを行う際にプリプロセッサのSassを利用しているコーダーは多いと思いますが、Sassの基本機能の中でも特によく使われているのは「ネスト機能（Nested Rules）」ではないでしょうか。 普段Sassを使ってコーディングを行っていると、Sassが導入されていない作業を担当したと [...]
