ツール

ツール

マップの作成(ベクターファイルのダウンロード）

OpenStreetMap (OSM)標準のエクスポート機能でエラーが出る場合や、文字や道路のスタイルをより綺麗に整えたベクターデータを取得したい場合におすすめの無料サービスです。手順画面の右端にあるメニュー欄の一番下（吹き出しアイコンのすぐ上あたり）にある 「共有（矢印が外を向いた四角のアイコン）」 をクリックします。右側に共有パネルが開くので、「画像」 のところで形式を「PDF」に選択し「ダウンロード」をクリックInkatlas でPDF保存手順Inkatlasにアクセスします。スタイルを指定し、左側の■で範囲を指定、「Continue」をクリック次の画面でフォーマットを「Vector PDF」を選択して、「Create Map]をクリックしばらく待つと「Download」ボタンが表示されるので、ダウンロードその他PNG書き出しかんたんマップ自動作成ツールシンプルな地図がPNGで無料でダウンロードできる。簡易マップジェネレーター掲載したいものを選べて、PNGに書き出しできる。商業利用可能だがクレジット表記が必要。
2026.08.07
ツール
ツール

SeaArtでWebデザイン用画像を生成する方法

写真風のメインビジュアル、サービス紹介用イラスト、3Dアイコン、線画素材、ブログのアイキャッチなど、Web制作で必要になるさまざまな画像を作成できます。ただし、モデルやLoRAによって得意な表現、推奨設定、商用利用条件が異なります。この記事では、SeaArtをWebデザインに利用する際に知っておきたい基本用語、設定方法、プロンプトの作り方、商用利用時の注意点を紹介します。SeaArtで作成しやすいWeb用画像SeaArtは、次のようなWeb素材の作成に向いています。Webサイトのメインビジュアルブログや新着記事のアイキャッチサービス紹介用のイラスト3Dアイコンや装飾パーツ人物やオフィスのイメージ写真背景画像やテクスチャ線画や水彩風の装飾素材ラフ画像を元にしたデザイン案バナー制作前のビジュアル案最初から完成画像を1枚だけ作ろうとするより、複数案を生成し、構図や雰囲気を確認しながら修正していく使い方が適しています。画像生成で使う「Checkpoint」と「LoRA」の違いCheckpointとはCheckpointは、画像全体の基本的な画風や表現を決めるベースモデルです。例えると、次のよう...
2026.07.29
ツール生成AI
Photoshop

Photoshopで使える生成AI・便利機能まとめ

Adobe Photoshopには、Adobe Fireflyを活用した生成AI機能のほか、写真補正、合成、テクスチャ作成、ニューラルフィルターなど、制作時間の短縮に役立つ機能が多数用意されています。本記事では、社内制作で活用しやすい機能を中心に、概要・基本操作・活用例をまとめます。この記事で確認できることオブジェクトを回転・変形する画像の一部を生成して合成する生成塗りつぶしで差し替える・広げる調和で合成画像をなじませる肌をスムーズに補正するNano Bananaで画像編集を試す透明な立体文字を背景になじませるテクスチャを生成して写真に重ねるエフェクト画像を生成して合成するCamera Rawでガラスの映り込みを補正するニューラルフィルターで人物写真を加工するパターン・グラデーション・モックアップ素材を作る1. オブジェクトを回転・変形する配置した画像やオブジェクトの角度を調整したいときに使います。商品の向きや見せ方を変えたい場合に便利です。オブジェクトを回転・変形するオブジェクトを回転・変形するオブジェクトを回転・変形するオブジェクトを回転・変形する基本的な操作の流れ対象のレイヤーを...
2026.07.23
Photoshopツール生成AI
Photoshop

Adobe Firefly・Photoshop・Illustratorの生成AI機能の違いと使い分け

Adobeの生成AI「Firefly」は、ブラウザで利用するFirefly Web版だけでなく、PhotoshopやIllustratorの中にも組み込まれています。同じFireflyの技術を使用していますが、それぞれ得意な作業が異なります。Firefly Web版：アイデアや素材を幅広く生成するPhotoshop：画像を修正・合成し、自然に馴染ませるIllustrator：編集可能なベクターデータを作るこの記事では、画像・イラスト制作における3つのツールの違いと、実務での使い分けを紹介します。まずは3つの役割を確認アイデアや素材を複数作る ↓ Firefly Web版 ↓写真・構図・光・影を調整する ↓ Photoshop ↓線・形・色を編集できる素材にする ↓ Illustrator必ず3つすべてを使う必要はありません。作りたいものや納品形式に合わせて、1つのツールだけを使う場合と、複数のツールを組み合わせる場合があります。機能・得意分野の比較比較項目Firefly Web版PhotoshopIllustrator主な役割アイデア出し・素材生成写真編集・合成・レタッチベクター制作・...
2026.07.23
IllustratorPhotoshop生成AI
Photoshop

Photoshop写真の上にテクスチャやエフェクト画像を合成　

Photoshopで写真の上にエフェクトやテクスチャ画像を重ねる際、描画モードの「スクリーン」を適用すると、画像の黒い部分が透過され、光やテクスチャだけを自然に合成できます。さらに「マスク」を組み合わせることで、不要な部分を隠したり、効果の強弱を簡単に調整できます1. 写真の上にテクスチャ・エフェクトを重ねる基本手順画像の配置: テクスチャや光のエフェクト画像を、加工したい写真レイヤーの「上」に配置します。 描画モードの変更: 配置したエフェクトレイヤーの描画モードを「通常」から「スクリーン」に変更します。これで暗い背景が消えてエフェクト部分だけが写真に馴染みます。マスクの追加: エフェクトレイヤーを選択し、レイヤーパネル下部の「レイヤーマスクを追加」アイコンをクリックします。不要部分の調整: 描画色を「黒」にしたブラシツールで、エフェクトを消したい部分（人物の顔など）をマスク上でなぞると、その部分のエフェクトだけを自然に消去できます。2. 活用テクニックとおすすめの設定不透明度の調整: スクリーンだけでは効果が強すぎる場合、レイヤーの「不透明度」を50%〜70%程度に下げると、写真と...
2026.07.08
Photoshop
AfterEffects

