この記事を書くきかっけ

私は元々１０年くらいWEBデザイナーとしてデザインからコーディングまで色々お仕事してきましたけど、最近は管理職となりもう５年くらいはデザインなんてしちゃいない。
もうデザイナーなんて名乗るのはおこがましい身分でございます。

そんな中、会社で新しいサービスをリリースするにあたり、取り急ぎWEBページが必要になりました。

急ぎWEBページは必要。外注する？予算は？
何言ってんだい、立ち上がったばかりの新事業部にそんなもんはねぇ。

ということで、巷で話題のAI系のサービスを使えば、WEBページも簡単につくれるじぇ！とネット記事では見ていたので、これを機会に使ってみる。

使うサービス紹介

使うサービスは、とにかく”無料で使えるもの（または既に契約しているもの）”縛り。

ベースで使うFigmaさん

■ Figma

皆様？ご存じのホームページやアプリケーションなどのワイヤーフレーム（ページのレイアウトを設計した図）を作成できるツール。

デザインをしてくれるＡＩサービスはこの２つ。理由はない。なんか良さそうだったから。

■ Relume

作りたいWebサイトの概要を文章として入力するだけでサイトマップの自動生成やそれらを反映したワイヤーフレームの生成もできるツール
(https://www.designguilds.com/)

■ Wireframe Designer

どんなウェブサイトやアプリを作成したいのか文字で入力すると、一発でワイヤーフレーム用モックアップを生成してくれる、Figmaのプラグイン。
（https://www.figma.com/community/plugin/1228969298040149016/wireframe-designer）

使ってみる【Relume】

このサービスはFigmaのプラグインではなく、Relumeで作ったものがFigmaに読み込めるらしい。
なので、とりあえず無料のアカウントを作って「New Project」から作成する。

使い方は詳しく書かないです。私でも直感的に操作できたので多分書かなくても大丈夫だろうと思っています。

「どんなサイトなん？」
簡単なテキストベースでOK.とりあえず「AIを使ったエンジニアをサポートするAIソリューション」と入れてみる。
日本語でもちゃんと認識してくれるっぽい。ありがとう。
１枚っぺらのページでいいので、必要最低限のコンテンツだけにする。

「どんなページがいるん？」
各カラムのイメージをここで選択していく。レイアウトのイメージも出ていてわかりやすい。

「Wireframeでけたで。」
Wireframeのページをみると、サイトのワイヤーフレーム案を出してくれた。ものの0.5秒くらい。なんか今時っぽい感じで良い。

デザインのカラムとかも色々種類があって、イメージに近いものを選ぶことができます。

触り始めてから１０分くらいで、それっぽいワイヤーフレームができました！しゅごい。

さあ、これをFigmaにインポートしようか。他の紹介サイト見てると、インポートも無料らしい。

「インポートしまっせ」
Figma側にRelumeのプラグインを入れて連携設定→Figma側から
Figma側から"Export" -> "Export to Figma" でfigma側に読み込めるらしい。

Oh.......
Sitemapは読み込めるけど、ワイヤーフレームは有料プランしかダメみたいです。
残念！！！！
頻繁にWEBページを作る訳じゃないので、有料にするのはなあ。
とはいえ、作ったワイヤーフレームをベースにfigmaで作りこむのはアリかもしれません。

使ってみる【Wireframe Designer】

こちらはfigmaのプラグインなので、figma内で操作します。
”プラグインを管理”から、Wireframe Designerを検索しインストール。

かわいらしいPOPUPが出てくるので、このテキストエリアに作成したいサイトを入れます。

でてきた！！！おお、それっぽい。
ただ、Relumeみたいに代替案などはなく、あくまでテキストでの指示が必要。

（なまじっかデザインが作れるから、わざわざ指示するのはちょっとメンドクサイ…）

使ってみた感想

ということで、サラっとですが使ってみた感想。

デザイン作れない！って人にはバッチリ。
逆に言うと、デザインがちょっと出来る人は若干の煩わしさを感じる。
すぐにワイヤーフレームが作れるのは作業スピードUPしていいけど！
とりあえず急ぎでサイトが必要なんじゃい！という人は超いい。
そのままFigmaに連携させて色とか写真入れて、「Builder.io」（Figmaで作成したデザインをそのままコードに変換）したら爆速でそれっぽいサイトは作れる。
ちょっとデザインかじったことある人には向いてない。
結局は、沢山あるテンプレートのつぎはぎ？
同じページが乱立するってことだよね、ほんまにそんなサイトでええんか（苦笑）という元デザイナーのミジンコみたいなプライドが出てくる。

今海外では、コーディングとはほぼやらないんだって。
と思うと、デザインの基本は知ったうえで”使いこなす”ことは大事だなと思う所存です。
とりあえずワイヤーフレームはすぐ出来たので、「どんなカラムにしよかな～」って悩む時間はかなり削減できました！
引き続き、爆速でWEBページ作れるサービスを使ってみようと思います。