ノーコーディング開発でウェブサイト制作[Adobe XD]

フリーランスとしてwebサイト制作を本格的にスタートさせて、ランディングページやホームページを作成することに成功しました。

ここの詳細は別の記事で紹介します。

今回のメインはwebサイトを制作するにあたってデザインデータを用意するのですが、デザインデータからプラグインを利用してデータをスキャンします。

しばらくするとプレビュー画面を表示できるので、ブラウザ確認するというものです。

難しく感じるかもしれないですが、簡単にできます。

以下。各項目ごとに掘り下げて解説します。

目次

  • 概要
  • プラグイン紹介、登録、プロジェクト作成
  • Adobe XD側の設定
  • 初期設定解説
  • 実行、結果

概要

従来はwebサイト制作するためにデザインデータを用意します。

デザインデータをもとにエディタを使ってHTML/CSS言語を用いてサイト制作します。

この作業をデザインデータをスキャンするプラグインを用いてコーディングを極力抑えます。

スキャンして自動でコーディングしてくれるのですが、100%頼るのは難しいです。

サイトタイトルを変更したり、画像差し替えなどは人力です。

プラグイン紹介

Animaを使ってみたのですが、なかなか高精度にwebサイト設計できました。

https://www.animaapp.com/

animaトップ画面

右上のStart Freeボタンから登録してください。

ホーム画面

登録するとホーム画面が表示されます。

右上のNew Projectボタンからプロジェクトを作成します。

一つのプロジェクトのみであれば無料で作れます。

それ以降は月額費用が掛かります。

Adobe XD側の設定

Adobe XDをすでに登録している前提ですのでまだの方はここから登録してください

https://www.adobe.com/jp/products/xd.html

スタータープランであれば無料登録できます。

これでデザインデータを扱えるようになります。

Adobe XD ホーム画面

adobe XDを開いて新規作成ボタンを押すとこの画面になります。

サイトサイズを選択します。(私の場合はパソコンで作業するので1366 webを選択)

編集画面

編集画面に来ました。

左下にプラグイン項目があるのでクリックすると開発版があるのでその中のプラグイン作成をクリック

階層

メニュー>プラグイン>開発版>プラグインの作成…

プロジェクト作成画面

この画面からプロジェクトを作成

プロジェクト作成画面

右上のCreate new projectボタンをクリック

プロジェクト作成画面

真ん中のAdd PluginをクリックするとAdobe XDがあるので選択

プロジェクト作成画面

左下のDownloadボタンをクリックするとzipファイルを受け取れます。

そのファイルを解凍すると自動で割り当てられたidの名前がついたファイルを入手します。

このファイルが大事なので保存してください。あとでコピーします。

開発フォルダへ設置

Adobe XD画面へ戻り、プロジェクトを設置するフォルダを探します。

先ほどのメニュー「プラグイン」から進んで開発フォルダの表示をクリックすると設置するフォルダを表示できます。

階層

トップメニュー>プラグイン>開発版>開発フォルダを表示

先ほどコピーしたファイル一式をそのままペーストします。

これでプラグインを開発できます。

初期設定

このファイル一式には変更が必要なファイルが二つあります。

  • manifest.json
  • main.js

各種設定ファイルはjsonファイルが用いられます。

Manifest.json

{
  "name" : "CoFroPic",
  "host" : {
    "app" : "XD",
    "minVersion" : "21.0"
  },
  "id" : "8377b788",
  "icons" : [ {
    "path" : "images/icon@1x.png",
    "width" : 24,
    "height" : 24
  }, {
    "path" : "images/icon@2x.png",
    "width" : 48,
    "height" : 48
  } ],
  "uiEntryPoints" : [ {
    "type" : "menu",
    "label":"CoFroPic",
    "commandId" : "createRectangle"
  } ],
  "version" : "0.0.1"
}

変更する場所は

“name”: “プロジェクト名”

