1.WEBデザインを独学で勉強することは可能なのか
2.5分でできるWEBデザインに挑戦
3.インターネット・WEBとは何か
4.インターネットとは、あなたと誰かを繋ぐネットワーク
5.WEBとは、インターネット上の様々なコンテンツ
5-1.WEBの歴史
6.WEBページはどうやって作られているの?
7.WEBデザインをするにはHTMLとCSSを習得する必要あり
8.HTML・CSSの習得をするには何をしたらいいのか
8-1.動画で勉強する
8-2.本で勉強する
9.画像を編集して、ワンランク上のWEBデザインへ
9-1.最初は無料の画像編集ソフトで画像編集に慣れる
9-2.更に高品質な画像編集ならPhotoshopとIllustrator
10.WEBデザインの参考サイト
11.WEBデザインは勉強と実践あるのみ
はじめまして。
WEBデザインを勉強中のうぇぶおです。
独学でWEBデザインを勉強し、現在はWEBデザインに関する仕事をしています。
このページでは、WEBデザイン未経験者、または初心者の方に向けて、WEBデザインとは何か、どのように作るのかを解説しています。
WEBデザインというと非常に専門的で難しいことのように思うかもしれませんが、わかりやすく、とっつきやすく説明しているのでご安心ください。
このページを読み終える頃には、基礎的なWEBデザインができるようになっていることでしょう。
基礎から学べば難しいことは何もありません。
肩肘張らず、ゆっくり読み進めてみてください。
WEBデザインを独学で勉強することは可能なのか
一番最初に、WEBデザインを独学で勉強することは可能なのか? について解説します。
結果から言うと、WEBデザインを独学で学ぶことはできます。
WEBデザインの「ウ」の字も知らないような僕でもできたので、あなたにできないはずはありません。
勿論、最初からプロ顔負けのクオリティの高いページを作ることはできません。
普段運動をしない僕のような社会人が、突然オリンピックに陸上選手として出られませんよね。それと同じです。
でも、WEBデザインは手順を踏んで習得すれば、決して難しいものではありません。
必要な道具が少なく、あなたも今日からWEBデザインをすることができます。
早速僕と一緒にやってみましょう。
5分でできるWEBデザインに挑戦
最初に論より証拠ということで、まずは騙されたと思って、5分でできるWEBデザインをしてみましょう。
大丈夫。
必要なのはメモ帳のようなテキストエディタと、コピーアンドペーストをする技術のみです。
何も考えずに、下記の文字列をテキストエディタにコピーしてみてください。
<head>
<title>はじめてのWEBデザイン</title>
</head>
<body>
<p>はじめまして、WEBデザイン</p>
</body>
</html>
コピーできたら、それを「test.html」というタイトルで保存します。
保存されたファイルを開いてみると、あら不思議。
では、次に、あなたの好きな色を選んでみましょう。
緑 #3cb371
黄色 #ffff00
赤 #dc143c
<head>
<title>はじめてのWEBデザイン</title>
</head>
<body bgcolor=”●●●●●”>
<p>はじめまして、WEBデザイン</p>
</body>
</html>
<head>
<title>はじめてのWEBデザイン</title>
</head>
<body bgcolor=”#4169e1”>
<p>はじめまして、WEBデザイン</p>
</body>
</html>
こんな風に。
先程と同じようにテキストエディタを開いて、コピーしたものを「test2.html」として保存します。
保存したものを開いてみると、こんな風になっているはずです。
背景の色が、あなたの指定した色に変わっています。
でも、これだと少し文字が読みづらいので、次は文字の色を変えてみましょう。
再び、好きな色を選んでください。
黒 #000000
青 #4169e1
緑 #3cb371
黄色 #ffff00
赤 #dc143c
選んだ色を、今度は下記の文字列、「text=”〇〇〇〇〇”」の〇〇〇〇〇部分に入れてみましょう。
<head>
<title>はじめてのWEBデザイン</title>
</head>
<body bgcolor=”●●●●●” text=”〇〇〇〇〇”>
<p>はじめまして、WEBデザイン</p>
</body>
</html>
例えば、背景が青、文字が白なら、こんな風に。
<head>
<title>はじめてのWEBデザイン</title>
</head>
<body bgcolor="#4169e1" text="#ffffff">
<p>はじめまして、WEBデザイン</p>
</body>
</html>
これで再び「test3.html」というタイトルをつけて保存して、再度開いてみましょう。
すると、
背景が青、文字が白になりました。
あなたが作ったこれこそ、まさにWEBデザインです。
これは基礎の基礎ですが、あなたは今WEBページを作り、WEBデザインができたということになります。
思ったより簡単に思えませんか?
文字列の意味は後からいくらでも覚えることはできますし、現段階では無理に覚える必要はありません。
というより、やっているうちに自然と覚えることができるでしょう。
とにかく今は、WEBデザインはこんな風にできる、ということだけを感じてもらえたら嬉しいです。
何か大げさな道具が必要なわけでもなく、すぐにできてしまうものなんです。
インターネット・WEBとは何か
<html>~というものです。
なぜあんなよく分からない文章で、WEBデザインができるのでしょうか?
それを知るにはまず、インターネットとは、WEBとは何かについて簡単におさらいしてみましょう。
インターネット、そしてWEBページがどのようなものかザックリと知ることで、WEBデザインの基本を知ることができます。
「そんなの知ってます!(`・ω・´)ゞ」
インターネットとは、あなたと誰かを繋ぐネットワーク
例えば、
あなたのスマホと友達のスマホを繋いだり、
あなたのPCと会社のPCを繋いだりするネットワークですね。
インターネットは、あなたと世界中の人のPCやスマホとを繋ぎます。
このインターネットというネットワークを利用して、通話したり、データをやり取りしたり、メールを送ったり、あなたが今見ているこのページのようなWEBページを見ることができます。
「ネットで検索する」と言われると、何となくインターネット=GoogleやYahooのようなWEBページのことかと思うかもしれません。
が、厳密に言うとインターネットというのはネットワークのことだったんです。
WEBとは、インターネット上の様々なコンテンツ
インターネットはネットワークでしたね。
あなたのスマホと友達のスマホを繋ぎ、世界中のPCやスマホとあなたを繋ぐものです。
それに対してWEBというのは、インターネットというネットワークを使って、文章、画像、音楽、動画、などを送受信する仕組みのことです。
例えば、あなたがブログ書いて文章を発信するのも、動画を見たりしているのもWEBです。
WEBはインターネットを通じて、全世界の人がアクセスできます。
WEBの歴史
ですが、別の文章とつながる技術が開発されたんです。
すると1つの文章から様々な文章がつなげることができました。そして、繋がれた文章は更に他の文章に繋がり、その先の文章でも更に他の文章とつながり……という風に、網目のようにひろがっていきました。
その文章を作って掲載した段階では、どことも繋がりのない、インターネット上にぷかぷかと浮いている孤島でした。
でも、僕はそのレシピを考えるうえで、【野菜を使ったレシピ】という文章を参考にしていたんです。
よく見ますよね。文字をクリックすると、他のページに移動できる仕組み。
例えば、こんな風に。→ここをクリックするとyahooに移動します。
これをリンクといいます。
こんな風にリンクさせて、【人参を使ったレシピ】と【野菜を使ったレシピ】はつながりました。
そして更に、【野菜を使ったレシピ】から移動できるサイトも様々な文章にリンクを貼っていて……
これをWWW(World Wide Web)、つまりWEBと呼ぶのです。
ご存知の通り、現在はYoutubeで動画を見たり、Instagramで写真を見たりできますよね。
でも、最初は文章だけだったんです。
※他のページへ移動させるリンクをハイパーリンクといいます。
また、ハイパーリンクによって繋がれた文章をハイパーテキストといいます。
WEBページはどうやって作られているの?
WEBページは、そのページを作った人が書いた設計図によってできています。
設計図というのは、先ほど書いていただいた
<head>
<title>はじめてのWEBデザイン</title>
</head>
<body>
<p>はじめまして、WEBデザイン</p>
</body>
</html>
という言語で書かれているんです。
でも、不思議に思いませんか。
この言語、<html>~とか言われても、僕たちにはただの謎の文字列にしか見えません。
「こんな風にデザインしたいんだ。背景はこんな色にしてくれ。文字色はこの色。こんな文章を書いてくれ」
という設計図をWEBブラウザに伝えるものだったんです。
ゲームによく出てくる魔法と一緒です。
呪文を詠唱すると魔法を放つことができますが、WEBページも呪文を詠唱すると出現します。
WEBブラウザはこちらの唱える呪文の通りにWEBページを描き、僕たちに見せてくれます。
厳密に言うと、chromeやsafari、インターネットエクスプローラー等のWEBブラウザを立ち上げたときに一番最初に表示されるWEBサイト(例えばGoogleやYahoo)がホームページ。
複数のWEBページによって作られた1つの集合体がWEBサイトだったりするのですが、ややこしくなるので覚えなくてもOKです。
例:
このページや、ライセンスポリシーの1つ1つはWEBページ。
「【初心者向け】独学でOK!おしゃれなWEBデザインの作成方法」というのは、このページやライセンスポリシーのページを含めたWEBサイト。
WEBデザインをするにはHTMLとCSSを習得する必要あり
もしかしたら、「あんなの覚えられない!」と思った方もいるかもしれません。
ですが、悲観するのは早いです。
あんなものは「html 背景色」なんかで検索すれば、いくらでも教えてくれます。
まずは、大まかな仕組みを知るだけで大丈夫です。
HTML・CSSの習得をするには何をしたらいいのか
とにかく最初はやってみて、少しずつ覚えることが非常に大切です。
では、具体的にどのように勉強して覚えていけばいいのか、おすすめの勉強法を紹介します。
動画で勉強する
https://dotinstall.com/
ドットインストールは、短い3分の動画でプログラミングの勉強ができるサイトです。
まだプログラミングに触れたことが一度もない初心者向けのものから、プロが参考にするものまで、非常に幅広い動画が揃えられています。
実践も交えて勉強することができるので、非常におすすめです。
基本的に登録は無料で、一部の動画を閲覧する場合は有料になります。
が、基本的なWEBデザインを学ぶうちは、無料で十分過ぎるコンテンツが閲覧可能です。
ひとまず登録して、簡単なところから勉強をはじめてみましょう。
本で勉強する
WEBデザインに限りませんが、本で読んだ知識は使わなければ覚えられなかったりしますよね。
必ず自分の手を動かして、実際にHTMLやCSSを書いて、テストした結果を見ながら勉強してみましょう。
本に飽きたら実際にHTMLのコードを書いてどのようなデザインになったのか確認してみるなど、勉強法を工夫してみると楽しくなることもあります。
画像を編集して、ワンランク上のWEBデザインへ
それは画像です。
洗練されたうつくしいWEBデザインを見た時に、吸い込まれそうな美しい画像に目を奪われることも多いと思います。
デザインにとって画像は非常に重要になります。
ああいった画像を作るうえで必要になるのが、画像編集ソフトです。
つまり、洗練されたWEBデザインをするうえで、画像編集ソフトが使用できることは必須ともいえるのです。
画像編集ソフトは既存の画像をワンランク上のものに編集したり、またはイチから画像を描いたりと、幅広い表現を可能にしてくれます。
最初は無料の画像編集ソフトで画像編集に慣れる
プロが使用する画像編集ソフトは月額料金がかかるものが多く、ある程度画像編集ソフトの使い方の要領が分かってから買っても遅くありません。
まず最初は無料で使用できて、なおかつ高性能な画像編集ソフトからはじめてみましょう。
●Fotor
https://www.fotor.com/jp/
背景の除去、画像を明るくするなどのフィルターをかけたり、シミやシワを消すこともできます。
有料版もありますが、無料でも充分役立ってくれるでしょう。
初心者にも使いやすいシンプルな編集画面になっており、画像編集の基本を学ぶに相応しいソフトです。
Fotorのサイト上に画像をアップロードして編集する、ブラウザで使用するタイプのソフトです。使用するにはオンラインである必要があります。
●GIMP
インストールすることで使用できるので、オフラインで作業したいときにもオススメです。
画像編集ソフトで最も有名、かつプロも使用しているPhotoshopにも負けない程に多機能で高機能。
Fotor程シンプルな作りにはなっていませんが、Fotorでは少し物足りなくなってきた場合はこちらがオススメ。
また、いずれPhotoshopを使うことを見込んでGIMPに慣れておくと、Photoshopを使ったときに戸惑わなくていいので便利です。
更に高品質な画像編集ならPhotoshopとIllustrator
より美しい、商品として成立する洗練されたWEBデザインを作ろうと思ったときは、画像編集ソフトの代表的な2つの購入を検討してみてください。
- Photoshop
- illustrator
大体この2つのどちらかを使用します。
プロでもすべての機能を使いこなせる人は少ないと言われる程に多機能で、ハイレベルな画像編集をするのに相応しい高機能なソフトです。
WEBデザインの参考サイト
そんなときは、様々なギャラリーサイトを見てみると良いでしょう。
ギャラリーサイトとは、優れたWEBデザインを集めたサイトのことで、プロが作った美しく洗練されたサイトをたくさん見ることができます。
これらを見ているうちに 「こんな雰囲気に近づけたい」 「こんな画面にしたい」 というイメージが固まってくることもあるので、非常におすすめです。
プロWEBデザイナーの方も参考にする代表的なギャラリーサイトをいくつか紹介します。
●Awwwards
https://www.awwwards.com/
世界中のWEBサイトが集まり、毎日、毎月ごとに優秀なサイトを表彰しているサイトです。
WEBデザインをする人ならば、ほぼ確実に見ているサイトです。
常に最新のWEBデザインに触れることができるので、毎日チェックするのも楽しいです。
条件さえ満たしていれば誰でも応募できるので、あなたが作ったサイトが全世界の人に見てもらえる可能性もあります。
自信のあるデザインができた際には、応募してみてはいかがでしょうか。
●I/O 3000
https://io3000.com/
日本のうつくしいWEBデザインを中心に集められたギャラリーサイトです。
ファッション・食品・スポーツ等のカテゴリーや、色別にまとめられているので、自分が描くイメージに近い参考サイトを探すうえで非常に便利です。
●MUUUUU.ORG
https://muuuuu.org/
こちらも日本のWEBサイトを中心に集められているギャラリーサイトですが、縦に長いサイトを中心に集めています。
縦長のサイトを作る際には必ず参考になるサイトです。
●S5-Style
https://bm.s5-style.com/
クオリティの高いWEBデザインを集めたギャラリーサイトです。
カテゴリー分けが非常に多く、3D・CG、イラストレーション、タイポグラフィー等で探せるほか、CSS、HTML5、VR、sound等の表現ごとのカテゴリもあります。
実践的な参考サイトが多いサイトです。
●SUNDAYPROJECT APPLICATIONS DESIGN ARCHIVE
https://sundayprojectapp.com/design-archive/
デザインの系統・色等で検索できるギャラリーサイトです。
サイトデザインの画像が大きく見やすくなっています。
シンプルなサイトの作りになっているので、非常に見やすいサイトです。
WEBデザインは勉強と実践あるのみ