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

アプギガトップ > Webサービス > タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
注目記事ピックアップ
「Prott」新機能のワイヤーフレーム作成ツールで、超高速プロトタイプピングを実践してみた!
share0
「Prott」新機能のワイヤーフレーム作成ツールで、超高速プロトタイプピングを実践してみた!
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
share0
完全自動で、自分のプログラミング「作業ログ」を収集して可視化する「WakaTime」が素晴らしい件!
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
share0
Web開発系の情報収集が爆速になる絶対覚えておきたいWebサービス7選+α!
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
share0
動画の中身をAI(人工知能)が認識&タグ付けする「Clarifai」が検索エンジンに革命を起こす!
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
share0
思わずWebアプリを開発したくなる「JavaScriptライブラリ7選」を一挙公開!
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
share0
欲しいコンテンツを選ぶだけでWebサイトを作成できる「XPRS」が、無料とは思えないクオリティだった件!
HTML5アプリをChromeアプリに爆速変換できる「Monaca」のビルド能力がスゴイ件!
share0
HTML5アプリをChromeアプリに爆速変換できる「Monaca」のビルド能力がスゴイ件!
ブログ読者に「聞いてみたいこと」を簡単にWebコンテンツ化できる「plyfe」を試してみた!
share0
ブログ読者に「聞いてみたいこと」を簡単にWebコンテンツ化できる「plyfe」を試してみた!
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
share0
YouTube動画内に、まったく違う動画やWebページを挿入できる「videopath」が衝撃的!
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
share0
脅威の認識技術で別人の顔に変身できるアプリ「MSQRD」が予想以上に変身できる件!
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
share0
コード不要で、独自Webサービスをブラウザ上で無料開発できる「Bubble」を使ってみた!
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
share0
好きなYouTube動画の「見て欲しいシーン」だけを抽出して再公開できる「vibby」が便利すぎる件!
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
share0
タスク管理の「Trello」にWeb制作機能を搭載できる「CardForm」が斬新過ぎてスゴイ!
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
share0
発射した弾が、相手のスマホ画面に飛んでいく対戦ゲーム「DUAL」が衝撃的な面白さだった!
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
share0
天才的なアイデアで開発された海外の「iPhoneアプリ事例7選」が、斬新過ぎてヤバイ!
最近、Slackの「bot」が何でも出来過ぎて「カオス」状態になってる件!
share0
最近、Slackの「bot」が何でも出来過ぎて「カオス」状態になってる件!
スタートアップや企業Webサイトの作成に必要な機能全部入りの「uKit」が無料公開中!
share0
スタートアップや企業Webサイトの作成に必要な機能全部入りの「uKit」が無料公開中!
海外のニッチな情報収集に特化したWebサービス7選が、Google先生より詳しいと話題に!
share0
海外のニッチな情報収集に特化したWebサービス7選が、Google先生より詳しいと話題に!
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
share0
ソースコードの「バグ」を修正する速さを競うWebゲーム「CodeFights」で遊んでみた!
プロジェクター不要のプレゼン資料が作れるWebサービス「Slides」があまりに多機能過ぎる件!
share0
プロジェクター不要のプレゼン資料が作れるWebサービス「Slides」があまりに多機能過ぎる件!
Webサービス
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...

ページトップへ戻る