サイトテンプレートをダウンロード
まずは使いたいテンプレートを選び「HTML / CSS / JavaScript」一式を取得します。
この段階でやること
- テンプレート一式をローカルに保存する
- 画像や同梱ファイルの有無を確認する
- 作業用フォルダ名を決めて整理する
ポートフォリオサイトを作りたい。
でも、構成もデザインもゼロから考えるのは大変。
SORAはフリーランスのために作ったサイトテンプレートです。
見せ方の土台をあらかじめ整えているから、文章づくりから画像の差し替え、自己紹介や実績紹介の整理まで
AIを使いながらそのまま進めやすくなっています。
構成に迷い続けるより先にまず形にし、AIで自分用に整えながら魅力あるサイトへ!
構成とデザインのベースがあるから何をどう入れればいいかで迷いません。
配色も、コピーも、画像も、自分の好みに合わせて変えていくだけ。
ゼロから悩むよりずっと早く、理想のポートフォリオを形にできます。
このテンプレートはAIで作成した「AIで編集するため」のテンプレートです。
自分が使いやすいAIに具体的な指示を出せば、目的に合わせてコードを整えていけます。
VSCODEのようなAIと連携できるテキストエディタを使えば、編集はもっとスムーズです。
難しく考えなくてもAIに相談しながら自分のサイトを育てていけます。
どこまで使ってもいいのかって?
少しでも自分で手を加えたなら、それはもうあなたのサイトです。
ポートフォリオとして公開して営業や応募に使ってください。そして飽きてきたらまたAIに指示して進化させればいい。
完成して終わりではなく、必要に応じて育てていけるのもこのテンプレートの良さです。
SORAはテンプレート一覧を眺める前に、まず1本の代表テンプレートで完成イメージをつかめる構成です。First Viewから各セクションまで、1ページの流れをそのまま確認することで、どんなポートフォリオが作れるのかを直感的にイメージできます。
まずは使いたいテンプレートを選び「HTML / CSS / JavaScript」一式を取得します。
ダウンロードしたファイルを「VSCODE」などのテキストエディタで開き、どこに見出し・画像・色・リンクが入っているかを確認します。
サイトテンプレートの内容(テキストや画像、セクション順)などをAIを使って編集しましょう。AIはChatGPTやClaude Code、Geminiなど、お好きなものをお使いください。AIに指示を出す際は具体的かつ明確にしましょう。
差し替え後は各画面幅で見た目が崩れていないか、リンクが正しく動くかを確認します。 公開前にこのチェックを入れることで、営業や応募に使うページとして安心して使えます。
確認が済んだら、ComoHa WINGといったサーバーへアップロードして公開します。 1ページでまとまっているため、公開後も必要な箇所だけを更新可能です。
気になるデザインがあれば、デモサイトをチェックしてみましょう。
Swipe→
気になることがあればお気軽にお問い合わせください。
気になるテンプレートを1種類ずつ購入できるプランです。
まずは自分に合うデザインを1本だけ試したい方や、必要なテンプレートだけ選びたい方に向いています。
SORAのテンプレートをまとめて揃えたい方向けのセットです。
複数のテイストを比較しながら選びたい方や、用途に応じて使い分けたい方におすすめです。
| README.md | テンプレート全体の案内、使い始め、公開時の注意点をまとめたファイルです。 |
|---|---|
| EDIT_GUIDE.md | AIやエディタで安全に編集するための実践ガイドです。 |
| POLICY.md | 利用規約、ライセンス、禁止事項、返金条件をまとめたファイルです。 |
| index.html | 1ページサイト本体のHTML構造です。 |
| style.css | 配色、フォント、レイアウト、アニメーションを定義したCSSファイルです。 |
| script.js | ローディング、スクロール演出、フェード表示などの動きを管理するJavaScriptファイルです。 |
| imgフォルダ | 画像差し替え用フォルダです。現在は空の状態で、購入者が画像を入れて使います。 |
SORAに関するご質問やご購入前のご相談は、こちらからお気軽にお問い合わせください。内容を確認のうえ、順次ご案内いたします。
Get in Touch mail