アーカイブ: コラム

Photoshopの生成AIとは、主に元の画像の情報を読み取ってAIが生成するという機能になります。今回はその機能を使った、画像の作成方法と便利な機能をご紹介します。

1.生成AIをフル活用してオリジナル画像を作る

生成AIを使って1つの画像から新たな画像を作成します。
1.まず選択範囲で消したいオブジェクトよりも少し広めに選択をします。
 

 
広めに選択する理由は別の記事で解説しているのでぜひご覧ください。
（リンク：Adobe生成AIを業務で使うコツを紹介!）
 
2.次に入力欄には何も入力をせずに生成をします。そうすることで自然に背景と馴染む画像をAIが勝手に生成をしてくれます。
 

 

 
3.綺麗に消えました。では消したところにものを出現させましょう。 選択ツールで先ほどと同様に広めに選択をします。
 

 
4.生成したいものを入力欄に入力します。今回は犬を生成します。
 

 

 
ここで注意すべき点が2つあります。
1つ目は生成したいレイヤーを間違えないようにすることです。
Photoshopの生成AIでは、周りの情報を捉えて生成します。 なので、間違えて透明のレイヤーの上で生成をしないように注意しましょう。やり方としては、元の画像(レイヤー)と生成したレイヤーを統合して スマートオブジェクトにするという作業です。
2つ目は生成したレイヤーを複製して取っておくことです。そうすることで、もう一度生成をやり直したい場合でも作業可能になります。
 
5.次に犬の背景を入れ替えてみましょう。 やり方は上記と同様、犬以外の場所を選択して生成をするというやり方です。
今回は「野原」と入力します。
 

 
このように、1.AIで被写体を消す→２.そこに別のものを生成する→3.別の背景を生成する
という段階を踏むことで全ての情報をAIで作成し、 原型をなくすことでオリジナル画像を作ることも可能です。
「この画像の背景だけ変えたい」や、「背景はいいけどメインの被写体が違う」と言う時にとても役立つ機能です。
 

2.AIを活用して画像のディテールを上げる

フォトショップのAI機能には「ディテールを向上」させる機能があります。
こちらはAI機能を使って画像のディテールを表現できるという機能です。 どうしても画像が少し粗い場合にはこちらの機能を使うと便利です。
画像がはっきりと見えるだけでも印象がとても変わります。この機会にぜひお試しください。
 
1.それではまずは選択したところに何かを生成します。今回は「靴」を生成しました。
 

 
このように靴が新たに生成されました。
 

 

 
2.次にこちらの「ディティールを向上」というボタンを押します。
 

 
3.すると画像の細かいところが変化があったことがわかります。
 

 
注意点としては、一定以上の解像度が必要なことです。解像度が足りない時は「このバリエーションは小さすぎるため、向上できません」というエラーが出ます。
こちらが出た際にはカンバスの解像度を変更しましょう。

おわりに

以上がPhotoshopの生成AIの便利な使い方となります。
これらの機能を活用すれば、作業効率も上がり、よりクオリティの高いクリエイティブが作成できます。PhotoshopのAIは「かゆいところに手が届く」　のが大きな特徴となります。制作のヒントとなれば幸いです。
 
DOLではWordPressを使用したサイト制作を多数手がけております。今回ご紹介した内容を実際のプロジェクトで活用したい場合や、さらに詳しいカスタマイズや開発のサポートが必要な場合は、ぜひ「DOLに制作を相談する」ボタンからお問い合わせください。

WordPressはその使いやすさと柔軟性で、多くのWebデザイナーに愛用されているCMSです。特にウィジェット機能は、管理画面から簡単にサイトのデザインや機能をカスタマイズできる便利な機能です。
本記事では、WordPressのウィジェット機能を活用して、管理画面から数字データを更新する方法について解説します。

1.ウィジェット機能とは

ウィジェットは、WordPressのテーマの中で特定のエリアに追加できる小さなブロックで、人気記事の一覧や記事のタグ一覧等を表示することができます。ウィジェットはドラッグ＆ドロップで配置できるため、コードに触れることなくサイトのカスタマイズが可能です。一般的に、サイドバーやフッターに配置されますが、テーマによって配置できるエリアが異なります。
サイドバーやフッターなど、ウィジェットを配置できるエリアを「ウィジェットエリア」といいます。この後説明する方法では、この「ウィジェットエリア」を追加することで、トップページなど任意のページに情報を表示することが可能になります。

