【初心者向けに解説!】ホームページ作成で使えるAI活用術

【初心者向けに解説!】ホームページ作成で使えるAI活用術

公開日:2023/09/29
 最終更新日:2023/09/29

近年、AI技術の発展は多くのサービスに影響を及ぼし、技術向上はもちろん自動化に活用されています。
中でも話題になりつつあるのが「生成AI」ではないでしょうか?

今や画像や文章、音声なども自動生成が可能であり、ホームページ自体も例外ではなく自動生成ができつつある時代です。
しかし、自動生成できるといっても使用するにあたり、「権利」や「管理」といった面でまだまだ問題を抱えていることも事実です。

ですが、AIを上手く活用することで作業効率化はもちろん、「考える」時間を大幅に削減することもできます。
今回はホームページ作成におけるAIの活用術を紹介していきます。

手間となっている作業の一部をAIに任せ、効率よくホームページ作成や更新をしていきましょう!

なお、ホームページ作成をご検討なら、Wepageをご検討ください。


01ホームページ作成におけるAIの活用

ホームページ作成におけるAIの活用

まず初めに、AIを使ってホームページを作成するにあたり、どの程度まで可能かを考えます。
ホームページ作成に必要な3つの作業から、どの程度までAIを活用することで作業効率化に繋がるかを見極めたうえで活用していきましょう。

1-1.ホームページ構築とAI

ホームページを構築するうえで必要となる知識にHTMLCSSといったものがあります。
しかし、今やAIを使えば質問にただ回答するかのように欲しいコード自体を自動で書き出してくれるほどの精度になりました。

例えばChatGPTに「お問い合わせフォームを作ってほしい」と質問するだけで簡易的なお問い合わせフォームのコードを書き出し、送信処理の方法から装飾の理想も伝えればそれに合わせたCSSすらも記述してくれます。

「入力から送信までを行う、簡易的なお問い合わせフォームのコードを作ってください」と指定

※「入力から送信までを行う、簡易的なお問い合わせフォームのコードを作ってください」と指定

ウェブデザインに関わる人から見ても、こういったある程度の作業効率化を行えるほどに発展しつつあるのが現実です。

ですが、専門家ではないCMSなどを利用してホームページ作成をしようとしている人からすれば、コードを自動生成してくれるとは言え、それを見て理解し、修正して整えることは非常に困難ではないでしょうか?

仮にホームページ全てをAIで作成したとしても、それを自身で管理していくことはおそらく難しいかと思われます。

そのため、まずは手軽に始めたいという方であれば、知識を必要とする箇所の構築はAI利用から省き、手軽に始められる「CMS」を利用することをおすすめします。
CMSであれば、合わせて運用するにあたって必要となるサーバー準備の問題なども解決可能なため、初心者の方はその他の作業効率化を図っていきましょう。

1-2.ページ構成とAI

ホームページを作成するうえで最も重要なことは、何のために作るかという「目的」です。
その目的に合わせたページ構成、ページ内容、見せ方を考えて作ることが重要となります。

しかし、初心者の方がホームページ作成で陥りやすいことの一つが「何をどう作ればいいのか分からない問題」です。

これは専門的な知識が分からないという話ではなく、目的はあってもそれを「どう見せるべきなのか」、「どういう構成や内容にするべきなのか」というのが見えず迷走し、結果、作成すること自体を諦める、CMSを使って初期作成テンプレートを作ったものの更新せずに放置するという事態が多くみられます。

そんなお悩みの一つを解決するのがAIです。

AIであれば、「●●を目的としたホームページを作成するにあたってのページ構成を提案してください。」と一言聞くだけで最適な回答をくれるうえに、複数案が欲しい場合でもそのように指示すればいくつも案を出してくれます。

「自社の商品販売を目的としたホームページを作成するにあたってのページ構成を提案してください。」と指定

※「自社の商品販売を目的としたホームページを作成するにあたってのページ構成を提案してください。」と指定

社内でのブレストも大切ですが、どんなページを作ればいいのか、どういう見せ方をすればいいのかなどの初期案に迷った担当者の方はぜひ活用してみましょう。

1-3.画像加工とAI

