未来の自分のためのユニバーサルカラーデザイン

こんにちは、3年目デザイナーのはなです。

このブログで度々ユニバーサルカラーについての記事を書いていますが、今回はその中でも加齢に伴うの色の見え方の変化について書きたいと思います。

(前に書いたやつ:https://blog.splout.co.jp/2790/ https://blog.splout.co.jp/5932/

生きている限り加齢は誰でも避けられません。

つまり、高齢者に配慮したデザインづくりは回り回って未来の自分のために役に立つということですね。

水晶体の黄変

水晶体は人間の眼のレンズの部分です。

例えば、透明なスマホケースなどを使用していると、時間が立つにつれてだんだん黄ばんできますよね。

それと同じことが人間の眼でも起こります。

水晶体が黄ばんでくると、薄い黄色と白の判別がつきにくくなったり深緑のような暗い色と黒色の判別がつきにくくなります

感覚としては、黄色がかったサングラスで世界を見ている感じに近くなります。

黒地に紫の文字や、白地に黄色の文字などは避けたほうが良いでしょう。

この組み合わせは高齢者以外でもとても見分けづらいのでやらないのが無難です!

装飾としてなら使用しても大丈夫です。

白内障

歳を取ると白内障になりやすくなります。

白内障の原因には疾患や薬の影響、外傷などがありますが、最も多いのが加齢です。

白内障の発症率は、60歳代で66~83%、70歳代で84~97%、80歳以上ではほぼ100%と言われています。

長生きするならほぼ避けられないということですね。

白内障は水晶体が白く濁ってくる病気です。

水晶体が濁ってくると、光に対して眩しさを感じやすくなります

つまり、画面が明るい状態で真っ白なページを見たときに不快感を感じやすくなるということです。

高齢者がよく見る可能性のあるサイトなどは、背景に薄いグレーを敷くなどするとよいかもしれません。

ただ、文字色とのコントラストもしっかり確保しないといけないので、本当にうっすらぐらいが良いと思います。

また、背景色が暗いページから明るいページにいきなりパッと変わる、というのも避けたほうが良いでしょう。

まとめ

私は、この世のすべてのデザインにユニバーサルカラーがいつも必ず意識されている必要はないと考えています。

若い人向けに作られたページであれば、多少高齢者への配慮がなくても大丈夫だと思います。

ただ、ターゲティングを行ったときに、高齢者の人が含まれる可能性があるなら配慮が必要です。

業務での使用が義務付けられているツール」「不特定多数の人が見る情報の掲示」などには気を使ったほうが、より優しい世界になると思います。

ユニバーサルカラーというものが意識され始めたのはわりと最近の話ですが、未来ではもっとポピュラーな概念になっていると思います。

そういう未来になるように、私も微力ながら頑張っていきたいです!

オレオレ証明書の入ったサーバーで Service Worker のテストをしたいとき

This work is licensed under a Creative Commons Attribution 4.0 International License. Web Fundamentals | Google Developers

こんな状況。

  • テストはイントラネット内にあるサーバーを使用。
  • 自己署名証明書 (通称: オレオレ証明書) が入っている。
  • ブラウザは Chrome。

普通に Chrome で開こうとするとエラーが出て動作しません。

どうすればいいか。

Chrome の起動オプションで以下を指定します。

--user-data-dir="D:\ユーザーデータディレクトリ" --unsafely-treat-insecure-origin-as-secure="https://テストサーバー.site"

これは何をしているの?

Service Worker は、その強大な力を抑えるために localhost であるか、https でないと動作しないという制限が課せられています。

しかし、https であっても、オレオレ証明書の場合には以下のようなエラーにより Service Worker は動作しません。

An SSL certificate error occurred when fetching the script.

–unsafely-treat-insecure-origin-as-secure を起動オプションに指定することで、エラーを出さずに Service Worker が動作させることができるようになります。

あまり重要そうに見えませんが –user-data-dir は必須です。

証明書の警告なんとかならないの?

確認の度に証明書の警告が表示されるのは非常に煩わしいものです。

これも起動オプションで非表示にします。

--ignore-certificate-errors 

これで Service Worker も動いて存分にテストできますね。

めでたしめでたし。

・・・

余談ですが、これらは Chrome の GUI からも設定できます。

ただ、GUI から設定すると状態が残ってしまうため、外部のインターネットに接続する際に戻し忘れが発生し危険です。

テスト用に専用のプロファイルを作るか、ショートカットやエイリアスを用意することをお勧めします。

Portions of this page are reproduced from work created and shared by Google and used according to terms described in the Creative Commons 4.0 Attribution License.

花粉との戦い2020

こんにちわ。
リエです。

今や国民病と言われている花粉症。
春はこの花粉症に苦しめられている方が多いのではないでしょうか。

私は花粉やPM2.5が飛散すると肌荒れをする花粉皮膚炎に毎年悩まされています。つい最近も肌に赤いポツポツができてかぶれたような感じになりました。
元々の肌が敏感肌の乾燥肌ですごく弱いので、花粉やPM2.5には負けっぱなしです。。

もうね。なんで肌をキレイにするためにはとてつもない時間とお金がかかるのに悪くなるのは一瞬なんでしょう。
お肌が荒れていると、メイクのりは最悪だし気持ちは落ち込むし外に出るのも苦痛になっちゃいますよね。
私の場合はですが、こういう時はマスクをするとマスクの刺激でもっとひどくなるのでマスクもできずで(´;ω;`)

花粉皮膚炎になったら皮膚科に行ってお薬を処方してもらうのが1番いいのですが、タイミングが合わなくて中々皮膚科へ行けませんでした。

今は市販薬でいいお薬がたくさん出ているので、イチかバチかで市販薬に頼ることに💊

お医者さんにきちんと見てもらうことが1番いいというのを大前提として、市販薬で効果があったものを紹介したいと思います。
後は私が毎年している花粉、PM2.5の肌荒れ対策も併せてご紹介します。
※あくまで個人的意見ですので、参考程度にしてください。

花粉皮膚炎について

まず花粉皮膚炎とは何でしょうか。
花粉でくしゃみや鼻水が出るのは体内に入ろうとする花粉を身体が異物と捉え、追い出そうとする「アレルギー反応」によるものです。
肌の場合も同じで、皮膚が花粉に対してアレルギー反応を起こしてしまい、湿疹や赤み、かゆみが出てしまうのです。

花粉皮膚炎になってしまうと、肌のバリア機能が低下して、うるおいが失われてしまい花粉がより肌に侵入しやすくなってしまいます。
なので花粉皮膚炎になったらとにかく【肌の保湿】が大事です!!
参考URL:https://medical.shiseido.co.jp/ihada-lab/article/ih25.html

私が試した対処法

いつも使っているスキンケアを低刺激で高保湿のものに変更して、(肌が激弱なので肌荒れした時用に低刺激のものは絶対に置いています)市販のドラッグストアで買えるお薬を塗ることにしました。
今はいろんな製品が売られていますが、ノンステロイドのものがよかったので資生堂のIHADAという製品をスキンケア前の肌に塗っています。
これを塗り始めて1週間ほどで赤みや湿疹はだいぶマシになりました。

※画像はサイトからお借りしました

肌の保湿もすごく大事なので、夜のスキンケアの最後にマツモトキヨシで販売されているヒルメナイド油性クリームを塗っています。
このクリームは割とこってりとした油分のあるクリームで、朝に使うとお化粧がよれてしまいそうなので夜のみ使っています。
朝起きても顔が乾いていないのでしっかり保湿はされていると思います。
ただニキビができやすい方には向いていないかもです💧

※画像はサイトからお借りしました

この他にヒルメナイドローションというものもあり、私はこれを乳液代わりに使っています。ローションという名前ですが、乳液のような質感なので化粧水代わりには使いにくいかもです。クリームよりは伸びがいいので塗りやすさはあります。

花粉皮膚炎になるとスキンケアは肌を保湿・保護するだけの必要最低限になってしまいますが、攻めのスキンケアは一旦お休みして肌の回復に努めています。

外出時の対策

肌に花粉やPM2.5がつかないようにするのが大前提で大事ですが、外出しないわけにもいかないので完全に防ぐことは不可能です。
なので大気汚染や花粉から肌を守ってくれるハイスペック日焼け止めを使っています。何本もリピートしているのはラポッシュロゼUVイデアXLプロテクショントーンアップです。これが1番肌に合いました。
ハイスペック日焼け止めはここ数年で色んなメーカーから発売されるようになったので使用感や仕上がりなど自分の好みで選ぶのがいいかと思います。
毎年花粉やPM2.5が飛ぶ2月〜5月くらいに使っているのですが、今年はまだ使っていなくてひどい花粉皮膚炎になってしまいました。。使っている時は被害は最小限に済んでいるので心強いアイテムです。

※画像はサイトからお借りしました

あとは仕上げにアレルバリアミストも使っています。
このミストをするとお化粧が崩れにくくなるし、マスクにメイクもつきにくくなるのでこれも何本もリピートしています。スリムなのでバックの中に入れやすいのもよき。

※画像はサイトからお借りしました

後は外から室内に入る際は、身体をはたいて花粉を落としてから入るようにしたり、お部屋を加湿して花粉を落とすようにしています。もちろん空気清浄機もフル稼働です✌

という感じで色々試行錯誤しながら花粉と戦っています。
一度肌がやられてしまうと治すのに時間がかかるので先手で対策を取らないといけないのが面倒なところですが、2020年も花粉対策を頑張りたいと思います。

JVM系のソフトウェアをSDKMANで管理する

はじめに

不勉強なもので、JVM系の言語やツールを管理しやすくするSDKMANというツールの存在をつい最近知りました。 インストールやアップデート、複数のバージョンの切り替えなどをsdkというコマンドで扱えるようです。 この辺は悩みの種になりやすいところなので使ってみることにしました。

SDKMANインストール

$ curl -s "https://get.sdkman.io" | bash
$ source "$HOME/.sdkman/bin/sdkman-init.sh" 
$ sdk version
SDKMAN 5.7.4+362

使い方

扱えるソフトウェア一覧

$ sdk list
================================================================================
Available Candidates
================================================================================
q-quit                                  /-search down
j-down                                  ?-search up
k-up                                    h-help

--------------------------------------------------------------------------------
Ant (1.10.1)                                             https://ant.apache.org/

Apache Ant is a Java library and command-line tool whose mission is to drive
processes described in build files as targets and extension points dependent
upon each other. The main known usage of Ant is the build of Java applications.
Ant supplies a number of built-in tasks allowing to compile, assemble, test and
run Java applications. Ant can also be used effectively to build non Java
applications, for instance C or C++ applications. More generally, Ant can be
used to pilot any type of process which can be described in terms of targets and
tasks.

                                                               $ sdk install ant
--------------------------------------------------------------------------------
AsciidoctorJ (2.1.0)                                     http://asciidoctor.org/

AsciidoctorJ is the official library for running Asciidoctor on the JVM. Using
AsciidoctorJ, you can convert AsciiDoc content or analyze the structure of a
parsed AsciiDoc document from Java and other JVM languages.

                                                      $ sdk install asciidoctorj
--------------------------------------------------------------------------------
(略)

特定のソフトウェアのインストール候補

$ sdk list java
================================================================================
Available Java Versions
================================================================================
 Vendor        | Use | Version      | Dist    | Status     | Identifier
--------------------------------------------------------------------------------
 AdoptOpenJDK  |     | 13.0.1.j9    | adpt    |            | 13.0.1.j9-adpt      
               |     | 13.0.1.hs    | adpt    |            | 13.0.1.hs-adpt      
               |     | 12.0.2.j9    | adpt    |            | 12.0.2.j9-adpt      
               |     | 12.0.2.hs    | adpt    |            | 12.0.2.hs-adpt      
               |     | 11.0.5.j9    | adpt    |            | 11.0.5.j9-adpt      
               |     | 11.0.5.hs    | adpt    |            | 11.0.5.hs-adpt      
               |     | 8.0.232.j9   | adpt    |            | 8.0.232.j9-adpt     
               |     | 8.0.232.hs   | adpt    |            | 8.0.232.hs-adpt     
 Amazon        |     | 11.0.5       | amzn    |            | 11.0.5-amzn         
               |     | 8.0.232      | amzn    |            | 8.0.232-amzn        
 Azul Zulu     |     | 13.0.1       | zulu    |            | 13.0.1-zulu         
               |     | 12.0.2       | zulu    |            | 12.0.2-zulu         
               |     | 11.0.5       | zulu    |            | 11.0.5-zulu         
               |     | 10.0.2       | zulu    |            | 10.0.2-zulu         
               |     | 9.0.7        | zulu    |            | 9.0.7-zulu          
               |     | 8.0.232      | zulu    |            | 8.0.232-zulu        
               |     | 7.0.242      | zulu    |            | 7.0.242-zulu        
               |     | 6.0.119      | zulu    |            | 6.0.119-zulu        
 Azul ZuluFX   |     | 11.0.2       | zulufx  |            | 11.0.2-zulufx       
               |     | 8.0.202      | zulufx  |            | 8.0.202-zulufx      
 BellSoft      |     | 13.0.1       | librca  |            | 13.0.1-librca       
               |     | 12.0.2       | librca  |            | 12.0.2-librca       
               |     | 11.0.5       | librca  |            | 11.0.5-librca       
               |     | 8.0.232      | librca  |            | 8.0.232-librca      
 GraalVM       |     | 19.3.0.r11   | grl     |            | 19.3.0.r11-grl      
               |     | 19.3.0.r8    | grl     |            | 19.3.0.r8-grl       
               |     | 19.2.1       | grl     |            | 19.2.1-grl          
               |     | 19.1.1       | grl     |            | 19.1.1-grl          
               |     | 19.0.2       | grl     |            | 19.0.2-grl          
               |     | 1.0.0        | grl     |            | 1.0.0-rc-16-grl     
 Java.net      |     | 14.ea.26     | open    |            | 14.ea.26-open       
               | >>> | 13.0.1       | open    | installed  | 13.0.1-open         
               |     | 12.0.2       | open    |            | 12.0.2-open         
               |     | 11.0.5       | open    |            | 11.0.5-open         
               |     | 10.0.2       | open    |            | 10.0.2-open         
               |     | 9.0.4        | open    |            | 9.0.4-open          
               |     | 8.0.232      | open    |            | 8.0.232-open        
 SAP           |     | 12.0.2       | sapmchn |            | 12.0.2-sapmchn      
               |     | 11.0.4       | sapmchn |            | 11.0.4-sapmchn      
================================================================================
Use the Identifier for installation:

    $ sdk install java 11.0.3.hs-adpt
================================================================================

インストール

まずはJava。

$ sdk install java 13.0.1-open

Downloading: java 13.0.1-open

In progress...

######################################################################################################################################################### 100.0%

Repackaging Java 13.0.1-open...

Done repackaging...

Installing: java 13.0.1-open
Done installing!

Setting java 13.0.1-open as default.

$ java -version
openjdk version "13.0.1" 2019-10-15
OpenJDK Runtime Environment (build 13.0.1+9)
OpenJDK 64-Bit Server VM (build 13.0.1+9, mixed mode, sharing)

ScalaとKotlinも。

$ sdk install kotlin 1.3.61
$ sdk install scala 2.13.1
$ sdk current

Using:

java: 13.0.1-open
kotlin: 1.3.61
scala: 2.13.1

複数のバージョンの使い分け

JDKをもう1種類インストールしてみる。

$ sdk install java 12.0.2-open

Downloading: java 12.0.2-open

In progress...

######################################################################################################################################################### 100.0%

Repackaging Java 12.0.2-open...

Done repackaging...

Installing: java 12.0.2-open
Done installing!

Do you want java 12.0.2-open to be set as default? (Y/n): Y

Setting java 12.0.2-open as default.

こっちをデフォルトにしますか?という質問にYと答えたので12.0.2-openがデフォルトになりました。

$ sdk list java
================================================================================
Available Java Versions
================================================================================
 Vendor        | Use | Version      | Dist    | Status     | Identifier
--------------------------------------------------------------------------------
 AdoptOpenJDK  |     | 13.0.1.j9    | adpt    |            | 13.0.1.j9-adpt      
               |     | 13.0.1.hs    | adpt    |            | 13.0.1.hs-adpt      
               |     | 12.0.2.j9    | adpt    |            | 12.0.2.j9-adpt      
               |     | 12.0.2.hs    | adpt    |            | 12.0.2.hs-adpt      
               |     | 11.0.5.j9    | adpt    |            | 11.0.5.j9-adpt      
               |     | 11.0.5.hs    | adpt    |            | 11.0.5.hs-adpt      
               |     | 8.0.232.j9   | adpt    |            | 8.0.232.j9-adpt     
               |     | 8.0.232.hs   | adpt    |            | 8.0.232.hs-adpt     
 Amazon        |     | 11.0.5       | amzn    |            | 11.0.5-amzn         
               |     | 8.0.232      | amzn    |            | 8.0.232-amzn        
 Azul Zulu     |     | 13.0.1       | zulu    |            | 13.0.1-zulu         
               |     | 12.0.2       | zulu    |            | 12.0.2-zulu         
               |     | 11.0.5       | zulu    |            | 11.0.5-zulu         
               |     | 10.0.2       | zulu    |            | 10.0.2-zulu         
               |     | 9.0.7        | zulu    |            | 9.0.7-zulu          
               |     | 8.0.232      | zulu    |            | 8.0.232-zulu        
               |     | 7.0.242      | zulu    |            | 7.0.242-zulu        
               |     | 6.0.119      | zulu    |            | 6.0.119-zulu        
 Azul ZuluFX   |     | 11.0.2       | zulufx  |            | 11.0.2-zulufx       
               |     | 8.0.202      | zulufx  |            | 8.0.202-zulufx      
 BellSoft      |     | 13.0.1       | librca  |            | 13.0.1-librca       
               |     | 12.0.2       | librca  |            | 12.0.2-librca       
               |     | 11.0.5       | librca  |            | 11.0.5-librca       
               |     | 8.0.232      | librca  |            | 8.0.232-librca      
 GraalVM       |     | 19.3.0.r11   | grl     |            | 19.3.0.r11-grl      
               |     | 19.3.0.r8    | grl     |            | 19.3.0.r8-grl       
               |     | 19.2.1       | grl     |            | 19.2.1-grl          
               |     | 19.1.1       | grl     |            | 19.1.1-grl          
               |     | 19.0.2       | grl     |            | 19.0.2-grl          
               |     | 1.0.0        | grl     |            | 1.0.0-rc-16-grl     
 Java.net      |     | 14.ea.26     | open    |            | 14.ea.26-open       
               |     | 13.0.1       | open    | installed  | 13.0.1-open         
               | >>> | 12.0.2       | open    | installed  | 12.0.2-open         
               |     | 11.0.5       | open    |            | 11.0.5-open         
               |     | 10.0.2       | open    |            | 10.0.2-open         
               |     | 9.0.4        | open    |            | 9.0.4-open          
               |     | 8.0.232      | open    |            | 8.0.232-open        
 SAP           |     | 12.0.2       | sapmchn |            | 12.0.2-sapmchn      
               |     | 11.0.4       | sapmchn |            | 11.0.4-sapmchn      
================================================================================
Use the Identifier for installation:

    $ sdk install java 11.0.3.hs-adpt
================================================================================

13.0.1-openと12.0.2-openがインストールされていて、デフォルトが12.0.2-openになっていることが分かります。

$ java -version
openjdk version "12.0.2" 2019-07-16
OpenJDK Runtime Environment (build 12.0.2+10)
OpenJDK 64-Bit Server VM (build 12.0.2+10, mixed mode, sharing)

確かに12.0.2が使われます。これを13.0.1-openに切り替えてみます。

$ sdk default java 13.0.1-open

Default java version set to 13.0.1-open

$ java -version
openjdk version "13.0.1" 2019-10-15
OpenJDK Runtime Environment (build 13.0.1+9)
OpenJDK 64-Bit Server VM (build 13.0.1+9, mixed mode, sharing)

どのように管理されているのか?

このまま使うのは気持ち悪いので、各ソフトウェアがどういう風にインストールされているのかを確認してみます。

$ which java
/home/myuser/.sdkman/candidates/java/current/bin/java

どうやらホームディレクトリの.sdkman以下にインストールされているようです。
ディレクトリとファイルの構成は以下の通り。

$ cd ~/.sdkman
$ ls
archives  bin  candidates  etc  ext  src  tmp  var
$ ls archives/
java-12.0.2-open.zip  java-13.0.1-open.zip  kotlin-1.3.61.zip  scala-2.13.1.zip
$ ls bin
sdkman-init.sh
$ find etc
etc
etc/config
$ cat etc/config 
sdkman_auto_answer=false
sdkman_auto_selfupdate=false
sdkman_insecure_ssl=false
sdkman_curl_connect_timeout=7
sdkman_curl_max_time=10
sdkman_beta_channel=false
sdkman_debug_mode=false
sdkman_colour_enable=true
$ ls src
sdkman-availability.sh  sdkman-current.sh      sdkman-flush.sh    sdkman-list.sh     sdkman-path-helpers.sh  sdkman-update.sh   sdkman-utils.sh
sdkman-broadcast.sh     sdkman-default.sh      sdkman-help.sh     sdkman-main.sh     sdkman-selfupdate.sh    sdkman-upgrade.sh  sdkman-version.sh
sdkman-cache.sh         sdkman-env-helpers.sh  sdkman-install.sh  sdkman-offline.sh  sdkman-uninstall.sh     sdkman-use.sh
$ find var
var
var/delay_upgrade
var/broadcast_id
var/version
var/broadcast
var/candidates
$ cat var/version 
5.7.4+362
$ cat var/candidates 
ant,asciidoctorj,bpipe,ceylon,crash,cuba,cxf,gaiden,glide,gradle,grails,groovy,groovyserv,infrastructor,java,jbake,kotlin,kscript,lazybones,leiningen,maven,micronaut,sbt,scala,spark,springboot,sshoogr,vertx,visualvm

管理対象のソフトウェアは.sdkman/candidatesの下にありました。

$ ls candidates/
java  kotlin  scala
$ ls -l candidates/java
合計 8
drwxr-xr-x 8 myuser myuser 4096 12月 13 15:25 12.0.2-open
drwxr-xr-x 8 myuser myuser 4096 12月 13 15:12 13.0.1-open
lrwxrwxrwx 1 myuser myuser   48 12月 13 15:29 current -> /home/myuser/.sdkman/candidates/java/13.0.1-open
$ ls -l candidates/kotlin
合計 4
drwxr-xr-x 5 myuser myuser 4096 11月 26 09:15 1.3.61
lrwxrwxrwx 1 myuser myuser   45 12月 13 15:22 current -> /home/myuser/.sdkman/candidates/kotlin/1.3.61
$ ls -l candidates/scala
合計 4
drwxrwxr-x 6 myuser myuser 4096  9月 18 18:23 2.13.1
lrwxrwxrwx 1 myuser myuser   44 12月 13 15:23 current -> /home/myuser/.sdkman/candidates/scala/2.13.1

ソフトウェアの種類ごとにディレクトリを分けてその下に複数のバージョンを展開し、シンボリックリンクでcurrentを示す、という割とシンプルな構成でした。

おわりに

言語処理系以外でも、ant、Maven、sbt等の周辺ツールもSDKMANで管理できます。仕組みもシンプルで使い勝手良さそうです。開発環境で活用していきたいと思います。

画像最適化、してますか?


こんにちは。デザイナーのMです。

突然ですが、皆さんは画像最適化してますか?(唐突
私はしています。

弊社ではサイトの制作などをさせて頂く機会が多々ありまして、制作の最終段階であるサーバーアップの前に、サイト内で使用する画像を圧縮して最適化するというフローがあります。

Webサイトのスマホ閲覧の割合がPCと半々、場合によってはPCの閲覧比率を超えることも珍しくなくなってきたので、通信容量(いわゆる”ギガ”)を少なくして、サイトを高速に表示させることが必須となっています📱

そこで今回は、普段使用している画像最適化ツールを紹介したいと思います。

TinyPng


https://tinypng.com/

「パンダのやつ」と僕は呼んでいます🐼
けっこう昔からあるので、かなり有名なオンライン画像圧縮ツールだと思います。
サイトを見て頂く通り、パンダが画像を圧縮してくれます。
Chromeのブックマークバーに突っ込んでるので、ブラウザ上からサクッと圧縮できる手軽さが便利です。
一気に20枚、または上限5MBまでの画像ファイル(jpg/png)を圧縮可能です。
gifよりきれいなアニメーションができる、Animated PNG(APNG)にも対応しています。
ページの下の方でパンダがぬるぬる手を振っていますね👋

対応ファイル形式:jpg / png / APNG

jpeg.io


https://www.jpeg.io/

こちらのサービスは、単純に画像を圧縮するというわけではないのですが、様々な形式の拡張子のファイルを一括でjpgに変換して最適化してくれるツールです。
png形式の画像はjpg形式に比べてファイルサイズが大きくなることがあるので、こちらを利用してjpgに変換することにより容量の削減になることもあります。特に写真を利用している素材とかですね📷
他にもpsdでワイヤーやカンプを作成して画像として書き出す際にも、こちらを使えばpsdからそのままjpgを作成してくれるので便利です。

対応ファイル形式:jpg / png / gif / svg / bmp / eps / psd / tiff / WebP

Squoosh


https://squoosh.app/

Googleが開発したオンライン画像圧縮ツールです。
サイトにアクセスして、画像をドラッグ&ドロップするとプレビュー編集画面に遷移します。
この画面上で画質や圧縮形式などを設定することができます。
また、画面の左右で圧縮前と圧縮後のプレビューを見比べることもできるので保存後のイメージを目で確認しながら調整することができます。めっちゃ便利👀
ただ、現状では画像1枚ずつしか編集することができないので、一括で圧縮をしたい場合には向いていません🙅‍♂️
私の場合は、画質を極力落とさずに綺麗な見た目のまま写真の容量を圧縮したいときなどのシビアな圧縮条件が求められる場合に利用することが多いです(あまりないですがw
ちなみにリサイズも同時にできるので、さらに容量圧縮したい場合などにも使えます。

対応ファイル形式 : jpg / JPEG2000 / mozjpeg / png / gif / pdf / bmp / tiff / WebP

ImageOptim(Mac向けアプリ)


https://imageoptim.com/

ImageOptimは、Mac向けの画像圧縮専用アプリです。
ブラウザからいつでも圧縮はできませんが、いつも利用しているPCにインストールしておけばすぐに使うことができます。
私はいつもこのアプリを使って画像を最適化することが多いです。
アプリをインストールして、Finderで画像を右クリックすると「ImageOptimize」という項目が表示されます。
その項目をクリックすると自動でアプリが起動して、画像最適化を開始してくれます。便利!
容量制限なしで、複数選択もできるのでバシバシ使用することができます🤘

ファイル形式:jpg / png / gif

ReSizer(iOSアプリ)


https://apps.apple.com/jp/app/jp/id1388705112

弊社が開発したiOS向けの画像リサイズアプリです。
直感的なUIで画像を好きなサイズにリサイズ、画質を選択することで容量も最適化することができます。
カメラロールからの一括選択にも対応。画像に関するExif情報の確認や削除もこのアプリからできます。
スマホからブログを書く際や、ストレージの容量を確保したいときなどに大変重宝するアプリなのでぜひ一度インストールしてみてください✨



ぜひ今回ご紹介したツールを利用して画像の最適化をしてみましょう!
楽しく快適なインターネットライフを🥺