EYANCA - オンラインマニュアル | 無料Webテンプレート / HTMLテンプレート

How to use

— EYANCAの使い方・簡易マニュアル —

EYANCA（エヤンカ）は、難しい設定を極力抑えたHTMLテンプレートです。「コードを書く」のではなく、AIに「やりたいこと」を伝えて、一緒にサイトを作り上げていくスタイルを想定しています。

1. 準備するもの

テキストエディタ※

※手作業で微調整するなら必要です。コードを開いて編集・保存するためのソフトです。Windowsの「メモ帳」やMacの「テキストエディット」でも編集できますが、無料の『VS Code』などが色分けされて見やすくおすすめです。

生成AIのアカウント

コードの書き換えをお願いするパートナーです。Google Gemini / ChatGPT / Claude など。※推奨：プレビュー機能やコード修正に強い「Gemini Pro」などがおすすめです。

💡 なぜ「Pro版（有料版）」が良いの？

Webサイトのコードを書き換える作業には、高い知能が必要です。無料版のAIでも作業は可能ですが、複雑な指示をするとコードを壊してしまったり、途中で止まってしまったりすることがあります。

有料版（Gemini Advanced, ChatGPT Plus, Claude Proなど）は、「プロのエンジニア」並みのコーディング能力を持っています。制作期間の「1ヶ月だけ」課金して、終わったら解約する使い方もおすすめです。スムーズに、ストレスなく作りたい方はぜひPro版（有料版）をご検討ください。

2. フォルダの中身を確認する

ダウンロードしたフォルダの中身は、とてもシンプルです。

📁 image

写真や画像が入っているフォルダです。

📄 index.html

Webサイトの本体です。このファイル1つにすべての情報（文章・デザイン・動き）が書かれています。

⚠️ ポイント：ファイル名（index.html）やフォルダ名（image）を変更すると、画像が表示されなくなったり動かなくなったりします。基本的には名前を変えずに使いましょう。

3. 写真を入れ替える（一番かんたんな方法）

コードを触らずに写真を入れ替える方法は、「上書き」です。

使いたい写真を用意します。
image フォルダの中にある画像（例: image1.jpg）と同じ名前に変更します。
そのままフォルダに入れて、「ファイルを置き換える（上書き）」を選択します。

これだけで、サイト上の写真があなたの写真に切り替わります。

⚠️ 写真が重すぎませんか？

一眼レフなどで撮影した高画質な写真をそのまま使うのは避けましょう。画像データが巨大すぎると（例: 10MB以上など）、サイトが表示されるまでに長い時間がかかり、サイト訪問者が帰ってしまいます。

別途Webサイト用として、サイズを1200px〜1920px （容量200KB〜500KB 以下）程度に「リサイズ（縮小）」してから使いましょう。

なぜこの数値なの？

1200px〜1920px：一般的なPCモニターの横幅が1920px（フルHD）なので、全画面表示のデザインなら最大1920pxあれば十分綺麗です。記事内の画像なら1000px〜1200pxでも十分です。

300KB〜500KB以下：最近は通信速度が速いとはいえ、1枚で数MBある画像が何枚もあると、表示に数秒のラグが発生します。Webでは「1秒待たせるとユーザーが離脱する」とも言われるため、画質を維持しつつ可能な限り軽量化するのがセオリーです。

4. 文章を書き換える

ここからはAI（GeminiやChatGPT）を使うとスムーズです。

index.html をテキストエディタで開きます。
中身のコードをすべてコピー（全選択 Ctrl+A → コピー Ctrl+C）します。
AIのチャット欄に貼り付けて、以下のように指示します。

🤖 AIへの指示例：

このHTMLコードの『YAMADA TARO』という名前を、『Hanako Tanaka』に変えてください。
自己紹介文を、以下の文章に書き換えてください：[あなたの文章]

AIが修正してくれたコードをコピーし、エディタに貼り付けて保存（上書き）します。

💡 AIを「編集アシスタント」として使いこなす3つのコツ