ホームページ作成において意外と準備が大変なのが画像素材です。
商用利用可能な綺麗な画像を使いたい場合、ダウンロード購入にお金がかかってしまうものです。

また、自社の雰囲気を直接見せたいためにプロカメラマンに撮影をお願いする場合でも、概ね数十万円の費用が発生することが多いかと思われます。

そのため、Web制作会社に制作依頼するにしても、費用を削減するために画像素材はご自身で準備することが増えつつあります。
今はスマホや一眼レフさえあれば素人でも気軽に綺麗な写真を準備すること自体は可能なため、さほど難しくもありません。

しかし、写真はあっても、加工ソフトを持っていないことから特定情報の削除や綺麗にするための補正といった「加工面」で問題を抱える方が多くみられます。

そんなときにもAIが解決してくれます。
AIを利用した加工サービスを使えば、写真内の特定情報の削除人物削除消した部分の予測背景補正画像補正などさまざまな加工・修正が可能です。

元画像 右の女性を消す加工をした画像
元画像 右の女性を消す加工をした画像

高額なソフトや知識がなくてもAIを用いることで、手軽に綺麗な写真素材を準備できるため、そういったサービスを上手く活用していきましょう。

1-4.ホームページ作成とAI

上記のことからホームページ作成においては以下のようなAI活用方法が初心者にはおすすめとなります。

  • ホームページ構築 → CMSサービス利用
  • ページ構成 → AIサービス利用
  • 画像加工 → AIサービス利用

AIをフルに使った全自動化状態だと「管理」の面で難航してしまうことが多くなるため、こういった一部だけをAIに任せる半自動化という使い方をすることで大幅な工数削減に繋げることができます。


02AI利用における注意点

AI利用における注意点

AIを使うことで一部の作業を大幅に削減できることは分かったものの、利用にあたり注意しなければならないこともあります。
それは、AIの提案したことが必ずしも正しいとは限らないということです。

AI利用でおすすめした「ページ構成」と「画像加工」の2つの面で説明します。

2-1.ページ構成のAI利用における注意点

AI回答の信頼性の注意点

まず、ページ構成のAI提案ですが、1-2でした質問と同じ内容を新しいチャットを立ちあげたうえでChatGPTに繰り返してみると以下のような結果が得られます。

「自社の商品販売を目的としたホームページを作成するにあたってのページ構成を提案してください。」と指定

※「自社の商品販売を目的としたホームページを作成するにあたってのページ構成を提案してください。」と指定

また少し変えた質問内容をした結果が以下になります。

「自社商品販売を目的としたホームページのページ構成を簡素に提案」と指定

※「自社商品販売を目的としたホームページのページ構成を簡素に提案」と指定

このように、任意の質問内容、質問の仕方、思考回数によってはそれぞれ答えが異なります。

これはAIが質問内容に対して最適な情報を膨大なネット情報や蓄積された情報から検索し提示しているため起こる現象となります。

人であっても一つの事柄に対し十人十色の意見があるため、いい意味で人間らしい回答結果と捉えることもできますが、問題となるのはその情報元になります。
AIを用いたチャットベースのサービスは、その出典元がどこであるか特定不可能なところに問題があります。

例えば、「会社概要ページに載せる自社を紹介する文章」をChatGPTに聞いてみると以下のような回答を得られます。

「会社概要ページに載せる自社を紹介する文章」と指定

※「会社概要ページに載せる自社を紹介する文章」と指定

ChatGPTでは人らしい文章作成が可能なため、これも一見普通に作られた文章のように見えますが、この文章を作るにあたって参考にしたものが必ずあるというのも事実です。
そのため、この文章を一言一句そのまま使用するというのは避けるべきでしょう。

また、AIはあくまでも質問に対して最適な回答・提案をするだけであって、絶対的に正しい情報を提示してくれているというわけではありません。
自分自身で分からない内容があった際、ブラウザで検索し、ネット上の記事を読むことがあるかと思いますが、その記事が100%正しい情報であるとは言えないですよね?

AIの回答内容も同じで、参考にした情報が100%正しい情報とは限らないが、質問内容に対し現時点での「最適」な回答をしたというものなので、それが絶対に正しい情報であり提案であるとは捉えないようにしましょう。

