HTML/CSSの知識がなくても使えますか？

基本的なテキスト・画像の差し替えのみであれば、HTMLの知識がなくてもご使用いただけます。テキストエディタ（メモ帳でも可）でHTMLファイルを開き、表示されている文字を書き換えるだけで対応できます。

色やフォントは変えられますか？

css/root.css を編集するだけでサイト全体のカラーとフォントを変更できます。詳しくは「3. デザインのカスタマイズ方法」をご参照ください。

お問い合わせフォームの設定が必要ですか？

フォームの送信機能を使うには、Formspree（無料プランあり）でフォームを作成し、contact.html の action 属性に取得したURLを設定する必要があります。「2-6. お問い合わせページ」をご参照ください。

サーバーの契約は必要ですか？

一般的なサーバーへの公開には契約が必要です。こちらはHTML/CSSのテンプレートのみの販売のため、サーバーの契約やアップロード等はお客様ご自身で行っていただく必要があります。

スマートフォンに対応していますか？

このテンプレートはスマートフォン・タブレット・PCに対応したレスポンシブデザインです。スマホ表示ではハンバーガーメニューが表示されます。

作品のカテゴリを増やしたり、名前を変えたりできますか？

タブラベルのテキストを変更することでカテゴリ名を変えられます。タブの数を増やす場合はHTMLとCSSの両方の編集が必要です（中級者向け）。

WordPressには対応していますか？

このテンプレートはHTML/CSSのみで作成された静的サイトです。WordPressには対応していません。

イラストレーター向け
ポートフォリオテンプレート
「Simple for Illustrator」ご利用マニュアル

はじめに

テンプレートの概要とできること

こんな方向けのテンプレートです

個人で活動するイラストレーター（一次・二次創作どちらも可）
ポートフォリオサイトをシンプルかつ清潔感ある雰囲気でまとめたい方
HTML/CSSの知識が少ない方でも、テキスト・画像を差し替えるだけでサイト公開を目指したい方

このテンプレートでできること

ページ構成

トップページ（index.html）
作品一覧ページ（works.html）
作品詳細ページ（workspage.html）
プロフィールページ（profile.html）
お問い合わせページ（contact.html）
プライバシーポリシー(privacy.html)

主な機能

カテゴリータブ切り替え（作品をジャンル別に整理）
ハンバーガーメニュー（スマホ対応）
お問い合わせフォーム（Formspree連携）
SNSアイコンリンク（X / Instagram / YouTube / TikTok / Pixiv / メールなど）
料金表・制作の流れ・FAQセクション
経歴・実績タイムライン

同梱データ一覧

ファイル構成

index.html	トップページ。キャッチコピー・受付状況・作品ギャラリー・プロフィール・料金表・FAQ を1ページにまとめたメインファイル
works.html	作品一覧ページ。カテゴリタブで絞り込みができる実績アーカイブ
workspage.html	作品詳細ページ。1点の作品を大きく表示し、説明文・使用ツール・制作年などを記載するページ
profile.html	プロフィール詳細ページ。得意分野・制作環境・経歴タイムラインを掲載
contact.html	お問い合わせページ。Formspree連携のメールフォームつき
privacy.html	プライバシーポリシーを記載するページ
css/reset.css	ブラウザ差異を吸収するリセットCSS。基本的に編集不要
css/root.css	カラー・フォントのカスタマイズ用ファイル。色変更はこのファイルのみ編集すればOK
css/common.css	全ページ共通のスタイル（ヘッダー・フッター・ボタン等）
css/each.css	各セクション（works・profile・price等）のスタイル
js/common.js	ハンバーガーメニューの開閉などを制御するスクリプト。基本的に編集不要
`images`	サンプル画像が入ったフォルダ。ご自身の画像と差し替えて使用

主に編集するファイル / 触らなくてよいファイル

主に編集するファイル

index.html・works.html・profile.html・contact.html・workspage.html・privacy.html（テキスト・画像の差し替え）
css/root.css（カラー・フォント変更）
images/（画像の差し替え）

