ハジメラボ HAJIME LABO

さかた

2019/08/29 (木)

デザイン

最近見つけたデザイン制作時に役立つサイトまとめ -2019.8-

こんにちは、さかたです。

私の基本的な業務は、サイト制作時のディレクションやECサイトの代行管理ですが、お客様とのやり取りや制作物の内容、その時の各スタッフの配置状況などを踏まえ、ディレクションからデザイン制作までを自ら行うことが稀にあります。

お客様のご要望と弊社の提案を組み合わせられるようにデザイン制作をしていますが、日頃からデザイン作業をバリバリ行っているわけではないので、どうしても何も思い浮かばない時があります。

そんな時は、企画内容をもう一度読み直したり、エンドユーザーがどのような人なのかを考え直したりするのですが、参考になりそうなサイトを探すこともたくさんあります。

ネット世界でぐるぐる旅をしていると、「おっ、何かこれ使えそう！」というサイトを新たに発見することもしばしば。

なので、今回は最近見つけたデザイン制作時に役立ちそうなサイトをいくつかご紹介します。

【WebGradients】

グラデーションのまとめサイトです。

少し色が違うだけで全体の雰囲気が結構変わるので、グラデーションのカラーバランスって悩みますよね。WebGradientsは180種類（※2019年8月28日現在）のグラデーションパターンを紹介しています。

このサイトの良いところは、カラーコードだけではなく、CSSコードも用意しているところです。

各グラデーションの「Copy CSS」をクリックするだけで、コードがコピーできちゃいます。

background-imageのコードを打たなくていいので、コーダーさんの負担を少し軽減できるかも？と、言うかコードに詳しくない私でも背景をパパっと変更できるので助かります。

【Linustock】

「ライナストック」と読みます。

商用利用OKの線画無料イラストが豊富にあります。

線画のみのシンプルなイラストなので、加工しやすいです。
各イラストにカラーレイヤーもあるので、「色もほしいな…」という方も使いやすいと思います。

加工する時のテクニックを記事にして掲載しているので、それを読むのもおもしろいですよ。

【humaaans】

人物イラスト作成サイトです。

頭や胴体、足などパーツごとにイラストが用意されており、自分でカスタマイズしてイラストを組み立てていきます。なので、イラストを自分好みに作成することができます。

SketchとInVision Studioの2種類で提供されています。

Sketchは基本的に有料（体験版があります）ですが、InVision Studioは無料です。
気になる方はどちらかをインストールして試してみてください。

私はSketchで使ってみたのですが、テンプレートもいくつかありますし着せ替え人形のような感覚で作成できるのでとてもラクでした。

海外のデザインっぽくなり、簡単におしゃれなイラストが作成できて便利です。

【dipixio】

切り抜き画像に特化した無料素材サイトです。

ファイルはPSDとPNGがあります。

個人的には花やスマホの素材が使いやすいかと思います。銃弾や見たことない虫など、海外のサイトっぽい画像もありなかなかおもしろいです。

【FontSpark】

文字を入力すると適当なフォントで表示してくれるサイトです。

英語フォントしかなく日本語に対応していませんが、フォントタイプや太さを指定すると、その設定で次々にフォントを変えた文字が表示されるので、アルファベットのフォントはどれがいいのか悩む…という方にはおすすめです。

ちなみに「ColorSpark」というサービスもあり、1番目にご紹介したWebGradientsのようにグラデーションを提案してくれます。配色をどうしようか行き詰まっている時にいいですよ。

以上、5サイトをご紹介しました。

素材について「プロだからそういうのに頼らず1から作れよ！」的なお声もあると思いますが、個人的にはお客様の要望や費用、納品希望日等を満たすことができるのなら使用すべきかと思います。それに、これらの素材を提供してくださっているクリエイターさんは、業界で長年経験を積んできた方が多いので、クオリティが高いものばかりと思っています。

なので、これからも状況によってはこのような素材を使用するし、クリエイターの皆様にはとても感謝します。

以上、さかたでした。