あくまでも「回答・提案」であり、参考にし、自社にあう文章に整えたうえで使用するなど、そのままコピペ利用することはしないよう心がけましょう。

社内外情報流出の危険性の注意点

AIにおけるもう一つの危険性は情報流出です。
例えば、会社案内ページを作るために一部数値情報が必要となったため、社外秘に関わる情報をChatGPTなどに直接入力し情報整理してもらうといった使い方は絶対にしないようにしましょう。

AIは学習させた内容をもとにそういった情報精査も可能なツールの一つではありますが、制限をかけていないとAIに情報を蓄積されてしまう危険性が伴います。

社内外情報流出の危険性の注意点

社内限定で機械学習をさせている独自のAIに対してであれば何の問題もありませんが、ChatGPTなど「誰でも使えるサービス」内でそういった情報を直接入力してしまうとデータとして蓄積されてしまうため、誰でもその情報にアクセスできる状態となってしまいます。

そのため、フリーのサービスで作業効率化を行う際は、自社に直接関わる情報・数値の直接入力はしないようにし、もしする必要がある場合は入力情報の蓄積や二次利用がされない方式を取るよう心がけましょう。

2-2.画像加工のAI利用における注意点

次に画像加工ですが、AIを用いた加工サービスにより高額な加工ソフトを使わなくても難しい加工修正が可能になったことは事実です。

ですが、やはり現状でもまだ限界はあります。
具体的には細かに入り組んだ情報処理自体はまだまだ苦手だということです。

代表的なものとして、人をイラストに変える加工ソフトなどが有名ですが、使用してみると手の指など細かい部分がおかしく見えることが分かるでしょうか?

元画像 AIイラスト画像
元画像 AIイラスト画像

背景がある人物画像加工なども、外の風景などであればさほど気にならないものの、入り組んだ街並みなどを加工修正しようとすると加工した部分が目立ってしまいます。

元画像 人物を消した外風景画像
元画像 人物を消した外風景画像
元画像 人物を消した外風景画像
元画像 家族以外の人物を消した加工画像

このように加工しても綺麗に仕上がる例もあれば、よく見ると加工した跡などが残り、少し違和感がある仕上がりになるなど、まだ難しい部分もあるのが現状です。
そのため、AI加工ソフトを使用した際は、見栄えに問題がないかをしっかりと確認したうえで素材として使用するか検討するようにしましょう。

また、ChatGPTのプラグインGPT-4などで可能となっているAIに指示することで自動生成をしてもらった画像素材を使用するのも極力避けましょう。

AIを使えば、文章同様、写真素材も自動生成してくれるサービスもありますが、その写真素材の生成元となった画像の著作権や肖像権といった権利面での問題が発生し兼ねない場合もあるため、商用利用の際は十分注意してから使用しましょう。


03ホームページ作成に使えるAIツール

ホームページ作成に使えるAIツール

昨今多くのAIを利用したサービスが登場し、その代表格がChatGPTです。
ですがそのほかのAIツール、生成AIなど役立つサービスはいくつもあるため、ページ構成に役立つもの、画像加工に役立つものをそれぞれ一部ご紹介いたします。

3-1.ページ構成提案に役立つAIツール

ChatGPT

ChatGPT

ChatGPTはOpenAIが開発したAIモデルで、テキストベースの会話から様々なタスク対応が可能なサービスです。
「人間のように対話を行うAI」というのが特徴的で、質問応答はもちろん、情報提供、アドバイス、クリエイティブな文章・画像生成など、幅広く対応が可能です。

また、質問内容次第で幅広い情報を提供し、議論や意見交換といったことも可能であり、言葉遣いやトーンを調整することで、特定のコミュニケーションスタイルに合わせて対話もできることから、10年登場が早い技術とまで言われています。

無料で利用できるGPT-3.5では知識のカットオフとして2021年9月までのデータ内での回答しかできないものの、プラグインであるGPT-4(有料版)を使うことで最新のデータ蓄積をもとにより高度な文章生成や質問応答なども可能となります。

ただし、前述通り、現時点ではあくまでテキストベースの情報提供や対話を行うことのみが主であり、情報自体の信頼性や情報蓄積への配慮が必要となります。

