SiGNや解像度の縮小化など画像周りを強化

秋からのBiNDupのアップデートについて、今回は画像周りの新機能を中心に紹介したいと思います。
Webサイト制作に於いて画像は重要な要素なので是非チェックして下さいね。

動画で見たい方はこちらからどうぞ。

画像解像度を自動で縮小。容量を気にせず取り込める

カメラの進化に伴い画像の解像度と容量が大きくなり、そのままWebサイトで使うと読み込みに時間が掛かったりSEOの評価を落としたりしてしまいます。
これまでもBiNDでは画質を維持したまま画像サイズを軽く圧縮する機能やWebPに対応してきましたが、今回は取り込み時の画像が大きすぎる場合、Web用の適した解像度に自動で縮小する機能が加わります。

以下のルールに基づいて自動で縮小が掛かる様になります。

様々なデバイスや使用率などを調査してWebサイトで使う最適なサイズを割り出しました。

一例として、iPhoneXで撮影した画像をBiNDupに取り込んだ際に、どのくらい軽量化出来るかを調査したら以下の結果となりました。

格段に縮小されているのが解りますね。
ファイルサイズが小さくなる事でSEO評価などの優位性が高くなりますので要チェックです。

ちなみに画像を縮小するタイミングは画像の取り込み時に処理され、既に読み込まれた画像には適用されませんのでご了承ください。

画像編集を補助する便利なSiGNの新機能

画像編集ツール『SiGN』では編集作業で重宝する機能を新たに追加しました。
ちょっとした改修ではありますが、日々使う中でその便利さを実感出来る機能だと思いますので是非チェック。

グリッド線の表示と吸着

グリッド線の表示に対応しました。
グリッド線はピクセル単位でサイズを変更出来る事に加えオブジェクトの吸着もしてくれます。
例えば斜めに撮られた写真を水平に角度調整したり、要素同士の縦横の並びが瞬時に判断出来るなど様々な点で便利です。

レイヤーの表示/非表示切り替え

例えば重なり合ったレイヤーの下層要素を編集したい場合や、要素のありなしを瞬時に見比べたいなど様々な用途に使用出来ると思います。

フォント選択時にフォント一覧でプレビューを可能に

これまでは適用しないとフォントのデザインが分かりませんでしたが、選択時に把握出来る様になります。
これでじっくりフォントを選ぶ事が出来ますね。

ショートカットでサイトマップの操作が便利に

これまでもcommand + sでブロック編集適用出来るなど細かなショートカットがありましたが、新たにサイトマップ周辺での操作が加わりました。
ショートカットを使用する事で作業がスピーディに行えますので覚えておくと便利でしょう。

command + option + n ｜新規ページ追加

command + option + nで空白の新規ページが追加されます。
※Windowsの場合はCtrl + Alt + n

Command + d｜ページ複製

command + dで選択したページを同一階層に複製します。
※Windowsの場合はCtrl + d

Command + del｜ページ削除

command + delで選択したページを削除します。
※Windowsの場合はCtrl + delete

動画で詳しくチェック

今回紹介したBiNDupの機能は2021年10月5日のアップデートで搭載になります。
動画では、より解り易く解説しているので是非チェックしてみて下さい。

BiNDupの新機能をもっと見る
記事内の画像は開発中のものです。実際の仕様とは異なる場合があります。