2026.07.20

【MoteRaku】HTMLだけで架空のカフェサイトを作ってみた！パリ風カフェのトップページを制作

himari

「自分のお店を持つようになったけど、何から始めればいいか分からない」

「イメージどおりのデザインを作りたいけれど、難しそう…」

そんな悩みはありませんか。

今回は、MoteRakuプラグインを使って、AIを活用しながら架空のカフェサイトを作成する方法をご紹介します。

実際にHTML・CSSを使用してトップページを制作しながら、使い勝手や感じたこともあわせてレビューします。

ホームページ制作に興味がある方や、MoteRakuが気になっている方は、ぜひ最後までご覧ください。

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

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

今回作るもの

今回は架空のカフェ「Café Bonheur」の架空サイトを作成します。

カフェのテーマは「パリの街角にあるナチュラルカフェ」です。

トップページを中心にデザインをしようと思います。

制作の流れ

1.HTML・CSSを入力

MoteRakuの新規ページを開き、AIで作成したHTML、CSSを入力します。

入力が完了すると、以下のようなシンプルなサイトが作成できました。

レイアウトやメニューボタンの配置など、ホームページとして必要な構成は問題なく反映されています。しかし、このままでは全体的にシンプルな印象で、「パリの街角にあるナチュラルカフェ」というテーマを表現するには、少し物足りなさを感じました。

そこで、ここから配色やフォント、画像などを調整し、よりおしゃれで温かみのあるデザインへとアレンジしていきます。

2.配色を調整

よりおしゃれで魅力的なホームページに仕上げるため、配色やフォントの調整、画像の挿入を行いました。

まずは、背景色や文字色を変更し、全体をベージュやホワイトを基調とした落ち着いた配色に調整しました。配色を変えるだけでもサイト全体の印象が大きく変わり、「パリの街角にあるナチュラルカフェ」というテーマに近い雰囲気に仕上がりました。

続いて、メニューにフードやドリンクの写真を追加しました。

写真を挿入することで、提供しているメニューをイメージしやすくなり、よりカフェらしい温かみのあるデザインになりました。また、文字だけでは伝わりにくいメニューの魅力も表現でき、ホームページ全体の完成度が高まったと感じます。

3.ナビゲーションを英語表記に変更

サイト全体の雰囲気に合わせるため、ナビゲーションの表記を日本語から「Home」「Menu」「About」などの英語表記に変更しました。英語表記にすることで、パリの街角にあるカフェのような海外らしい雰囲気が演出でき、デザイン全体にも統一感が生まれました。

ナビゲーションの表記を英語に変更し、文字間隔や色も調整しました。細かなデザインを変更するだけでもサイト全体の印象が大きく変わり、よりおしゃれで洗練された雰囲気に仕上がりました。

＜Before＞

＜After＞

今回のように、文字を変更するだけではなく、配色やフォントと組み合わせて調整することで、サイト全体の世界観をより表現しやすく感じました。

4.デザインを確認

以下が今回作成したトップページの完成イメージです。

テーマである「パリの街角にあるナチュラルカフェ」を意識し、ベージュやホワイトを基調とした配色や、英語表記のナビゲーションを取り入れることで、落ち着いた雰囲気に仕上げました。

使ってみた感想

架空ホームページの作成は、404ページ作成より自由度が高く、ホームページらしい構成を考えたり、デザインを変更したりするなど、完成に近づいていく過程を楽しみながら作成が出来ました。

HTMLやCSSを使うことで、フォントや配色など細かなデザイン調整も思い通りに行えました。今回は「パリの街角にあるナチュラルカフェ」をテーマに制作しましたが、自分がイメージしていた雰囲気を形にできた点も印象的でした。

また、404ページのような単一ページだけではなく、トップページを制作することで、より実践的なホームページ作りを体験できたと感じています。HTMLやCSSの基本を理解していれば、初心者でも比較的取り組みやすく、デザインを考えながら制作する楽しさを味わえるプラグインだと感じました。

まとめ

前回に引き続き、MoteRakuプラグインを使用して架空のカフェサイトを作成しました。

制作を始める以前は、「404ページ作成よりも難易度が高そう」と思っていましたが、実際に取り組んでみると、基本的な流れは前回とほとんど変わらず、スムーズに制作を進めることが出来ました。

HTMLとCSSを貼り付けるだけでデザインを反映できるため、特別な操作は必要ありません。フォントや配色を調整しながら、自分のイメージどおりのホームページを作成できた点も魅力だと感じました。

私はHTMLやCSSの知識がそれほど豊富ではありませんが、大きくつまずくことなく作成できたため、基本的なHTML・CSSを理解している方であれば、比較的取り組みやすいプラグインだと思います。

また、前回はMoteRakuを使って404ページを作成しました。プラグインのダウンロード方法から404ページの作成手順まで、スクリーンショット付きで詳しく解説しています。

MoteRakuに興味のある方や、これから使い始める方は、ぜひ前回の記事もあわせてご覧ください。

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

ABOUT ME