Webサイトを作成時によくお世話になるサイト&サービス:素材編

Best Resources for Web Design and Development

どうも~ 恒例の月曜やる気ゼロなカテリーナです!Buongiorno!

今回は「カテリーナがWebサイトを作っていて頻繁にお世話になるサイト&サービスのリスト」をご紹介します。

 

ぶっちゃけ自分用のリストなんですが(笑)。

 

あんだけしょっちゅう使うのに、何故かブックマークもせず使うたびに検索してるサービスもあったりして何やってんだわたし、みたいな。

とにかく一同に全てのリソースが集まっていると結構便利なんですよね。

かなり長いリストなので、画像も何も入れないシンプルなものにし、かつ「素材編」「Webデザインに役立つサイト編」「コーディングに役立つサイト編」「その他お役立ちサービス編」の4回に分けます

前もってお断りしておきますが、ほとんど全てのサイトは英語です。日本語の場合は注記します。

素材編
Webデザインに役立つサイト
コーディングに役立つサイト
その他お役立ちサービス

WEBサイトを作るときにお世話になっている便利なサイトリスト

素材編

フォント
  • Google Fonts: これはもうCSSのスタイリングなどでは必須というか。約800種類のフォントがあるので色々と遊べます。
  • Creative Blog: Webデザイナーだけでなく、グラフィック、DTPデザイナーなど全てのデザイナーにとって使える無料フォントのリスト。結構更新されてます。
  • Font Pair: Google Fontsから「こんなフォントの組み合わせはどう?」と提案してくれるサイト。 色々デザインしていると、お決まりのフォントの組み合わせばかり使うようになってくるので、こういう提案型サイトは刺激をもらえるというか。
  • Google Web Fonts Inspiration: ここもGoogle Fontsのペアリング提案サイトなんですが、何と言っても見ているだけで美しいサイトです。
  • Typogui.de: タイポグラフィの基本がここを読めば分かります。
  • Font Reach: ネット上に実際に公開されているサイトで、どのフォントがどの位使われているのかを表示するサイト。ここを見ると、どのフォントが今のトレンドなのかが一目瞭然です。
  • WhatTheFont!: 手持ちの画像の中の文字が何のフォントか分からない時に、アップロードして検索が出来る非常に便利なサイト。
カラー
  • Palettes | Flat UI Colors: ま、見てもらえばどういう感じか分かります。ここは正直あまり使ってません。
  • Get UI Colors: ここはHEX、RGB、RGBAモードが選べて、カラーコードがコピー出来るので結構便利。
  • 0 to 255.com: ベースカラーを1つ決めれば、濃いトーンと薄いトーンのチャートがドバーっと出てくる。かなり便利。
  • Adobe Color CC: 色彩学にのっとった理論から、5種類の色を提案してくれるサイト。便利なのが手持ちの画像をアップロードすると、カラーコードを出してくれるサービス。これはとても重宝します。Adobe IDがあれば自分で作った色の組み合わせをSaveすることが出来る。
  • UI Gradients: 美しいグラデーションがひたすら続くサイト。気に入ったグラデーションをJPG画像としてダウンロード出来るし、CSSコードもゲット出来てとっても便利。
画像
  • Unsplash: 美しい高画質の写真素材がてんこ盛りなサイト。ここはしょっちゅう使ってます。
  • Pexels: ここも高画質の写真素材がてんこ盛りなサイト。
  • Visual Hunt: ここは日本では知る人ぞ知るサイトと思うんで、他が使ってない画像を探している場合はいいかもです。しかも検索しやすいし、素材も美しいです。
  • Foodiesfeed: ここは日本ではあまり知られてないサイトだと思います。徹底的に食べもの関係の写真だけという。雰囲気がいい素材が多いので好きです。
  • The Pattern Library: ここはよく使う使わない以前に見ているだけで楽しいサイト。たまにPS用にもらって行きます。
  • Subtle Patterns: またまた日本ではあまり知られてないサイトだと思います。ここからもたまにPS用にもらって行きます。

Webサイトデザインをする時に役に立つ素材サイトまとめ

今回は、素材編の「フォント」「色」「画像」に関するサイトリストをお届けしました。

カテリーナは元々グラフィックデザインが出発点なので、どうしてもこっち方面に不必要に力を入れてしまうんですが(笑)、

 

他にもまだ素材リストに載せたいサイトがあるので、随時更新していきたいと思います。

 

次回は「Webデザインに役立つサイト編」をお届けします。

 

それではここまで読んでいただいてどうもありがとうございました!

4 thoughts on “Webサイトを作成時によくお世話になるサイト&サービス:素材編

  1. こんにちは、コーディング初心者のシノハラと申します。 はじめまして。
    一つ質問をさせていただいてもよろしいでしょうか。グーグルフォントの使い方がよく分からなくてググってみたんですが、
    そこに書いてあったやり方に従うと出来るんですけど、いざ1人でやる段階になるとさっぱり分からなくなってしまいます。
    カテリーナさんはどういう風に設定されていらっしゃいますか? 
    とても変な質問だとは存じ上げておりますが、どうぞよろしくお願いいたします。

  2. シノハラさん こんにちは! コメントありがとうございます。
    そして全然変な質問じゃないです!!!
    わたしも最初の頃はGoogle Fontsの設定の仕方がよく分からなかった
    覚えがありますからーー!

    グーグルフォントの設定方法は3通りあります。

    1. Google Fonts APIを取得して、HTMLコードの中に埋め込み、CSSファイル内でフォントを指定する方法
    2.@importタグでCSSファイルにGoogle Fontsを入れ込む方法
    3.ご自分のコンピューターに使いたいフォントをダウンロードしてCSSファイル内でフォントを指定する方法

    わたしは1番目の方法をよく使います。 もしこの解説が????となった場合は教えてください。
    記事として例を示しながらガッツリ説明しますよ。 

  3. シノハラです。とても丁寧なご解説をして下さりどうもありがとうございました。
    でもよろしければガッツリ記事にしていただけますでしょうか?私だけかもしれませんが、
    初心者にとっては何もかもが難しく感じてしまって。それと英語が苦手なもので…(苦笑)
    自分勝手な事ばかり言って申し訳ありません。

  4. シノハラさん お返事が遅くなって申し訳ありません!
    遅くなったお詫び?に今日の記事はGoogle Fontの設定の仕方にしますね!
    それではもう少しお待ちくださいませ。

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.