Webサイトに画像をアップロードする際には、必ず軽量化を行いましょう。

そのままのサイズでアップロードすると、さまざまな問題が発生する可能性があります。

画像を軽量化しないとどうなる？

最近では、WordPressなどのCMSを使って簡単に画像をアップロードできるようになりました。

しかし、スマホで撮った写真をそのままアップしてしまうと、以下のような問題が発生します。

• ページの表示速度が遅くなる → ユーザーがページの読み込みを待てずに離脱する可能性が高くなる
• サーバーの容量を圧迫する → アップロードできる画像の数に制限が出る
• バックアップが取れなくなる → 容量が大きすぎてバックアップ作成時にエラーが発生することも

このような問題を防ぐために、画像の軽量化を行いましょう。

画像軽量化の目安

理想的な画像のサイズは 50KB以下 です。

大きくても 100KB以下 に抑えるのが望ましいでしょう。

画像を軽量化する方法

画像の軽量化にはいくつかの方法がありますが、ここでは Squoosh という無料のWebツールを使った方法を紹介します。

Squooshの使い方

1. Squooshのサイト（https://squoosh.app/）にアクセス
2. 画像をドラッグ＆ドロップ するか、「Select an image」ボタンをクリックして画像を選択
3. 画面右側の「Compress」メニューで WebP 形式を選択
4. 「Quality（クオリティ）」のスライダーを調整し、50KB前後 に収まるように設定
5. 圧縮後のサイズを確認し、問題なければ ダウンロード
6. WordPressの管理画面から メディアライブラリにアップロード

これで、Webサイトに最適化された軽量な画像をアップロードできます。

もっと簡単に軽量化したい場合

Squooshの操作が面倒な場合は、TinyPNG（https://tinypng.com/） というWebサービスを利用するのも手です。

1. TinyPNGのサイトにアクセス
2. 画像をドラッグ＆ドロップする
3. 圧縮が完了したらダウンロード

ただし、TinyPNGはSquooshほど細かい調整はできません。

そのため、完璧に軽量化できるわけではありませんが、何もしないよりはやった方がいいです。

まとめ

Webサイトに画像をアップロードする際は、必ず軽量化を行いましょう。

Squooshを使えば、簡単にWebP形式に変換して、50KB以下のサイズに調整できます。

どうしても手間をかけたくない場合は、TinyPNGを利用するのもアリです。

サイトの表示速度向上やサーバー負担の軽減のために、ぜひ画像の軽量化を習慣にしましょう！

あの有名企業がサイバー攻撃された、というニュースをよく見かけるようになりました。

そもそもサイバー攻撃って何？

どう対策すればいいの？

ということをこの記事で初心者向けにわかりやすく解説します！

サイバー攻撃とは？

サイバー攻撃の定義

サイバー攻撃とは、インターネットやコンピュータを使って、他人の情報を盗んだり、システムを壊したりする行為のことです。

たとえば、誰かが勝手にあなたのSNSアカウントに入ったり、大事なファイルを消してしまったりするのもサイバー攻撃の一種です。

サイバー攻撃の種類

サイバー攻撃にはいろいろな種類があります。

代表的なものをいくつか紹介します。

マルウェア

マルウェアは「Malicious Software（悪意のあるソフトウェア）」の略で、PCやスマホに悪影響を及ぼすすべての有害なプログラムの総称です。

フィッシング

本物そっくりの偽メールやサイトを使って、パスワードやクレジットカードなどの情報をだまし取る方法です。

DDoS攻撃

Distributed Denial of Service（分散型サービス拒否）の略。

サーバーに大量のアクセスを送りつけて、サービスを使えなくする攻撃です。

サイバー攻撃が起こる理由

個人情報の盗難

多くのサイバー攻撃は、名前や住所、電話番号、クレジットカードなど、個人情報を盗むことが目的です。

これらの情報は、悪い人たちが売買したり、不正に使ったりします。

金銭的利益

お金を狙ったサイバー攻撃も非常に多いです。

たとえば、ランサムウェアという攻撃では、パソコンをロックして解除するためのお金を要求されることがあります。

政治的な目的

一部のサイバー攻撃は、国や組織に圧力をかけたり、メッセージを広めるために行われます。

たとえば、選挙に影響を与えたり、重要なインフラを狙ったりすることがあります。

サイバー攻撃から身を守るための対策

パスワードの管理

安全なパスワードを作ることが重要です。

• 長くて複雑なパスワードを使う（たとえば「Abc123!@#」など）
• 同じパスワードを複数のサイトで使わない
• 定期的にパスワードを変更する

