みなさん、こんにちわ!
ジャングルオーシャンのラファエロです!!
Webデザインって、結構大変ですよね。
サイト全体のデザイン考えて、配色も考えて、フォント選んで、コーディングして…
初心者には難しすぎる!!
ということで、今回は…
初心者の方でもWebデザインを楽にするコツと便利なサイトを紹介いたしますので、ぜひ参考にしてみてください!
デザインはギャラリーサイトを参考に!
良いデザインをするためには、とにかく良いデザインをサイトをたくさん見て参考にするのが一番!
そこで良いデザインのサイトを集めたギャラリーサイトを活用しましょう!
縦長デザインのギャラリーサイト「MUUUUU.ORG」
こちらのサイトは、クオリティが高い縦長のサイトを厳選して集めている「MUUUUU.ORG」というギャラリーサイトです。
スマートフォンの普及に伴い縦長デザインの需要が高まっているので、参考にしたいサイトがかなり多く見れると思います!
今どきデザインのギャラリーサイト「ズロック」
かっこよくて洗練されたデザインのサイトを探したいなら「ズロック」というギャラリーサイトがおすすめ!
動画やパララックスなど、最近流行りの動きのあるサイトも充実しているので、ぜひ参考にしてみましょう!
コーディングは公開されているコードを真似る!
やはり、初心者の鬼門となるのがHTML・CSS・JavaScriptでのコーディング。
世界中のWebクリエイターが公開しているコードを真似したり、改造して使わせてもらいましょう!
世界中のWebクリエイターのコードを気軽に触れる「CODEPEN」
「CODEPEN」は、Webブラウザ上でHTML/CSS/JavascriptのコーディングがリアルタイムでプレビューしながらできるWebサービスで、世界中のWebクリエイターがこのCODEPENで様々なコードを公開しています!
Webサイトのテンプレートのようなコードから複雑なアニメーションまで様々なものが公開させているので、コードを色々イジって使わせてもらっちゃいましょう!
CODEPENの登録方法や使い方はこちらの記事を見るのが分かりやすいかと!
様々なプログラミングが公開されている「GitHub」
エンジニアには欠かせないWebサービスになりつつある「GitHub」。
こちらはHTML/CSS/Javascriptに限らず、様々なプログラミング言語のコードが公開されています!
詳しい使い方などは、こちらの記事を読むと分かりやすいです!
色はカラーチャート・サンプルから手早く選定!
CSSに色の指定をいちいち書くのは面倒!
カラーチャートやサンプルからコピー&ペーストで手早く簡単に選定しちゃいましょう!
マテリアルデザインのカラーチャート「Material Design Colors」
https://www.materialui.co/colors
こちらはGoogleが推奨しているマテリアルデザインのカラーチャートです。
マテリアルデザインの色は、スマートフォンなどで屋外でWebサイトを見ても見えずらくなりにくいので、このカラーチャートから色を選択するのがオススメ!
使いたい色をクリックするだけでコピーできるのも便利でいいですよね(^^)
グラデーションCSSサンプル集「WebGradients」
こちらは透明感のある美しいグラデーションのCSSサンプル集です。
CSSでグラデーションの指定を書くのってちょっと面倒だったりしますが、このサイトを利用すればコピー&ペーストで簡単にグラデーションのCSSの指定ができてしまうので非常に便利です!
フォントは便利なサイトを活用!
フォントの選定次第でWebサイトの印象や雰囲気はかなり左右されます!
つまり、おしゃれなフォントを選べばおしゃれなサイトになるということなので、フォントに関する便利なサイトを活用しましょう!
Google提供のWebフォント「Google Fonts」
「Google Fonts」はGoogleが無料で提供しているWebフォントを利用できるサービスです。
Webフォントは、色々なおしゃれなフォントをWebサイトで使うことができるので、デザインのクオリティを上げたいならぜひ活用してましょう!
詳しい使い方やWebフォントについては、こちらの記事が分かりやすいですよ!
超便利なWebサービス「サルワカ Font-Familyメーカー」
https://saruwakakun.com/font-family
「サルワカ Font-Familyメーカー」は、ややこしいfont-familyの指定を簡単にできるWebサービスです。
フォント名を自分で記述する必要がなく、使いたいフォントをドラッグしていくだけでfont-familyの指定ができてしまうので超便利!
詳しい使い方は、このサービスを作ったサルワカさんの記事で紹介されてますので、こちらをチェックしてみてくださいね!
1からWebデザインを学びたい方はこちらの記事をチェック!
いかがだったでしょうか?
1からWebデザインを学びたい方はこちらの記事もチェックしてみましょう!
以上、ラファエロでした!