2.ウィジェットエリアを追加する

今回は企業の採用ページなどによくある、「数字で見る」のコンテンツを想定し、その数字データをウィジェット機能で更新する方法をご紹介します。また、テーマは「BlankSlate」でご説明します。
 
まずは管理画面からウィジェットを確認します。
外観 > ウィジェットと選択します。
 

 
「サイドバーウィジェットエリア」と「使用停止中のウィジェット」という2つのエリアがあります。それではこちらに新しいウィジェットエリア「拠点数」と「売上」を追加していきましょう。
 
ウィジェットエリアを追加するにはfunctions.phpに以下を記述してください。

// ウィジェットエリアの追加
add_action('widgets_init', function () {
  register_sidebar(array(
    'name' => '拠点数', // 管理画面のウィジェットエリアの名称
    'id' => 'widget_company_num', // ウィジェットエリアの識別名称（出力時にも使用）
    'description' => '拠点数を表示します', // 管理画面のウィジェットエリアの説明文
    'before_widget' => '<span class="custom">', // ウィジェットを囲むdivの開始タグ
    'after_widget' => '</span>', // ウィジェットを囲むdivの終了タグ
    'before_title' => '<h3 class="my-widget-title">', // ウィジェットタイトルを囲むh3の開始タグ
    'after_title' => '</h3>', // ウィジェットタイトルを囲むh3の終了タグ
  ));
  register_sidebar(array(
    'name' => '売上', // 管理画面のウィジェットエリアの名称
    'id' => 'widget_sales', // ウィジェットエリアの識別名称（出力時にも使用）
    'description' => '売上を表示します', // 管理画面のウィジェットエリアの説明文
    'before_widget' => '<span class="custom">', // ウィジェットを囲むdivの開始タグ
    'after_widget' => '</span>', // ウィジェットを囲むdivの終了タグ
    'before_title' => '<h3 class="my-widget-title">', // ウィジェットタイトルを囲むh3の開始タグ
    'after_title' => '</h3>', // ウィジェットタイトルを囲むh3の終了タグ
  ));
});

各パラーメータが何を設定しているのかは、コメントアウトをご参照ください。
‘id’は後ほどテーマファイルの中で使用しますので、わかりやすい名前にしておきましょう。
編集したfunctions.phpをアップロードして、再度管理画面のウィジェットページを確認しましょう。
 

 
「拠点数」と「売上」というウィジェットエリアが追加されます。早速「拠点数」に数字を入力しましょう。
 
拠点数のドロワーメニュー > 「＋」アイコン > カスタムHTMLを選択すると、テキストエリアが表示されるので、任意の数字を入力して「更新」をクリックします。
 

 
売上も同様にカスタムHTMLブロックを追加し、任意の数字を入力して「更新」をクリックします。
最終的に以下のような形になります。
 

 
これで管理画面での作業は完了です。

3.実際にトップページに情報を表示してみる

続いてテンプレートファイル側での作業です。作成したウィジェットは以下の関数で呼び出すことができます。

<?php dynamic_sidebar('ウィジェットのid名'); ?>

今回はindex.phpに以下のように記述します。

<div class="widget-area">
      <p class="widget-area__title">ウィジェットエリアです
      </p>
      <div class="widget-area__container">
        <div class="widget-area__item">
          <p>拠点数<span><?php dynamic_sidebar('widget_company_num'); ?></span>拠点</p>
        </div>
        <div class="widget-area__item">
          <p>売上高：<span><?php dynamic_sidebar('widget_sales'); ?></span>億円</p>
        </div>
      </div>
    </div>

トップページをブラウザで確認します。（スタイルは調整してあります。）
 

 
オレンジ色の文字の部分が、管理画面で入力した数字になります。
このような作りにすることで、企業側は拠点数が増えたり売上が増えた際に、WordPressの管理画面からリアルタイムに更新することが可能になります。

おわりに