二要素認証を設定する

二要素認証（2FA）は、アカウントのセキュリティを強化するために、2つの異なる認証要素を使用してログインする方法です。

例えば、パスワードでログインした後にSMSで送られた認証コードの入力が求められるものです。

ソフトウェアの更新

スマホやパソコンのソフトウェアを最新の状態に保ちましょう。

新しい更新は、セキュリティ上の弱点を直してくれます。

不審なリンクやメールに注意

怪しいメールやリンクは開かないようにしましょう。

• 見知らぬ送信者からのメールは無視する
• 本物に見えても、メール内のリンクをクリックしない

サイトやサーバーのセキュリティ設定をする

サイトを運営している方は、サイトやサーバーのセキュリティ設定を確認しておくことをお勧めします。

サイトがWordPressの場合は、WordFenceなど無料でも十分優れたセキュリティのプラグインがあります。

レンタルサーバーは、ファイアウォールなどセキュリティの設定ができるものもあります。

まとめ

サイバー攻撃はインターネットやコンピュータを使って、他人の情報を盗んだり、システムを壊したりする行為のこと。

大手有名企業から個人まで、攻撃対象は様々。

怪しいリンクをタップしたりしないように注意しましょう。

パスワードの定期的な更新も忘れずに。

弊社では、誠に勝手ながら下記の期間を年末年始休業とさせていただきます。

12月28日(土)～来年1月5日(日)

この期間中のお問い合わせにつきましては、休み明け1月6日（月）以降のご連絡となります。
ご不便をおかけいたしますが、何卒ご理解、ご了承のほどよろしくお願いします。

「せっかくWEBサイトを作ったのに、全然アクセスがない…」

「問い合わせが来ない…」

そんな悩みを抱える方は少なくありません。

実はWEBサイトをただ作るだけでは不十分で、アクセスを増やすために「見てもらえる仕組み」が必要になります。

その、見てもらえる仕組みこそが「デジタルマーケティング」です。

本記事ではデジタルマーケティングの基本、そして具体的に何をすればいいのか、わかりやすく解説します！

デジタルマーケティングとは

デジタルマーケティングとは何？

デジタルマーケティングとは、インターネットを使ってお店やサービス・商品を多くの人に知ってもらう方法のことです。

わかりやすく言うと、「人がよくいる場所（＝インターネット）でお店をPRする」ことです。

スマホやPCを使って、お店の宣伝や商品の売り込みをするイメージですね。

デジタルマーケティングのやり方はたくさんありますが、主にはSNSや動画サイト、WEBサイトなどを通して商品の宣伝・売り込みをする方法があります。

今までのマーケティングと何が違う？

デジタルマーケティングと従来のマーケティングの特徴を比較表にしてまとめてみました。

従来のマーケティングはテレビ、ラジオ、新聞、雑誌、チラシ、看板など、紙や放送を使った方法がメインでした。

従来のマーケティングに比べて、デジタルマーケティングは興味がある人にピンポイントで広告を出すことができて、クリック数で正確なデータを取得可能、少ない予算から始めることができます。

デジタルマーケティングの主な手法一覧

ここからはわかりやすいように、とある美容室（ヘアサロン）がデジタルマーケティングの施策を行うものとして、その具体例を挙げていきます。

日本国内においてコンビニの４倍以上もある美容室。

競合が非常に多い中で売り上げを伸ばしていくためにデジタルマーケティングは必須の業界ですね。

ではさっそく、美容室がデジタルマーケティングを行う場合の具体的なやり方を見ていきましょう。

Webサイトのユーザビリティ向上

ユーザビリティとは、「ユーザーにとっての使いやすさ」です。

例えば問い合わせフォームの項目が多いと、ユーザーにとっては手間がかかって面倒なので送信をためらってしまいますよね。

ユーザーにとって使い勝手の悪いWebサイトになっていないか、見直してみましょう。

Webサイトのライティング

ユーザー目線でWebサイトの文章を見直してみましょう。

購買意欲の増加につながるような内容になっているでしょうか？

売り込みの文章もストーリーがあるものが好まれやすいです。

また、口コミやお客様の声を掲載することで、ユーザーからの信頼性の向上・不安の解消が期待できるので、可能ならアンケートを取れるようにしてみましょう。

SEO（検索エンジン最適化）

ユーザーがGoogleなどで検索した際に、Webサイトが上位に表示されるよう最適化する手法です。

Webサイト内のキーワード選定や質の高いコンテンツ制作が重要です。

コンテンツマーケティング

役立つ記事や動画を通じて顧客との信頼関係を築き、ブランドを認知させる手法です。