“id”: 最初に割り当てられたID いじらなくていいです。

“label”: “Adobe XD内で表示される名前”

“commandId”: “この後のmain.jsの関数名によってこちらもあわせます。”

main.js

/*
 * Sample plugin scaffolding for Adobe XD.
 *
 * Visit http://adobexdplatform.com/ for API docs and more sample code.
 */


const {Rectangle, Color} = require("scenegraph"); 

function rectangleHandlerFunction(selection) { 

    const newElement = new Rectangle(); 
    newElement.width = 100;
    newElement.height = 50;
    newElement.fill = new Color("Purple");

    selection.insertionParent.addChild(newElement);
    newElement.moveInParentCoordinates(100, 100);
    

}



module.exports = {
    commands: {
        createRectangle: rectangleHandlerFunction
    }
};

rectangleHandlerFunction内で変数を定義し、長方形を作成しています。

module.exports内で長方形作成コマンドを作成。

ココでの名前が上記commandIdと関係しています。

これらのコードをエディタで編集・保存したらAdobe XDに戻り、先ほどのメニューからプラグイン>開発版>再読み込みで更新します。

するとプラグイン欄に自分の作成したプラグインが表示されます。

クリックすると先ほどの長方形が表示されます。

結果画面

プラグイン作成の際はmanifest.jsonファイルとmain.jsファイルを編集していきます。

Visual Studio Codeなどのエディタがおすすめです。(詳細は触れません)

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

Anima実行、ブラウザ確認

Animaプラグインはプラグイン検索画面からインストールします。

anima実行画面

animaを実行するために自分がデザインしたテーマを用意しました。

Animaメニュー項目

Breakpoints欄にてpcサイズとspサイズを設定します。

サイト全体をShiftボタン + クリックです。

複数選択です。

するとメニュー項目からPreview in Browserボタンが出るのでクリック

結果画面

レスポンシブデザインありのwebサイトを自動コーディングできました。

問題点は

  • ランディングページではできてもホームページの場合はどうなのか
  • ページ内リンクなどは正しく設定されるのか
  • コードが複雑で編集が容易ではない
  • 無料版では完成版のダウンロードはできない(月額会員になる必要がある)
  • ブラウザ確認している状態のコードをエディタから編集する形

また、仮に有料会員になったとしてもダウンロードしたコードをそのまま納品は厳しいと思います。またページ構成が複雑な場合には有効性が疑われます。

ページ作成の補助くらいにはなります。

まとめ

今回はwebサイト制作の自動化という観点からAnimaの紹介をしました。

Adobe XDのデザインデータの自動コーディングをデモしました。

有効性について考えました。

次回など

Adobe XDではプラグインを自作することが出来ます。

そこで、有効なプラグインを自分で作って実行しようと思います。

有効性が確かめられれば、ブログにて紹介します。

ノーコーディング開発でウェブサイト制作[Adobe XD]” への1件のフィードバック

  1. 佐藤様

    お世話になっております。
    レントラックスの惣蔵でございます。

    先程RYOUBLOG 運営者 佐藤諒様より
    弊社へ登録に関するメールを頂戴いたしました。
    ※手違いでしたら大変申し訳ございません。

    そちらのメールに返信させていただいたものの、
    送信ができなかったため、再度コメント欄にて連絡させていただいております。

    もし上記内容にお心当たりがございましたら、
    再度別のメールアドレスよりお返事をいただけますと幸いでございます。

    お手数をおかけしますが、よろしくお願いいたします。

    —————————————————————
    株式会社レントラックス
    メディア事業本部 惣蔵 祐貴/ SOUKURA YUUKI
    東京都江戸川区西葛西5-2-3 NEXTAGE西葛西5F
    TEL:03-3878-4159 FAX:03-5696-0155
    MAIL:affagent09@rentracks.co.jp
    URL: https://www.rentracks.co.jp/
    —————————————————————

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA