新BiNDupのグラフィック改革！画像に強いサイト作りが可能に

Webサイトにおいて画像が大事な要素であることは言うまでもありませんが、注視すべきところは時代とともに変わっていっています。今秋に予定されている新しいBiNDupでは、昨今のグラフィック事情を踏まえて大きなアップデートを用意。
新たな素材サービスとの連携、話題のWebP（ウェッピー）形式への対応について、プロジェクトマネージャーの洪泰和、デザインチームのオカベ、さらに開発チームの朝比奈、大久保にインタビュー。アップデートによってBiNDupで作るWebサイトがどう変わるのか、じっくり解説します。

Webサービスのトレンドとともに変わる情報の受け取り方

文字より写真。感性に訴えるアプローチが増える理由

Webサイトにおける画像の役割について、最近感じる変化や傾向はありますか？

最近はテキストを読み込むより、もっと感覚的に視覚情報を読み取る割合が増えたのではないかと思います。画像や動画は感性に訴えることが出来るので、シェアされたときの瞬間風速が違いますよね。そちらを優先するあまり、あまり文字が読まれなくなってきている様に思えます。その影響もあって視覚情報に訴えるアプローチが増えているのではないでしょうか。

一方で、スマホや4K環境など閲覧環境に幅も出てきていて、画像サイズの最適化の課題がつきまといます。綺麗に見せようとすると自ずと画像サイズが大きくなるし、大きくなるとページ表示スピードに影響が出るし、バランスを取るために悩ましい状況ではありますね。

情報のやりとりはSNSの影響でよりスピーディに

これまで何年かサイト制作に携わってきた経験から話すと、情報の発信から情報が廃れるまでが物凄く早くなったと感じています。
今は基本的に、撮影機材から加工アプリまでスマホ1台で事足りますし、発信するための環境も用意されている。サイト制作のように、全体の構成や情報設計などを考える必要もない。
思ったことをすぐ発信し、思ったことに対しすぐリアクションが来る。発信する側も見る側も、よりスピーディになっている印象はあります。
だけど、持続する安定した人気コンテンツは発信までにじっくり時間がかけられているとも感じていて。

それってつまり、スピーディになっているのは情報のやり取りであって、到達した先ではじっくり見られると言うことなのかもしれないですね。Instagramが流行っているのは画像がメインだからと云うより、それによって得られる効果、UX部分が大きい様な気がします。noteの様にテキストコンテンツのニーズは相変わらずあると思うので。熟考ではなく直感的に受け取るスタイルになって来ているかもしれません。

Webサイトに使う画像は最適化とクオリティが大切

PC、スマホ両面からの見え方をチェック

サイト運営者が、画像を扱う上での注意点はありますか？

レスポンシブWebが主軸になっているので、PCとスマホでの画像の見せ方の意識は最重要ポイントですね。大きさのイメージで云うと、PC＞スマホと思うかもしれませんが、スマホは表示サイズの2〜3倍のサイズが必要になるし、レイアウトによってはPCよりスマホの方が画質が大きく扱われる場合もあります。

スマホを含む昨今のカメラは画像サイズがかなり大きいのでサイズの最適化は必須です。BiNDupでは画像の自動最適化を行いますが、使われ方に応じて更に最適化出来る事が望ましいですね。 SEOを考えれば画像の容量が軽いほど評価は高くなります。

画像選びや見せ方にこだわってクオリティを重視

サイズを最適化する反面、画像を綺麗に見せる事も大事です。画像の用い方やクオリティにもこだわりたいですよね。人気のインスタグラマーなどは画像をアップするまでに何カットも撮影して試行錯誤しながら最もクオリティが高く訴えられるものを選別していると聞きます。その画像を通じて何を表現したいのか丁寧にアプローチしたいですね。

デザイン的な観点で見れば、サイトの印象を決定づける画像はやはり雑に扱ってはいけないと思います。その場その場で必要な写真を撮り下ろすことがベストですが、費用や時間の都合で難しいところもあるのでそのとき助かるのが画像素材です。いかにもな素材集の写真は避けたいし、解像度やサイズ感含めてより高品質なところを目指したい。
また、いわゆる視覚的に残念なサイトはダウンロードした画像をそのまま利用してしまっていることが多いんです。色味調整やトリミングを工夫すれば元の素材を感じさせないほど見違えるようになるし、そのサイトに合うように最適化することは重要です。つまり、画像一つにもっと時間をかけてあげれば出来栄えも変わるってことなんですけど。

ハイクオリティな写真素材が揃うUnsplashと連携

現在BiNDupではPIXTA提携のmaterialsにて写真素材を提供していますが、アーティスティックかつフォトジェニックな素材が豊富でデザイナーからも注目を浴びている「Unsplash」と新たに連携することが決まりました。海外発のサービスですが、そのクオリティの高さから人気が出始めています。実際にUnsplashの写真素材を制作中のテンプレートにて使用しているデザイナーがその魅力を語ります。

https://unsplash.com

サイトの雰囲気UPやオシャレ感が増す素材が豊富

素材サービスUnsplashとはどんなものでしょうか？

世界中の写真家が撮影した素敵な写真素材が提供されているサービスです。1点1点が高品質にも関わらず、商用・個人問わず無償でクレジット不要で利用できます。つまり、マテポ(materials利用時に必要なポイント)が不要なのはもちろん料金もかからないのが利点ですね。
写真の特徴として、海外の風景やシーンが多く、静物画や人物単独といった具体的なオブジェクトの写真は少ない印象です。なのでサイトで使う場合には、雰囲気を演出するためにビルボードやページ背景などに使うと良いと思います。

