絵描きの学びブログ

大阪で社員イラストレーターをしているしぐにゃもの学びをコンテンツとして発信ていきます。

イラストレーターがほぼ知識0からホームページを作った話

リーのイラストレーターを目指すものとして
案件受託用のWEを知識0ほぼ知識0から作りました。
その時に得たノウハウをこちらでまとめたいと思います。

https://signyamo.com/
ドメインとクレジット表記に拘らなければ無料で自分のWEBサイトを持てます。

 

ーーーーー

 

【何故WEBサイトを持とうと思った経緯】
絵の仕事が来ると聞いてSKIMAとcoconaraに登録して仕事が来た。
そして絵で仕事をもらうには"知名度"と"連絡窓口"があれば仕事が来るのではと仮説が出来たのと、
SKIMAとcoconaraは手数料が20%程度取られることが分かりました。

その手数料の費用を考えると自分で独自ドメインのWEBサイトを持って窓口を作ってしまった方が
値段が安いのでフリーになる上での収益化につながるのではと思い作りました。
知名度を上げることが課題ですが。

 

ーーーーー

 

【WEBに必要なもの】
・HTML
CSS
・サーバー
・デプロイ
ドメイン
・視聴者

 

ーーーーー

 

【各用語解説】
・HTMLについて
WEBサイトに何を表示するかを決めるもの。

CSSについて
WEBサイトの見え方を決めるもの。

・サーバーについて
WEBサイトのデータを保存するもの。

・デプロイについて
WEBサイトをアクセス出来るようにするもの。

ドメインについて
WEBサイトにアクセスできるアドレス。

・視聴者
どのような人にどのような目的で見てもらうかを決める。

 

ーーーーー

 

【必要なものを揃える】
宗教論争はありますが私は以下を揃えてWEBサイトを作りました。

・HTML&CSS → 無料ホームページテンプレート.com
・サーバー → GitHub
・デプロイ → Vercel
ドメイン → namecheap
・視聴者 → 未来のイラスト発注者(個人でイラストを受託することが目的なので)

必要だったお金は無料ホームページテンプレート.comのシリアルキー(クレジット表記を消すもの)の買い切り2980円と
とnamecheapのドメイン代金(年800円程度)です。

【備考】
・Vercelは安全性の高いhttpsドメインが取れるのでお勧め。個人利用あれば無料プランで十分です。
ドメインで有名なものはお名前.comですが営業メールが多いとの話を聞いてnamecheapでドメインを取得

 

ーーーーー

 

【HTML&CSSを作る】

.htmlファイルはテキストエディタで開くのとブラウザで開くので見え方が変わります。
個人的におすすめのテキストエディタSublime textです。

Sublime textをインストールしてテンプレートの.htmlを開き、
コードを読みながらここを書き換えればこう変わるのではと思うところの文字を書き換えます。

見た目だけだと難しそうですが、なんとなく対応してる箇所が分かるので実際やってみると出来ると思ってた以上に出来る思います。
まずは表示されてる文字を書き替えるところから始めるのがおすすめです。

【備考】
・<>から処理が始まり</>で処理が終わる
・<p>~~~<p/>でWEBに文字を表示出来る。
・改行指定は<p>~~~<p/>の間に<br>を入れるか<p>~~~<p/>、<p>~~~<p/>のように文字表示を繰り返すことで出来る
・<h1>~~~<h1/> や <header>~~~<header/> や <body>~~~<body/>のような物で囲まれた場所は文字の表示のされ方が異なる。 (文字は.CSSの書き方によって異なります。)
・ ※リンクの張り方
・ ※画像の張り方
・ ※別ページへのアクセスの仕方
・<!-- ~~~ --> で処理に関係ない文字を入れることが出来る。メモや注釈に使用。

そのほかにもいろいろありますが、これは作りたいHPや使用したテンプレートによって異なるため割愛します。
この辺りを覚えて後はGoogleで検索していけばそれなりの物は出来ると思います。
書き方のチュートリアルを用意してくれているテンプレートサイトもありますのでそちらも参考にして、用途や難易度を選んでHTML&CSSを構築してください。

 

ーーーーー

 

GitHubをWEBサーバーにする】
サーバーはラズパイで自作を考えていましたが、火事になった話を見てしまったためGitHubを使用しました。
個人的には無料で参考文献が多く、管理がしやすいのでアプリ版のGitHubを入れることをお勧めします。

私はこの方法を見てGitHubでWEBサーバーを作りました。
https://prog-8.com/docs/github-pages

GitHub pagesでもWEBサイトを見れるようにできるのですが、
私はGitHubにデータだけ入れてVercelでWEBサイトを見れるようにしました。

 

ーーーーー

 

【WEBを見れるようにする】
WEBを見れるようにするにはデプロイという作業が必要です。
私はデプロイをVercelで行いました。

私はこの方法を見てGitHubでWEBサーバーを作りました。
https://dev.classmethod.jp/articles/vercel/

Vercelは無料プランでhttpsのアドレスが取れて1日100回デプロイ出来るという優れモノです。

 

ーーーーー

 

【WEBのURLを作る】
ドメインを取得するとURLを作ることが出来ます。
私はドメイン取得をnamecheapで行いました。
ドメイン購入はWEBサイトにドメイン名を入れてページに従って進めば出来ます。

・参考
https://welcustom.net/namecheap/

 

ーーーーー

 

ドメインとデプロイしたWEBサイトを繋げる】
namecheapで取得したドメインとVercelでデプロイしたWEBサイトを繋げます。

・私はこの方法を参考にドメインの紐づけを行いました。
https://qiita.com/n0bisuke/items/901154531ea14f978bd4#freenom%E3%81%A8vercel%E3%81%A7%E7%8B%AC%E8%87%AA%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AAweb%E3%82%B5%E3%82%A4%E3%83%88

※この記事ではFreenomという無料のドメインサービスを使っておりますのでその部分は無視してください。
無料ドメインサービスは突然ドメインが消されたりする事例があるようなのでお勧めしません。
実験や学習目的に使うのであれば良いものだと思います。

これで独自ドメインのWEBサイトが完成です。

 

ーーーーー

 

【WEBの最適化】

いざWEBをアップしてみると、画像の読み込みが遅かったりすることがあります。
その場合はこちらで速度を測定すると読み込みが遅い原因と解決策が表示されます。
https://developers.google.com/speed/pagespeed/insights/?hl=ja&url=https%3A%2F%2Fwww.valianttactics.jp%2F

 

ーーーーー

 

【視聴者】
WEBサイトを作っただけではだれもアクセスされないので宣伝やマーケティング戦略を練って見て欲しい層にアクセスしてもらえるようにします。
私の場合はイラストレーターになりたくて仕事受託サイトを作ったので”未来のイラスト発注者”が増えるようにアクセスやwebでの知名度を増やす方法を次回以降考えて実践してまとめて行こうとおもいます。