Web制作にもAIが実用的になってきた!WebページのUIをリデザインできるオンラインサービス -Huula
Post on:2017年5月9日
ひと昔前まではデザインもコードも手作業が多かったですが、最近ではさまざまなタスクに自動化が取り入れられ、効率的に進めている制作者の人も多いと思います。
そしてここ1,2年の間で、Web業界にもAIが少しずつ進化し、実用的なレベルまで達しています。
WebのUIをデザイン、そしてコードにも対応したオンラインサービスを紹介します。
有料のものが多い中、本サービスは一部制限されますが、無料で利用できます。

Huulaの特徴
Huulaはデザインがゼロの状態から始めることもできますが、既存のWebサイトをリデザインすることもできるのが大きな特徴です。
下記のようにURLを指定し、Webページをインポートし、さまざまなデザインやコードを変更することができます。
既存のWebサイトをリデザイン
さまざまなUIコンポーネントも用意されており、簡単に利用できます。
ナビゲーションの追加
コードで変更することも可能です。クリックで要素を指定し、さまざまな編集ができます。
コードで変更
デモは数多く用意されており、無料で体験できます。

Huulaの使い方
Huulaは無料の「Starter」、有料の「Pro」「Ultimate」が用意されています。
無料の「Starter」では、1サイトのみと制限されていますが、ほとんどの機能を利用できます。

無料の「Starter」を利用するには、登録(無料)が必要です。
「Starter」に登録して、利用してみました。
まずは、当ブログをインポート。既存のデザインを簡単に変更することが可能で、UI要素を複製して比較することもできます。

見出しのデザインを試しているところ
コードで編集する時は、右パネルから「Outline」を選択し、ツリーを開いて要素を指定します。

コードの編集
右パネルから「Widget」を選択すると、さまざまなUIコンポーネントを利用できます。

ウィジェット
UIコンポーネントはドラッグ&ドロップで、簡単に配置できます。

UIコンポーネントの配置
sponsors