AdobeXDのプロトタイプをHPにする方法

AdobeXDでプロトタイプを作ったには作ったが、HPにする方法がぶっちゃけわからない人のためのブログです。

AdobeXDのプロトタイプを、HPに埋め込む方法。

2021-06-21 16:05:15 | 日記

こんにちは！AdobeXDを使ってみたよ。
InvisionStudioとか使ったことある人ならまるで同じような仕様なので瞬時に使いこなせると思うよ。
でも、プロトタイプかつモックアップで思うがままにガンガンにアニメをつけちゃったりできる割に、ここから本当のHPにするには結構大変なんだよねー。
プラグインで吐き出したりしてもCSSやSVGも、アニメになったりはしていない。位置情報だけだよね。しょんぼり！
なので、今回はそのしょんぼり感を誤魔化すため、五分でHP（仮）にしちゃおうということで、こちらに記述しておくね。
役立ったら捨てコメントよろしくね！社会の役に立たないの怖あ〜い・・・
サイズは100%が大事。あらゆるブラウザにフィットしてくれるね。

材料

・AdobeXDで作ったプロトタイプの埋め込みリンクURL（プロジェクト単位のURLです。XDで公開部分を更新すると、このURLの内容もちゃんと更新します。）
・独自ドメインなど
・index.html
・ファビコン（あれば。ここではindex.htmlと同階層に置いてます。）fav.pngなどの名前が良い。
・ほにゃらら.html (index.htmlに埋め込む。ここではindex.htmlと同階層に置いてます。)



① あなたのHPのindex.htmlに、これをコピペして下さい。

<html> <head> <title>題名</title> <link rel="shortcut icon" href="fav.png" type="image/png"> </head> <body> <iframe width="100%" height="100%" src="ほにゃらら.html" frameborder="0" allowfullscreen></iframe> </body> </html>


②上で埋め込まれている、ほにゃらら.htmlを作ります。名前はご自由に。同階層に置きます。
このように、埋め込みリンクをXDで発行して、それを src="リンク"にコピペするだけです。


<iframe src="https://xd.adobe.com/embed/URL" width="100%" height="100%" frameborder="0" allowfullscreen=""></iframe>


ほら、普通のHPみたいになりました！index.htmlのソースを見ても、AdobeXDのプロトタイプだ〜なんて思われないね。更新も簡単！
ちなみに、CreativeCloudアカウントの有料会員である前提です！

AdobeXDをDreamweaverのようなものだと間違えて、困っちゃった人の応急手当てに。

この後は、そんなんじゃ誤魔化しきれない！
プロトタイプをちゃんとHPとして作りあげたい人には必見の「GSAPアニメーションライブラリ（無料）」を使って、
JavascriptとCSSでXDから数値だけ拾って、本物にしてゆく工程だよ。



コメントを投稿