今回の記事では、WordPressのウィジェット機能を利用して、管理画面から数字データを更新する方法について解説しました。新たなウィジェットを追加することで、管理画面から簡単に数字データを編集・表示できるようになります。これにより、開発者でなくても手軽にサイトの内容を更新できるようになり、サイト管理の効率が向上します。
 
DOLではWordPressを使用したサイト制作を多数手がけております。今回ご紹介した内容を実際のプロジェクトで活用したい場合や、さらに詳しいカスタマイズや開発のサポートが必要な場合は、ぜひ「DOLに制作を相談する」ボタンからお問い合わせください。

Web制作やソフトウェア開発では、修正作業等で複数のディレクトリ間でのファイル比較を行いたい場面が多々あります。
その際、手作業での比較は煩雑で時間がかかるため、効率化ツールの導入は不可欠です。
そこで今回は、多くの開発現場で使われているエディタ「Visual Studio Code(以下、VSCode)」のプラグインとして利用できる、「Compare Folders」の使い方をご紹介します。
このプラグインを使うことで、ディレクトリの差異を簡単に確認し、作業効率を向上させることができます。

1. Compare Foldersプラグインとは

「Compare Folders」は、2つのディレクトリ間のファイルとフォルダの違いを簡単に比較できるVSCodeの拡張機能です。
このプラグインを使用することで、変更点を視覚的に確認できるため、開発や管理作業の効率を大幅に向上させることができます。

2. プラグインのインストール方法

まずは、VSCodeの拡張機能マーケットプレイスから「Compare Folders」をインストールします。
 
1. VSCodeを起動し、サイドバーの拡張機能アイコン（四角形が四つ並んだアイコン）をクリックします。



2. 検索バーに「Compare Folders」と入力し、表示された結果から「Compare Folders」を選択します。



3. 「Install」ボタンをクリックしてインストールします。
※筆者はインストール済みのため、「Uninstall」ボタンになっています。



インストールが完了すると、プラグインが利用可能になります。

3. フォルダーの比較手順

次に、実際にフォルダを比較する手順を見ていきましょう。

サイドバーにCompare Foldersのアイコンがある場合

1. アイコンをクリックします。



2. 「Click to select folders」をクリックします。



3. ダイアログが表示されるので、比較元のフォルダと、比較先のフォルダを選択して開きます。
 

アイコンが表示されない場合

設定によってはアイコンが表示されない可能性があるので、その場合はコマンドパレットから実行することができます。
 
1. コマンドパレットを開く：Ctrl+Shift+P（MacではCmd+Shift+P）を押してコマンドパレットを開きます。
2. Compare Foldersコマンドを実行：コマンドパレットに「Compare Folders」と入力し、表示される「Compare Folders: Choose 2 folders and compare」コマンドを選択します。



3. フォルダを選択：先程の手順と同様、比較したい2つのフォルダを順番に選択します。

4. 比較結果の見方と活用方法

今回は以下のような2つのフォルダーを用意しました。



・index.htmlとstyle.cssそれぞれに1行ずつ差分があります。
・folder01にしか存在しない画像、folder02にしか存在しない画像がそれぞれ1枚ずつあります。
 
こちらの2つのフォルダを選択すると、エディタ画面の結果は以下のようになります。
 

 
■ DIFFERENCES：2つのフォルダー間で差分のあるファイルが全て表示されます。今回の例では、index.htmlとstyle.cssの差分がそれぞれハイライトされているのがわかります。



■ ONLY IN MY FOLDER：最初に選んだフォルダのみに存在するファイルが表示されます。今回の例では「only_folder01.jpg」が表示されているのがわかります。
 
■ ONLY IN COMPARED FOLDER：2つ目に選んだフォルダのみに存在するファイルが表示されます。今回の例では「only_folder02.jpg」が表示されているのがわかります。
 
これにより、どのファイルが変更されたのか、どの内容が追加・削除されたのかを簡単に把握できます。

おわりに

いかがでしたでしょうか。ファイルやフォルダの差分比較ツールは他にもたくさん存在しますが、「Compare Folders」は、多くの開発現場で使用するVSCodeのプラグインとして手軽に導入できるのも魅力のひとつだと思います。
まだ使ったことがない方は、ぜひ一度試してみて、その便利さを実感してみてください。