シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > Webサービス > タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
注目記事ピックアップ
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
share0
プログラミングしないと戦えないWebストラテジーゲーム「Empire of Code」が時間泥棒確定!
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
share0
スマホで3Dモデルを現実世界に召喚し、自在に動かせる「Augment」サービスが無料公開中!
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
share0
ブロックを繋げてWebアプリやゲームを作れる「Weld Action Blocks」が思わず夢中になる面白さ!
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
share0
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
share0
ブラウザだけで完結する「bot開発環境」を無償提供した「Meya.ai」は、ボットのホスティングまで可能!
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
share0
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
share0
ブロックを繋げるだけでチャットボットが作成できる「Motion AI」は、WebもSNSも無料で運用可能!
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
share0
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
share0
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
share0
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
share0
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
share0
URLを指定するだけ!どんなWebデータも一発で可視化できる「Silk」は、そのままWebサイトも制作可能で無料提供中!
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
Webサービス
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2016/03/29 20:15

タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!

cardform-trello-01 どうも、まさとらん(@0310lan)です!

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

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

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


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

サイトにアクセスしたら、トップページにある「TRY IT」ボタンをクリックします。
cardform-trello-03 すると、自分の「Trello」アカウントと連携するかを聞いてくるので、「Allow(許可)」ボタンをクリックしましょう。


しばらくすると、専用の「ダッシュボード」画面が開くので、「Create」ボタンをクリック!
cardform-trello-04 ここから、さまざまなWeb制作を行うことが出来るようになっています。


最初に、いくつかの「テンプレート」を選べるようになっています。
cardform-trello-05 スマホアプリの「紹介用」ページ、「Comming Soon」ページ、「企業用」ページ、「ポートフォリオ」ページ…など、自分の作りたいイメージに合うモノを選択しましょう。


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

次に、サイトのURLになるテキストを入力します。(今回は、「mypage」としました…)
cardform-trello-07

そして、「Trello」側に作ることになる「Board名」を指定します。
cardform-trello-08 「デフォルト」で記載されているテキストをそのまま利用してもOKです。


次に表示されるスイッチを「ON」にしておけば、Trelloで修正した内容がWebサイトに自動反映されるので便利です。
cardform-trello-09 最後に、確認画面が表示されるので、問題なければ「Create」ボタンをクリックしましょう。


すぐに、Webサイトの構築に必要な処理が自動的に実行されて、以下の画面が表示されると思います。
cardform-trello-10 ここまでの作業で、実はもう「Webサイト」が公開されています。


それでは、「Open」ボタンをクリックしてみましょう!
cardform-trello-11

こんな感じで、テンプレート通りのWebサイトが完成しています。
cardform-trello-12 最初に自分で設定したURLを、友人・知人に送れば同じように誰でも閲覧可能です。

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


今度は、「Trello」ボタンをクリック!
cardform-trello-13

すると、自分の「Trello」アカウントで、新しい「ボード」が生成されているのが分かります。
cardform-trello-14 それぞれの「リスト」がWebサイトの「コンテンツ」になっており、1つずつの「カード」がコンテンツを形成する「要素」になっているのが斬新です。


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

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

そして、先ほど表示したサイトを更新すると、しっかりアップデートされているのが分かります!
cardform-trello-17 このように、「Trello」に生成された「タスクカード」のテキストや画像・リンクなどを書き換えるだけで、誰でも簡単にWebサイトを構築できるのが最大の醍醐味と言えるでしょう。


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

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

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

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

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

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

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

「ページ名_Content」というリストを作ってあげればOK!
cardform-trello-25 リスト内には、「title」「Subtitle」「Content」「Background」の項目を入力したカードを作り、サイトのコンテンツを作っていくことが可能です。


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

個々のページコンテンツも、カードに追加した内容通りになっていますね。
cardform-trello-27 「Cardform」のテンプレートを活用することで、さまざまなジャンルに応じたWebサイトを手っ取り早く構築することが出来るようになるでしょう。

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


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

「Webサイトの作成を爆速化するWebアプリ約70種をまとめた「HelpMeBuild.io」がまさに救世主!」
cardform-trello-28 GitHubと連携したサイト制作や、キャンペーンなどに特化したページ作り、WordPressを高機能なCMSに変えるモノや、ロゴやイラスト、動画作りまで強力にサポートしてくれるWebサービスを厳選してまとめています。

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


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

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


<参考>
「Cardform」公式サイト

「Trello」公式サイト



written by まさとらん(@0310lan

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る