1. HOME
  2. ホームページ制作
  3. ホームページ関連コラム
  4. HP作成でAIを活用するならどのようなことに使うことができるのか?
ホームページ関連コラム

HP作成でAIを活用するならどのようなことに使うことができるのか?

パソコン、スマートフォンにもAIを搭載してという話がちらほら出て来ている2024年の状態です。じゃあ、HP作成でAIをどのように活用していくことができるのかちょっと考えていきたいと思います。

HP作成するにあたってもAIと人間と組み合わせたほうが効率的にも良いものが作成されるかと思います。

HP作成においてAIを活用する方法はいくつか存在します。まず、デザインの面でAIを用いることが可能です。自動的にロゴやテンプレートを生成し、選択した条件に応じた最適なデザインを提案してくれるツールが存在します。

また、文章の作成にもAIが活躍します。コンテンツの最適化を図るために、キーワード選定や文章の構成をサポートするツールがあります。さらに、一部のAIは自動的にSEO対策が施されたテキストを生成する機能も持ち合わせています。

  • デザイン面での活用
  • ロゴやテンプレートの自動生成
  • 条件に応じたデザイン提案
  • 文章作成面での活用
  • キーワード選定
  • 文章構成サポート
  • SEO対策済みテキストの生成

という風にHP作成において利用可能だと生成AIの回答でした。

 

さっそくですが生成AIでロゴ的なものを作りたいので「ホームページ用ロゴを作りたい」「ホームページ作成東京」「HP作成」「スタイリッシュ」「IT企業」と入力して生成してみたところ以下のようになりました。

私の入力がいまいちよくないのでしょうか?HP作成のイメージってこんな感じでしょうか。。。

ちょっと日本というよりは海外の画風イメージになりました。

今度は、ホームページを作成していてわからないことをAIに聞いてみたいと思います。

「「CSS」で太字にしたい」とシンプルに聞いてみました。

 

CSSで文字を太字にするには、font-weightプロパティを使用します。このプロパティには、以下の2つの方法で値を指定できます。

1. キーワードで指定

  • bold: 最も太字のスタイルを指定します。
  • normal: 通常の太さのスタイルを指定します。
  • lighter: 通常の太さよりも1段階細いスタイルを指定します。
  • bolder: 通常の太さよりも1段階太いスタイルを指定します。

 

CSS
p {
  font-weight: bold;
}

こんな風に実際のコードを教えてくれました。これを更に色を指定したいと思います。

「上記のコードで文字の色をスカイブルーにしたい」と入力すると…

 

CSS
p {
  font-weight: bold;
  color: skyblue;
}

こんな風に答えてくれました。HP作成者にとっては、ちょっとした参考書的に使えそうですね。

ではさらに「上記のコードで見出し1に変更して、文字枠をつけて目立つようにしたい。サンプルを5個作成して」ということもできます。

ただ、実際のサンプルは見せてくれないなどあるのである程度知識を持った人が使うのには便利なツールかと思います。

HP作成においては、部分的に利用できるがある程度以上は、知識がある人が対応しないと違う方向性になったり、思ったものと違う結果がでたりとなかなか使い方が難しいところです。

使っていけば大したことはないのでしょうから、活用していけばよいかと思います。

実際にWordPressのコード類を記述するときに参考に利用しております。