Please get in touch if you have any questions, interests or business ideas.

GET IN TOUCH

Check our Terms and Privacy Policy.

WebサイトをAdobe Illustratorだけでつくる「TexTape」

現在の支援総額

90,000

11%

目標金額は800,000円

支援者数

9

募集終了まで残り

終了

このプロジェクトは、2013/10/07に募集を開始し、 2013/12/09に募集を終了しました

WebサイトをAdobe Illustratorだけでつくる「TexTape」

現在の支援総額

90,000

11%達成

終了

目標金額800,000

支援者数9

このプロジェクトは、2013/10/07に募集を開始し、 2013/12/09に募集を終了しました

このプロジェクトを見た人はこちらもチェックしています

1

HTMLが苦手なグラフィックデザイナーのために、Illustratorで思いのままにデザインし、コーディングレスでWebサイト制作ができるプラグイン、その名も『TexTape Creator』を開発するため、本プロジェクトを発起いたしました。

『TexTape Creator』は現在当社が販売している『TexTape』の機能追加版。
追加する機能はご支援いただいた方の投票で決定します。

『TexTape Creator』の開発が実現すれば、Webサイト制作に必要なのはIllustratorだけ。

グラフィックデザイナーの皆さま、どうかご支援をお願いいたします。
(もちろんグラフィックデザイナーでない方からのご支援も大歓迎です!)

ご自分の希望する機能へ投票し、理想のプラグインを完成させてください。



2

【目的】
Illustratorで思いのままにデザインし、コーディングレスでWebサイト制作ができる『TexTape Creator』を開発すること

【TexTape Creatorで実装する機能の候補】
『TexTape Creator』は、支援してくださる皆さまの声を優先したプロダクトにしたいという思いから、投票によって新しく実装する機能を決定することにいたしました。

是非、あなたが実装を希望する機能を以下から2つお選びください。
※実装を希望する機能への投票は、プロジェクトサクセス後にお送りするメールにて行います!

1. ボタンの作成(マウスオーバー時に変化するもの)
単独のボタンを作成する機能(送信ボタン、リンクボタンなど)
2. ナビゲーションバーの作成機能
Webサイトに一般的に実装されているページを切り替えるナビゲーションバーを作成する機能
3. 基本レイアウトの作成機能
4. 縦書きのサポート
5. Illustrator CS5のサポート
6. Illustrator CCのサポート
7. 動画の貼り込み機能(Youtubeなど)
8. Googleマップの貼り込み
9. バックグラウンド画像の貼り込み
10. ソーシャルボタンの貼り込み(twitter、Facebook、Google+など)

【資金の使い方】
皆さまからいただいた支援金はすべて『TexTape Creator』の開発資金として使わせていただきます。
投票結果1位より順に「TexTape Creator」に実装いたします。
※何位の機能まで実装するかは、皆さんの支援総額により決定いたします。

【リターンについて】
支援して頂いたすべての皆さまに
・本プロジェクトメンバーより、心を込めて感謝のメール

支援額に応じて
・機能追加リストへの投票権
・TexTapeのWebサイトにSpecialThanksとしてお名前を掲載
・TexTape Creator完成までTexTape現バージョンの試用版提供
・TexTape Creator製品版のプレゼント
・TexTapeのTips集(使い方集)プレゼント

また、
30万円を支援して頂いた場合は
・希望される独自機能の追加
※本プロジェクトで追加されることが決定した機能以外の、支援者の希望する機能を実装いたします。ただし、実現が可能で、かつ開発費が予算以内におさまるものに限定させていただきます。



3

デザインしたページをそのままWebで公開したい

デザインして文章も流し込んで、仕上げたはずのドキュメントなのに、Webで公開するためにはさらにコーディングまでしなければならないのはなぜなのでしょうか。
パンフレットやチラシをIllustratorで作成して印刷するとき、そのドキュメントのコードを確認する必要はありません。もちろんWordやPowerPoint などのアプリケーションで文書を作成する場合でも同じです。しかし、Webページをつくるときだけは少し事情が違います。
WebページをつくるためにDreamweaverでHTMLドキュメントを作成するときは、HTMLコードやCSSを確認しながらつくっていく必要があります。
では、そもそもなぜコーディング作業が必要なのでしょうか?

4

Webページのデザインが崩れてしまう大きな原因はフォントにあります。