撮影者によってテイストも様々。好みに合わせて探せる

新作テンプレートで、実際に素材を採用してみてどうでしたか？

シチュエーションも写真家の視点でセッティングされていてクオリティが高いので、自分自身で撮り下ろす準備や演出の手間を考えたら、そのまま使うだけでデザイン力が上がるのはかなり便利です。風景も一般的な素材サービスとは違った雰囲気や色味なのでニュアンスを出しやすくてありがたいですね。

先日リリースされたSiteboxにもUnsplashの写真素材が使われています。

オススメの使い方を教えてください

海外サービスなので基本的には英単語で検索する必要があります。ただ意外と日本語っぽい単語も登録されているようなので色々試してみてください。あとは、撮影者で傾向があるので一旦好みの雰囲気の写真が見つかったら撮影者を覚えておいて検索すると探しやすいかもしれません。

見えない進化、WebPのメリットを徹底解説！

前回のインタビューでも要注目で上がっていた、画像をWebP形式へ自動書き出ししてくれる機能。主に画像の読み込みが早くなる事が言われていますが、そもそもWebPとはどんなものなのかを詳しく解説します。

画像の軽量化が魅力、今後スタンダードになる注目の形式

Webpの画像フォーマットについて教えてください

WebPとは、Googleが開発しているオープンな静止画像フォーマットです。ファイルの拡張子は「.webp」。ウェブサイトのトラフィック量軽減と表示速度短縮を目的として作られています。現在Safariでは未対応ですが、次バージョン14で対応すると発表されています。

jpg同様、非可逆圧縮ではありますが、pngの様にアルファチャンネル（透過画像）を扱え、アニメーションも利用可能です。それぞれjpeg、png、gifに代表される特性ですが、その全てをWebPは持ち合わせています。

WebP形式の画像だと、どんなメリットがありますか？

画像サイズを格段に軽くすることができます。 Webページの表示速度はGoogle検索での順位決定要因にもなり重要。スマホでの閲覧が主流になる中、表示されるまでのスピードが遅いと離脱が起こったり、コンバージョン率に悪影響が出たりします。SEO評価などに伴うページ表示スピード改善、スマホなどでの表示スピードの高速化のため新たにBiNDupで対応することになりました。

［Googleが示した事例］

• ファイルサイズは非可逆圧縮モードで（同一画像、同等画質の）jpgと比較して25-34%小さくなり、可逆圧縮モードでpngと比較して28%小さくなる
• 22%のファイルサイズ増加でアルファチャネルを追加できる
• 可逆圧縮は、エンコードはpngよりも時間がかかるが、デコードはpngよりも高速である

優れた圧縮アルゴリズムで、圧縮率のみならず圧縮時に生じるノイズもjpegと比べて少ないです。今後のデファクトスタンダードな画像形式になっていくのではないかと期待できます。

BiNDupでサイトを作ると、画像は自動的にWebP形式に

新BiNDupでは、WebP形式の画像を扱うにはどうしたらよいですか？

今まで通りの方法でサイトを作成すればOK。アップロード時に自動変換が掛かる方式です。

基本的にWebPは広く認知されている形式の画像（jpeg, png）と同等に扱うことができますが、特定のブラウザ（Safari等）ではサポートされておらず、表示する事ができません。このフォールバックが構築工程のキモとなります。
WebPへの対応手段は大きく分けて二つあります。一つはWebP・非WebP両形式の画像をHTMLに埋め込んで冗長化を図る方法、もう一つはアクセス元の利用するブラウザを識別し、WebPがサポートされているブラウザにはWebP形式の画像を、サポートされていないブラウザには非WebP形式の画像をHTMLに埋め込んで表示する方法です。今回はシンプルな前者の方法を採用しています。

新たなBiNDupでは、自動的にWebP形式・非WebP形式の画像を生成し、これらを埋め込んだHTMLを出力します。ユーザー側で特別な手順を踏むことなくWebPに対応したサイトを作ることが可能です。

今回のWebP対応以前に作成されたサイトに関しても、自動的にWebP画像が生成されるので安心して使っていただけます。静止画像はもちろん、SHiFTで作成したスライドショーもWebPに対応している為、リッチなサイトであればあるほど恩恵が見込まれます。ただし、2種類の画像ファイルを生成するため、ファイルサイズが上がってしまうことだけは避けられません。

開発の際に苦労したことはありますか？

まさにスライドショーのWebP対応に苦労しました。HTMLにおいて、これまでは基本的に<img>タグで画像を表示していた所が<picture>タグ構成に置き換わった為、スライドショーのテンプレート一つ一つをこれに対応させるべく紐解かねばならず、中には新たなアニメーションとの兼ね合いが悪い物もあったりして、少々根気が要りましたね。

WebPの優れたところをもっと知りたい方は、デジタルステージのTechブログ「DS INSiDE」の記事も読んでみてくださいね。

トレンドのグラフィック事情にも対応し、内側からも外側からも’画像に強い’サイトに変わるBiNDupにぜひご期待ください。

無料でBiNDupを使ってみるBiNDの制作事例を見る

次回は、使いやすさがアップした新サイトシアターやテンプレートの選び方など、デザインチームメンバー自らが解説します。

新しいBiNDupの記事を読む
※新BiNDupは開発中のため、内容は変更となる可能性があります。