【初心者必見】Webデザインを楽にするコツ&便利なサイト集!

【初心者必見】Webデザインを楽にするコツ&便利なサイト集!

みなさん、こんにちわ!
ジャングルオーシャンのラファエロです!!

Webデザインって、結構大変ですよね。

サイト全体のデザイン考えて、配色も考えて、フォント選んで、コーディングして…

初心者には難しすぎる!!

ということで、今回は…

初心者の方でもWebデザインを楽にするコツと便利なサイトを紹介いたしますので、ぜひ参考にしてみてください!




デザインはギャラリーサイトを参考に!

良いデザインをするためには、とにかく良いデザインをサイトをたくさん見て参考にするのが一番!

そこで良いデザインのサイトを集めたギャラリーサイトを活用しましょう!

MUUUUU.ORG

muuuuu
https://muuuuu.org/

こちらのサイトは、クオリティが高い縦長のサイトを厳選して集めている「MUUUUU.ORG」というギャラリーサイトです。

スマートフォンの普及に伴い縦長デザインの需要が高まっているので、参考にしたいサイトがかなり多く見れると思います!

ズロック

zzrock
https://www.zzrock.net/

かっこよくて洗練されたデザインのサイトを探したいなら「ズロック」というギャラリーサイトがおすすめ!

動画やパララックスなど、最近流行りの動きのあるサイトも充実しているので、ぜひ参考にしてみましょう!

コーディングは公開されているコードを真似る!

やはり、初心者の鬼門となるのがHTML・CSS・JavaScriptでのコーディング。

世界中のWebクリエイターが公開しているコードを真似したり、改造して使わせてもらいましょう!

CODEPEN

codepen
https://codepen.io/

「CODEPEN」は、Webブラウザ上でHTML/CSS/JavascriptのコーディングがリアルタイムでプレビューしながらできるWebサービスで、世界中のWebクリエイターがこのCODEPENで様々なコードを公開しています!

Webサイトのテンプレートのようなコードから複雑なアニメーションまで様々なものが公開させているので、コードを色々イジって使わせてもらっちゃいましょう!

CODEPENの登録方法や使い方はこちらの記事を見るのが分かりやすいかと!

namagomi-days.com

GitHub

github
https://github.co.jp/

エンジニアには欠かせないWebサービスになりつつある「GitHub」。

こちらはHTML/CSS/Javascriptに限らず、様々なプログラミング言語のコードが公開されています!

詳しい使い方などは、こちらの記事を読むと分かりやすいです!

techacademy.jp

色はカラーチャート・サンプルから手早く選定!

CSSに色の指定をいちいち書くのは面倒!

カラーチャートやサンプルからコピー&ペーストで手早く簡単に選定しちゃいましょう!

Material Design Colors

Material Design Colors
https://www.materialui.co/colors

こちらはGoogleが推奨しているマテリアルデザインのカラーチャートです。

マテリアルデザインの色は、スマートフォンなどで屋外でWebサイトを見ても見えずらくなりにくいので、このカラーチャートから色を選択するのがオススメ!

使いたい色をクリックするだけでコピーできるのも便利でいいですよね(^^)

WebGradients

webgradients
https://webgradients.com/

こちらは透明感のある美しいグラデーションのCSSサンプル集です。

CSSでグラデーションの指定を書くのってちょっと面倒だったりしますが、このサイトを利用すればコピー&ペーストで簡単にグラデーションのCSSの指定ができてしまうので非常に便利です!

フォントは便利なサイトを活用!

フォントの選定次第でWebサイトの印象や雰囲気はかなり左右されます!

つまり、おしゃれなフォントを選べばおしゃれなサイトになるということなので、フォントに関する便利なサイトを活用しましょう!

Google Fonts

Googlefonts
https://fonts.google.com/

「Google Fonts」はGoogleが無料で提供しているWebフォントを利用できるサービスです。

Webフォントは、色々なおしゃれなフォントをWebサイトで使うことができるので、デザインのクオリティを上げたいならぜひ活用してましょう!

詳しい使い方やWebフォントについては、こちらの記事が分かりやすいですよ!

saruwakakun.com

サルワカ Font-Familyメーカー

サルワカ Font-familyメーカー
https://saruwakakun.com/font-family

「サルワカ Font-Familyメーカー」は、ややこしいfont-familyの指定を簡単にできるWebサービスです。

フォント名を自分で記述する必要がなく、使いたいフォントをドラッグしていくだけでfont-familyの指定ができてしまうので超便利!

詳しい使い方は、このサービスを作ったサルワカさんの記事で紹介されてますので、こちらをチェックしてみてくださいね!

saruwakakun.com

1からWebデザインを学びたい方はこちらの記事をチェック!

いかがだったでしょうか?

1からWebデザインを学びたい方はこちらの記事もチェックしてみましょう!

以上、ラファエロでした!




デザインカテゴリの最新記事