基本的に触らなくてよいファイル

css/reset.css
js/common.js

公開までの流れ

①素材の準備

②HTMLをテキスト編集

③画像を差し替え

④ローカルで表示確認

⑤サーバーへアップロード

⑥公開後確認・URL共有

利用開始前に準備するもの

素材の準備

テキスト素材

活動名・ハンドルネーム
キャッチコピー（短く印象的な一文）
自己紹介文（2〜4行程度）
得意ジャンル・対応可能な依頼内容
実績・経歴（制作年と内容）
料金（一枚絵・立ち絵・アイコン等）
各SNSのプロフィールURL
連絡先メールアドレス

画像素材

メインビジュアル（mainvisual.jpg）
作品画像（複数枚）
プロフィール画像（prof.jpg）
料金表サンプル画像（price1〜3.jpg）
作品詳細ページ用画像（worksample.jpg）

推奨画像サイズとファイル形式

画像の用途	ファイル名（サンプル）	推奨サイズ（横×縦）	形式
メインビジュアル	mainvisual.jpg	1200px × 800px 以上	jpg / webp
作品画像（一覧）	`works1.jpg` など	800px × 800px（正方形推奨）	jpg / png / webp
作品詳細画像	worksample.jpg	1000px × 1000px 以上	jpg / png / webp
プロフィール画像	prof.jpg	600px × 600px 以上（正方形推奨）	jpg / png
料金表サンプル	`price1.jpg` など	800px × 600px 程度	jpg / png

画像容量の目安

1枚あたり 300KB〜1MB 以内を目安にしてください。
容量が大きいとページの読み込みが遅くなり、閲覧者の離脱につながります。
画像圧縮ツールを使って軽量化することをおすすめします。
webp形式はjpgより軽量で品質も高いため積極的に活用できます。

サーバー・ドメインの準備

レンタルサーバー（例：さくらインターネット、ロリポップ、Xserver など）の契約が必要です。
独自ドメインは任意ですが、あると信頼感が増します。

各ページの編集方法

HTMLファイルはテキストエディタ（Visual Studio Codeなど）で開いて編集します。
変更後はブラウザで index.html を直接開いて見た目を確認してください。

すべてのページ共通

１.<head>内の編集

※マーカー部分を編集してください。

１-① サイトタイトル・ページタイトルの変更

ブラウザのタブや検索結果に表示されるタイトルです。

<!-- titleのテキストを変更 -->
<title>Illustrator 【あなたの名前】 ポートフォリオサイト</title>

１-② メタディスクリプションの設定

メタディスクリプション（<meta name="description">）: 検索結果のタイトルの下に表示される説明文です。

 <meta name="description" content="イラストレーター【おなまえ】のポートフォリオサイトです。SNS用画像、ゲーム用イラストなど、各種イラスト制作のお仕事を承っております。
まずはお気軽にお問い合わせ下さい。">

１-③ 「OGPタグ」の設定

SNSでURLを共有したときのサムネイル画像を設定できます。

 <meta property="og:url" content="https://example.com/" />
 <meta property="og:type" content="website" />
 <meta property="og:title" content="Illustrator 【おなまえ】 ポートフォリオサイト" />
 <meta property="og:description" content="イラストレーター【おなまえ】の公式サイトです。" />
 <meta property="og:image" content="https://example.com/images/ogp-main.jpg" />

 <meta name="twitter:card" content="summary_large_image" />
 <meta name="twitter:site" content="@ユーザー名" />

OGP画像（ogp-main.jpg）は 1200px × 630px を推奨します。作品画像や名前を入れたバナー画像を作成して images/ フォルダに配置してください。

2. <header>内のサイト名変更

<!-- .sitenameのテキストを変更 -->
<p class="sitename"><a href="index.html">あなたの名前</a></p>

3.<footer>内のコピーライトの変更

