このブログでよく使うサイトまとめ

  • Days
カラフルな外壁

このブログは「私だけの庭」として好き勝手に作っています。
仕事で対応するWordPress案件とは異なり、自分の好きなようにデザインと設定をできるのですごく楽しいです。
「いいなあ」と思ったサイトなどを載せてみます。

フリー画像サイト「Unsplash」

このブログ内の画像は自分で撮ったもの以外は全て「Unsplash」からダウンロードしたものです。綺麗な写真ばかりなので眺めるだけでも楽しいです。
こちらのページに他のフリー画像サイトがまとめられています。
24+ Sites to Find Free Images You Would Actually Use for Your Marketing

「autumn」の検索結果の一例

画像圧縮ツール「COMPRESS PNG」

綺麗な画像はその分重くなるので圧縮しないと読み込みに時間がかかります。
その際に便利なのが「COMPRESS PNG」です。
jpgやpng、pdfやsvgデータをドラッグアンドドロップするだけで圧縮してくれます。

デザインツール「Figma」

画像の色合い加工やサイズ調整、ロゴの作成、フォントの確認などは全て「Figma」で行っています(ロゴの「saamakko」のフォントはMiltonian Tattooで、メニュー項目のフォントはAbeezeeです)。仕事の画面設計作成で使っているうちに勝手に覚えました。
Windowsを愛用していること、直感的な作業が可能なことから個人的にはXDよりもFigmaの方が好きです。
PC内に取り込んだWebフォントをFigma内でそのまま使えることもありがたいです。

Figmaに関連して便利なフリー画像サイトが「stories by Freepik」です。人のイラストをジャンル別で検索や色変更ができたりします。背景を取ったりすることも可能です。
また、Figmaにプラグインを導入すればFigma内で直接編集もできるのでFigmaユーザーには便利だと思います。

実際にFigmaで使っている様子

フリーフォントのダウンロードサイト「1001 FONTS」

オシャレなものから個性的なものまで取りそろえた「1001 FONTS」。
カテゴリだけでもこんなにあります。

「1001 FONTS」のフォントカテゴリ一覧

「Yesteryear>Art Deco」というカテゴリのフォントは独特で面白いです。いくつかPCにインストールしてFigma内でも使ってみました。複数のロゴ候補を作って比較し逡巡した結果、現在のMiltonian Tattoo(もともとのFigma内蔵フォント)に決めました。

個性豊かなフォントの数々

WordPress設定用のストア「envato market」

「こういう機能やテーマが欲しいなあ」と思った際に探しに行く場所が「envato market」です。WordPressのテーマやプラグインが豊富に揃っています。
このブログのTOPページの記事一覧プラグイン「THE GRID」もこのサイトで購入しました。

このブログのテーマ「Neve」

ブログのテーマは「Neve」を使っています。無料版でも機能は多いですがカスタマイズしたかったので有料版を購入しました。
有料版はたくさんの既存デザインテーマを丸ごとダウンロードできるのでサイトデザインを考えやすいです。

有料版Neveのオプション:Starter Siteの一例

Webデザイン知識で参考になるサイト

Webサイト制作において役立つ国内外のツールや良質なデザインサイトの紹介といった多岐にわたるコンテンツを配信しているのが「Web Design Trends(ウェブデザイントレンド)」です。Webデザイン向けサイトは沢山ありますが私はこのサイトが1番好きです。

記事一覧の画像一つ一つですら統一感のある「Web Design Trends」のTOPページ

サイト制作において配色は特に重要だと思います。私は緑色が好きなのでこのブログの配色も緑系統でまとめています。ただ、「Web Design Trends」内で紹介されていた配色参照サイト「SCHEME COLOR」で、緑系統だからといって「緑のみ」にするのではなく他の色も混ぜることでより「緑色」が際立つことを知り、配色設定を見直しました。

豊富なサンプル配色を見つけることができる「SCHEME COLOR」のTOPページ

例えば、「Green」で検索してみると以下のような配色が表示されます。私が好きな配色は1番下の左から2番目の「Let In The Breeze」です。それまでその配色の中の”#91B383“と”#8A8985“に近い色はブログ内でも用いていたのですが”#C5C18B“や”#DDD3AC“のような薄い茶色も緑系統に合うことを知りませんでした。

“Green”の結果一覧の一例

「Let In The Breeze」を選択すると関連配色も表示されるので「雰囲気は同じまま色合いを変えてみたい」というような時によさそうです。

「Let In The Breeze」の関連配色

便利な配色サイトはこちらのページにまとめられています。2色、3色、4色、5色、グラデーションという様々なタイプの配色を取り扱ったサイトがあります。
2020年版:誰でもプロ並みの配色が作れる!便利な配色パターン見本サービスまとめ

個人的に好きなサイト

自分のブログを作るならすっきりしたシンプルなものにしたいと思っていたので、デザインを考える際は海外のブログデザインの雰囲気を参考にしていました。
以下2つは特に私が好きなサイトです。

デザイナー事務所のサイト。とにかく写真の色使いが美しいので一目惚れしました。インテリアや旅行の写真など幅広く掲載しています。ロゴが動いているのも遊び心があって素敵です。

「OLD BRAND NEW」のTOPページ

写真家であるGrace Chuangさんのポートフォリオサイト。3カラムかつ左メニューで白系統というとてつもなく洗練されたデザインです。白系統サイトはデザインが良ければセンスの良い雰囲気になりますが、素人が安易に手を出すと「殺風景」にもなりがちなので非常に扱いが難しいイメージです。
この方のサイトに憧れて私も3カラム+左メニューのデザインを作ってみたのですが私のブログの雰囲気は現在のデザインの方が合っていたので諦めました。でもいつか別のブログを作る際は挑戦したいです。

「Grace Chuang」のProjectsページ

まとめ

以上が私の趣味を集めまくったサイトでした。良さそうなサイトを見つけたら随時追加していこうと思います。

タグ:

Next >

< Prev