ブログ、電子書籍、YouTubeなどが代表例です。

SNSマーケティング

InstagramやX(Twitter)などのSNSを活用して、ターゲット層とのコミュニケーションを深める手法です。

拡散力が強く、低予算でも高い効果を期待できます。

リスティング広告・ディスプレイ広告

リスティング広告とは、Googleなどの検索結果で一番上によく出てくるわずらわしいあれです。

ディスプレイ広告も同様に、Webサイトの一部に出てくる広告のことです。

特定のキーワードや興味関心に合わせたターゲティングが可能です。

メールマーケティング

顧客リストを活用して、個別に最適化したメールを配信する方法です。

個別対応が可能でコストが低く、再購入促進に有効です。

成功するデジタルマーケティングのための準備

ここまでデジタルマーケティングの手法を紹介してきましたが、これらを成功する確率を上げるために、

誰に届けるか？
競合とどう差別化するか？
何を目標とするか？

など、現状を分析して戦略を立てる準備が必要になります。

ここからはデジタルマーケティングを成功させるための準備として、具体的に何をすればいいのか見ていきましょう。

ターゲット設定

デジタルマーケティングで、「誰に」「何を」伝えたいかを明確にしておきましょう。

お客様になるのはどんな人なのか？

年齢、職業、住所、何に興味があるのか、何に悩んでいるのか、などお客様のリアルな人物像をイメージします。

実際にはもう少し具体的な人物像を洗い出した方が良さそうですが、これだけでも十分マーケティングに役立てられそうです。

YouTubeやInstagramに、似合わせカットやパーソナルカラー診断を用いた髪色の提案、簡単にできるヘアケアなどのコンテンツを日々アップする、といった対策を考えることができます。

競合分析

競合になる商品やサービスなどを調べて、差別化できるポイントを洗い出してみましょう。

競合と差別化できるポイントをわかりやすくするためには、SWOT分析が便利です。

SWOT分析とは、企業の内部環境と外部環境を「強み(Strength)」「弱み(Weakness)」「機会(Opportunity)」「脅威(Threat)」の4つの要素で分析するマーケティングの手法です。

この場合、競合は近隣に出店予定の大型チェーン店と、すでに飽和状態の他店の美容室ということになります。

周辺にオフィス街開発の機会があるので、平日仕事帰りの時間帯にヘアカットの割引をする、

大型チェーン店や他店にはない、似合わせカットなど経験豊富なスタイリストにしかできない提案をする、などといった差別化を考えることができます。

目標の設定

目標を上手に設定するコツは、「SMART」という考え方を使うことです。

• S（Specific）：具体的
• M（Measurable）：数字で測れる
• A（Achievable）：達成できそう
• R（Relevant）：目標に関係している
• T（Time-bound）：期限がある

では、SMARTを活用した美容室の場合のKPIの例を見てみましょう。

また、Webサイトでこのような目標を立てたい場合は、具体的な数字で測定ができるようにGoogleアナリティクスやGoogleサーチコンソールなどの分析ツールを入れておきましょう。

結果の測定と改善サイクル（PDCA）

目標を立てられたらPDCAを回しましょう。

PDCAとは「Plan-Do-Check-Act」の略で、物事を改善するためのサイクルです。

まとめ

デジタルマーケティングとは、WebサイトやSNSなど、インターネット上でお店の宣伝や商品の売り込みをすること。

競合と差別化できるポイントを見つけ、測定可能な目標を立てて実行していきましょう。

ChatGPTが爆誕してから、それに続くように凄まじい勢いでいろんな種類のAIが登場しました。

作曲するAI、動画を作るAI、画像を作るAI…。

そしてついにWordPressサイトを作るAIまで登場したようです。

その名も10Web。

やばい。

WEBサイト制作会社でWordPressサイト作りまくってる私。

この10Webは私をクビにしても問題ないほどクオリティーの高いWordPressサイトを作れるのでしょうか？

いろんな意味で自分で自分の首を絞めることになりそうだけど、10Webの実力を検証してみましょう！

10Webとは

10WebとはAIを活用したWEBサイトを作成するサービスです。

WordPressにも対応しています。

いくつかの質問に答えていくだけで、簡単にWEBサイトが作れてしまうそうです。

まじ？

WordPressとは

WordPressとは、ノーコードで初心者でも簡単にWEBサイトが作れる便利なツールです。

このようなWEBサイトを簡単に作るツールのことをCMSといいます。

現在、CMSは数多く存在していますが、その中でも世界で最も使われているCMSが、このWordPressです。

