2026.07.16

【MoteRakuプラグイン】HTMLだけで404ページを作成してみた！

himari

「自分のオリジナルのサイトを作りたい」

「既存のデザインじゃなくて、自分オリジナルのデザインでサイトを作りたい」

そう思ったことはありませんか。

なかなか自分が使いたいデザインがないことも多いですよね。

今回はMoteRakuを使ってブログに新たなページを作成しようと思います。

※本記事は商品・サービスをご提供いただき作成したPRレビューです。

実際にしようした感想をもとに、率直なレビューをお届けします。

MoteRakuプラグインとは？

「AIと、自分の手で。」をテーマに、専門知識がなくても、AIを活用して自分でサイトを作成できるプラグインを作成されています。

ポートフォリオやネットショップ、コーポレートなど、幅広いジャンルのサイトや作品を作成することが可能です。

インストールから公開までの手順

1．インストール

MoteRakuのホームページのダウンロードの箇所からZIPファイルをダウンロードをします。

そのファイルをWordpressにインストールして、有効化します。

2.ライセンス連携

カツプロに会員登録をして、WordpressのMoteRakuのページからライセンス連携を行いましょう。

カツプロの会員登録は無料で行うことができます。

※ライセンスキーについては見えないように加工処理をしています

3.ページ作成

WordPressのMoteRakuページを開き、「新規ページ追加」をクリックします。

クリックすると下のようなページが表示されるため、「タイトルを追加」にタイトル、HTML、CSSのところにそれぞれコードを入力します。

ちなみにですが、「AIで生成」を行うにはOpen AIキーが必要となります。

各種生成AIのAPIキーを登録することにより、よりスムーズに作業を進めることが出来ます。

各種生成AIの無料版でも十分に生成することは可能です。

今回は無料版のAIに指示を出し、生成を行います。

3.H3 HTML・CSSを貼り付け

AIに指示を出して作成してもらったHTMLとCSSをそれぞれ該当箇所に貼り付けます。

それぞれ貼り付けると、画面下にHTML、CSSで指示した404ページが表示されます。

あとは反映先を選ぶだけです。

今回は404ページの作成を行ったため、右下の「MoteRaku反映先」は「404ページに使う」を選択し公開します。

3.公開・表示確認

こちらが実際に出来上がった404ページです。

色や全体的な雰囲気など、既存のブログと調和するデザインで指示を出しましたが、ぴったりのデザインで作成することができました。

現時点でもかわいいですが、すこしデザインを変更してみようと思います。

404の横にクマの画像を入れ、「あれ？くまさんもページを探しています🧸お探しのページは見つかりませんでした。トップページからもう一度探してみませんか？」という文章に変更してみました。

こちらも画像の入れる位置や表示内容も指示通りです。

画像入れやトップページへのアクセスリンクの挿入など、変更も簡単にできました。

気になった点

初めて利用する場合は、「反映先」の設定が少し分かりづらいと感じました。どのような場面で各反映先を使うのかが最初はイメージしづらく、試しながら進める必要がありました。

また、作業中に「JSONエラー」が表示される場面がありました。原因が分からず何度か試しましたが解決できず、一部のページ作成は断念しました。エラー内容や対処方法がもう少し分かりやすく表示されると、初心者でも安心して利用できると感じます。

さらに、気になっていたAI生成機能はAPIキーが必要でした。レビュー前は「追加で課金が必要なのかな？」と少し不安になりましたが、実際にはHTMLやCSSを自分で用意すれば無料でも十分ページを作成できます。AI機能の利用条件について、初回利用時にもう少し分かりやすい案内があると、より安心して使い始められると思いました。

JIN：Rとの相性について

既存テーマとの相性もよく、ページ作成や公開を行ってもブログ全体のデザインが崩れることはありませんでした。今回は404ページを作成しましたが、通常の記事や固定ページ、ヘッダー、フッターなど既存のレイアウトへの影響がでることもなく、安心して試すことができました。

デザインについても色合いやフォント、余白など、細かく指示することで、ブログ全体の雰囲気と統一感のあるページを作成できます。既存テーマの魅力や良さを生かしながらオリジナルデザインを追加したい方にとって、相性の良いプラグインだと感じました。

こんな人におすすめ

HTML・CSSをある程度理解している方や、AIを活用してコードを作成できる方には特におすすめです。

また、既存のテーマにはない、自分だけのオリジナルのデザインを作りたい人にもおすすめです。

私自身もHTMLやCSSの知識はあまり多くはありませんでしたが、AIを活用しながら調べて進めることで、404ページを作成し公開することができました。初心者でも試行錯誤しながら学べるため、「まずはオリジナルページを作ってみたい」という方にもおすすめできると感じました。

まとめ

今回は実際に404ページを作成し、公開まで試してみました。HTMLやCSSを活用することで、デザインの自由度が高く、自分好みのページを手軽に作成できる点が魅力だと感じました。

一方で、初めて利用する場合は反映先の設定やAI機能の仕様など、少し迷う場面もありました。しかし、基本的な流れを理解すればスムーズにページを作成できるため、HTMLやCSSを使ってオリジナルデザインを作りたい方にはおすすめできるプラグインです。

「テーマのデザインだけでは物足りない」「404ページやポートフォリオなどを自分らしくカスタマイズしたい」という方は、ぜひ一度試してみてはいかがでしょうか。

ABOUT ME