コピーライトは最もシンプルな形式で記載してあります。最初に公開した年、著作権者名（企業名や個人名）の順で記載してください。

  <!-- クレジット -->
  <small>© 2026 Illustrator Name.</small>
  <!-- クレジットここまで -->

トップページ（index.html）

1. メインビジュアル（FV）の差し替え

images/mainvisual.jpg をご自身の画像に置き換えてください。
ファイル名をそのまま mainvisual.jpg に変更するのが最も簡単です。
画像の下に表示されるタイトルもあわせて変更しましょう。

<!-- FVタイトルのテキストを変更 -->
<p class="fv__title">あなたの名前<br>Portfolio</p>

2. キャッチコピーの変更

<!-- .catch__textのテキストを変更 -->
<p class="catch__text">作風やコンセプト、キャッチコピーなどを簡単に記載</p>

3. 受付状況・納期の更新

<dt>受付状況</dt>
<dd>受け付け中</dd>
<dt>納期目安</dt>
<dd>受注から14〜21日前後</dd>

4. SNSリンクの設定

プロフィールセクションの href="https://x.com/" 等を、ご自身のプロフィールURLに変更します。
利用していないSNSのアイコンは、<a>...</a> ブロックごと削除してください。

フッターのSNSリンクの href="https://x.com/" 等も合わせて変更してください。

5. 料金表の編集

料金サンプル画像（price1〜3.jpg）をご自身の作品画像に差し替え
各依頼種別の名前・説明文・金額を編集
オプション（キャラクター追加・背景追加など）の項目と価格を設定

6. 制作の流れ（ステップ）の編集

テンプレートは「お問い合わせ → お見積り → ヒアリング → ラフ提出 → 本制作 → 納品」の6ステップです。
ご自身のフローに合わせてステップ数・テキストを変更できます。

7. FAQの追加・編集

以下のブロックをコピーして繰り返し追加できます。

<li class="faqlist__item">
  <details class="faqlist__detail">
    <summary class="faqlist__q grid">質問内容...</summary>
    <p class="faqlist__a">回答内容</p>
  </details>
</li>

作品紹介ページ（works.html）

トップページ（index.html）のWorksのエリアも同様に編集してください。

1. 作品画像の差し替え

images/works1.jpg・works2.jpg・works3.jpg をご自身の作品画像に置き換えます。
ファイル名をそのまま同じ名前で保存するか、src="" 内のパスを変更します。

2.作品の追加方法

以下の <li> ブロックをコピーして増やせます。

<li class="workslist__item">
  <a href="workspage.html">
    <img src="images/works1.jpg" alt="作品タイトル" class="workslist__img" loading="lazy">
  </a>
  <p class="workslist__caption">使用用途（例：SNSアイコン）</p>
</li>

3.カテゴリタブの編集

タブのラベルを変更するには、<label> のテキストを書き換えます。

<!-- タブラベルのテキストを変更 -->
<label for="tab-illust" class="tab__label">一般絵</label>
<label for="tab-stand" class="tab__label">立ち絵</label>
<label for="tab-icon" class="tab__label">アイコン</label>

※タブによる切り替え表示は、id名とclass名を連動させることで行っています。HTML,CSSの知識がない方はそれらを変更しないことをおすすめします。

作品詳細ページ(wokspage.html)

images/worksample.jpgをご自身の作品画像に置き換えます。
作品詳細情報のテキストを変更します。<dt></dt><dd></dd>を一つのブロックとして編集することで、項目の増減も可能です。

<!-- 詳細情報 -->
<div class="worksdetail__body">
 <dl class="worksdetail__meta gridlist">
  <dt class="gridlist__label">制作カテゴリ</dt>
  <dd class="gridlist__text">SNS用イラスト</dd>
  <dt class="gridlist__label">クライアント</dt>
  <dd class="gridlist__text">クライアント名</dd>
  <dt class="gridlist__label">制作年</dt>
  <dd class="gridlist__text">202x</dd>
  <dt class="gridlist__label">使用媒体</dt>
  <dd class="gridlist__text">SNS、Web、雑誌、バナー、LPなど</dd>
 </dl>

 <div class="worksdetail__desc">
  <h3 class="worksdetail__desc-heading">制作背景・目的</h3>
  <p>何のための案件か、どんな課題があったかなど</p>
 </div>

 <div class="worksdetail__desc">
  <h3 class="worksdetail__desc-heading">制作ポイント</h3>
  <p>世界観・配色・ターゲットへの見せ方など</p>
 </div>
