目次
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デザインは勉強と実践あるのみ
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デザインをしてみましょう。
大丈夫。
必要なのはメモ帳のようなテキストエディタと、コピーアンドペーストをする技術のみです。
何も考えずに、下記の文字列をテキストエディタにコピーしてみてください。
<html>
<head>
<title>はじめてのWEBデザイン</title>
</head>
<body>
<p>はじめまして、WEBデザイン</p>
</body>
</html>
<head>
<title>はじめてのWEBデザイン</title>
</head>
<body>
<p>はじめまして、WEBデザイン</p>
</body>
</html>
コピーできたら、それを「test.html」というタイトルで保存します。
保存されたファイルを開いてみると、あら不思議。
WEBページができてしまいました。
では、次に、あなたの好きな色を選んでみましょう。
青 #4169e1
緑 #3cb371
黄色 #ffff00
赤 #dc143c
緑 #3cb371
黄色 #ffff00
赤 #dc143c
色を選んだら、その横に書かれている魔法の呪文のような文字列を、下記の●●●●●と入れ替えてください。
<html>
<head>
<title>はじめてのWEBデザイン</title>
</head>
<body bgcolor=”●●●●●”>
<p>はじめまして、WEBデザイン</p>
</body>
</html>
<head>
<title>はじめてのWEBデザイン</title>
</head>
<body bgcolor=”●●●●●”>
<p>はじめまして、WEBデザイン</p>
</body>
</html>
例えば青なら、
こんな風に。
先程と同じようにテキストエディタを開いて、コピーしたものを「test2.html」として保存します。
保存したものを開いてみると、こんな風になっているはずです。
<html>
<head>
<title>はじめてのWEBデザイン</title>
</head>
<body bgcolor=”#4169e1”>
<p>はじめまして、WEBデザイン</p>
</body>
</html>
<head>
<title>はじめてのWEBデザイン</title>
</head>
<body bgcolor=”#4169e1”>
<p>はじめまして、WEBデザイン</p>
</body>
</html>
こんな風に。
先程と同じようにテキストエディタを開いて、コピーしたものを「test2.html」として保存します。
保存したものを開いてみると、こんな風になっているはずです。
背景の色が、あなたの指定した色に変わっています。
でも、これだと少し文字が読みづらいので、次は文字の色を変えてみましょう。
再び、好きな色を選んでください。
白 #ffffff
黒 #000000
青 #4169e1
緑 #3cb371
黄色 #ffff00
赤 #dc143c
黒 #000000
青 #4169e1
緑 #3cb371
黄色 #ffff00
赤 #dc143c
選んだ色を、今度は下記の文字列、「text=”〇〇〇〇〇”」の〇〇〇〇〇部分に入れてみましょう。
<html>
<head>
<title>はじめてのWEBデザイン</title>
</head>
<body bgcolor=”●●●●●” text=”〇〇〇〇〇”>
<p>はじめまして、WEBデザイン</p>
</body>
</html>
<head>
<title>はじめてのWEBデザイン</title>
</head>
<body bgcolor=”●●●●●” text=”〇〇〇〇〇”>
<p>はじめまして、WEBデザイン</p>
</body>
</html>
例えば、背景が青、文字が白なら、こんな風に。
<html>
<head>
<title>はじめてのWEBデザイン</title>
</head>
<body bgcolor="#4169e1" text="#ffffff">
<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ページ・WEBデザインの基礎となる部分の説明 ( インターネット・WEBの仕組み、なぜHTMLによってWEBページが作られるのか等 ) になります。
インターネット・WEBとは何か
ところで、先ほど書いていただいたあの文章、ありますよね。
<html>～というものです。
なぜあんなよく分からない文章で、WEBデザインができるのでしょうか？
<html>～というものです。
なぜあんなよく分からない文章で、WEBデザインができるのでしょうか？
それを知るにはまず、インターネットとは、WEBとは何かについて簡単におさらいしてみましょう。
インターネット、そしてWEBページがどのようなものかザックリと知ることで、WEBデザインの基本を知ることができます。
「そんなの知ってます！(｀･ω･´)ゞ」
という方は、読み飛ばしてくださいね(｀･ω･´)ゞ
インターネットとは、あなたと誰かを繋ぐネットワーク
まず、インターネットというのは、こうしてPCやスマホを通してやり取りできるネットワークのことを指します。
例えば、
あなたのスマホと友達のスマホを繋いだり、
あなたのPCと会社のPCを繋いだりするネットワークですね。
インターネットは、あなたと世界中の人のPCやスマホとを繋ぎます。
このインターネットというネットワークを利用して、通話したり、データをやり取りしたり、メールを送ったり、あなたが今見ているこのページのようなWEBページを見ることができます。
「ネットで検索する」と言われると、何となくインターネット＝GoogleやYahooのようなWEBページのことかと思うかもしれません。
が、厳密に言うとインターネットというのはネットワークのことだったんです。
例えば、
あなたのスマホと友達のスマホを繋いだり、
あなたのPCと会社のPCを繋いだりするネットワークですね。
インターネットは、あなたと世界中の人のPCやスマホとを繋ぎます。
このインターネットというネットワークを利用して、通話したり、データをやり取りしたり、メールを送ったり、あなたが今見ているこのページのようなWEBページを見ることができます。
「ネットで検索する」と言われると、何となくインターネット＝GoogleやYahooのようなWEBページのことかと思うかもしれません。
が、厳密に言うとインターネットというのはネットワークのことだったんです。
WEBとは、インターネット上の様々なコンテンツ
では、インターネットに対してWEBとは何でしょうか。
インターネットはネットワークでしたね。
あなたのスマホと友達のスマホを繋ぎ、世界中のPCやスマホとあなたを繋ぐものです。
インターネットはネットワークでしたね。
あなたのスマホと友達のスマホを繋ぎ、世界中のPCやスマホとあなたを繋ぐものです。
それに対してWEBというのは、インターネットというネットワークを使って、文章、画像、音楽、動画、などを送受信する仕組みのことです。
例えば、あなたがブログ書いて文章を発信するのも、動画を見たりしているのもWEBです。
WEBはインターネットを通じて、全世界の人がアクセスできます。
WEBの歴史
元々、インターネットが誕生して間もない頃、インターネット上には独立した文章がぽつぽつと存在していたんです。
ですが、別の文章とつながる技術が開発されたんです。
すると1つの文章から様々な文章がつなげることができました。そして、繋がれた文章は更に他の文章に繋がり、その先の文章でも更に他の文章とつながり……という風に、網目のようにひろがっていきました。
ですが、別の文章とつながる技術が開発されたんです。
すると1つの文章から様々な文章がつなげることができました。そして、繋がれた文章は更に他の文章に繋がり、その先の文章でも更に他の文章とつながり……という風に、網目のようにひろがっていきました。
例えば、僕が 【 人参を使ったレシピ 】 という文章を書いて掲載したとします。
その文章を作って掲載した段階では、どことも繋がりのない、インターネット上にぷかぷかと浮いている孤島でした。
でも、僕はそのレシピを考えるうえで、【野菜を使ったレシピ】という文章を参考にしていたんです。
なので、そこに 「 このレシピは【野菜を使ったレシピ】というページを見て考えました 」 という風に、【野菜を使ったレシピ】に移動できるようにしたんです。
よく見ますよね。文字をクリックすると、他のページに移動できる仕組み。
例えば、こんな風に。→ここをクリックするとyahooに移動します。
こんな風にリンクさせて、【人参を使ったレシピ】と【野菜を使ったレシピ】はつながりました。
よく見ますよね。文字をクリックすると、他のページに移動できる仕組み。
例えば、こんな風に。→ここをクリックするとyahooに移動します。
これをリンクといいます。
こんな風にリンクさせて、【人参を使ったレシピ】と【野菜を使ったレシピ】はつながりました。
更に、リンク先の【野菜を使ったレシピ】という文章は、様々な文章を参考に作られたものだったので、参考にした文章に移動できるようにリンクがつけられていました。
そして更に、【野菜を使ったレシピ】から移動できるサイトも様々な文章にリンクを貼っていて……
そして更に、【野菜を使ったレシピ】から移動できるサイトも様々な文章にリンクを貼っていて……
という風に、蜘蛛の巣のような複雑なつながりが作られていきました。
これをWWW(World Wide Web)、つまりWEBと呼ぶのです。
ご存知の通り、現在はYoutubeで動画を見たり、Instagramで写真を見たりできますよね。
でも、最初は文章だけだったんです。
※他のページへ移動させるリンクをハイパーリンクといいます。
また、ハイパーリンクによって繋がれた文章をハイパーテキストといいます。
WEBページはどうやって作られているの？
では、WEBページはインターネット上でどのように作られているのかという話に戻ります。
WEBページは、そのページを作った人が書いた設計図によってできています。
設計図というのは、先ほど書いていただいた
という言語で書かれているんです。
でも、不思議に思いませんか。
この言語、<html>～とか言われても、僕たちにはただの謎の文字列にしか見えません。
WEBページは、そのページを作った人が書いた設計図によってできています。
設計図というのは、先ほど書いていただいた
<html>
<head>
<title>はじめてのWEBデザイン</title>
</head>
<body>
<p>はじめまして、WEBデザイン</p>
</body>
</html>
<head>
<title>はじめてのWEBデザイン</title>
</head>
<body>
<p>はじめまして、WEBデザイン</p>
</body>
</html>
という言語で書かれているんです。
でも、不思議に思いませんか。
この言語、<html>～とか言われても、僕たちにはただの謎の文字列にしか見えません。
どうやってこれを
こんな風に表示しているのでしょうか。
実は、WEBページと僕たちをつなぐ役割を担う存在がいるんです。
それがChromeやSafari、Internet ExplorerなどのWEBブラウザ。
つまり、先ほどの<html>～というのは
「こんな風にデザインしたいんだ。背景はこんな色にしてくれ。文字色はこの色。こんな文章を書いてくれ」
という設計図をWEBブラウザに伝えるものだったんです。
ゲームによく出てくる魔法と一緒です。
呪文を詠唱すると魔法を放つことができますが、WEBページも呪文を詠唱すると出現します。
WEBブラウザはこちらの唱える呪文の通りにWEBページを描き、僕たちに見せてくれます。
ホームページ？ WEBサイト？ WEBページ？
ホームページ、WEBサイト、WEBページ、はだいたい同じ意味です。
厳密に言うと、chromeやsafari、インターネットエクスプローラー等のWEBブラウザを立ち上げたときに一番最初に表示されるWEBサイト(例えばGoogleやYahoo)がホームページ。
複数のWEBページによって作られた1つの集合体がWEBサイトだったりするのですが、ややこしくなるので覚えなくてもOKです。
例：
このページや、ライセンスポリシーの1つ1つはWEBページ。
「【初心者向け】独学でOK！おしゃれなWEBデザインの作成方法」というのは、このページやライセンスポリシーのページを含めたWEBサイト。
厳密に言うと、chromeやsafari、インターネットエクスプローラー等のWEBブラウザを立ち上げたときに一番最初に表示されるWEBサイト(例えばGoogleやYahoo)がホームページ。
複数のWEBページによって作られた1つの集合体がWEBサイトだったりするのですが、ややこしくなるので覚えなくてもOKです。
例：
このページや、ライセンスポリシーの1つ1つはWEBページ。
「【初心者向け】独学でOK！おしゃれなWEBデザインの作成方法」というのは、このページやライセンスポリシーのページを含めたWEBサイト。
WEBデザインをするにはHTMLとCSSを習得する必要あり
先ほど解説した通り、WEBページはWEB専用の呪文を書くことで出現します。
ということはつまり、WEBデザインをするにあたって重要なのが、先ほどの<html>～という呪文ということになります。
この言語はHTML、またはCSSと呼ばれています。
あなたのやりたいWEBデザインを実現してくれるには、このHTMLとCSSという呪文が必要不可欠なんです。
もしかしたら、「あんなの覚えられない！」と思った方もいるかもしれません。
ですが、悲観するのは早いです。
あんなものは「html 背景色」なんかで検索すれば、いくらでも教えてくれます。
恐らく全てを覚えている人は、プロのWEBデザイナーの中でも少数ではないでしょうか。
まして、あの言語を完璧に覚えるというのは、コーダーやプログラマーといった方々の領域になります。
まずは、大まかな仕組みを知るだけで大丈夫です。
HTML・CSSの習得をするには何をしたらいいのか
WEBデザインをするためには、HTML・CSSの習得は必要不可欠です。
とにかく最初はやってみて、少しずつ覚えることが非常に大切です。
では、具体的にどのように勉強して覚えていけばいいのか、おすすめの勉強法を紹介します。
とにかく最初はやってみて、少しずつ覚えることが非常に大切です。
では、具体的にどのように勉強して覚えていけばいいのか、おすすめの勉強法を紹介します。
動画で勉強する
HTMLをはじめとした、様々なプログラミングを勉強する人であれば、必ず一度はお世話になるのがドットインストールです。
●ドットインストール
https://dotinstall.com/
ドットインストールは、短い3分の動画でプログラミングの勉強ができるサイトです。
まだプログラミングに触れたことが一度もない初心者向けのものから、プロが参考にするものまで、非常に幅広い動画が揃えられています。
実践も交えて勉強することができるので、非常におすすめです。
基本的に登録は無料で、一部の動画を閲覧する場合は有料になります。
が、基本的なWEBデザインを学ぶうちは、無料で十分過ぎるコンテンツが閲覧可能です。
ひとまず登録して、簡単なところから勉強をはじめてみましょう。
https://dotinstall.com/
ドットインストールは、短い3分の動画でプログラミングの勉強ができるサイトです。
まだプログラミングに触れたことが一度もない初心者向けのものから、プロが参考にするものまで、非常に幅広い動画が揃えられています。
実践も交えて勉強することができるので、非常におすすめです。
基本的に登録は無料で、一部の動画を閲覧する場合は有料になります。
が、基本的なWEBデザインを学ぶうちは、無料で十分過ぎるコンテンツが閲覧可能です。
ひとまず登録して、簡単なところから勉強をはじめてみましょう。
本で勉強する
勉強といえば、本から知識を得ることも効果的です。
僕のおすすめを何冊か紹介します。
これらの本は非常におすすめで、まさに初心者の方に読んでいただきたい本です。
なんですが……
注意したいのが、頑張って全部を読もうとしないでほしいという点です。
「じゃあなんで本をすすめたんだ？」 と思うかもしれませんが、こういった勉強するための本は、頑張って読もうとすると、大体途中で飽きるか眠くなります(笑)
なので、小説のように最初の1ページから最後のページまで余さず読んでやろう！ と意気込むのではなくて、必要なところを読むだけでもOKです。
読むのが面倒になり、勉強することも億劫になってしまうこともあるので、辞書くらいのつもりで読んでみると続きやすいです。
勿論、本が好きで最初から読みたいのであれば、それはそれで素晴らしいことです。
本をあまさず活用できると思いますから、たくさん読んでください。
WEBデザインは実践が大事
WEBデザインは実践することが非常に重要です。
WEBデザインに限りませんが、本で読んだ知識は使わなければ覚えられなかったりしますよね。
必ず自分の手を動かして、実際にＨＴＭＬやＣＳＳを書いて、テストした結果を見ながら勉強してみましょう。
本に飽きたら実際にＨＴＭＬのコードを書いてどのようなデザインになったのか確認してみるなど、勉強法を工夫してみると楽しくなることもあります。
WEBデザインに限りませんが、本で読んだ知識は使わなければ覚えられなかったりしますよね。
必ず自分の手を動かして、実際にＨＴＭＬやＣＳＳを書いて、テストした結果を見ながら勉強してみましょう。
本に飽きたら実際にＨＴＭＬのコードを書いてどのようなデザインになったのか確認してみるなど、勉強法を工夫してみると楽しくなることもあります。
画像を編集して、ワンランク上のWEBデザインへ
HTMLやCSSはWEBデザインの基礎といえますが、そこからワンランク上のWEBデザインをするには重要なものがあります。
それは画像です。
洗練されたうつくしいWEBデザインを見た時に、吸い込まれそうな美しい画像に目を奪われることも多いと思います。
デザインにとって画像は非常に重要になります。
ああいった画像を作るうえで必要になるのが、画像編集ソフトです。
つまり、洗練されたWEBデザインをするうえで、画像編集ソフトが使用できることは必須ともいえるのです。
画像編集ソフトは既存の画像をワンランク上のものに編集したり、またはイチから画像を描いたりと、幅広い表現を可能にしてくれます。
それは画像です。
洗練されたうつくしいWEBデザインを見た時に、吸い込まれそうな美しい画像に目を奪われることも多いと思います。
デザインにとって画像は非常に重要になります。
ああいった画像を作るうえで必要になるのが、画像編集ソフトです。
つまり、洗練されたWEBデザインをするうえで、画像編集ソフトが使用できることは必須ともいえるのです。
画像編集ソフトは既存の画像をワンランク上のものに編集したり、またはイチから画像を描いたりと、幅広い表現を可能にしてくれます。
最初は無料の画像編集ソフトで画像編集に慣れる
WEBデザインをはじめたばかりで、高性能な画像編集ソフトをすぐに購入する必要はありません。
プロが使用する画像編集ソフトは月額料金がかかるものが多く、ある程度画像編集ソフトの使い方の要領が分かってから買っても遅くありません。
まず最初は無料で使用できて、なおかつ高性能な画像編集ソフトからはじめてみましょう。
●Fotor
https://www.fotor.com/jp/
背景の除去、画像を明るくするなどのフィルターをかけたり、シミやシワを消すこともできます。
有料版もありますが、無料でも充分役立ってくれるでしょう。
初心者にも使いやすいシンプルな編集画面になっており、画像編集の基本を学ぶに相応しいソフトです。
Fotorのサイト上に画像をアップロードして編集する、ブラウザで使用するタイプのソフトです。使用するにはオンラインである必要があります。
●GIMP
プロが使用する画像編集ソフトは月額料金がかかるものが多く、ある程度画像編集ソフトの使い方の要領が分かってから買っても遅くありません。
まず最初は無料で使用できて、なおかつ高性能な画像編集ソフトからはじめてみましょう。
●Fotor
https://www.fotor.com/jp/
背景の除去、画像を明るくするなどのフィルターをかけたり、シミやシワを消すこともできます。
有料版もありますが、無料でも充分役立ってくれるでしょう。
初心者にも使いやすいシンプルな編集画面になっており、画像編集の基本を学ぶに相応しいソフトです。
Fotorのサイト上に画像をアップロードして編集する、ブラウザで使用するタイプのソフトです。使用するにはオンラインである必要があります。
●GIMP
インストールすることで使用できるので、オフラインで作業したいときにもオススメです。
画像編集ソフトで最も有名、かつプロも使用しているPhotoshopにも負けない程に多機能で高機能。
Fotor程シンプルな作りにはなっていませんが、Fotorでは少し物足りなくなってきた場合はこちらがオススメ。
また、いずれPhotoshopを使うことを見込んでGIMPに慣れておくと、Photoshopを使ったときに戸惑わなくていいので便利です。
更に高品質な画像編集ならPhotoshopとIllustrator
技術が上がって、もっと色々なことを試したくなったとき、その時はプロ御用達の有料の画像編集ソフトを使うことをおすすめします。
より美しい、商品として成立する洗練されたWEBデザインを作ろうと思ったときは、画像編集ソフトの代表的な2つの購入を検討してみてください。
- Photoshop
- illustrator
大体この2つのどちらかを使用します。
プロでもすべての機能を使いこなせる人は少ないと言われる程に多機能で、ハイレベルな画像編集をするのに相応しい高機能なソフトです。
現在は月額で料金を支払う仕組みになっているので、本格的に毎日使用するようになった場合に購入を検討してみると良いでしょう。
WEBデザインの参考サイト
では、いざWEBデザインしよう！ と思ったときに、最初はどんなサイトを作ればいいのか迷ったり、どんな風にデザインをしたら良いのか分からないことがあります。
そんなときは、様々なギャラリーサイトを見てみると良いでしょう。
そんなときは、様々なギャラリーサイトを見てみると良いでしょう。
ギャラリーサイトとは、優れた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、ＶＲ、sound等の表現ごとのカテゴリもあります。
実践的な参考サイトが多いサイトです。
●SUNDAYPROJECT APPLICATIONS DESIGN ARCHIVE
https://sundayprojectapp.com/design-archive/
デザインの系統・色等で検索できるギャラリーサイトです。
サイトデザインの画像が大きく見やすくなっています。
シンプルなサイトの作りになっているので、非常に見やすいサイトです。
プロ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、ＶＲ、sound等の表現ごとのカテゴリもあります。
実践的な参考サイトが多いサイトです。
●SUNDAYPROJECT APPLICATIONS DESIGN ARCHIVE
https://sundayprojectapp.com/design-archive/
デザインの系統・色等で検索できるギャラリーサイトです。
サイトデザインの画像が大きく見やすくなっています。
シンプルなサイトの作りになっているので、非常に見やすいサイトです。
WEBデザインは勉強と実践あるのみ
WEBデザインの仕組みをざっくりと分かっていただけたでしょうか。
WEBデザインをするうえで使用するHTML/CSSは日々新しいものが生まれ、そしてWEBデザインのトレンドも日々変わり続けています。
基礎的なことを勉強したあとも、こまめに最新情報のチェックを欠かさず行いましょうね。
では、ここまで読んでいただき有難うございます。
お互いに、素晴らしいWEBデザインを作りましょう。