• CREATIVE

December 12.2018

【デザイナー必見!】WEBサイト制作での便利なツール・サービスまとめ

こんにちは! Webデザイナーの橋本です。

今回はWEBサイトを制作する上で、便利で手放せなくなったツールやサービスをご紹介したいと思います。

Google Fonts(フリーWebフォント)

Google Fonts
https://fonts.google.com/

気に入ったフォントを無料で使用することが出来ます。Webフォントなので、Webサイトに画像としてではなく文字データとして表示させることが可能です。

最近では日本語フォントも公開され、グンッと実用度がアップしました。

現在、902のフォントファミリーが公開されており、そのうち日本語フォントは10種類となっています。

すべてのフォントが商用にも個人用にも利用可能です。もっと日本語フォントが増える事を期待しています!

※2018年11月時点

Adobe Fonts(条件付きのフリーWebフォント)

Adobe Fonts
https://fonts.adobe.com/

「Adobe Typekit」→「Adobe Fonts」にサービス名が変更となりました。

AdobeのCreative Cloud サブスクリプションプランのユーザーであれば、グーグルフォントと同様に、気に入ったフォントを無料で使用することが出来ます。

WebフォントなのでWebサイトに画像としてではなく文字データとして表示させることが可能です。

15,000を超えるフォントが公開されており、日本語フォントは100種類となっています。

Creative Cloudユーザーではない方も、無料のアカウントに登録する事で一部のフォントを利用する事ができます。また、すべてのフォントが商用にも個人用にも利用可能です。

アドビユーザーのデザイナーにとっては必須のサービスになってきたのではないでしょうか。

ただしWebフォントとして顧客のサイトで使用する場合は料金が発生します。ご利用になる方はしっかりと利用規約を読んで、自己責任でご使用ください。

※2018年10月時点

wordmark.it(インストールしているフォントを一覧表示できる)

wordmark.it
https://wordmark.it/

実際に使いたい文字を入力するだけで、自分のパソコンにインストールされているフォントで一覧表示する事ができます。

さらにはパソコンにインストールされているフォントだけではなく、グーグルフォント(フリーフォント)も一覧表示して比較する事ができます。

フリーフォントなので気に入ればすぐにダウンロードして無料で使用でき、比較したいフォントだけをリストアップして見比べる事もできます。

フォトショップ上などでひとつひとつ比較する必要がないため、時間短縮につながります。

Full Page Screen Capture(1ページまるまるスクリーンショット)

Full Page Screen Capture
https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl

ページ全体のスクリーンショットを撮影する事ができるchromeの機能拡張です。

縦長のサイトだとスクリーンショットを撮るのが大変ですが、この機能拡張を使用すればボタン一つで撮影することが出来ます。

参考サイトの保存などの用途で使用機会が多く便利です。

Pinterest(画像共有サービス)

Pinterest
https://www.pinterest.jp/

ユーザーが集めた画像を検索してブックマークして集める事ができます。

「Webサイトのデザイン」や「紙媒体のデザイン」「バナーのデザイン」など、カテゴリー別された沢山の画像が集められているので大変参考になります。

また、仕事以外にもファッションの参考になるコーディネートを探したり、ペットの画像を探したり、プライベートでも色々な楽しみ方できるサービスですので、興味のある方は簡単に登録できるので試してみてください。

COOL COLORS(ベストな色の組み合わせを探せるサイト)

COOL COLORS
https://saruwakakun.com/design/gallery/palette

素敵な配色が沢山紹介されているサイトです。

配色パターンを並べるだけでなく、画面右上に表示されるプレビュー画面で実際にどういったデザインになるかを確認する事ができます。

テーマに合わせた配色を用意してくれているので、ユーザーにどういった印象を与えるか等の参考にもなります。

自分の引き出しに無い配色を見つける際のご参考にしてみては。

NIPPON COLORS(和風なサイトに合う色を探せる)

NIPPON COLORS
http://nipponcolors.com/

250種類もの日本伝統の和風カラーを紹介されています。

サイトのデザインも凝っているのでついつい色々なカラーを押して眺めてしまいます。和風なサイトを制作する際に便利なサイトです。

Gridpx(グリッド計算)

Gridpx
https://saruwakakun.com/design/gallery/palette

グリッドレイアウトのデザインを作成する際にいつもお世話になっています。

・コンテンツの幅
・作成するカラムの数
・カラム間のマージン

の3つを入力することで正しいピクセル数を計算してくれます。きっちりかっちりしたサイトを作る際にご利用ください。

まとめ

いかがでしたでしょうか? WEBフォントも無料で使用できるものが増え、デザインにも幅を持たせることが出来るようになってきましたね。

今回はそんなWEB制作において切り離す事のできない「フォント選び」「色選び」などデザインの基本的な部分を手助けしてくれるサイトやツールを集めました。

皆さんも興味をもったサービスがあればぜひ試してみてください。