WordPressを使えば簡単にWEBサイトを作れるものの、デザインを大きく変えたり機能をいじったりするのは初心者だとかなり難しいかなあ…という印象です。

それで私のようなWordPressをちょっといじれるような奴が、こうしてお仕事をいただけている訳ですが…
10Webの登場で、それももうすぐ終わるのか…？

10Webの使い方

ではさっそく、私のクビをチラつかせている10Webを使ってみましょう！

まずは10Web公式サイトにアクセスします。

【10Web公式】
https://10web.io/

サイト右上のGet Started for Freeというボタンをクリック。

すると、３つの選択肢が出てきますが今回は私のクビがかかってるんで、その下に小さく書いてある、

Or Install a blank WordPress Websites
（もしくは空のWordPressサイトをインストールする）

をクリックします。

Googleアカウントもしくは新規メールアドレス登録でログインしましょう。

ちょっと英語何言ってるかわからないので、ここからは日本語に翻訳したページのスクショ載せていきますね。

ここからは質問に答えていきます。

場所は、日本がないのでデフォルトのままにします。

サイトタイトルを適当に入力し、ドメインはいいえをクリック。
（ドメインとは、WEBサイトを公開するために必ず必要なもので、お名前.comなどで購入できます。）

もちろん、すでにドメインをお持ちの方ははいをクリックしても構いません。

いいえをクリックするとドメイン名が求められますので、こちらも適当に入力し、ウェブサイトを作成ボタンをクリックします。

サイトのインストールが始まるので、読み込みせずに神妙な面持ちで待ちましょう。

数分待つとサイトのインストールが完了しました。

デフォルトでサイトはロックされているようなので、念の為ユーザー名とパスワードをコピーしておきましょう。

左側メニューのAIビルダーをクリックし、AIで生成ボタンをクリック。

先ほど同様に、いくつかの質問に答えていきます。

私の場合は、カフェのサイトを作ることにしました。

ドメインは先ほど同様いいえ、を選択しておきます。

こちらも回答が終わってからほんの数分でサイトが完成しました。

出来上がったサイトがこちら。
https://pleased-wren.10web.me

やばい。すごい。

ちゃんとスクロールアニメーションもあるし、レスポンシブ対応で、配色やレイアウトもいい感じ。

奇抜なデザインとかもちゃんとできるのか気になるとこだけど、一般的なWEBサイトが欲しいなら、これでなんも問題なさそう…。

とはいえ、デフォルトでは英語になっちゃいますし、ページを編集したい場合はサブスク形式で金取られるようですね。

まとめ

10WebはWordPressに特化した、AIによってWEBサイトを簡単に作ることができるサービス。

現時点では日本語に対応してはいないものの、それなりにクオリティーの高いWEBサイトを作ることができました。

おまけ

さて、問題は10Webの登場により、私をクビにできるのかどうかですが…うーん、まだ微妙ですね…。

10Webの管理画面、思ってた以上に複雑だったから、普通にWordPress編集した方が良くない…？

その方が金かからないよ…？

といった印象でした。

特にデザインとかこだわりなければ、今はWordPressと無料のテーマで十分ちゃんとしたWEBサイトを作ることができます。

もっとデザインにこだわりたい、という方にとっては10Webでもちょっと物足りないかも？

ということで現時点ではまだWEBデザイナーやコーダーの需要は落ちそうにないし、私のちぎれかけたクビも繋がりそうです。

とはいえ、ここからもっと10Webも進化していくことでしょうから、あくまで現時点の話。

これが私の最後のブログになる…かも…？

AIのGoogle検索関連キーワードで、音楽生成AIのSunoが急激増加で１位になっていました。

Sunoって何？

なんでそんなに注目されてるの？？

と気になったので、さっそくSunoを調べてみました！

Sunoは簡単に作曲できちゃう音楽生成AI

Sunoはアメリカの開発会社Suno Incが開発した音楽生成AIです。

テキスト入力だけで歌詞・メロディー・楽器演奏を含む楽曲を生成できて、日本語にも対応しています。

無料プランでは商用利用不可・WAV形式保存不可などの制限はありますが、１日１０曲まで生成することが可能です。

生成した楽曲の品質は、プロの音楽家も高く評価するほどで、注目が高まっているのだそうです。

ほんまかいな？

と思ったのでさっそくこのSuno AIとやらを使ってみることにしました。

Sunoの使い方

まずはSuno AI公式サイトへ移動します。

【Suno公式】
https://suno.com

上部のフォームに、適当に生成してほしい楽曲のプロンプトをテキスト入力します。

私は「焼肉の歌」と入力しました。

プロンプトを入力したらフォーム右部分にあるCreate a Songと書かれたボタンをクリックしましょう。

ログインを求められるので、お好きなアカウントでログインしましょう。

ログインできたら楽曲が生成されます。

「焼肉の歌」を２パターン生成してくれました。

どちらも歌詞付きでJポップ感ある。

元気な感じのポップソングと、なぜかバラード寄りのしっとりした楽曲も用意してくれました。

おまけにジャケ写までつけてくれてる。

焼肉の歌(元気バージョン)
https://suno.com/song/f0c82600-43b7-4469-a159-914916b716f3

焼肉の歌(しっとりバージョン)
https://suno.com/song/16b497c2-32bf-4893-a86b-eda2fa9f364c

カスタムモードの使い方

さて、この「焼肉の歌」、最初に入力したテキストプロンプトを変えてもいいですが、もっと細かくカスタマイズすることもできます。

カスタマイズのプロンプトも他のテキスト型AIにお願いすれば簡単にできます。

まずはSuno AIのカスタムモードをONにしましょう。

すると、いくつかの入力欄が新たに表示されます。

Lyricsというところにオリジナルの歌詞を入力してみましょう。

私はChat GPTに以下のプロンプトを入力して「焼肉の歌」の歌詞を作成してもらいました。

Suno AIのカスタムモードのLyricsに貼り付ける、以下タイトルのオリジナルソングの歌詞を作成してください
##タイトル
焼肉の歌

完成した歌詞をLyricsに貼り付けます。

次にLyricsの下にあるStyle of Musicに作成してほしい楽曲のジャンル、構成、雰囲気などを入力します。

私の場合はこちらもChat GPTに以下のプロンプトを入力して作成してもらいました。

Suno AIのカスタムモードのStyle of Musicに入力するプロンプトを120文字以内で作成してください

まだ文字数制限付きの回答はChat GPTも苦手なようで、大体文字数オーバーするケースも多いですが、適当に削ってStyle of Musicに貼り付けます。

次に、タイトルを入力して、Createボタンをクリックすれば曲が生成されます。

すると、また２パターンの楽曲を生成してくれました。

焼肉の歌2 パターン1
https://suno.com/song/806a7f20-70ec-43a1-98a7-a0f7ed65a353

焼肉の歌2 パターン2
https://suno.com/song/c6ce89ae-03f2-4f09-841b-2382cb02e5b9

すごい、カスタムモードの方が楽曲のクオリティが上がっていますね。

歌詞はちゃんと歌いきれていないものの、プロンプト通りにアップテンポでキャッチーなJポップに仕上げてくれています。

特にパターン２はギターのリフも結構かっこいいし、裏打ちのビートでおしゃれな雰囲気も出てて、なんも頭使ってないのにここまでの曲ができちゃうんかと、びっくりしました。

多少不自然なところはあるけれど、それでもだいぶ完成度の高い曲が簡単にすぐ作れてしまいました！

これはもはや人類皆作曲家時代！？
すごい時代が来てしまいましたね。

まとめ

音楽生成AI「Suno」で作曲してみたら、簡単に無料ですぐに完成度の高い曲が作れてしまいました。

カスタムモードでさらにクオリティの高い楽曲が生成できました。

別のテキスト型AIにプロンプトを生成してもらえば、カスタムモードも簡単に利用できます。

最近はSNSでAIが生成した動画をよく見かけるようになりました。

その中でも動きが自然でクオリティーが高くてビックリしたのが、Hailuo AIという動画生成AIで作成された動画たち。

Hailuo AIって一体何！？

と気になったのでさっそく調べてみました。

Hailuo AIは中国発の動画生成AI

Hailuo AI（ハイルオAI）は、中国のAI企業MiniMaxが開発した革新的な動画生成AIツールです。

テキストから動画を生成することが可能でしたが、新たにImage-to-Video機能というものが追加されたことにより静止画から動画を生成することも可能になりました。

動きが自然な高品質な動画を短時間で簡単に生成できて、なおかつ無料で利用できるということでSNSを中心に話題になっています。

すごい時代になったわい。

Hailuo AIの使い方

ではさっそく、Hailuo AIを使ってみましょう！

まずは公式HPにアクセスします。

【Hailuo AI】
https://hailuoai.video/

まずはテキストから動画を生成してみます。

フォームに生成する動画のプロンプトを入力し、貝殻の絵文字があるボタンをクリックします。

すると、サインインが求められますのでGoogleアカウントでログインしましょう。

フォームに生成したい動画のプロンプトが入力されているのを確認できたら、再度貝殻の絵文字があるボタンをクリックしましょう。

すると、動画が生成されるのでしばらく待ちましょう。

「お昼寝する猫ちゃん」のプロンプトでたった５分で６秒の動画が生成されました！

速すぎ…！！
動きもめちゃめちゃ自然だし…！

SORA使ったときはたしか同じような動画で２０分はかかってたと思います。

これはみんな使う訳だわ。

Hailuo AIで静止画から動画生成してみた

次は静止画から動画生成してみましょう。

まずは静止画を用意します。
今回はハロウィンも近いのでこんな画像を用意してみました。
かわいい。

先ほど入力したプロンプトを全て削除し、
画像のアイコンをクリックし、静止画を選択します。

先ほど同様に貝殻の絵文字のボタンをクリックすると動画生成されます。

今回も５分程度で動画が完成しました。

多少不自然なところはあるけど、コウモリとか蝋燭の火とか自然に動いててすごい…！

まとめ

Haliuo AIは中国発の動画生成AI。

動きが自然な高品質な動画が短時間で簡単に無料で生成できる。

以上、ここまで読んでくれてありがとうございました！

めちゃめちゃいいAIを見つけてしまいました。

その名も、パープレキシティAI。

噛まずに言える自信がない…もっと呼びやすい名前なかったんか…？

Chat GPTやGeminiも非常に優秀ですが、現時点で情報検索においてはこのパーなんとかAIの方が便利だと感じています。

この記事では、
「そのパーなんとかAIって何？どう使うの？」
というところを徹底解説します！！

Perplexity AIとは？

Perplexity（パープレキシティ、パープレ）は、AIスタートアップ企業Perplexity AI, Inc.により2022年に公開されたAIチャットボット型の検索エンジンである^[3]。ウェブからの情報源を用いて回答を生成し、回答文中に根拠となる情報源を引用する機能を持つ
〜省略〜
日本語では「パープレ」という愛称が提案された

引用：Wikipedia

え…パープレ…？
そうなん…？

パープレことPerplexity AIはこの説明の通り、人間の質問に答えるときはネットで調べて、その情報源もちゃんと教えてくれるAIなんです。

現時点のチャットAIは間違っていることを、あたかも正しいことを言っているかのように嘘の回答をしてしまう現象がよく起こります。

これをハルシネーション（幻覚）といいます。
やばい粉でハッピーになったAIが幻覚をペラペラ喋っちゃう…みたいなイメージなのかな？こわ。

Perplexity AI、以後パープレと呼びます。
パープレの場合は回答するために引用した情報源のリンクを表示してくれるので、このハルシネーションが起こりづらいように感じます。

もちろん、ネットで引用した情報源が間違っている場合もあるので、まだまだ最終的に人間のチェックは必要ですが、自分の代わりに検索した情報をまとめてほしい場合はパープレが強力なツールとなってくれるでしょう。

Perplexity AIの使い方

さっそく使ってみましょう。
使い方はめちゃくちゃ簡単です。

まずはこちらにアクセス。

【Perplexity AI】
https://www.perplexity.ai

GoogleでもAppleでもお好きなアカウントでログインしましょう。

ログイン後に表示される英語の質問は全部スキップして大丈夫です。

スマホならアプリもあります。

ログインできたらさっそく何か質問してみましょう！

私は「めちゃめちゃ驚くような雑学を一つ簡潔に教えて」と質問してみました。

すると、とんでもなくしょうもない雑学教えてくれましたよ。

そんなに速かったんだね。

黄色の枠の部分が情報源や関連情報のリンクです。

こんな感じで、情報のソースを提示しつつ、会話形式で質問に回答してくれるので、これからのネット検索のツールとしては手放せないものになりそうです。

他のAIとどう違う？

他のAIが引用した情報源を表示してくれないわけではありませんが、だいぶ違いはあります。

先ほどと同じ、「めちゃめちゃ驚くような雑学を一つ簡潔に教えて」という質問をChat GPTとGoogle Geminiにもしてみましょう。

まずはChat GPT。
パープレと比べるとずいぶんお上品な雑学を披露してくれましたが、ソースのリンクはありません。

次にGoogle Gemini。
ソースを出してくれることもあるんですが、今回は表示なし。
質問の「一つ」という要求を無視して複数回答だし、忍者の認識おかしい…。

こんな感じで、情報源や証拠をしっかり提示してほしい場合は、今のところPerplexity AIが最適な会話型AIといえるでしょう。

まとめ

これからのネット検索はPerplexity AIが便利。

