どうも、まさとらん（@0310lan）です！

個人や業務の「タスク」を、付箋感覚で管理できるWebサービス「Trello」が人気ですが、このサービスに「Web制作機能」を追加できるのをご存知でしょうか？

まったくジャンルの違う「タスク管理」に「Web制作」というミスマッチが非常にユニークですが、タスクを管理する方法とまったく同じ操作で「Web制作」を実現するサービスをご紹介します！

【 Cardform 】

「Trello」のアカウントを持っている方であれば、今すぐ試すことが出来るのでぜひ一度トライしてみてください！


使い方！
まずは、「Cardform」でどんな事が出来るのかを、実際に使いながら見ていきましょう！

サイトにアクセスしたら、トップページにある「TRY IT」ボタンをクリックします。

すると、自分の「Trello」アカウントと連携するかを聞いてくるので、「Allow(許可)」ボタンをクリックしましょう。


しばらくすると、専用の「ダッシュボード」画面が開くので、「Create」ボタンをクリック！

ここから、さまざまなWeb制作を行うことが出来るようになっています。


最初に、いくつかの「テンプレート」を選べるようになっています。

スマホアプリの「紹介用」ページ、「Comming Soon」ページ、「企業用」ページ、「ポートフォリオ」ページ…など、自分の作りたいイメージに合うモノを選択しましょう。


今回は、自分の「パーソナルページ」を作れるテンプレートを選んでみます。



次に、サイトのURLになるテキストを入力します。（今回は、「mypage」としました…）



そして、「Trello」側に作ることになる「Board名」を指定します。

「デフォルト」で記載されているテキストをそのまま利用してもOKです。


次に表示されるスイッチを「ON」にしておけば、Trelloで修正した内容がWebサイトに自動反映されるので便利です。

最後に、確認画面が表示されるので、問題なければ「Create」ボタンをクリックしましょう。


すぐに、Webサイトの構築に必要な処理が自動的に実行されて、以下の画面が表示されると思います。

ここまでの作業で、実はもう「Webサイト」が公開されています。


それでは、「Open」ボタンをクリックしてみましょう！



こんな感じで、テンプレート通りのWebサイトが完成しています。

最初に自分で設定したURLを、友人・知人に送れば同じように誰でも閲覧可能です。

それでは、このサイトの中身がどのようになっているのかを見てみたいと思います。


今度は、「Trello」ボタンをクリック！



すると、自分の「Trello」アカウントで、新しい「ボード」が生成されているのが分かります。

それぞれの「リスト」がWebサイトの「コンテンツ」になっており、１つずつの「カード」がコンテンツを形成する「要素」になっているのが斬新です。


例えば、「Configuration」リストにある「Name」と書かれたカードの名前を「アプギガ！！」と書き換えてみます。



さらに、「Avatar」カードに添付されている画像も変更してみます。



そして、先ほど表示したサイトを更新すると、しっかりアップデートされているのが分かります！

このように、「Trello」に生成された「タスクカード」のテキストや画像・リンクなどを書き換えるだけで、誰でも簡単にWebサイトを構築できるのが最大の醍醐味と言えるでしょう。


まだあるこんな機能たち！
「Cardform」では、冒頭で選択した「テンプレート」によって、さまざまな機能が用意されています。

例えば、テキストの「カラー」などを簡単に変更できるように、カードへ直接「カラーコード」を指定できたりします。



CSSが書ける人であれば、「CustomeStyles」カードの「Description」にCSSコードを書くことも可能！



また、「Comming Soon」ページなどでよくある「メールフォーム」についても…、



「MailChimp」などで生成したURLを、そのまま「カード」にコピペするだけで完了してしまうお手軽さです！



さらに、複数ページあるサイトを作りたい場合などは…、



「Pages」リスト内に、必要な分だけページのタイトルを入力したカードを追加し、



「ページ名_Content」というリストを作ってあげればOK！

リスト内には、「title」「Subtitle」「Content」「Background」の項目を入力したカードを作り、サイトのコンテンツを作っていくことが可能です。


「更新」することで、見事にページが追加されているのが分かります。



個々のページコンテンツも、カードに追加した内容通りになっていますね。

「Cardform」のテンプレートを活用することで、さまざまなジャンルに応じたWebサイトを手っ取り早く構築することが出来るようになるでしょう。

あまりに細かいカスタマイズまでは望めませんが、キャンペーンや告知、アプリの紹介や個人サイトなど、活用できるシーンは多いと思います。


おまけ
最後に、もっと本格的なWebサイトを簡単に制作できるようにしてくれる強力なWebツールをまとめたサービスも合わせてご紹介しておきます！

「Webサイトの作成を爆速化するWebアプリ約70種をまとめた「HelpMeBuild.io」がまさに救世主！」

GitHubと連携したサイト制作や、キャンペーンなどに特化したページ作り、WordPressを高機能なCMSに変えるモノや、ロゴやイラスト、動画作りまで強力にサポートしてくれるWebサービスを厳選してまとめています。

ご興味ある方は、ぜひ一読くださいませ！


まとめ
「Cardform」は、まだ公開されたばかりのサービスなので、テンプレートも現状は少ないですが、今後新しいモノが追加される予定なので、さらに応用範囲も広がっていくでしょう。

「Trello」をすでに使っている人はもちろんですが、プロトタイプ作りや素早くWebページをカタチにしたい人は、ぜひ一度トライしてみることをオススメします！


＜参考＞
・「Cardform」公式サイト

・「Trello」公式サイト



written by まさとらん（@0310lan）