イラストを載せたサイトを作りたい！作り方の流れは〜？

色鉛筆、パソコン、コピックなど、イラストを描く物って充実してますよね。それらを使ってせっかく描いたイラストを机の奥に仕舞い込んでしまってる方も多いのではないでしょうか。そんなイラストをWEB上に公開してみたい場合、どんな流れでイラストサイトを作れるのかまとめました。

スポンサーリンク

スポンサーリンク

イラストサイトの作り方～サーバーを選ぶ～

ホームページが完成しても、肝心な公開する場所がなくては意味がありません。

そのためにはレンタルサーバーを借りなくてはいけません。

レンタルサーバーにも無料版と有料版があります。

引用元-ホームページ公開にはレンタルサーバーを借りましょう | 主婦の副業ナビ

無料レンタルサーバーにも様々なサービスの違いがあります。

ただ、無料のレンタルサーバーは突然のサービス中止となる場合があります。

また、せっかく作ったあなたの大事なホームページに意図しない広告が貼られてしまう可能性があります。

しかも広告やアフィリエイトを載せることを、規約で禁止している場所も多いのでオススメできません。

そして一番の面倒なところが、以上のような理由から引越しをする場合です。

もちろん折角知り合った読者の方々にお知らせをしたり、相互リンクをしている方々すべてに連絡をしたりといった膨大な労力が必要になってしまいます。

ですので、その無駄な労力を避けたいのでしたら、有料のサービスの利用をおすすめします。

引用元-ホームページ公開にはレンタルサーバーを借りましょう | 主婦の副業ナビ

イラストサイトの作り方～サイトのレイアウトを考える～

自分が作成したいホームページのテーマが決まったら、次にホームページの構成・レイアウトを考えておきましょう。 そんなに詳しく考える必要はありません。
何となくで良いので、「こんな感じのホームページができたら良いなぁ」ぐらいの気持ちで考えておき、なるべく理想の形を実現できるよう作成していくということです。

引用元-構成・レイアウトを考える : STEP1 【 ホームページの作成に入る前に 】

ホームページの作成する前に、箇条書きなどでも良いのでノートやパソコンのメモ帳に書いておくと、作成する上でスムーズに進める事ができると思います。
頭の中だけで考えて作成を始めると、どうしても途中で忘れてしまったりしてしまうため、できればホームページ用に１冊ノートを用意しておくと良いと思います。

引用元-構成・レイアウトを考える : STEP1 【 ホームページの作成に入る前に 】

ホームページのレイアウトで１番重要なことは、何を置いても見やすいことです。 どんなレイアウトが良いのかは、人それぞれですので何とも言えませんが、他の人から見ても見やすいレイアウトになるよう心掛けましょう。

引用元-構成・レイアウトを考える : STEP1 【 ホームページの作成に入る前に 】

イラストサイトの作り方～トップページを作る～

初めて見るホームページの滞在時間を決める要因の１つに、『TOPページの見やすさ（読みやすさ）』があります。私も含めみなさんも同じかと思いますが、最近は自分でなにか情報を探す際にはインターネットを使用しその情報を掲載しているホームページから情報を探しだしますが、開いた瞬間にデザイン（見た目）が悪いホームページなら直ぐに閉じて別のサイトを探しませんか？

特にTOPページは1番最初に訪問してくれる人の割合が高く、いくら他のページに探している情報が掲載されていたとしても、あまりにもTOPページのデキが悪いとその情報を掲載しているページまでは行きつくことが出来ない場合が多いです。

これから、あなたが作ろうとしているホームページも、開いた瞬間に閉じられるようなホームページを作ろうとは誰もが思ってはいないかと思いますが、少しでも多くの人に見ても会える様にするには、多少なりともTOPページの見栄えをよくして作成するようにしてください。

引用元-ホームページの作り方　TOPページの作成 – 誰でも簡単にホームページは自分で作れる

イラストサイトの作り方～メニューページを作る～

メニューとは、解りやすく言うとホームページ内容の項目です。
 
ホームページは作りたい。でも、内容をどうしたらいいかわからない、という人も多いと思います。そういう時、メニューから考えていくとスムーズなのです。
 
メニューを考えることで、そのホームページにどんな内容を入れるか、大まかに決めることができます。内容のメドがつくことで、各ページも作りやすくなり、ホームページ全体の完成がグッと近くなる事でしょう。

引用元-ホームページに何を入れる？サイトのメニューを考えよう

イラストサイトの作り方～イラスト閲覧ページを作る～

同人サイトと言えばイラストやwebマンガでしょう。

ここで注意したいのは画像の重さです。
せっかく綺麗なイラストが描けたのだから、そのまま見て欲しいというのが普通です。
しかし、最近はADSLが当たり前になり、光ファイバーも一般化していますが、それでもやはりPCや回線の状況で重いページを開くのに時間がかかったり、開くことが出来なかったりします。
これは大前提である、ノン・ストレスに反してしまいます。

目安としては画像は最大でも100KB前後が妥当なところのようです。

画像のサイズ、大きさも重要です。
今目の前にあるディスプレイのサイズがどのくらいか知っていますか？
私のディスプレイは横1280×縦1024です。
勿論、これより大きなものも小さなものもあると思います。
マンガは縦長なので上下にはみ出してしまうのはしかたないですが、小さなディスプレイの場合には画像がはみ出てしまって上手く表示出来ません。
大体最大で横700×縦400が限界だと思います。（携帯向け画像なら横200×縦300）

画像を飾る際も、イラストを目立たせるのなら、背景と文字でも述べたように、単純に白や黒といった背景にした方が目立つと思います。

TABLEタグなどを用いて額縁を作ったり、背景画像として表示したりする方法もあります。

引用元-同人サイトの作り方 | 同人サイトを楽しもう

イラストサイトの作り方～サーバーにアップロードする～

作成したファイルをWebサーバーにアップロードしましょう。ファイルをアップロードするには、「FTP」や「SFTP」という機能を使います。「FTP」とは「 File Transfer Protocol」の略で、ファイルをアップロードする際に必要なものとして長く使われていました。しかし最近ではSSHによって暗号化して安全にファイルの転送をする「SFTP（SSH File Transfer Protocol）」が推奨されています。

引用元-ついに完成！ファイルをアップロードしてWebサイトを公開！ | Webクリエイターボックス

初心者にオススメ！Webサイトの作り方が書かれた書籍

スラスラわかるHTML&CSSのきほん
狩野祐東著／SBクリエイティブ刊
256ページ 本体1900円＋税

引用元-スラスラわかるHTML&CSSのきほん | 狩野祐東の本 solidpanda.com

小さなサイト作りを通してHTMLとCSSの基礎が学べる入門書の決定版！ 基本のタグからフォーム、レイアウトを調整するためのCSSの活用まで、 ずっと使える知識がぎゅっと詰まっています。

『スラスラわかるHTML&CSSのきほん』は、これからHTML&CSSを学習したいという方が、いちばんやさしく、楽しく作業を進めながら、正しい知識を身につけられることを目標に書きました。

本書では、「KUJIRA cafe」という架空のカフェを紹介する計7ページの小規模なWebサイトを制作します。制作をとおして基本のHTMLとCSSを使いながら、Webサイトの公開まで行います。詳しい操作説明と詳細な解説で作業につまづくこともなく、また実習が終わったころには応用力もつきます。

引用元-スラスラわかるHTML&CSSのきほん | 狩野祐東の本 solidpanda.com

まとめ

WEBサイトを作るにあたって、聞きなれない用語に始めは戸惑うかもしれませんが、思ったように出来上がると嬉しいものです。納得のいくデザインでWEBサイトを作って素敵なイラストを載せましょう。

twitterの反応

自創作とかイラスト載せるサイト作りたい…( ˘ω˘ )
情報の授業でホームページ作るのやったから作り方はわかるぞ…！

— 猫乃みみ🐱新刊通販開始🐱 (@mi_rasen) October 10, 2015

サイトの作り方を勉強してサイトを作る、サイトの更新、イラストを描く、印刷所との連絡、伝票をかく、段ボール作り、発送、全部自分一人でがばってますわ！！！

— TAMA (@0OoTAMAoO0) August 25, 2015

https://twitter.com/indig0blood/status/636052290097446913

Twitterってついついみちゃうから、デザイナーやイラストなかったらやめたい…。
はやくサイトつくりたいけど、作り方っあっ

— こん (@p4FUX0Xog9AWr7M) July 31, 2015

https://twitter.com/hiduki1208/status/616617286200197120
https://twitter.com/plasticcafe/status/597304572739063808

私のサイトみたいにイラストページから各種イラストページに飛ぶみたいなのにしたいならまた作り方変わってくるけど

— テスタ (@tesuta666) March 13, 2015

ってなって 昨日は印刷所さんのサイトでイラスト本の作り方(ほんと一回も作ったことないからさ…)学びました_(:3」∠)_ 断ち切り込みのサイズとか中とじとか色々あるのね

— グレー＠あざらしさん (@haiirogray) December 3, 2014

またイラストサイトにするか？？あ、でも私サイトの作り方分からん…

— 志摩 (@shima_tsuma) November 23, 2014

https://twitter.com/HIrototoo/status/521175639538155520″