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

AdobeXD使ってホームページやWebサイト作って公開までってできないの?
AdobeXDだけだと作成したWebサイト公開まではできないよ

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

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

記事の内容
  • AdobeXDでデザインを作成する
  • 作成したデザインをHTMLにエクスポートする
  • エクスポートしたHTMLをネットに公開する

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

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

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

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

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

    流れ
    1. AdobeXDでサイトデザインを作成する
    2. 作成したデザインをHTMLにエクスポート
    3. エクスポートしたHTMLをアップロードして公開

    まずは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サイトの公開先
    • AWSのS3でホスティング
    • Netlify
    • Heroku
    • Vercel
    • レンタルサーバー
    • ・・・

    いくつか静的の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ファイルに書き出すことができるのはとても楽でいいんだけど、うまいことレスポンシブ対応されていません。これが対応されていたらかなりいいんだけど、残念ながらそうはなっていない。

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

     結構コードがすごい

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

    パッと見気になるだろう点
    • 圧倒的なJavaScriptの記述量
    • CSSなどの命名

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

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

    まとめ

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

    今回試した手順
    1. AdobeXDでデザインを作成する
    2. 作成したデザインをHTMLにエクスポートする
    3. エクスポートしたHTMLをNetlifyで公開する

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

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

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

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