こんにちは。ウェブデザイナーのMADOKAです。
最近noteを始めたのですが、めちゃくちゃ書きやすいですね・・！
コンテンツの幅とか至ってシンプルな装飾も関係しているのでしょうが、自分なりにUI設計を考えるいい機会になりました。
そんなこともあって、自分のサイトそっちのけでnoteへの記事投稿が続いていましたが、今日は久々に自分のブログでウェブサイト制作時に役立つサイトをご紹介したいと思います。
私がウェブサイト制作時にフル活用しているサイトばかりですので、ご存知でない方はぜひ参考にしてみてください。
サイトリンク集
ウェブサイトのデザイン案を考えるとき、必ずといっていいほど参考にしているのがこちらのサイトリンク集です。
私はこれらのサイトの他にピンタレストも活用しています。
1. 1guu.jp（イチグウ）
私が一番使うことが多いのがこのサイトかも。
一目でサイトの雰囲気が確認しやすいのでかなり重宝しています！
2. S5-Style
私が心の底から尊敬しているアートディレクター 田渕 将吾さんが運営されているデザインギャラリーサイト。
第一線で活躍中の田淵さんが運営されているだけあって信頼をおけるサイト集だといえると思います。
3. MUUUUU.ORG
こちらもよく利用させていただいているギャラリーサイト。
上記２つのサイトと同様に見やすい＆探しやすいのでとっても重宝しています。
4. 81-web.com
81-web.comこちらもよく利用させていただいているサイト集です。デザインがとても見やすくて助かっています。
4. Web Design Clip
LP制作の際に毎度参考にしているのはこちらのサイト。
他のLP参考サイトは若干見難い印象が多いなか、こちらはシンプルなインターフェースでとても見やすいです。
サイトカラー
サイトカラーを考えるとき、例えば使いたいメインカラーが１色決まっていた場合、アクセントカラーに何色をもってこようか悩みませんか？
ウェブデザイナー初期の頃は、この色とこの色なら合うかな・・と自分なりに何通りもの組み合わせを出しながら決めることが多かったのですが、色の参考サイトで情報収集するようになってからは色選びに迷うことが少なくなりました。
1. HUE / 360
メインカラーを選ぶときにはこちらのサイトを参考にしていることが多いです。
マッチする配色の候補も出してくれるので助かりますよね。
2. Coolors
恐らく色選びの際に一番お世話になっているサイト。
使いたい色を指定して固定すれば、あとはスペースキーをぽちぽちするだけで、何通りもの配色を提案してくれる優れもの！
私はここで大体の配色を決めてから、あとは自分で彩度や明度など調整して決めることが多いです。
3. WebGradients
グラデーションカラーを使いたいときに参考にしているサイト。
パレットみたいにきれいに並んでいるので、感覚的に色を選びやすい。
写真素材
サイト制作には絶対欠かせない写真素材。
ただ、案件によっては写真素材そのものが全くなかったり、あったとしてもイマイチ・・な場合も。予算が十分な場合は、自分で撮影する、または、カメラマンに撮影してもらうこともできますが、そうでない場合は難しいですよね。
そんなときに役立つのが以下の商用利用OKのフリー写真素材サイトです。
1. O-DAN
国内外のフリー写真素材を探すなら迷わずこれです。
こちらのサイトは、一括で複数のサイト内の画像検索ができるので効率的に素材探しができます。
ただ、国内の写真がほしい場合はあまり向きません。
2. photo AC
国内の写真素材がほしいならこのサイトがおすすめ。
種類も豊富で、よく使うようなイメージ写真が多いので非常に助かっています。
イラスト素材
写真の次に必要になることが多いのが、デザインのアクセントやアイコンなどで使えるイラスト素材。
本来なら、サイトデザインに合わせて作った方が、オリジナリティがでるのでいいのはもちろんですが、予算が十分でない場合も多いので、そんなときはフリー素材にお世話になります。
1. イラストAC
とにかく種類が多い。PNGやJPEG形式はもちろん、AIデータでもダウンロードできるので、アレンジしたいときにはかなり便利。
ただ、種類が多くテイストもバラバラなので探すのに時間がかかります・・。
いらすとん
「いらすとや」さんの素材を各所で見かけるのですが、それと同じような雰囲気をお探しの方におすすめなのがこちら。
保育園や幼稚園、小学校などの低学年向けの教育機関のサイトや印刷物の制作にも使えそう。
ガーリー素材
その名のとおり、女子的なサイト等に使える素材集。
お花だったり、葉っぱだったり、動物だったり、ちょっとした女の子らしいアクセントがほしいときによさげ。
LINE ILLUST
ちょっとおしゃれなイラストがほしいときにおすすめなのがこのサイト。
シンプルな線画で描かれたイラストなので使いやすいです。
FLAT ICON DESIGN
フラットアイコンをお探しならこちら。
配色パターンや背景のあり・なしを選べるので、使いたいデザインに合わせてアレンジできるので便利です。
flaticon
www.flaticon.comフラットアイコンのもう一つのおすすめサイト。
ただ、フリー利用の際には参照元の掲載が必要とのことですので、たくさん使われる方は有料会員になるのもありだと思います。
humaaans
IT・マーケティング分野でよくみられるタッチの素材をお探しならこちら。
ハイクオリティな素材で、パーツごとに色も変更可能なのでアレンジができて便利です。
unDraw
こちらもIT・マーケティング分野でよくみられるタッチの素材集。
種類が豊富でサイト上で色変更できて雰囲気を確認できるので使いやすい。
stories
stories.freepik.comこちらも上述２つと似たようなタッチのイラスト素材集です。
絵のタッチや背景パターンが数種類選べて色々と雰囲気を変えられます。
フキダシデザイン
吹き出しのイラストをお探しならこちらがおすすめ。
デザインが豊富で、各デザインの色や線のあり・なしなどのパターンもアレンジできます。
シルエットデザイン
影絵の素材をお探しならこちら。
私は普段、「お客様の声」などの匿名での感想や声を掲載する際にこちらの素材を利用することが多いです。
マンガパーツ
漫画でみられるような集中線や落ち込んだとき（ガーン）の移動線が必要なときはこちらを利用しています。
背景パターン
使用頻度は少なめですが、ちょっとサイトの雰囲気を変えたい・こだわりたいときに使えるのが背景パターン。
（個人的に背景パターンの使用はデザインセンスが問われる気がするので、やみくもに使用するのはおすすめしません・・）
Subtle Patterns
背景パターンを探すときはまずこのサイト。
種類も豊富で、シンプルかつ上品な素材が多く使いやすいのが特徴です。
TRANSPARENT TEXTURES
自分好みの背景色にアレンジしたい場合はこちらがおすすめ。
パターン素材の背景が透明になっているので、CSSのbackgroundで変更可能です。
ザザッと急ぎ足で私がよく利用しているサイトのいくつかを紹介しましたが、あまりにも量が増えそうなので今日はここらへんで。。
ぜひウェブサイト制作時にお役立ていただけければ幸いです。
上記以外にも「こんなサイトもあるよ〜」などがあれば、Twitter経由ででも教えていただけるとうれしいです！
他の便利なサイトや新しく見つけたサイトについても、改めてご紹介したいと思いますので、引き続きよろしくお願いします。
それでは皆さま、よい一日を。