Web制作で良く使う素材サイトについてまとめました

f:id:sharpb9c42f:20200917131740p:plain

こんにちはデザインチームオカベです。
前回はCSS関連のお役立ちサイトについてまとめましたが、今回は素材周りで個人的に良く利用するサイトについてまとめたいと思います。
下記サイトはいずれも無償提供・利用可能なものです。

素材編

1:Unsplash

圧倒的にオススメな写真素材サイトです。
世界中のフォトグラファーが撮影した、ハイクオリテイ・高画質な素材が無料で利用できるのは圧巻です。
強いていえば人物や風景は海外のシーンが多いので、和の雰囲気の画像をお探しの方には少し辛い面があるかもしれません。

2:ICOOON MONO

ベクター系素材からひとつ。アイコン素材が提供されています。
数・ジャンルの幅が広く欲しいアイコンは大体ある印象です。
同じ物でもいくつかパターンがあるのも嬉しいですが、全体的に丸みがあり柔らかい印象なので、お硬いシーンでは調整が必要かもしれません。

3:SILHOUETTE DESIGN

同じくベクター系素材から。
こちらはアイコンでは無くシルエット素材なので、ディテールが細かいのが特徴です。
よりリアルな素材を求めている方にはおすすめです。

フォント編

1:Icon Font & SVG Icon Sets ❍ IcoMoon

オリジナルのアイコンフォントを作ることができる、とてもありがたいサイトです。
上記で紹介したアイコン素材サイトと供に利用すると効果的です。

右上の「IcoMoon App」ボタンからアイコンフォント作成画面にいけます。
自分で作成したオリジナルアイコンをフォント化できますし、あらかじめ用意されたアイコンを使用することもできます。

f:id:sharpb9c42f:20200917123936p:plain

フォント化したいアイコンが決まったら、画面右下「Generate Font」からフォント化に必要なデータをダウンロードできます。

f:id:sharpb9c42f:20200917123946p:plain

2:Google Fonts

ひと昔前までは普及していなかったWebフォントも今では当たり前になりましたが、そんなご時世にとても助かります。
使用したいフォントとウェイトを選択すると読み込み用のコードが用意されるので、利用もとても簡単です。
ただ仕方がないですが、欧文フォントが圧倒的に多いです。

f:id:sharpb9c42f:20200917123953p:plain

オカベ カテゴリーの記事一覧 -