また、初期の状態では情報蓄積が許可の状態となっているため、社内情報など特定情報の整理をするために使用する際は機能制限をすることでチャット履歴の保存の拒否、学習に使用されない状態にすることも可能です。

BingAI

BingAI

BingAIは、Microsoftが開発した人工知能技術の一つで、ウェブ検索エンジンのBing内で機能の一つとして使用ができます。

より効果的な検索結果を提供するための補助を目的としており、ユーザーの検索クエリを理解し、それに最も関連する情報を提供するために、自然言語処理、機械学習、ディープラーニングなどの高度なAI技術を活用しています。

そのためBingAIは、検索結果の精度と関連性を向上させる目的で使用するだけでなく、必要に応じた情報に対する適切な回答を得られるとともに、画像認識も可能なため、ある程度の画像生成、画像加工も可能なツールの一つとなっています。

ただし、無料で利用できるサービスな反面、機能制限もあり、Microsoftアカウントにログインしないまま利用すると、1セッションにつき5回の制限があります。

ですが、ログイン状態であれば1セッションにつき30回まで利用可能かつ1日当たりのチャット回数上限も300回なため、そこまで気にする必要はありません。
(※1セッション=一つの話題)

Bard

Bard

BardはGoogle AIの最新会話型AIサービスとなります。
Googleの「LaMDA」という言語モデルを活用して開発されており、一般のユーザーでも簡単に利用ができるAIチャットボットです。

基本的な機能自体はChatGPTと似ていますが、Bardでは客観的な事実に基づく短い質問への対応や、複雑なテーマについても多角的な視点を持って応答を行うため、クリエイティブなコンテンツの生成・提案という点ではこちらの方がよりよい回答が得られる可能性があります。

その代わり、会話形式ではなく回答という対応をされるため、疑似ブレストなどを行いたいなどの場合であればChatGPTに分があるかと思われます。

しかし、Googleというビックデータの蓄積をもとにしたAIでもあるため、求める回答検索においては最も適切な回答を得られる可能性が高いサービスでもあります。

AIOne

AIOne

「AIOne」は、個人・法人ともに利用可能なPC・スマホ対応のクラウドAIプラットフォームで、制限はあるものの無料でAIを体験することが可能なサービスとなります。

上記でも紹介しているAIチャットの「ChatGPT(GPT-3.5)」、「GPT-4」、「Bard(PaLM2)」などに加え、後述で紹介する画像生成AIの「Stable Diffusion」など幅広く体験可能です。

日本人が好みやすいシンプルなUIで非常に見やすく、登録自体も簡単にできるため、とりあえずいろいろなAIを試してみたという方には非常におすすめです。

3-2.画像加工・生成に役立つAIツール

Canva AI

Canva AI

Canvaは画像の作成・加工ができるサービスの一つで、デザイナーが持つソフトでできるような高度な加工技術を手軽に体験することが可能となっています。

一番の魅力としては、手動で画像内の修正箇所を指定しなくてもAIが写真から対象物と背景を判定し、それぞれに別々の加工を施すことができる点です。

また、Canva内のテンプレートをそのまま使用すること以外は商用利用も認められており、無料または有料のテンプレートを使用して、ソーシャルメディアへの投稿やブログのヘッダー、プレゼンテーション、ポスター、フライヤー、ビジネスカードなど、さまざまなデザインを作成できます。

これらのテンプレートは、色、フォント、画像などを変更、カスタマイズすることも可能です。

その他の強みとしてはその使いやすさで、ドラッグアンドドロップのインターフェースで直感的操作が可能となっており、ユーザー側にとっては非常に使用難易度も低いです。
スマホアプリ版でも利用可能な点も使いやすさの一つです。

また、AI画像ジェネレーターという機能もあり、キーワードを入力するだけのAI画像生成にも対応しています。

ただし、背景透過など主要な加工を行いたい場合は30日間無料体験の申込+有償化事前申込が必要なため、無料版を使い続けたい方はある程度機能が制限されます。

Picsart

Picsart

PicsArtは、画像の作成・加工・生成など多種多様なことが行える総合的なクリエイティブツールの一つとなります。
こちらもPC版だけでなくスマホアプリ版もあり、手軽に加工が行える点が魅力の一つです。

