ノーコードツール「STUDIO」で画像が粗くなってしまう際の対処法について

【2024.02.20追記】
本ページに掲載の情報は、現在非対応の可能性があります。GoogleDrive以外でも方法は同じなので、外部から参照できる画像URLを発行できるものであれば同様の手法でも可能だと思いますが、ご確認の上お試しいただけますと幸いです。

こんにちは。menoの代表をしている矢野です。先日から、ノーコード（コーディングをせずに）でWebサイトを制作できるツール「STUDIO」に関してのトピックを更新しているのですが、今回は、表題にある通り、

"ノーコードツール「STUDIO」で画像が粗くなってしまう際の対処法について"

を解説していこうと思います。

「STUDIO」に画像をアップロードすると、WebP形式に自動で変換される

まず、最初にお伝えしておくと、「STUDIO」では、ベクター画像（svg形式など）はアップロードして利用できないのですが、jpg、pngなどの画像に関しては、好きなものをアップロードしてサイト制作に利用することができます。

例えば、背景にベタ色を敷くのではなく、背景画像を使うことも可能です。

上記のように「STUDIO」にアップロードした画像は、エディター左のメニューの中にアップロードされて、選択することでサイト上に配置することができます。この場合、一度プロジェクト上にアップロードした画像は、"WebP（ウェッピー）"というフォーマットに変換され、それを呼び出して利用する形になっています。

WebP（ウェッピー）とは？

WebP（ウェッピー）は、米Googleが開発しているオープンな静止画フォーマットのこと。ファイルの拡張子は「.webp」。jpgやpngと比べても、比較的ファイルサイズが圧縮されるので、ページ読み込みの際の負荷も軽減される。

「STUDIO」は画像が粗くなってしまうことがある

「STUDIO」で画像ファイルを扱う際は、自動で先ほど述べたWebP（ウェッピー）形式にフォーマットが変換されます。その際に、画像が粗くなってしまうという現象が起こる場合がある。

これは、画像のコントラストなどによっても見え方が異なるので、アップロードしてから実際に確認して、そのままでも良いか決めるほうがいいかもしれません。

コントラストの少ない画像をアップロードした場合

では、画像が粗くなってしまう場合について再現しながら検証してみます。

今回は、以下のような黒いカーテンのような画像を例にしながら説明していきます。元々の画像はかなり解像度が高く、黒いカーテンの細かい濃淡がくっきり見える状態です。

では、「STUDIO」上に、72ppi／横幅1920pxで書き出した上記の画像をアップロードし、imgタグで横幅1920pxを指定して表示してみます。

表示される画像は以下のようになります。ご覧の通り、かなり粗く見えるのがわかるかと思います。

アップロードされて画像が縮小されたというわけではなく、jpgからWebP（ウェッピー）形式に変換されたことで、この現象が起こります。このようなコントラストが少ない画像の場合は、目視でより粗さが際立ってしまうようです。

単にWebP形式だから画像粗いというわけではない

ここまで読むと、単にWebP（ウェッピー）というフォーマット形式だと画質が結構落ちてしまうと思われる方もいるかもしれませんが、必ずしも毎回これくらい画質が低下するというわけではありません。

もっとコントラストが広く、多少粗くなっても気にならない程度で済む場合も多いです。

実際、このmenoのコーポレートサイトに掲載されている画像もWebP形式に変換されているため、「物による」というのはご理解いただけるのではないかと思います。

そもそもこういったフォーマットの変換は、変換する際のパラメーターによっても画質が左右されるので、多少は仕方ない部分もあるかもしれません。もっとも、ファイルサイズが軽くなるので、画質とファイルサイズのトレードオフだと思っていただければ良いかと思います。

画質を落とさずに「STUDIO」で画像を扱いたい時の対処法

ではここからは、具体的な対処法について触れていきたいと思います。

先ほどのような画像の場合、例えば背景画像に使用するには少し画像が粗く見えてしまいます。なので、どうしても「STUDIO」上にアップロードした画像が、WebP形式で粗くなってしまうという場合は、別の静的ストレージに画像をアップロードし、URLを指定して呼び出す方法を使うことで対処できます。

静的ストレージはなんでも良いのですが、例えばGoogle Driveなんかでも代用が可能です。

Google Driveを使用する場合は、ストレージ上に画像をアップロードし、共有設定を「リンクを知っている全員」にしておきましょう。

この時、共有リンクのURLは以下の形式になっていますが、これをそのままimgタグに突っ込んでも画像を引用することはできません。

https://drive.google.com/file/d/{ID}/view?usp=sharing

Google Driveで共有している画像を引用するには、上記のURLを以下の形式にしてから使用すれば、imgタグなどで呼び出すことが可能になります。

http://drive.google.com/uc?export=view&id={ID}

次に、「STUDIO」上で一旦仮の画像を配置し選択したまま、右にある設定パネルから、画像のURLを先ほどのものに差し替えます。

これで外部ストレージの画像をそのまま「STUDIO」上で扱うことができるので、WebP形式に変換されて画質が落ちるという現象を回避することが可能です。

あくまで応急処置というレベルで非公式の方法です

上記の画像が粗くなる際の対処法は、公式のものというよりは応急処置というレベルなので、どうしても画像が粗くなってしまって気になるという場合に留めておくのがいいかと思います。

理由としては、外部ストレージの画像が突然消えてしまったり、ディレクトリを移動させてしまった場合、予期せずに画像が表示できなくなるという場合があるからです。

もし試したいという場合は、この辺りを踏まえて適宜実践するようにしてくださいね。