会話型で質問に回答してくれる上に、情報のソースも表示してくれます。

今回は3DCGアニメーション制作ソフトのBlenderで作成した3DモデルをWebページで動かす方法を紹介します！

Blenderで3Dモデルを作成する

Blender公式から、お使いのPCのOSやバージョンに合うBlenderをダウンロードしてインストールします。

Blender公式
https://www.blender.org/

インストールできたら、アプリを開きます。

デフォルトでは立方体の3Dモデルがあるので、まずはこれを削除します。

立方体をクリックして、オレンジ色の線が出たら右クリックし、削除をクリックします。

左上のメニューから

追加　＞　メッシュ　＞　モンキー

をクリックします。

すると、このなんとも言えない形状の猿が現れます。

デフォルトだと色が出ないので、右上の右から二番目の3Dビューをクリックします。

デフォルトでは真っ白になっているので、色をつけていきます。

画面右下の方のマテリアルをクリックし、＋新規をクリックします。

ベースカラーの色の部分をクリックして、好みの色を選びます。

ここではとりあえず不気味さが増す水色にしときますね。

色をつけたら.glbのファイル形式にしてエクスポートします。

画面左上のファイルから、エクスポート、glTF2.0(.glb/.gltf)をクリックして、ファイル名をmonkey.glbにしてエクスポートします。

これで3Dモデルの準備は完了です。

Visual Studio Codeをインストール

今回はローカル上のhtmlファイル内で3Dモデルを動かせるようにするので、Visual Studio Codeをインストールしておきます。

VScode公式
https://code.visualstudio.com

Visual Studio Codeをインストールできたら、拡張機能のLive Serverをインストールします。

画面左上の一番下のメニュー項目をクリックします。

クリックして出た検索欄にLive Serverと入力します。

表示されたLive Serverをクリックして、有効にするボタンをクリックします。

これでVisual Studio Codeの準備は完成です。

コードを作成する

Visual Studio Codeで

command + N（Mac）もしくはCtrl + N (Windows)でファイルを新規作成します。

新規作成したファイルに、以下のコードを貼り付けてください。

<!DOCTYPE html>
<html lang="ja">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Three.js 3Dモデル表示 - 操作可能</title> <style> body { margin: 0; } canvas { display: block; } </style>
</head>
<body> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/GLTFLoader.js"></script> <script> // シーン、カメラ、レンダラーを作成 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 照明を追加 const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(10, 10, 10).normalize(); scene.add(light); const ambientLight = new THREE.AmbientLight(0x404040, 1.5); // 全体を照らすアンビエントライト scene.add(ambientLight); // GLTFLoaderを使ってモデルをロード const loader = new THREE.GLTFLoader(); loader.load('./monkey.glb', function (gltf) { const model = gltf.scene; model.scale.set(1, 1, 1); // 必要に応じてモデルのスケールを調整 scene.add(model); }, undefined, function (error) { console.error(error); }); // カメラの位置を調整 camera.position.z = 5; // OrbitControls を作成してカメラとレンダラーをリンク const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; // 遅延効果を有効化 controls.dampingFactor = 0.05; // 遅延の速度 controls.screenSpacePanning = false; // 画面上でパン操作を無効化 controls.maxPolarAngle = Math.PI / 2; // 縦方向の回転制限（下方向の回転を制限） // アニメーションループ function animate() { requestAnimationFrame(animate); // 必要に応じてコントロールを更新 controls.update(); renderer.render(scene, camera); } animate(); // ウィンドウサイズ変更時にレンダラーとカメラを調整 window.addEventListener('resize', () => { const width = window.innerWidth; const height = window.innerHeight; renderer.setSize(width, height); camera.aspect = width / height; camera.updateProjectionMatrix(); }); </script>
</body>
</html>

貼り付けたら、

command + s (Mac)またはCtrl + s (Windows)

を押して、index.htmlと名前をつけて保存します。

デスクトップにtestという名前のフォルダを作成し、このフォルダに先ほど作成したmonkey.glbとindex.htmlを入れます。

Visual Studio Codeの左上のファイルのフォルダーを開くをクリックします。

先ほどデスクトップに保存したフォルダtestを開きます。

先ほど作成したindex.htmlの編集画面の右下のGo Liveをクリックします。

すると、先ほど作成した不気味なサルがwebページで動かせるようになります。

マウスをドラッグして回転させたり、ズームアップ、ズームアウトができるようになっています。

3Dモデル動かしてみた動画です↓

デモページはこちら↓

いかがでしょう？動かせましたか？

