BLOG
ブログ

創作・同人クラスタ向けサイト制作ブートキャンプ《序》すべての道は基礎に通ず

読了目安時間:5分

オタク兼ウェブ屋が始めた、HTMLとCSSによるサイト制作講座の導入記事です。いまのところ全10回を予定しています。この記事ではサイト制作スキルの基礎を身につけるためのロードマップを作ってみました。この内容にそって進行していきますのでよろしくお願いします。

まずは色々始めるまえに。

 

サイトに訪問いただいた皆様、ウェブ拍手有難うございます! ブログやイラストへのぱちぱちだけでなく、コメントまでいただけてぴょんぴょんしました。「個人サイトまた作りたい」と思っていただけたということで……あ、ありがたい……有難い……オタク兼ウェブ屋冥利につきる……。

 

ということで、覚悟をきめて始めることにしました。

 

『創作・同人クラスタ向けサイト制作ブートキャンプ』!!!

もともと、以前軽い気持ちで「ブログ記事どんなの読みたいですか?」とTwitterアンケートを取ったら、『知識ゼロから始めるウェブサイト制作講座』に票が集まり……それならサイトの作り方、書いてみるか……?! ということで構想だけは練っていたのです。

 

裏側の話をすると、去年『同人屋・創作者は個人サイトを作らなくてもSNSだけで十分なのか論考』というブログ記事をアップしたところ、「同人 サイト」だとか「同人 ブログ」等々のキーワードでそこそこアクセスを集めるようになってしまい……作り方書いてないの流石に申し訳ないな、しかしもっといろいろ……詳しいサイトはあるよな……と、うにょうにょしていた訳ですが。いただいた拍手コメントがとても嬉しかったので更新開始に踏み切りました。本当にありがとうございます!

 

どのくらいの時間と分量になるか検討ついていませんが、皆様の同人・創作ライフにウェブサイトという可能性を増やすことができれば……それはとっても、すてきだなって……。

創作・同人クラスタ向けサイト制作ブートキャンプ
《序》すべての道は基礎に通ず

この講座が目指すゴール

今回のサイト制作講座を書き始めるにあたり、目指すゴールを下記の通り設定しています。

 

①ウェブサイト・インターネットの仕組みを大雑把に理解する
②HTML、CSSで書かれたソースコードをある程度読み書きできるようになる
③レンタルサーバの準備からサイト公開まで自分でできるようになる
④HTML、CSSのリファレンスを参照して、ウェブサイトを好みのデザインに調整できるようになる

 

おそらく「2000年代前後のオタクがサイト制作の時に使っていたやり方を、近年の仕様にアップデートした形で覚えよう!」という具合の内容になります。

 

ですので「どんな形でもいいから今すぐサイトを作りたい!」という方には不向きです。

 

そういう方はwixとかペラいちとかを使ってのサイト制作がおすすめです。あとURL気にしないんだったらNotionでページ作って全体公開してしまうのが多分一番速いよ。最近はポートフォリオNotionで作ってるひとも見かけるし……。

 

というわけで、爆速でサイト制作したいという方は、「wix サイト 作り方」とか「Notion サイト 作り方」とかで検索して調べていただいた方が建設的です。

この講座はこんな人にオススメ

先述の通り、この講座は爆速でサイト制作をしたいという方には向いていません。 じゃあどんな人に向いているのかというと……

 

【とにかく自分の思った通りにサイトを作りたい人】

 

この一言に尽きます。

 

「ここに! ここに画像を出したい!!」
「文字サイズは! こう!!」
「色は! 行間は! 動きは! こう!!」

 

そんな頭から爪先まで、兎にも角にも自分の思い描くサイトを作りたいという方にオススメです。

 

なぜならHTMLタグとCSSを用いるウェブ制作の基礎を身につければ、新しいタグが出てきてもちょっと対応しやすくなる、他の方法を採用したときにもワンランク上のサイトが作れる、PHPやjavascriptといったプログラムを勉強するとっかかりになる等、やれることが格段に増えるからです。

 

他のサイトのソースコードを読んで、何を書いているか分かるようにまでなればこっちのもの。他のサイトを参考にしながら色んなデザインを実装できるようになります。

 

自分の創作物を自分の思う形で発表したい。そんなオタクの方々はぜひこの講座を覗いてみてください。けして楽にウェブサイトを作れるわけではありませんが……沼ると楽しいよ!!!!!!

 

サイト制作ロードマップ

≪序≫ すべての道は基礎に通ず(このページ)

入門編

1.ウェブサイトが表示される仕組みを大雑把に理解する
2.サイト制作に必要なものを揃えて使い方を覚える
3.HTMLの基本テンプレートを理解する
4.コンテンツをマークアップする
5.パスの考え方を理解する
6.CSSの基本を覚える

実践編

1.サイトの設計図を作れるようになる
2.2カラムデザインのPCサイトをつくれるようになる
3.メディアクエリやgrid、flexを駆使してレスポンシブ化する
4.javascriptのライブラリを利用できるようになる

補足(ウェブ制作に関連する話題)

1.同人屋・創作者は個人サイトを作らなくてもSNSだけで十分なのか論考

 

ここまでやれば「2000年代前後のオタクがサイト制作の時に使っていたやり方を、近年の仕様にアップデートした形で覚える」というゴールに届くはずです。多分。

 

より自分好みのサイトにしたり、機能を追加しようと思うとまた違うことを覚えないといけませんが、とりあえずは上記のロードマップに沿って書いていこうと思います。

 

正確さよりもイメージのしやすさを目指して書くので、正しい知識は他のサイトに委ねるスタイルになりますが、皆様の参考になれば幸いです。


ページ上部へ移動