SiGN for WebLiFE* Pro」(サイン・プロ)SiGN for WebLiFE* Pro」(サイン・プロ)

ウェブパーツ専用の画像編集ツール「SiGN for WebLiFE* Pro」(サイン・プロ)

「SiGN for WebLiFE*」(サイン)とは、バナーやボタンなどのウェブパーツを簡単に作成できる画像編集ツールで、ウェブ制作ソフト「BiND for WebLiFE*」(バインド)の中にバンドルされている無料のアプリケーションです。テンプレートからカスタマイズしていく仕様のため、使い手のデザインノウハウの有無に関わらずハイクオリティなパーツが作成できます。 今回、BiND5に内蔵されるバージョンから「SiGN Pro」として生まれ変わり、レイアウトやサイズを自由に設定したり、レイヤーによって複数の画像を重ねるなど複雑なデザインを行える本格的な画像編集ツールに進化しました。

導入前の課題

「BiND」は、HTMLのタグを使わずにウェブサイトが作れるソフトウェアで、独自のテンプレートをカスタマイズしながら作っていく仕様のため、エントリーユーザーでも簡単に導入することが可能です。小さなコミュニティや会社こそウェブを最大限に活用したいのに、そこに立ちはだかる「技術力」と「ウェブデザイン」と「予算」の壁。BiNDは、その壁を取り除くために生まれました。
しかし、ウェブ制作につきまとうボタンやバナーなどの画像パーツの制作となると初心者では自由に作り切れない問題がありました。そこでBiNDと同じくテンプレートから編集するというコンセプトによって、直感的な操作でパーツを作成できるアプリケーションとして「SiGN」を開発し、BiNDに内蔵しました。

その際、開発としての課題は、
・Windows環境とMac OS X環境の両方に対応しなければいけない。
・簡易的な画像編集ツールと言う位置づけでありつつ、WYSIWYGを実現しなければいけない。
・高度なテキストレイアウトエンジンを必要としている。
・画像、テキスト等にエフェクト処理を施さなければいけない。
などが挙げられました。

導入の理由

開発のプラットフォームにAdobe AIRを選んだ理由としては、
・クロスプラットフォームな開発環境で、開発期間の短縮を図ることができる。
・比較的平易なプログラミング言語であり、開発スタッフへの導入がスムースである。
・ラスタライズされたビットマップ、ベクター図形を簡易に扱える。
・強力な新しいFlashテキストエンジンが魅力的だった。
また、Adobe Pixel Bender Toolkitを導入した理由としては、
・ピクセルレベルでの操作が可能で、Adobe Airのコンポーネントとの親和性が良い。
・シェーダランゲージが得意なスタッフがいた。
などが挙げられます。

その結果、SiGNでは以下のような特長を持つ画像編集ツールを実現し、初心者に易しく効率的なウェブ制作環境を提供しています。

【SiGNの特長】
■バリエーション豊かなデザインテンプレート
SiGNは、デザインテンプレートからカスタマイズしながら作る方法と、ブランクテンプレートでゼロから作る方法から選べます。ヘッダーやメニュー、バナー、ボタンなどのエリアごとに適したテンプレートを多数収録しています。
■10種類の和文フォントと45種類の欧文フォント
フォントはサイトの印象をガラリと変えてしまうくらい重要なデザイン要素です。SiGNの中には、タイトルや見出しのデザインに最適な多彩なフォントを用意しました。
■150パターン近くのエフェクト
「明るさ」「グレースケール」「彩度」「色相」など108パターンの画像エフェクトや「縁取り」「影」「鏡面反射」などの45パターンの文字エフェクトなど、素材を視覚的にアレンジすることが可能です。
■その他
・画像や文字サイズの自由設定、レイアウトの配置、レイヤー、マスクなどに対応しています。
・外部のレタッチソフトでも編集できるよう、画像を書き出すことも可能です。

導入効果と今後の展望

開発の観点からは、以下の利点がありました。
・タイトな開発期間でありながら、品質の高いアプリケーションを完成させることが出来た。
・ユーザーエクスペリエンスと本質的な機能のバランスを簡易に制御出来、多くのユーザーに満足頂けるものになった。

SiGNは、エントリーユーザーにとってウェブパーツを簡単に作れるようになるだけでなく、ハイエンドユーザーにとっては手軽に素早くデザインを行えるツールでもあります。

SiGNの更なるステージとしては、
・デザインのための補助機能の充実とシェイプ、エフェクトの充実をよりいっそう図りたいと思っています。
・SiGNはテンプレートとして書き出すことができるので、ユーザー同士で配布しあえるような環境を提案したいと考えています。

シンプルな画像編集ツールというコンセプトを維持しつつ、Webサービス、ネイティブアプリケーション、
もしくはネイティブライブラリとの連携を視野に入れ、様々なサービスのユーティリティになるように展開を考えています。

システム構成

-

使用したアドビ製品

事例データ

事例タイプ 消費者 (BtoC)
事例カテゴリ その他業務系
ビジネスの貢献分野
プラットフォーム デスクトップPC
使用したWeb技術 Adobe AIR, Flash, Flex
使用したその他の技術 Adobe Pixel Bender Toolkit
会社名 株式会社デジタルステージ (http://www.digitalstage.jp/)
会社概要 身近なところにある自分たちの‘未来’をデザインするソフトウェアを自社で企画開発し、販売を行う。代表作はVJソフト「motion dive」やウェブ制作ソフト「BiND for WebLiFE*」、フォトムービーソフト「LiFE* with PhotoCinema」。ソフトウェア史上初のグッドデザイン賞金賞をはじめ文化庁メディア芸術祭優秀賞など受賞歴多数。代表はメディアクリエイターの平野友康。2010年よりUstreamやFacebookなどのソーシャルメディアを駆使した自社メディアを確立し、これまでに延べ90万人の視聴者が参加。新時代のソーシャルメディア論を積極的に提唱している。
業種 ソフトウェア
従業員数 50人未満
開発企業
page top