Webページは、見る人の環境によって表示のされ方が異なってしまいます。
その原因は3つあり、まず1つめがHTMLやCSSは仕様がオープンなため誰でもWebブラウザをつくれることです。2つめは、表示するデバイスの画面が異なること。そして最後の3つめは、デザインしたときに使ったフォントが表示するデバイスにないと、他のフォントに置換されてしまうことです。
1つめの問題はやっかいですが、HTMLドキュメント作成ソフト側で解決することが可能です。
2つめのデバイスの画面が異なることによって起きる問題は、ページの比率をそれぞれのデバイスにあわせてデザインすることで解決できるでしょう。
しかしながら、3つめの問題を解決するのは簡単なことではありません。なぜなら、使ったフォントを表示できるように見る人の環境に勝手にインストールするわけにはいかないからです。

5

Webフォントを使えば解決できる部分も多いが、コストがかかる。
その上、すべての問題を解決できるわけではない。

フォントが置換されてしまえば、表示される長さが変わり、場合によっては行数まで変わるため、デザインも大きく異なってしまいます。そんな状況では、思った通りのデザインはできません。
どんな閲覧環境でも使用したフォントを表示できるようにする技術として、Webフォントがあります。しかし、Webフォントを使うためには、それなりのコストがかかります。その上、コストをかけてWebフォントを使ったとしても、すべてのフォントが使用できるわけではありません。
また、カーニングや両端揃えなど、細かい組版の問題は残ってしまいます。

Web



7

使ったフォントをそのまま表示するためには、画像化するしかありません。しかし、これではテキストデータも持てません。つまり、文字を選択してコピー&ペーストすることもできませんし、SEO効果もほとんど期待できなくなります。
そこで、画像化した文字の上層に透明なレイヤーを重ね、同じ位置にテキストデータを持たせるという方法を考案しました。この方法ならば、どんなフォントでも表示できますし、テキスト情報も保持できます。
上記の方法を用いて開発したのが、Adobe Illustratorで作成したデザインをそのまま表示できるプラグイン・ソフト、『TexTape(テクステープ)』です。
商品の詳しい説明は、こちらをご覧下さい。

TexTapeは7月31日に発売いたしました。

■TexTapeを使用したサイト制作事例
・TexTape公式ページ(http://textape.jp/)
・IT起業のすすめ(http://writeup-lab.jp/it/)
・訪問医療サービス(http://writeup-lab.jp/iryo/)

発売時に複数のメディアに掲載されたことで、とても多くの関心を持っていただき、販売においても順調な滑り出しをすることができました。
この「TexTape」は、印刷用につくられたパンフレットやチラシを簡単にWebページに変換できることを特徴としています。また、ランディングページを多く制作されている企業様よりご好評いただいています。

しかしながら、一方で、ボタンやナビゲーションもつくれるようにして欲しいとのご意見も多く寄せられました。

ランディングページ制作には便利だけれどWebサイトをつくるには機能がなさ過ぎる。 そこで、一般的なナビゲーション付きのWebサイトをWISYWIGな環境の元でつくれるよう、機能を充実させたプロダクトを提供すること。それが、本プロジェクトの目的です。

グラフィックデザイナーの皆さん、もうコーディングに頭を悩ませる必要のない世界は、すぐそこまで来ています。ぜひ、皆さんの力をお貸しください。

Illustratorで思いのままにデザインし、コーディングレスでWebサイト制作ができる『TexTape Creator』の開発に着手したい

当初次期開発は、初期コストが回収された後に予定していました。
しかし、多くの方の注目を集めているクラウドファンディング『CAMPFIRE』さんでこのプロジェクトの応援をしていただければ、より早い時期に、充実の機能を備えた『TexTape Creator』を開発することができるでしょう。

■TexTapeの使い方
TexTapeは、3つのステップで簡単にHTMLドキュメントを書き出すことができます。
1.ページ設定画面
ページ設定画面では書き出す幅などの設定をします。

8

2.グラフィックレイヤー
グラフィックレイヤーでは書き出すグラフィックレイヤーを選択したり、オブジェクトにリンクを貼ったりすることができます。

9

3.テキストレイヤー
テキストレイヤーではテキストにリンクを貼ることができます。

10

最後に「書き出し」ボタンで書き出しを行うことで簡単にHTMLに変換することができます。

■メディア掲載事例
ITpro
IllustratorデータをHTMLに完全変換する「TexTape」発売へ、「文字のコピペも可能」
当日の25ニュース中 この記事へのツイート2位 いいね!2位

MdN Interactive
プライムスタイル、Illustrator用のHTML変換プラグイン「TexTape」を発売
この記事への いいね! 週間1位


11

支援に関するよくある質問

ヘルプページを見る

このプロジェクトの問題報告はこちらよりお問い合わせください

コメント

もっと見る

投稿するには ログイン が必要です。

プロジェクトオーナーの承認後に掲載されます。承認された内容を削除することはできません。


同じカテゴリーの人気プロジェクト

あなたにおすすめのプロジェクト