- 個人サイトをHTMLとCSSで作ってみたい
- 創作系・同人向けのテンプレートや素材がDLできるサイトを知りたい
そんなあなたへ。
筆者は過去にゲームジャンルのイラスト展示サイトの運営経験があります。
現在はワードプレスブログを運営しつつイラスト倉庫のような個人サイトも持っています。
そんな私が、創作・同人系のサイトを作るために役立つページを20サイト以上選びました！
- HTML&CSSが学べるサイト
- テンプレート配布サイト
- ウェブサイト向け配色サイト
- 素材配布サイト
- 便利ツールサイト
「個人サイトを作ってみたい」「テンプレートを自分好みに編集したい」
・・・そんな時に役立つページをオタク目線でセレクトしました。
SNSでのイラスト投稿に疲れがちで、別の発信場所を探している・・・そんな方は以下の記事も読んでみてくださいね！
↑自分の経験からSNS・ブログ・個人サイトのメリットなどを紹介しています。
個人サイト制作のためのHTML&CSSが学べるサイト
HTML/CSSについて学びたい、調べたい時に参考になるサイトを紹介します。
サルワカ 様
自分がHTML/CSSを再学習する際に最初に読んだのが「サルワカ」様。
HTMLとCSS基礎を身につけたい方はぜひ読んでみてくださいね。
TAG index 様
HTML/CSSの使い方が分かりやすく整理されています。
カラーチャートや、サイト制作向け便利ツールもありますよ。
webliker（ウェブライカー）様
痒い所に手が届く、HTML/CSSの学習サイト様です。
つまずきやすいポイントが分かりやすくまとめられており参考になります。
Codejump 様
サイトを作りながら学ぶことができるサイト様です。
応用的な部分もあり、HTMLとCSSの基礎を身につけた後に学ぶと効果的です。
Codejump | 作って学ぶコーディング学習サイト（HTML、CSS、JavaScript、WordPress）
▼Codejumpの本も出ており、紙の本を購入して学んでいます。
ポチップ
ShanaBrian Website 様
「逆引きレファレンス」が便利です。
素材配布や便利ツールも、サイト制作の役に立ちます。
番外編：おすすめ本紹介
自分は、上記で紹介したサイトと
「これだけで基本がしっかり身につく HTML/CSS&デザイン1冊目の本」
でHTMLとCSSの基礎を身につけました。
ポチップ
本とウェブを組み合わせながら、手を動かして学んでみるのがおすすめです。
個人サイト向け：創作系・同人系テンプレート配布サイト
創作系・同人系の個人サイトにぴったりなテンプレート配布サイト様を紹介します。
利用する際は、各サイトの規約をご一読くださいね。
do 様
創作系個人サイト制作に関するノウハウが詰まったサイト様です。
個人サイト向けテンプレートだけでなく、てがろぐのスキンやプログラムも配布されており必見です。
▼do様の書籍も参考にさせていただいています！
ポチップ
↑do様から発売されている本のレビューです。テンプレも付いておりおすすめ。
空蝉デザイン 様
「作品を魅せる」ためにデザインされたテンプレートを配布されています。
イラスト向け・プロフィール向けなど自分に合ったテンプレートを探すことができます。
素材屋 flower&clover 様
テンプレートとレトロ・アンティーク調素材の配布サイト様です。
花をモチーフにしたデザインがお好きな方におすすめです。
素材屋 flower&clover：おしゃれでかわいい無料アンティークフリー素材＆HTML5レスポンシブテンプレート
無糖 様
小説向けテンプレートが多めな配布サイト様です。
シンプル＆寒色でクールな雰囲気のサイト作りにぴったりです。
pipi original template 様
同人サイト向けのテンプレートや、てがろぐスキンを配布されています。
紙の質感が感じられる、アナログ風のデザインが素敵です。
個人サイト向けの配色サイト
サイトの配色を決める際に役に立つサイト様です。
Mariのいろえんぴつ 様
トーン別のカラーチャート等、ホームページ作りに役立つ配色が参考になります。
Color Hunt 様
「パステル」「レトロ」など、テーマに応じた色の組み合わせを探すことができます。
Color Hunt – Color Palettes for Designers and Artists
WEB色見本 原色大辞典 様
ブラウザで定義されているHTMLカラーネームを一覧でチェックすることができます。
Colormind 様
ランダムな色の組み合わせを生成できるサイト様です。
色を固定して配色を生成することもできます。
Colormind – Bootstrap UI colors
WebGradients.com 様
グラデーションの色見本が豊富なサイト様です。
個人サイト制作に便利な素材配布サイト
サイトを飾り付ける壁紙・写真・アイコン素材などを配布しているサイト様です。
素材を利用の際は、各サイトの規約もご確認ください。
NEO HIMEISM 様
webサイト用素材（壁紙・アイコン）が豊富なサイト様です。
写真素材をよく利用させていただいています。
▼NEO HIMEISM様の配色本
ポチップ
FOOL LOVERS 様
可愛いテイストの素材が豊富な、WEB素材配布様です。
特にアイコンが可愛くてお気に入りです。
可愛い無料素材、テンプレート配布サイト|FOOL LOVERS
GIRLY DROP(ガーリードロップ) 様
おしゃれな写真素材の配布サイト様です。
おしゃれ・かわいい無料写真素材｜GIRLY DROP(ガーリードロップ)
ガーリー素材 様
アナログタッチの、可愛らしいアイコン素材の配布サイト様です。
Sui-Sai 様
水彩調の素材が豊富で、アナログな雰囲気を作りたい時におすすめです。
Simple Repeat 様
水玉やストライプなど、シンプルな背景素材の配布サイト様です。
Sozoro9 様
シンプルな背景、アイコン、ボタン等を配布されています。
個人サイト制作に便利なツール紹介
サイト制作の手間を省いてくれる便利なツールが使えるサイト様です。
Font-familyメーカー 様
サルワカ様の便利ツールの一つ。
使いたいフォントを選ぶだけで、コードが取得できとても便利です。
Font-familyメーカー：標準フォント一覧からサクッと指定
CSS Stock 様
見出し、ボタン、ボックスなどを簡単にコピペで作ることができるWeb制作支援サイト様です。
Google Fonts 様
グーグルのWebフォントが使えるサイトです。
海外のフォント中心ですが、日本語のフォントもあります。
Clippy 様
CSSのclip-path(クリップパス)で画像を切り抜くコードが生成できます。
多角形など、自分では作るのが難しい形を作る際に使用しています。
コピペっと 様
コピペするだけで、サイトのちょこっとした見出しなどを作れちゃいます。
猫のアイコンも、可愛いです！
創作系個人サイトのための参考サイトまとめ
HTML/CSSで個人サイトを作りたい人向けの便利なサイト様をまとめて紹介しました。
ぜひ、サイト制作に役立ててくださいね。
また、個人サイト向けミニブログ「てがろぐ」のメリットを紹介した記事も書いています。
↑個人サイトよりも手軽に発信ができ、HTML/CSSの知識がなくても設置できますので使い道をチェックしてくださいね。