AIは単なる「コード生成機」ではありません。指示の出し方を少し工夫するだけで、あなたの専属ウェブ担当者のように相談に乗ってくれる、頼もしい「編集アシスタント」になります。

ここでは、AIとスムーズに連携するための「魔法の言葉」を3つ紹介します。

① まずは相談だけしたい時：「まだコードは書かないで」

アイデアが固まっていないのに、AIがいきなり長いコードを表示してきて焦ったことはありませんか？そんな時は、会話の最初にこう伝えてみてください。

「まだコードは書かないでください。まずはサイトの紹介文について相談に乗ってほしいです」

こう釘を刺すことで、「まずは文章の内容を一緒に考える」→「決まったらコードにしてもらう」という、人間同士のようなスムーズな手順で進めることができます。

② レイアウト崩れを防ぐ：「指定した箇所以外は変えないで」

AIは気を利かせて、頼んでいない場所までアレンジしてしまうことがあります。デザインを崩さないために、修正を依頼する際は必ずこの一言を添えましょう。逆に全体的にアレンジしてほしい時は、そう指示しましょう。

「※指定した箇所以外は、絶対に書き換えないでください」

③ 貼り付けを楽にする：「省略せずに全文書いて」

修正箇所だけを渡されても、どこに貼り付ければいいか迷ってしまいますよね。

「修正後のHTMLコードを、省略せずに『全文』書いてください」

こう指示すれば、出てきたコードを上から下まで丸ごとコピーして、ファイルに上書き保存するだけで作業完了です。

【重要】セキュリティに関するご注意

本テンプレートの設定エリア（Config部分）は、デザインの自由度を高めるために HTMLタグ（改行タグ <br> など）が使える仕様になっています。そのため、以下の点に十分ご注意ください。

⚠️ インターネット上の「不明なコード」を貼り付けない

ネット掲示板やSNSに落ちている「謎のコード（特に <script> から始まるもの）」をコピーして設定エリアに貼り付けないでください。悪意のあるスクリプトが含まれている場合、セキュリティリスクとなる可能性があります。ご自身で書いた文章や、信頼できるAIが出力したコードであれば問題ありません。

5. SEOとSNSの設定をする

※OGPのステップは必須ではありません。SNSでシェアする予定がない方は飛ばしても大丈夫です。

せっかくサイトを作っても、検索エンジン（Googleなど）に表示されなかったり、SNSでシェアされた時に画像が出なかったりするのはもったいないですよね。ここはAIに任せつつ、少しだけあなたの手作業が必要です。

手順：

① OGP画像（SNS用の看板画像）を準備する

X（Twitter）やLINEでURLを送った時に表示される「カード型の画像」を作ります。
横1200px × 縦630px 推奨で画像を作ります（サイトのスクリーンショットでもOK）。
ファイル名を ogp.jpg にします。
これを image フォルダの中に保存します。

② AIにコードを書いてもらう

index.html の中身をコピーして、以下の指示文と一緒にAIに渡します。※指示文の中の [ ] の部分は、あなたの情報に書き換えてから渡してください。

🤖 AIへの指示例：

このHTMLコードは私のポートフォリオサイトです。以下の情報を元に、SEO用のメタタグ（タイトル、ディスクリプション）と、SNSシェア用のOGPタグを作成し、タグの中に適切に追加してください。