</div><!-- 詳細情報ここまで -->

プロフィールページ（profile.html）

トップページ（index.html）のProfileのエリアも同様に編集してください。

1. 肩書・名前・自己紹介文の変更

<!-- 肩書 -->
<p class="profile__role">Illustrator</p>
<!-- お名前 -->
<h3 class="profile__name">Myoji Namae<span class="profile__ja">苗字　名前</span></h3>
<!-- 自己紹介文 -->
<p class="profile__desc">一言紹介・経歴・活動地域など。<br>仕事への姿勢・価値観など。</p>

2. 得意分野・制作環境の記入

<dl class="gridlist">
  <dt>得意分野</dt>
  <dd>得意なテイスト・ジャンル・対応可能な案件など</dd>
  <dt>制作環境</dt>
  <dd>使用ツール（CLIP STUDIO PAINT等）・納品形式・稼働時間など</dd>
</dl>

3. 経歴タイムラインの編集

timeline__year に年度を記入し、その下の timeline__text に活動内容を記載します。

<div class="timeline__group">
  <p class="timeline__year">2025</p>
  <div class="timeline__items">
    <div class="timeline__item">
      <span class="timeline__dot"></span>
      <p class="timeline__text">制作実績の内容</p>
    </div>
  </div>
</div>

お問い合わせページ（contact.html）

Formspreeの設定（フォーム送信に必要）

formspree.io にアクセスしてアカウントを作成する（無料プランあり）
「New Form」を作成し、受け取りたいメールアドレスを設定する
発行された フォームID（例：xpwzabcd）をコピーする
contact.html の action 属性にURLを貼り付ける

<!-- YOUR_FORM_ID を取得したIDに置き換える -->
<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST">

ご依頼前の注意事項、フォーム項目の編集

フォームの上に表示されるご案内文を、ご自身のルールに合わせて変更してください。

返信目安（例：1〜2日以内）
料金の目安・見積もりについて
受けられない依頼の種類（例：版権キャラクターNG、成人向けNG、など）
SNSのDMでのご連絡先案内

フォームの項目は必要に応じて編集してください。

プライバシーポリシーページ(privacy.html)

メールフォームを送信する時にはプライバシーポリシーに同意してもらう必要があります。
お問い合わせページの注意事項にプライバシーポリシーのページへのリンクを記載しています。
ご自身に合わせてプライバシーポリシーの内容を記載してください。

デザインのカスタマイズ方法

色とフォントの変更は css/root.css の1ファイルだけを編集すれば、サイト全体に反映されます。

カラーの変更（css/root.css）

/*  カラー設定 */
:root {
  --color-bg:     #fafafa;   /* ページ背景色 */
  --color-text:   #1a1a1a;   /* メインテキスト色 */
  --color-main:   #888888;   /* メインカラー（ラインなど） */
  --color-sub:    #e5e5e5;   /* サブカラー（区切り線など） */
  --color-accent: #df6a78;   /* アクセントカラー（ボタン・見出しなど） */
  --color-black:  #292929;   /* 黒 */
  --color-white:  #ffffff;   /* 白 */
}

フォントの変更（css/root.css）

/*  フォント設定 */
:root {
 --font-base: "Jost", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
 --font-title: "Jost", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}

Google Fontsを使う場合は最上部にある@import～の部分も変更が必要です。

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap');

Google Fontsの「Embed code」ページで、Webのタブ内「@import」を選択すると、コピーコードが表示されるので、それをそのままペーストして差し替えてください。
cssファイルに記載する場合は<style>タグは不要です。

