海外から、GUIでHTML/CSSのコーディングが行えるツール「Relate」が登場しました。
従来のテキストエディタとブラウザを行き来してWebサイトを制作するスタイルが、Relateを使えば1つの画面ですべての作業を行えるようになります。
今回は、現在プレオーダー受付中のRelateの特徴や、実際に使ってみた感想などご紹介したいと思います。
INDEX
Relateとは
Relateは、SketchやAdobe XDのようなデザインツールを使う感覚でデザインを作成して、HTMLやCSSのコードを出力することができるツールです。
まだ正式にリリースはされておらず、現在はプレオーダーの受付を行っています。プレオーダーの場合、75％オフの金額で1年間利用することができるので、気になる方はお得なプレオーダーがおすすめです。
左側に表示されているHTMLパネルの階層構造の中に好きなタグを配置して、右側に表示されているCSSパネルでデザインを調整してページを作り上げていきます。
Relateを正しく表現するのであれば、GUIのWebコーディングツールと呼ぶのが正しいでしょう。
現在はComming soonとなっていますが、将来的にJavaScriptのコードを出力することができるようにもなる予定です。
また、プレビュー版のサービスも公開されていて、下記のURLから試すことができます。
Relateの特徴
Relateは具体的にどのようなツールなのでしょうか？プレビューを使ってみて色々な機能を確かめてみました。
新しいコーディングの形
Relateは、GUIのWebコーディングツールということもあり、これまでとは一味違った感覚でWebサイトを作っていくことができます。
一般的に、Webサイトのコーディングを行う際はテキストエディタでコードを書いて、ブラウザで表示を確認して、という作業の繰り返しですが、Relateを使うと1つの画面でWebサイトを作っていくことができます。
以前、Phaseというデザインツールをご紹介したことがありますが、デジタルプロダクトのデザイン制作の在り方を変えてしまう可能性を秘めていると思います。
ほとんどのことが行える
Relateは、HTMLとCSSでできることであれば、たいていの事がRelateを使ってできます。
ブレークポイントの設定、flexboxやGridを使ったレイアウトの作成、position:absoluteによる要素の固定配置、ホバー時のスタイル指定など、Web制作で使用する基本的なテクニックはすべて行うことができます。
これまでもGUIでデザインを作成して、コードを出力できるようなサービスはありましたが、できることに制限が多く、あまり浸透してきませんでした。
しかし、Relateであれば柔軟にコードを作ることができるので、そういった意味では全く新しいツールと呼ぶことができそうです。
ある程度HTMLとCSSの知識が必要そう
RelateはCSSのオプションを使ってデザインを作ることになるので、全くのHTML/CSS初心者には使い方が分からないかもしれません。
例えば、要素を横並びに表示したいときなどはflexboxなどを使えば実現することができますが、その知識が無ければ使い方が分からないでしょう。
思い通りのデザインを作るためには、HTMLとCSSの知識が必要になってしまうため、ノンデザイナーでもWebサイトが思い通りに作れるという形は難しそうです。
コーディングができる人はコードを書いた方が早いかも
HTMLとCSSを使い慣れている人は、わざわざRelateを使わなくても自分でコードを書いた方が早く作ることができそうです。
基本的にHTMLとCSSの考え方をベースにページを作っていくツールなので、SketchやAdobe XDと比べると、デザイン制作にかかる時間が多く必要になってしまいます。
テキストエディタの機能をフル活用すれば、補完などを駆使してそれなりに早くコーディングを行うことができるので、スピード面で見ると、慣れている人はこれまで通りのテキストエディアとブラウザを使った方が早いのではないでしょうか。
使ってみた感想：実用的になるのはもう少し先か
1つの画面でWebページの作成からコードの確認までできるのは非常に魅力的なツールです。
しかし、タグの入れ替えや階層化などの細かい所を見ると、まだまだ操作性が優れているとは言えず、現段階で実用性はあまり高くないかもしれません。
ただし、公式サイトにReactの名前が登場していたり、Githubとの同期、デスクトップアプリのリリース予定もあるなど、今後色々な機能が追加されていく予定です。
現在、Relateはプレオーダー受付中というステータスですが、正式にリリースされるタイミングでまた情報をお届けしたいと思います。
気になる人はSTUDIOを使ってみるといいかも
同じようなコンセプトでプロダクトを作っている「STUDIO」というサービスが日本にあります。
STUDIOは、「コードを書かずにWebサイト制作を完結」というコンセプトでサービスを作っていて、実際にあっという間にWebサイトを作ることができてしまいます。
コードこそ出力できないものの、Webサイト公開まで一気通貫で行うことができるので、逆にコードを出力する必要は無いのかもしれません。
Relateが気になっている方は、一度STUDIOを使ってみるといいかもしれません。