3Dモデルを表示できればWebサイト制作の幅が大きく広がりますね！

以上です、ここまで読んでくれてありがとうございました！

WordPress、プラグイン、テーマは定期的に更新されます。

セキュリティなどの理由から、最新のバージョンに更新した方がいいですが、更新後に不具合があってサイトが壊れてしまう可能性もあるので、更新前に必ずバックアップを取っておきましょう。

WP-Migrationでバックアップを取る方法

WordPressのバックアップの取り方は、プラグインWP-Migrationを使用するのがおすすめです。

インストールしていない場合は、プラグイン新規追加からWP-Migrationをインストールして有効化しておきましょう。

WordPressの管理画面左側のメニューから、All-in-One WP Migrationのバックアップをクリックします。

バックアップを作成ボタンをクリックします

バックアップが完了できたら以下のポップアップが表示されますので、緑色のダウンロードボタンをクリックしてダウンロードします。

PCのダウンロードフォルダにバックアップのファイルがダウンロードされます。

これでWordPressのバックアップは完了です。

WordPressの更新をする

更新が必要なものがあるときは、WordPressの管理画面でわかります。

管理画面左側のメニューに更新という項目があります。

上の画像のように赤い丸がついていれば、更新が必要なものがあります。

バックアップが完了したら、このメニューをクリックした画面から更新してください。

WordPress（ワードプレス）は、ノーコードで記事を投稿することができます。

管理画面にログイン

まずはWordPressの管理画面にログインします。

管理画面は、サイトのTOPページURLに/wp-adminを追加すると表示されます。

管理画面のログイン画面。

ユーザー名とパスワードを入力してログインしてください。

メニューから投稿をクリック

管理画面にログインできたら、左側のメニューの投稿をクリックします。

次に、新規投稿を追加ボタンをクリックします。

記事投稿の編集画面が表示されます。

投稿記事を編集する

まずは、タイトルを入力します。

次に、本文を入力します。

テキストはそのまま入力するだけです。

記事を編集中は、念の為こまめに下書き保存をしておきましょう。

下書き保存は画面の右上にあります。

画像を追加する

WordPressの記事の編集画面では、テキストだけでなく見出しや画像を入れることができます。

ここでは、画像の入れ方を解説します。

まずは、左上の青い＋ボタンをクリックします。

追加できるブロック一覧が表示されますので、その中から画像を選択しましょう。

PCにある画像をアップしたい場合はアップロードをクリック。

すでにアップした画像を表示したい場合はメディアライブラリをクリック。

別サイトのある画像を表示する場合はURLから挿入をクリックします（セキュリティ上の理由であまりおすすめしません）

画像の軽量化について

画像をアップするときは容量の重さに注意してください。

スマホで撮影した写真などをそのままwebページにアップすると、容量が重すぎてサイトの表示速度が遅くなってしまいます。

サイトの表示速度が重いとユーザーがイライラしてページを離脱されてしまう可能性も高くなりますので、軽量化してから画像をアップしましょう。

画像を軽量化するには、こちらのサイトに軽量化する画像をアップします。

https://squoosh.app

アップしたら、軽量の調整をしていきます。

まずはResizeにチェックをつけます。

すると、サイズを変えられるようになるので、Widthを1280ぐらいにします。

次に、ファイルの形式を変えます。

Compressの下のドロップダウンからWebPを選択します。

一番下の〇〇kBというのを、50kB以下になるようにQualityを下げていきます。

50kB以下に調整できたら右下のボタンをクリックしてダウンロードします。

ダウンロードした画像を、WordPressの編集画面にアップします。

記事を公開する

記事の編集が完了したら、右上の公開ボタンをクリックして公開しましょう。

これで記事の投稿は完了です。

WordPress（ワードプレス）は、ウェブサイトやブログを簡単に作るためのツールです。

無料で使えて便利なので、多くの人が使っています。

簡単に使える

プログラミングの知識がなくても、ドラッグ＆ドロップでページを作成したり、デザインを変更したりできます。

テーマとプラグイン

たくさんのデザイン（テーマ）や追加機能（プラグイン）があり、自分のサイトを好きなようにカスタマイズできます。

ブログやサイトの管理が簡単

記事を書いたり、写真をアップロードしたり、コメントを管理したりするのが簡単にできます。

コミュニティが大きい

世界中の人たちが使用しているため、困ったときには助けてくれる人や情報がたくさんあります。

個人ブログから企業の公式サイトまで、カスタマイズすればどんなサイトも作ることができます。

プログラミングなしで簡単にお知らせを投稿したり、写真をアップしたりできます。