新BiNDup｜編集の基本、ブロックエディタを大改修。待望の機能も

今秋からスタートするホームページ作成サービスBiNDupのアップデートでは、今までCSSやDressを操作しなければ表現できなかった高度なデザインの一部がブロックエディタで簡単に設定できるようになります。

事前にユーザーの皆さんに調査した、ブロックエディタへの要望（BiNDup Growth Projectで実施）も採り入れ、UIの一部を大幅にリニューアル！使いやすさがアップしたBiNDupについて、制作担当したデザインチームのプロジェクトマネージャーの洪泰和とUI/UXデザイナーのニタバルが解説します。

使用頻度の高い既存機能の使いやすさを見直し

今回は、普段BiNDupを使ってサイトを制作・運用しているユーザーの皆さんが今どんなことを求めているかという点を重視しました。もっとこうしてほしい、ここがわかりづらい、といった声には以前から応えたかったのですが、おおかたの機能が充実してきた今だからこそ注力できたかと思います。

UIを設計するときには使い勝手を想定して行いますが、最初から正解はなく、実際に使われてからフィードバックを受けて成熟していくものだと考えています。具現化の第一歩として、今年の春からユーザーさんのリアルな声を多く知るためのGrowth Projectがスタートしました。
今回はとくに、設定周りに関するブロックエディタの使いづらい部分を大胆に改修できる機会だったので試行錯誤を重ねました。まずはカラムの分割線や共有ブロックなど、使用頻度の高い機能の設定まわりから改修しています。

ブロックエディタのUIを大幅にリニューアル

編集時に重宝、エディタ画面のウィンドウサイズを自在に変更できる

ブロックエディタはレスポンシブWebに対応したBiND8の時にリニューアルしましたが、あくまで以前のUIを継承するものでした。今回は、パーツの並べ方を見直したり従来Dressを使わないと出来なかったことを出来るようにしたり、発展的な改修を加えています。
編集画面のウィンドウサイズが自在に変えられるようになったのもようやく要望に応えられた点です。編集後に適用を押さずに閉じようとした場合、確認アラートが出るなども細かいけど欲しかったところです。

社内で改修案を出し合ったときに、よく使うパーツを、一覧から探さずにすぐ使えるようにしたいという意見が出て、最近使ったパーツが自動的に読み込まれるカテゴリを作りました。BiNDは様々な用途のサイトに対応できるように多くの機能が搭載されているので、使うパーツが限られている人にとっては最近使ったパーツがすぐ目に付くと便利だと思います。

リンクや画像など使用頻度の高いものは上部に固定、最近使用したパーツもすぐに選択できる新しいUI

よく使うデザインの微調整をDress不要で簡単設定

ブロックの設定画面もできることが増えました。たとえば、幅や余白の%指定に対応したり、カラム間隔を数値入力する、ピクセル単位で選べるなどデザインの微調整がDressを使わずとも設定できます。テキスト周りでも、たとえばテキスト行間指定で一部の文字だけ大きい場合など部分的に指定できるようになります。

サイトエディタにも手を入れ、サイトエディタから共有ブロックの指定やブロックテンプレートを直接追加可能になったので、ページを効率的に作ることができると思います。

ブロック設定画面では、ブロックの幅や余白、カラムの間隔などの項目を増加

デザインの可能性が広がる、BiNDup新機能のココに注目！

デザイナー待望、ダイナミックな背景設定を可能に

これまでBiNDが苦手としていたデザイン表現に複数ブロックに跨った背景設定があります。デザインチームも熱望していた機能で、今回の実装により表現の幅がぐっと広がります。背景は最大6つまでのブロックを指定できて、インパクトのある見た目にできます。
また、Dressに新しく追加される背景のブレンドモードは、設定した背景画像を背景色に対して乗算やオーバレイをかけて色味を調整できる機能です。サイトのメインカラーに合わせて、背景にも統一感を持たせることができます。他にも、上級者向けにはなりますが複雑な表現ができるプロパティを追加しています。

Background Blend modeの乗算を使うと、不透明度を下げた場合よりも重なっている画像となじんで見える

リクエスト多数!Dressを使わずにできるカラムの表現をパワーアップ

左右違いブロックのカラム幅は今までDressで変更するしかなかったんですが、ブロック設定で簡単に変えられるようになりました。横並びのカラムをスマホでは縦積みで表示する場合も右左どちらを上に表示するかを選べるので、Dressに苦戦していた人にも簡単に表現できるようになっています。ユーザーの皆さんからのリクエストも多かったのでぜひ使ってもらいたいですね。
また、タブ・アコーディオン内でのカラム分割や、プレーンブロックなどのカラムごとの背景もCSSを用意せずに個別設定できるようになったので、いろんなデザインにトライしてもらえればと思います。

左右違いブロックのカラム幅の比率はスライダーで自由に変更可能

知らないとSEO評価を下げてしまう画像サイズもシステム側でフォロー

Webを作るときに気にしなければいけないことはたくさんあるんですが、その中でも重要な点の1つとして挙げたいのが、掲載する画像の適正なリサイズです。最近は解像度の高いカメラが多くなっているので、数枚の写真を掲載するにしても、ページに合ったサイズになっていないとすぐページが重くなってしまいます。意識していないと見落としがちな点なので、読み込んだ画像に自動リサイズをかけてくれる機能を搭載することになりました。去年のWebP対応も含めて、画像関連の処理はこれで一通りフォローできるかと思います。

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

画像パーツは幅の上限を1440px、背景は2560pxとし、オーバーする画像は自動的にリサイズされるようになります。現在使われている主要なディスプレイにほぼ対応できるようになっています。

今後も使い勝手に着目したUI/UXの改善を継続

今回の改修では、しばらくアップグレードしてない人にはUIがかなり見やすく、使い続けてる人にはよく利用するものが使いやすくなって、かゆかったところに手が届くバージョンになっていると思います。
今後としては、個人的にはサイトコンテンツを作る上でブログ機能がとても重要になってくるので、BiND PressのUIを見直して機能を向上させていきたいですね。

これにとどまらず、ユーザーの皆さんのリクエストやWebデザインのトレンドに合わせてブロックエディタに手を加えて、使い勝手を向上させていきたいです。根本的な部分はなかなかハードルが高いですが、Dressなども含めて全体的にグレードアップしていけたらと思います。

いかがでしたか？
次回からは、実際の新しいBiNDupをお見せしながら、ブロックエディタがどう使いやすくなったかを動画で紹介予定です！どうぞお楽しみに。
その他の新機能の紹介記事はこちらからどうぞ。
新しいBiNDupの記事を読む
※ 記事内のイメージは開発中のものであり、仕様などは変更になる可能性があります。

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