里美WEB制作コメントを書く時代がAIですね。Sketch2CodeWEBのワイヤーフレームやデザインを起こす際に、Sketch、というソフトを使っている方も多いかと思います。名称がややこしいですね......。AdobeXDを利用している当社ですが、SketchはXDよりも歴史深く、様々なプラグインが付属している便利UI作成ソフト。いうかUI制作ソフトってワイヤーからデザインから写真加工アイコン作成、コーディングから共有まで全部一環してやってくれるものってないものですかね......。カンタン3ステップでHTMLが生成されます。ポイントは余白としっかりボックスを作る事。生成されるコードはBootstrapに準じています。AIがどこまで発展できるか、こうご期待。カンタン3ステップでHTMLが生成されます。こちらの「Sketch2Code」は、3ステップでWEBからHTMLを生成できるツールです。そのうち色も反映するようになるのでしょうか?スケッチしたワイヤーフレームやデザインの写真をアップロード変換HTMLダウンロード写真をアップロードするほか、スマートフォン、タブレットから撮影しそのまま転送することも可能なようです。ポイントは余白としっかりボックスを作る事。何はともあれやってみましょう。サンプルにあった絵を参考に、もそもそとワイヤーを切ってみました。それがこちら枠アリと枠ナシ。DESIGNをクリックして画像をアップロードすると自動的に動き出します。ボタンはオンマウスになるとちゃんと反応するようになっています。malorum」(善と悪の究極について)らしいです。Illustratorだとグリーキングは「夏目漱石の草枕」になります。感想としては「お、わりとよろしい」でした。「小さすぎると分析しにくい」ようです。インフォメーションのあたりをButtonと認識しているあたりがちょっとこまる。一つの方をやってみましょう。下の丸い窓のアニメーションかわいいですね。認識範囲は「1section」あるいは「1article」の範囲が最も効率がよさそうです。ホワイトボードを利用したり、タブレット、あるいはプロジェクターなどに反映してワイヤーを作成することが多いでしょうので、もともとそういう範囲設定なのかもしれません。それではそのようにやってみます。コンパクトにした(つもり)トップビューです。こちら、五分経っても反応がありませんでした。何が悪かったのかなーと思いつつ、文字を全撤去。それでもだめだったので、メニューバーをただのボックス形式に。ボックスはきっちり囲まないとだめなようですね。余白を開けないとそもそもテキストボックスとパラグラフの認識もあいまいなのか......。生成されるコードはBootstrapに準じています。コードは以下の通り想像よりだいぶきれいでした。ついているスタイルがpaddingだけとは思わなかった......。わけのわからないところでhタグとか入ってますが、少なくとも自分でHTMLを生成するよりは断然早い気がします。AdobeXDで作ったUIを反映させてみるこんな感じのざっくりレイアウトですがどうなるでしょうか。この時点で割と衝撃的。(伸びるのか......)プリンどこいった。カラー写真はダメな模様。こっちはどうでしょう。灰色のとこしか読み取れない!AIがどこまで発展できるか、こうご期待。言うと、イマイチです。ワイヤーを読みこんでくれるならまだ使い方もありましたが、軒並みダメではちょっと......。何のためのソフトなのかしら......。みられるものではないのでは?でもAIの最初ってこんなものなのかもしれませんね。これが三年後どうなっているのか、楽しみですねー。この記事であなたの課題を解決することができましたか?疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。インクループ株式会社デザイナー。Springのホームページを制作しました!2017.09.04JavaScriptとphpの違いって何?どう使い分けるの?ざっくりと違いをご紹介します!2016.07.21WordPressでGoogleアナリティクスのイベントトラッキングが反映されない!(泣)2016.07.05「現在メンテナンス中のため、しばらくの間ご利用いただけません。)この記事へのコメントはありません。この記事へのトラックバックはありません。URL返信をキャンセルする。現代のマーケティング課題を解決する資格セミナーを行っているマーケティングリテラシー協会様のLPを作成いたしました。Animateを利用したアニメーションを作ってみる。Festival今月の27日(日)開催!2019-2-4昔の味たまごさんの昔の味たまごプリンのランディングページを作成いたしました。ホームページ制作、WEBマーケティングページ上部へ戻る。