AdobeXDでサイト・ホームページ作成から公開まで簡単にやってみる

AdobeXDだけだと作成したWebサイト公開まではできないよ

そうなんです。AdobeXDでデザインを作成することはできるけど、作成したサイトの公開まではできません。だけどできるだけ楽にデザインしたホームページやサイトを公開したいですよね。

そこで今回はAdobeXDでサイトデザインを作成してサイト公開までできるだけ楽にやるっていう記事です。

 AdobeXDで作成したデザインからHTMLをエクスポートして公開するよ

AdobeXDでWebサイトのデザインを作成して、そのデザインしたものをHTMLにエクスポートして公開します。「デザイン作ってそのまま公開できたら楽だなあ・・・」って思ったので少し試してみました。結果は始めに書いてしまうと微妙です・・・まあやっていきましょう。

AdobeXDでデザイン作成して公開していこう

AdobeXDでサイトデザインを作成してホームページを公開する流れ

今回記事でやる流れとしてはこんな感じです。

まずはXDでデザインを作成していきましょう。作成したものをエクスポートして後はアップロードすればいいだけです。

AdobeXDでホームページ・サイトデザインを作成する

まずはAdobeXDで作成したいサイトのデザインを作成していきます。結構直感的に使うことのできるソフトだから使ったことがない人でも取っつきやすいはず。

 AdobeXDの料金

AdobeXDは1,298 円/月（税込）で使うことができます。Adobeコンプリートプランを使っていれば、その中に入っているから使えますね。自分はコンプリートプランを使っています。

コンプリートプランはちょっと高いけどいろんなソフトを使うことができるからおすすめです。

AdobeXDでWebサイトのデザインを作成する

AdobeXDを起動したらさっそくデザインをしていきます。図形を作成して組み合わせていけばいいだけだから操作は簡単。適当にオレンジのサイトを作っておきます。

ちなみにサイズは今回Web1920でやっています。

ただ縦の長さが足りなくなったのでそこは伸ばしたりして調整しました。

AdobeXDのデザインをHTMLにエクスポートする

 エクスポートするプラグインをインストールする

プラグインを使って今作成したデザインをHTMLとしてエクスポートすることができます。[プラグイン→プラグインを参照]からWeb Exportを入手しましょう。

 Web ExportでHTML出力する

WebExportを使ってHTML出力します。

Exportボタンを押すとエクスポートされますね。

 エクスポートしたHTMLを確認する

エクスポートされたHTMLを見るとHTMLがちゃんとできていますね。

ブラウザで表示してみるとAdobeXDで作成したデザインが表示されました。

レスポンシブにならない

ただブラウザで確認してみるとレスポンシブになっていないですね。レスポンシブになってほしい場合にはHTML書き出しは有料版しか使えないけど、Animaなんかが使えるかもしれません。

 Animaならまだ良さそうだけどHTML書き出しは有料

Animaを使ってプレビューしてみた感じ、ブラウザの大きさをいじってもデザインもそれに応じて動いてくれたのである程度レスポンシブが考慮されていると思います。

無料のプラグインで他のものも試してみたんだけど、うまくいきませんでした。

HTMLファイルを公開する手順

次は今エクスポートしたHTMLファイルをアップロードして公開したいです。公開する手順としてはこんな感じ。

 公開先を選択する

デザインのHTMLファイルが作成されたらそれを公開したいんだけど、どこ使って公開するか迷いますよね。

いくつか静的のWebサイトを公開する手段はあるけど、今回はNetlifyを使います。出力されたHTMLファイルをアップロードすれば公開できるはずなので簡単。既にレンタルサーバーとか使っている人はそっちの方が楽かもしれません。

レンタルサーバーの場合はどれも大体やり方は同じです。もしレンタルサーバーで公開したかったら以下のような記事が参考になると思います。

デプロイ先のお作法に乗っ取ってファイル編集する

今回はNetlifyを使ってやっていくんだけど、適当なフォルダを作ってindex.htmlをその中に入れればOKです。なのでexportしたファイルをindex.htmlに命名して新たに作成したフォルダに入れておきます。

 画像ファイルのパスを編集する

画像ファイルなんだけど、エクスポートされたファイルを見てみると、srcがファイル名そのままです。

AdobeXDからプレビューする分にはいいんだけど、サイトとして表示するとこれだと何も表示されません。画像ファイルを別のAWSやGCPのバケットに置いておくのもいいけど、面倒なのでimagesフォルダを作ってその中に必要な画像を入れておくことにします。

srcとsrcsetもフォルダに入れた画像のパスを指定するようにしましょう。編集したらブラウザからちゃんと表示されるか確認してみるといいですね。

NetlifyでAdobeXDでエクスポートしたHTMLを公開をする

Netlifyで今回はサイト公開をしていきます。[Add new site→Deploy manually]からフォルダをドロップします。

アップロードするのはさっき編集したファイルたちですね。今回はwebっていうフォルダにindex.htmlと名前を変えたエクスポートされたファイルと画像を入れたimagesファイルを入れておきます。

アップロードしたら、URLが表示されるからそれをクリックして表示を確認します。

無事表示されましたね。

AdobeXDからWebExporterで出力しただけでは諸々きつい

今回AdobeExporterっていうAdobeXDのプラグインを使って、画像のパスだけ編集するぐらいでそのままアップロードしたけどやっぱり諸々きつい点はあるので書いていきます。

 レスポンシブ対応されていないのがきつい

AdobeXDで作成したデザインをそのままHTMLファイルに書き出すことができるのはとても楽でいいんだけど、うまいことレスポンシブ対応されていません。これが対応されていたらかなりいいんだけど、残念ながらそうはなっていない。

なのでそのまま使うっていうことは厳しいです。有料のプラグインなんかを使えば違ってくるかもしれないけど、今回試した方法だとうまくいきませんでしたね。

 結構コードがすごい

出力されたコードを見ると結構すごいです。

XDから出力されたものだからしょうがないのかもしれないけど、結構気になってしまいます。普通に作るならこんなにJavaScriptは必要ないし、CSSの命名などもこんなに気になることはないでしょう。行数も3000ぐらいあるので「うっ・・・」となってしまう。

一人で楽しむ分にはいいけど、間違いなく仕事の開発現場では使えないコードです。

まとめ

今回はAdobeXDで出力したHTMLファイルからWebサイトを公開するっていうことをやりました。やったことはこんな感じですね。

Netlifyを使って公開したけど、他のサービスを使ってやっても同じような流れでできるはずです。ただ出力されたコードが今回はうーん・・・という感じでうまくいきませんでした。レスポンシブ対応がうまいことされればっていうところです。

ただAdobeXDで作って出力してしまえばほとんどコード書かなくてもいいのが楽すぎますね。今後精度が上がっていくことを楽しみにしておこう。

 コードを書きたくないならノーコードツールもあるよ

楽にサイト公開したいならノーコードツールを使うっていう方法もあります。Studioなんか結構おすすめです。コードを書かずにサイトを公開したいならノーコードは良いですよね。