人工知能もついにここまで!ロゴのデザイン、Webサイトのスタイルガイドを作成できるオンラインサービス -Brandmark
Post on:2017年8月21日
今年になって人工知能、AIが取り入れられたWeb制作関連のサービスがどんどんリリースされています。フォントの組み合わせをAIで、カラーの組み合わせをAIで、サイトのリデザインをAIで、自動化することができ、自分にはない知識を引き出して効率的に作業することができます。
今回紹介するのはサイトのブランド、ロゴやスタイルガイドを数クリックするだけで作成できてしまうオンラインサービスです。そのまま使ってもよし、カスタマイズも可能なので、ベースとしても利用できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082101.png)
Brandmarkは、サイトのブランドとなるキーワードをいくつか入力するだけで、ロゴやデザイン要素、そしてスタイルガイドまで作成されます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082102.png)
Brandmarkの特徴
さっそく試してみました。
まずは、下記ページにアクセスし、ブランドの名前を入力します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082103-01.png)
右上の「next」ボタンをクリックし、次にキーワードを3つ以上入力します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082103-02.png)
キーワードの入力
右上の「next」ボタンをクリックすると、ロゴの候補が表示されます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082103-03.png)
ロゴの候補
「Logo Layout」をクリックすると、配置・カラー・サイズなどを調整できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082103-04.png)
ロゴのカスタマイズ
好みをロゴを選択すると、完了です。
あとは、上部のメニューから各項目でカスタマイズや作成された成果物を確認できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082103-05.png)
カラーのカスタマイズ
「Preview」ではそのデザインが使用させるさまざまなシーンを確認できます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082103-06.png)
デザインのプレビュー
「Website」ではレスポンシブ対応のサイトでの確認です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082103-07.png)
サイトのプレビュー
デザインのバリエーションも豊富に用意されています
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082103-08.png)
デザインのバリエーション
指定したカラーに基づき、サイトのスタイルガイドも生成されます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082103-09.png)
サイトのスタイルガイド
スタイルガイドにはサイトで利用させる汎用的な要素が揃っています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082103-10.png)
サイトのスタイルガイド
JavaScriptのコンポーネントも完備されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201703/2017082103-11.png)
サイトのスタイルガイド
sponsors