## ColorHunt

ColorHuntは、カラーパレットの無料でプラットフォームです。組み合わせで表示されていますが、単色で色選ぶ際にも使えます。

![ColorHunt-min](//images.ctfassets.net/0jyj5pjwic68/7mfQlkC1p35C6uuR7o2l0W/e10c5051135ea1d409eea15b4d691c9f/ColorHunt__1_-min.png)


 <a class="read" href="https://colorhunt.co/" target="_blank" rel="noopener noreferrer">ColorHunt へ移動</a>


## ColorPick Eyedropper

Chrome拡張です。画像やCSS問わずにディスプレイのカラーコードを取得できるのでおすすめです。主に画像の色を取得したい時に使っています。

![ColorPick Eyedropper-min](//images.ctfassets.net/0jyj5pjwic68/7EVo5RBPcKXHq7uilEHJvx/aefd53840b4fc31ec56d130751f94788/ColorPick_Eyedropper-min.png)


 <a class="read" href="https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg?hl=ja" target="_blank" rel="noopener noreferrer">ColorPick Eyedropper へ移動</a>

Design

デザインの配色で参考になるサイト まとめ

<h2>ColorHunt</h2>
ColorHuntは、カラーパレットの無料でプラットフォームです。組み合わせで表示されていますが、単色で色選ぶ際にも使えます。
<img src="//images.ctfasset...

サービスのPriamryColorキメの研究

## Primary Colorの決定からコードに落とし込む

1. Primary colorを決める。カラーホイールを理解して、３次色から一般的に選ぶ。https://material.io/　のカラーパレットから選ぶと良いかも
2. Primary color から System colorを生成する。下記サイトなどを使って、success, danger (100 ~ 900)などを決める
3. コードに落とし込む。(tailwind.config.jsなど)

https://colors.eva.design/

## Practice

- 自分が知っているサービスのブランドカラーを感情表現で分類する
- 著名な絵画などを並べ、色を抽出す

https://klizos.com/guide-101-color-psychology-in-website-design/

Primary Color を決めて、コードに落とし込むまで

## favicon generator

PNG,JPG,GIFから一括で様々な大きさのfaviconを生成できるのでおすすめです。

![Favicon-min](//images.ctfassets.net/0jyj5pjwic68/4iyfjpc93ZuTdnEL3dMLPh/d116be2f65f915251d3d0a9ce459fcbe/Favicon-min.png)


 <a class="read" href="https://ao-system.net/favicongenerator/" target="_blank" rel="noopener noreferrer">favicon generator へ移動</a>


## Flaticon

faviconジェネレーターではないですが、様々なアイコンが販売されており、そのままfaviconとして使えるものがたくさんあります。是非みてみてください。

![Flaticon-min](//images.ctfassets.net/0jyj5pjwic68/7vpIsWvTJBC6dsTBxWZhCi/9355f67315e7c7437b3b52afa2703780/Flaticon-min.png)


 <a class="read" href="https://www.flaticon.com/" target="_blank" rel="noopener noreferrer">FlatIcon へ移動</a>


## 絵文字からpng変換

- [Convert Emoji to an Image - Online Unicode Tools](https://onlineunicodetools.com/convert-emoji-to-image)

favicon作成におすすめのサイト まとめ

皆さんブログの画像をWebP(ウェッピー)にしていますか？

**WebPに変更することで大幅にパフォーマンスを改善できます。**

本記事ではWebPに変更する方法をメリットとデメリットを交えて紹介していきます。

最初に次世代画像フォーマットとWebPの変換方法を紹介し、メリットとデメリットを紹介していきます。

## 次世代画像フォーマットとは？

- **Webp(ウェッピー)**
- **JPEG 2000**
- **JPEG XR**

が次世代画像フォーマットと言われています。

この中でも、**最も普及しているWebPが主流になっていくでしょう。**

最近だと、iOS14/iPadOS14でもWebPが表示できるようになったので、ほとんどのデバイスで表示される準備が整ったと考えてもいいです。

徐々に対応していくのが良いでしょう。

次にWebpへの変換方法をお伝えします。

## Webpの変換方法

Webpへの変換方法は、こちらのアプリケーションを使っています。

[squoosh.app](https://squoosh.app/)

画像をドラッグアンドドロップで変換できます。

コマンドラインで変換できるツールもあるそうです。画像が増えてきたら導入するかもしれませんが、
今の所困っていないので、上記のアプリで変換しています。

次にメリットです。

## WebP導入のメリット

- **パフォーマンスが劇的に上がる**

これに尽きると思います。

パフォーマンスが向上すると、

- **検索エンジンの評価が向上する**
- **離脱率が低下する(※WebPが表示される場合)**

このような副産物も得られる可能性があります。

**以下、パフォーマンス改善の例です。パフォーマンスの得点が７０前後から９６まで上昇しました。**

※現在Google Adsenseのモジュールを組み込み中なので、少し落ちています。

![performance20200917](//images.ctfassets.net/0jyj5pjwic68/3vc92sUM5DSpf3Ec7zha0k/fd7f7f65c03246bc6a70b18c32ea0967/____________________________2020-09-18_22.18.55.webp)

![PageSpeed Insight20200917](//images.ctfassets.net/0jyj5pjwic68/7mtsoqiW9v4M8KZG1j8x6s/7c321cd6c1fb8c61406c99d1b0f117cf/____________________________2020-09-18_21.38.19.webp)

次にデメリットです。

## デメリット

- **SlackやTwitterのようなネイティブアプリは対応していない。**
- **iOSはバージョン１４以上しか対応していない**

上記のデメリットも時間が解決していくので、それほど問題にしていません。

しかしながら、完全に普及するにはまだ１〜２年はかかると思うので、全ての視聴者にコンテンツを問題なく配信したい方は、まだ対応を待った方がいいでしょう。

いかがでしたでしょうか？

最後にまとめです。

## まとめ

- **WebPを導入すると、めちゃめちゃパフォーマンスが改善される。**
- **完全な普及は、１〜２年かかりそう。**

導入に関しては、是非メリットとデメリットを考慮して、決めてください。

私は、先を見越して早めに対応してしまいました。

おしまい。

皆さんブログの画像をWebp(ウェッピー)にしていますか？
Webpに変更することで大幅にパフォーマンスを改善できます。
本記事ではWebpに変更する方法をメリットとデメリットを交えて紹介していきます。

次世代画像フォーマットWebP(ウェッピー)とは？

個人開発でもメディア運営でもアイキャッチなどの画像は重要です。バランスを制御するのはCSSの役目ですが、そもそも画像はもっと重要です。今回は使いやすくオススメできる画像の切り抜きツールを紹介します。

## [Canva](https://www.canva.com/)

![Canva](//images.ctfassets.net/0jyj5pjwic68/6YMdirLHdSnBjhRqdIE3DT/7810eb44c049ee6b95813baa56e40197/____________________________2021-01-19_0.53.23.png)
Canvaは画像の作成にも使用することができます。また、有料版もイラストレーターやフォトショップと比較して安いです。もしあなたがイラストに対して職人ほどのこだわりがなく、デザイン系のツールを持っていない場合、Canvaは非常にオススメできます。画像の切り抜きも画像を選択して、サイズを指定するだけです。

## [ShutterStock!](https://www.shutterstock.com/ja/image-resizer)

![ShutterStock](//images.ctfassets.net/0jyj5pjwic68/2005FnaxeAxVeC6V66J51O/19ecd4dcb1a313a87de1b80ca0411be5/____________________________2021-01-19_0.54.48.png)

[ShutterStock!](https://www.shutterstock.com/ja/image-resizer)は、有料の画像素材サイトですが、画像の切り抜きは無料で行うことができます。

- Small: 500px × 262px
- Medium: 1000px × 524px
- Large: 2000px × 1048px
- Custom

をクリックすると、選択した画像にサイズ変更されます。Customはおそらく10000pxまでです。まだ馴染む切り抜きツールが見つかっていない方はぜひ試してみて下さい🚀


デザインの配色で参考になるサイトまとめ

ColorHunt

ColorPick Eyedropper

Related

Tags

Share

Table of Contents