写真や動画の編集、コラージュ作成、ドローイング、特殊エフェクトなどの機能を手軽に利用でき、またAI機能がかなり充実しており、AI画像生成はもちろん、対象物を背景から消すなどの画像編集が初心者でも可能となります。

有償版にする必要はあるものの、テキストフォントを自分で追加することも可能で、フリーでダウンロードできる日本人向けフォントなどを使用できる点も高額ソフトと並ぶ機能幅かと思います。

ただし、使用して慣れてしまえば問題はありませんが、いろいろできるからこそ画面内容と機能把握に時間がかかるようなUIデザインである点が初心者には難点となるかもしれません。

Luminar AI

Luminar AI

Luminar は、画像編集にAI技術を導入することで注目を集めているサービスの一つで、主に画像加工特化のサービスとなります。

Luminarでは美肌効果を適用したり、空の雰囲気変更、オブジェクトの削除、疑似追加など、多くの自動調整機能を使用したりすることができ、ほかの加工サービスに比べて最もデザイナーが使用するような高額ソフトと遜色ないレベルの加工が可能となっております。

現時点では、期間限定で製品版の無料配布があるため試すことも可能ですが、基本的には月額・年額制サービスとなっております。

サービス内容として、ダウンロードタイプの加工「ソフト」となるため、Adobe製品とよく比較されるケースがありますが、こちらの方が買い切りの永久ライセンスがあるということから、長期間使用する場合には選択肢の一つとして検討してよいかと思います。
加工レベルに関してもどちらも同程度の加工が可能となっております。

撮った写真をもうワンランク上のクオリティに仕上げて使用したい方にはおすすめのサービスです。

Photoshop

Photoshop

Photoshopは個人からプロの現場まで使用されている画像加工ソフトの定番であり、Adobeが提供するサービスの一つです。

AI機能実装以前から加工といえばこれというソフトの一つであり、高画質を維持したままの加工においては他のサービスより優れていることや、はじめは多くの機能に戸惑うものの、使用していけばいくほど「便利」の一言に尽きるUIデザインをしているのも特徴です。

そんなPhotoshopにも2023年の5月にアップデートでAIを利用したジェネレーティブ塗りつぶしという機能が追加されました。
これにより、今まで他の無料AIサービスでは可能となっていた部分的な削除と疑似生成が可能となりました。

ですが、Photoshop自体無料版はなく、基本有料サービスとなっているため、無料で試したいという方は、他の無料サービスで加工を試したうえでより高クオリティを求める場合に使用検討するのがよいかと思われます。

プロの現場で最も使用されているソフトのため、実用性が高いのは魅力の一つです。


04ホームページ制作のことならWepage

Wepage

ホームページ構築のためのホームページ作成CMSをご検討であれば、ぜひ当社の提供するWepageもご検討ください。

Wepageは難しい専門知識が不要で簡単に操作、ホームページが作成できるホームページ作成サービスです。
スマートフォンでの操作にも対応しておりますので、お出掛け先や移動中など、隙間時間で簡単にホームページを更新していただけます。
リアルタイムにホームページを更新し情報発信をすることで、お客様によりアピールできます。

また、ご自身でホームページを作成・更新する時間がないという方には、システムの提供だけではなくプロスタッフによるホームページ制作も承っています。

公開後、運用中の更新作業についても、追加料金なくサポートセンターに作業を依頼できるプランもございますので、社内リソースの確保が難しい場合には、ぜひご相談ください。

Wepageでは無料プランをご用意しておりますので、まずはお気軽にご利用ください!


05まとめ

今回ホームページ作成に役立つAIサービスのみをピックアップしてご紹介しましたが、昨今は続々と新しいAIツールが登場しております。

特にイラストや音声などに特化したAI生成サービスの精度は、年々プロデザイナーが脅威に感じるレベルにまで到達しています。

ですが一方で、リアルな人物を含んだ画像の生成や背景から物体を削除する加工AIに関してはまだまだ精度があまい部分もあるのが現状です。

しかし、初心者でもできることの幅が年々広がっていることは確かです。
部分的にはプロや専門のサービスに頼らざるを得ないのが現状ですが、できると思った範囲内で、楽をするための上手いAI活用をしてホームページ作成をしていきましょう。


関連記事



― Let's Share! ―