【私の情報】
名前：山田太郎
職業：グラフィックデザイナー
活動拠点：東京
サイトのURL： [ https://example.com ] ←※ここをあなたのURLに変える
OGP画像の場所： [ https://example.com/image/ogp.jpg ] ←※あなたのURL + /image/ogp.jpg にする
ターゲット：新規出店を考えているカフェのオーナーなど

※元のデザインやレイアウトは崩さないでください。<head>の中身だけを書き換えてください。

③ コードの中身をチェックする（重要）

AIが書いてくれたコード箇所を、上書きする前に「読んで」みましょう。SEOやOGPの情報は「裏側の設定」なので、ブラウザの画面上には表示されません。そのため、あなたがコードを見て確認する必要があります。

URLは合っていますか？
https://example.com のままになっていないか確認しましょう。
文章はイメージ通りですか？
description（説明文）のところに、AIが作った紹介文が入っています。「情熱あふれる〜」など、少し大袈裟すぎたり、逆にロボットっぽかったりしませんか？もし違和感があれば、その部分だけ手動で書き直すか、AIに「もっと親しみやすい文章にして」と修正をお願いしましょう。

④ コードを上書きする

AIが出力したコードを、エディタに貼り付けて保存します。

💡 覚えておくと便利な用語

title（タイトル）： ブラウザのタブや、検索結果の大きな文字として表示されます。
description（ディスクリプション）： 検索結果のタイトルの下に表示される「短い説明文」です。
OGP（オージーピー）： SNSでシェアされた時に表示される設定です。これには「httpsから始まる正しいURL」が必要なので、サーバーにアップロードした後で正しく表示されるか確認しましょう（※ローカル環境やプレビュー画面では確認できません）。

6. Webサイトを公開する

完成した index.html と image フォルダを、Webサーバーにアップロードすれば公開完了です。

レンタルサーバーをお持ちの方：FTPソフト等を使って、公開フォルダ（public_html等）にアップロードしてください。
サーバーをお持ちでない方：『Netlify 』や『Cloudflare』などのサービスを使えば、無料で公開できます。（※外部サービスのご利用方法や規約は、ご自身で確認した上でご利用ください。）

💡 自分だけのURL（独自ドメイン）にしたい場合

無料公開サービスを使うと、URLは https://your-site.netlify.app のように、サービスの名前が入ったものになります。もし https://my-site.com のように、オリジナルのURL（独自ドメイン）を使いたい場合は、別途「ドメイン取得サービス」での契約（有料）と、各サーバーでの紐付け設定が必要です。 ※少し難易度が上がるため、最初は無料URLで公開し、慣れてきたら「独自ドメイン設定」などで検索して挑戦してみるのがおすすめです。

よくある質問 (FAQ)

よくある質問（陥りがちな状況）をまとめています。

Q. 画像が表示されません。

A. 画像のファイル名がコード内の記述と一致しているか確認してください（image1.jpg と image1.JPG は別のファイルとして扱われます）。また、image フォルダの中に画像が入っているか確認してください。.jpg 以外の拡張子になっていないかも確認してください（.jpeg / .png / .gif など）。特にjpg / jpeg / JPG の混同例が多いです。

Q. AIが変なコードを書いたかも…？崩れてしまいました。

A. AIも完璧ではありません。崩れてしまった場合は、修正前のコードに戻してから、指示の仕方を変えて（もっと具体的にして）再度試してみてください。また、もし無料版のAIをお使いの場合は、能力不足でコードを壊している可能性があります。「Gemini Advanced」や「ChatGPT Plus」などのPro版（有料版）に切り替えると、嘘のように一発で解決することもあります。どうしても上手くいかない時は、Pro版へのアップグレードを検討してみてください。

Q. スマホで見るとデザインが変です。

A. AIに「スマホで見た時に〇〇になるように修正して」と伝えてみてください。EYANCAは基本的にレスポンシブ対応（スマホ対応）していますが、カスタマイズの内容によっては調整が必要になる場合があります。

Q. Gemini（Canvas）のプレビュー画面で、画像が表示されません。

A. それは「正常」な動作です。GeminiなどのAIは、セキュリティ上、あなたのパソコンの中にある「image」フォルダを直接覗くことができません。そのため、Web上（Canvas画面）のプレビューでは画像がリンク切れのアイコンで表示されたり、非表示になります。コードをコピーして、ご自身のパソコン上の index.html に貼り付けて保存すれば、ブラウザで開いた時にきちんと画像が表示されます。

Q. ファイルを上書き保存したのに、ブラウザのデザインが変わりません。

A. 「再読み込み（リロード）」を試してください。ブラウザは、一度表示したサイトの情報を一時的に保存（キャッシュ）しています。

Windowsの方：キーボードの F5 キー、または Ctrl + R
Macの方：Command + R を押して、最新の状態に更新してみてください。

それでも変わらない場合は、上書き保存が正しくできているか確認しましょう。

Q. 公開しましたが、Google検索に出てきません。

A. 公開してすぐには検索結果には表示されません。Googleのロボットがあなたのサイトを見つけるまでに、数日〜数週間かかる場合があります。気長に待ちましょう。

【必読】AIに「頼んではいけないこと」の例

※必ずお読みください。

AIは魔法使いのように感じられますが、万能ではありません。

AI（GeminiやChatGPT）を使えば、Webサイト制作は驚くほど簡単になります。しかし、「AIに頼むと逆にトラブルになること」や「やってはいけない危険なこと」も存在します。

思わぬ失敗やセキュリティ事故を防ぐために、AIへの指示出しをする前に必ずこのリストに目を通してください。

1. 「機能」に関するNG

形は作れても、中身（仕組み）は作れません。

❌ 「メール送信フォームを作って」

【何が起きる？】 AIは、入力欄や送信ボタンといった「見た目（HTML/CSS）」は完璧に作ってくれます。しかし、送信ボタンを押してもメールは一通も届きません。
【理由】 メールを送るには、サーバー側で動くプログラム（PHPやPythonなど）と、メールサーバーの設定が必要です。EYANCAのような「静的HTMLテンプレート」には、その機能を持たせることができません。
【正解は？】 「Googleフォーム」へのリンクを貼るか、外部フォームサービスを利用し、その埋め込みコードを配置するように指示してください。

❌ 「会員登録やログイン機能をつけて」

【何が起きる？】 IDとパスワードを入れる画面は作れますが、誰もログインできません。
【理由】 顧客データを保存する「データベース」がないからです。無理に実装しようとすると、セキュリティがザルになり、個人情報流出のリスクが跳ね上がります。
【正解は？】 会員サイトを作りたい場合は、HTMLテンプレートではなく、会員機能のあるサービス（Shopify、WordPressのプラグイン、BASEなど）を利用することをお勧めします。つまり、当製品向きではありません。

2. 「セキュリティ」に関するNG

AIに渡した情報は、世界中に漏れる可能性があります。

❌ 「パスワードやAPIキーをコードに書いて」

【リスク】 「このパスワードでロックをかけて」と指示すると、AIはHTMLの中にパスワードを書いてしまいます。これは、ブラウザの「ページのソースを表示」を見れば誰でもパスワードが見えてしまう状態です。絶対にやってはいけません。

❌ 「顧客リストや個人情報を貼り付けて」

【リスク】 「この名簿を表にして」といって、実在するお客様の名前や電話番号をAIのチャット欄に貼り付けないでください。AIの学習データとして使われる可能性があり、最悪の場合、他人の回答としてその個人情報が表示されてしまうリスクがあります。ダミーデータを使って指示しましょう。

3. 「権利・倫理」に関するNG

「知らなかった」では済まされない法律の問題です。

❌ 「〇〇（有名サイト）のデザインをそのままコピーして」

【リスク】 「AppleのサイトのHTMLをコピーして、これと同じにして」といった指示は著作権侵害になる可能性があります。
【正解は？】 「シンプルで余白の多い、クリーンなデザインにして」というように、「雰囲気」や「方向性」を参考にする程度に留めましょう。あなたのクリエイティビティを発揮してください。

❌ 「有名人の写真や、キャラクターの画像を使って」

【リスク】 権利処理をしていない他人の著作物や肖像を、勝手にサイトに使用してはいけません。AIに画像の生成や検索を頼む際も注意が必要です。

4. 「指示出し」のNG

AIを困らせないためのマナー。

⚠️ 「いい感じにして」「おしゃれにして」

【何が起きる？】 AIはあなたの好みを知りません。AIが思う「おしゃれ」と、あなたが思う「おしゃれ」は違います。結果として、修正のラリーが永遠に続くことになります。
【正解は？】 「背景は黒で、文字は金色の高級感ある感じ」「保育園のような、パステルカラーで丸みのある感じ」など、具体的な言葉で伝えましょう。