スマホ表示の確認方法

Google Chromeを作成したHTMLファイルを開く
右クリック →「検証（Inspect）」をクリック
ツールバー左上のスマートフォンアイコンをクリックして「デバイスモード」に切り替える
画面幅を iPhone や Android サイズに変更して確認する

チェックポイント

文字が小さすぎて読みにくくないか
メインビジュアルや作品画像が切れていないか
ハンバーガーメニューが正常に開閉するか
ボタンが指で押しやすい大きさか
リンク切れがないか（特にSNSリンク・フォームのaction）
お問い合わせフォームが送信できるか（Formspreeの設定後に確認）

サイトの公開方法

サーバーへアップロードする流れ

レンタルサーバーのコントロールパネルにログインする
FTPクライアント（FileZilla など）でサーバーに接続する
public_html（または www）フォルダにファイルをアップロードする
ブラウザでドメインURLを開いてサイトが表示されることを確認する

アップロード時の注意事項

ファイルの階層構造をそのまま保ちましょう。フォルダの中身だけアップロードして css、images、jsフォルダをバラバラにしないよう注意してください。
index.html がルートに置かれていれば、ドメイン直下（例：example.com/）がトップページになります。
画像フォルダ（images/）を別の場所に移動すると画像が表示されなくなります。

公開後の確認事項

全ページのリンクが正しく動作するか
お問い合わせフォームからテスト送信ができるか
スマートフォンの実機で表示を確認する
URLをSNSで共有したときにOGP（サムネイル）が表示されるか

よくある質問

Q
HTML/CSSの知識がなくても使えますか？: A

基本的なテキスト・画像の差し替えのみであれば、HTMLの知識がなくてもご使用いただけます。テキストエディタ（メモ帳でも可）でHTMLファイルを開き、表示されている文字を書き換えるだけで対応できます。

Q
色やフォントは変えられますか？: A

css/root.css を編集するだけでサイト全体のカラーとフォントを変更できます。詳しくは「3. デザインのカスタマイズ方法」をご参照ください。

Q
お問い合わせフォームの設定が必要ですか？: A

フォームの送信機能を使うには、Formspree（無料プランあり）でフォームを作成し、contact.html の action 属性に取得したURLを設定する必要があります。「2-6. お問い合わせページ」をご参照ください。

Q
サーバーの契約は必要ですか？: A

一般的なサーバーへの公開には契約が必要です。こちらはHTML/CSSのテンプレートのみの販売のため、サーバーの契約やアップロード等はお客様ご自身で行っていただく必要があります。

Q スマートフォンに対応していますか？: A

このテンプレートはスマートフォン・タブレット・PCに対応したレスポンシブデザインです。スマホ表示ではハンバーガーメニューが表示されます。

Q
作品のカテゴリを増やしたり、名前を変えたりできますか？: A

タブラベルのテキストを変更することでカテゴリ名を変えられます。タブの数を増やす場合はHTMLとCSSの両方の編集が必要です（中級者向け）。

Q
WordPressには対応していますか？: A

このテンプレートはHTML/CSSのみで作成された静的サイトです。WordPressには対応していません。

サポートについて

対応できるサポート内容

テキストの差し替え・記載方法に関する質問
画像の差し替え方法に関する質問
Formspreeの設定方法のご案内
テンプレート利用範囲に関するご確認
購入後の軽微な表示不具合のご相談

サポート対象外の内容

大幅なデザイン変更・カスタマイズの代行
サーバー契約・ドメイン取得のサポート
独自機能の追加開発
購入者以外の方の使用サポート
JavaScriptの改造・拡張

連絡方法と返信目安

ご購入いただいたプラットフォーム（ご購入プラットフォームのメッセージ機能）よりお問い合わせください。
返信目安：2〜3営業日以内（土日・祝日を除く）
カスタマイズの詳細なご依頼については、別途お見積もりをご案内する場合があります。

イラストレーター向けポートフォリオテンプレート「Simple for Illustrator」ご利用マニュアル