After Effects 便利プラグイン

動画制作をもっとスムーズにする便利ツールを紹介！初心者でも使いやすい定番プラグインをまとめました。
2026.07.06
AfterEffectsツール
AfterEffects

After Effects×Lottie

目次OPEN After Effects×Lottie 最新版！ Lottieアニメーションの作り方- After Effects編 基本から応用まで！Lottieアニメーション制作ガイド【2024年最新版】 エラー対処方法 エラーが起きてうまく使えない・表示されない Affter Effects×Lottieを使用しているサイト After Effects×LottieAfter Effectsを用いたLottieアニメーションの作成、書き出し、表示確認を行う方法の記事を集めました。最新版！ Lottieアニメーションの作り方- After Effects編Adobe After Effectsを使ったLottieの作成方法から書き出し方、表示確認までが紹介されています。参考記事基本から応用まで！Lottieアニメーション制作ガイド【2024年最新版】ウェブサイトで使えるLottieアニメーションについての内容です。参考記事エラー対処方法エラーが起きてうまく使えない・表示されないAfter Effectsで海外のテンプレートや海外製プラグインなどを使った時に、「エラーが起きてうまく使...
2026.07.02
AfterEffectsツール
AfterEffects

After Effects 基本のショートカット一覧（Win版）

After EffectsでWeb用アニメーションを作成する際に、まず覚えておきたいWindows版ショートカットをまとめました。位置・スケール・不透明度・キーフレーム表示など、初学者がよく使う基本操作を中心に整理しています。
2026.06.29
AfterEffectsツール
Illustrator

Illustratorで使える生成AI・便利機能まとめ

Adobe Illustratorには、Adobe Fireflyを活用した生成AI機能のほか、イラストの変形、配色変更、画像のベクター化など、制作時間の短縮に役立つ機能が多数用意されています。今回は、デザイン制作で活用しやすい機能と基本的な操作方法をまとめます。1．手描き風のベクターイラストを生成する生成AIで作成したイラストを手描き風に仕上げたい場合は、次の3つの方法が活用できます。方法1：プロンプトに画風を追加する生成時の指示に「ペン画」「線画」「手描き風」などを加えることで、希望するタッチに近づけます。方法2：「効果：落書き」を利用する生成時の効果から「落書き」を選択すると、ラフな線や手描き感のある表現を作りやすくなります。方法3：「スタイル参照」を利用する参考にしたい画像をスタイルとして指定し、その雰囲気を反映したベクターイラストを生成します。既存のイラストとトーンをそろえたい場合にも便利です。活用例：挿絵、アイコン、線画、手描き風の装飾素材など参考リンクYouTube動画Adobe Blog：手描き風ベクターイラストの生成2．意図した角度のイラストを作成する正面向きだけでな...
2026.06.16
Illustrator生成AI
Illustrator

フォントの種類を調べる

Adobe Fonts を使用してフォントを探す認識、照合できるのは、ラテン文字 (A-Z, a-z) のみIllustrator Retype を使用してフォントを探すアウトラインデータより「欧文」または「日本語」を探す
2026.06.16
Illustratorフォント・タイポグラフィ
Photoshop

Photoshop　プロンプト　［テクスチャ］［光と影］［天候・自然］

Photoshopで生成できる合成素材として役立つ画像のプロンプトをまとめています。［テクスチャ］［光と影］［天候・自然］などのテーマに関連したものを掲載しています。connecre_ps_textureダウンロード
2026.06.15
Photoshop生成AI
Photoshop

Photoshop　クイックマスク　強度

クイックマスクを使った生成塗りつぶしによる加工の強度の違いをまとめています。connecre_ps_brightnessダウンロード
2026.06.15
Photoshop生成AI
figma

Figma操作方法

オートレイアウト (Auto Layout) とコンポーネント化の活用が必須1.基本パーツのコンポーネント化（オートレイアウト適用）2.PC版ページ全体のデザイン作成（オートレイアウト）2.スマホ版ページへコピーして再調整（スタックの変更）3.Dev ModeでCSSを確認しながらコーディング
2026.05.22
figma
figma

Figma操作ショートカット集

Figma操作の便利なショートカットや操作について記載していますツールバー選択移動ツール：V、フレームツール：F、テキストツール：T、長方形ツール：O、線ツール：Lショートカットキー一覧の呼び出しCtrl + Shift + ?10px単位の操作Shift を押しながら作業　数字は　Shift +　↑　または　↓レイヤーぶち抜きで狙ったものを選択 Ctrl + クリックオートレイアウト化Shift + A選択しているGroup/Frameの１つ下の階層を選択Enter選択している要素の１つ上の階層を選択Shift + Enterテキスト入力中の状態からテキストレイヤー選択中の状態にするCtrl + Enterレイヤーを非表示/表示Shift + Ctrl + H垂直方向に反転Shift + V100%表示Shift + 0スタイル（プロパティ）のコピーCtrl + Alt + Cスタイル（プロパティ）のペーストCtrl + Alt + Vプレーンテキストとして貼り付けCtrl + Shift + Alt + V選択中の要素と同列の階層にペーストCtrl + Shift + Vペーストし...
2026.04.28
figma