Webデザインの仕事を広げるアプリケーションに注目!フリーランスのデザイナーがBiNDを使う理由 | デザインってオモシロイ -MdN Design Interactive-

Webデザインの仕事を広げるアプリケーションに注目!フリーランスのデザイナーがBiNDを使う理由

2024.4.19 FRI

【サイトリニューアル!】新サイトはこちらMdNについて
 Interview

Webデザインの仕事を広げるアプリケーションに注目!
フリーランスのデザイナーがBiNDを使う理由

WebオーサリングサービスであるBiNDクラウド。最新のWebトレンドに対応するバージョンアップを重ね、今年でバージョン10となっている。美しく洗練されたWebサイトを制作することができるだけでなく、さまざまな機能を実装することで、Web構築から運用までを含むサービスへと進化しているBiNDは、特にデザインワークに注力したいデザイナーにとって魅力的なツールへと進化している。ここでは、フリーランスのWebデザイナーとして活躍されているそうまかおりさんに、BiNDによるデザインについてお話を伺いました。
(テキスト:久保靖資、撮影:鈴木隆志)

【関連記事】
>>> 「Web制作会社ならではのBiNDビジネス活用術」はこちら
>>> 「BiNDで起業。Web制作で成功を収める新たなビジネスモデル」はこちら
デザイナーとしての本質であるデザインへのこだわりを実現してくれるツール。
それがBiND。
――どのようなWeb制作案件でBiNDを利用されるのでしょうか。

そうまさん●個人でお店をやっている方など小規模なクライアントやWebに詳しくない方ほど、Webに掛けるコストを抑えたいという方が多くいらっしゃいます。かつクライアント側でも運用更新を行いたいという場合に、BiNDで制作しています。というのも、BiNDであればコーディングが要らないので、低コスト・短納期での制作が可能ですし、HTMLなどの知識も要らないのでクライアントにも更新作業が勧められるなど、納品後のサポートもしやすいというメリットもあります。それまでは、サイトを納品したら仕事としてはそれで終わることが多かったのですが、クライアント自身がサイトを運用していると、自然と要望が出てくるんです。そのタイミングでリニューアルを提案して、次の案件に繋がることもあります。

――Webデザインに関しては、Photoshopなどのツールを併用されるのでしょうか。
そうまさん●低コスト案件であれば、作業自体も効率化していく必要が出てきます。BiNDならば、Photoshopでワイヤーフレームを別に用意することなく、フレーム決めやデザインをBiND上で始められます。つまり、実際の仕上がりがクライアントもイメージしやすいので、サイト化したらイメージが違ったということもなくなります。もちろん、グラフィック制作はPhotoshopなどのツールを併用します。オリジナルのデザインを起こすときはPhotoshopを使い、クライアントが後に変更したくなるような簡単なパーツはBiNDの編集ツールであるSiGN Proで作ります。
また、私は基本、BiNDのテンプレートは使わずにゼロからデザインしていくのですが、低予算の案件などは、テンプレートをベースに使うこともあります。BiNDのテンプレートはデザインクオリティもとても高いですし、有用なものが多いと思います。BiNDのテンプレートがどう作られているのかなど設定を見ると、カスタマイズの参考になる点も多いですね。

――Webデザインという視点で考えたとき、BiNDのどんなところがお気に入りでしょうか。
[SHiFT編集画面] デュレーションやスピード、ループなど、スライド ショーのパラメータをこの画面だけで簡単に調整で きる。そうまさんの場合、Webデザインの雰囲気に 合わせて、さりげないゆっくりとしたフェードを 利用することが多いという

[SHiFT編集画面]
デュレーションやスピード、ループなど、スライド
ショーのパラメータをこの画面だけで簡単に調整で
きる。そうまさんの場合、Webデザインの雰囲気に
合わせて、さりげないゆっくりとしたフェードを
利用することが多いという

そうまさん●スライドショー作成機能のSHiFTが好きですね。パラメータの調整なども楽にできるし、その場でプレビューしながら調整できる点もいいです。BiND 10ではエフェクトも追加されてますよね。BiNDを使わなくてもjQueryプラグインなどでいろいろなスライダーを選ぶこともできますが、スライダーによってはブラウザとの相性があったり、コーディングによってエラーが発生したりします。そうした対応へのストレスや、パラメータ調整もコーディングで行ってからプレビューしなければならないなどのストレスを考えると、BiNDはストレスフリーです。スライダーのデザインに集中できるというメリットが大きいですね。

――新たに搭載されたWebフォントはいかがでしょうか。
そうまさん●すごくいいですよね。以前は文字もグラフィックパーツとして作ることが多かったのですが、レスポンシブ表示で問題になることもあるので、Webフォントはありがたいです。私の場合、ビジュアルデザインのアクセントとして欧文フォントを使うことが多いですね。BiNDならWebフォントを簡単に選びやすく、テキストを変えたり、フォントを変えたり…そういったデザインとしてのトライ&エラーを手軽に行えるのは、本当に嬉しい。スライダーと同様に、Webフォントも自分で組み込むこともできるのですが、フォントを変えるには一旦コーディングに戻らなければなりません。BiNDならデザインに集中できるので、その点もメリットです。
和モダンを意識したデザインで、日本語フォントを活用したサイト「Zipangu Modern」 http://www.z-modern.com/

和モダンを意識したデザインで、日本語フォントを活用したサイト「Zipangu Modern」
http://www.z-modern.com/

――他にデザインするうえで気に入っている機能はありますか?
[Dress編集画面] Webページを構成する部品ごとにスタイリングを指 定し、デザインセットとして管理できるDress機能

[Dress編集画面]
Webページを構成する部品ごとにスタイリングを指
定し、デザインセットとして管理できるDress機能

そうまさん●デザイン管理機能のDressもいいですね。デザイナーとして、色にはすごくこだわっています。たとえば、見出しなどのアクセントカラーもベースカラーと同じ色を使うのではなく、微妙にトーンを変えることで全体としてのイメージは全然変わります。一目では違いが分からないかもしれませんが、微妙な色使いがデザインのクオリティを上げることになるのです。といって、見出しが出てくるたびに色を指定するのは面倒ですよね。そういった意味で、Webページのパーツごとに色をセットしておけるDress機能はWebデザインの作業効率をすごく高めてくれます。本来、CSSコーディングで管理しなければなりませんが、CSSの知識がなくても使える点もいいですね。ただ、機能が豊富過ぎて、私もすべて使いこなせてはいませんが(笑)。

――BiNDを使ううえでのこだわりなどはありますか。

そうまさん●BiNDらしくないデザインにこだわっていますね(笑)。BiND以外のWebデザインソフトやBootstrapなどのフレームワークでもそうなんですが、そのまま使ってしまうと、どうしてもそのツールの匂いみたいなものが出てしまうんです。BiNDもBiNDらしさ…があるように思います。ブロックで構成されている…みたいな。やはり、私はデザイナーですから、自分らしさを表現したいですね。もちろん、クライアントありきですから、クライアントの要件を自分らしいカタチで表現したいと考えています。
日本にいながらskypeでフランス語レッスンを受けられる「フランス語教室 Cours Montmartre「クール・モンマルトル」 http://cafj.jp/

日本にいながらskypeでフランス語レッスンを受けられる「フランス語教室 Cours Montmartre「クール・モンマルトル」
http://cafj.jp/

――そうまさんにとって、クライアントワークにBiNDを選ぶ理由は何ですか?

そうまさん●私は、コーディングはある時点で辞めたんです。もちろんHTMLやCSSなどのコーディングもできるのですが、私がやるべき仕事はUIも含めたビジュアルデザインだと考えているのです。コーディング自体は知っておく必要があるとは思いますが、作業には時間がかかるものです。その時間を、私はデザインに充てたいのです。Webだけでなく、ビジネスツールも含めたCI提案も仕事として行うことが多く、クライアントの課題に対してデザインで応えることが私の仕事だと考えています。私の仕事のスタンスにフィットするツールのひとつがBiNDです。デザインワークに集中することができる。同時に、短期間でのWebデザイン制作も実現できる。まさに、私にぴったりなんです。Webデザインは難しそう…と躊躇しているグラフィックデザイナーさんも多いと思いますが、そういった方にこそBiNDを試してみて欲しいですね。むしろ、なんでBiNDを使わないの?って思うくらいです。


【Profile】そうま かおり さん

横浜をベースとしたフリーランスのグラフィックデザイナー。Wbデザイン・制作を中心に、さまざまなグラフィックデザインを手掛けるほか、アートディレクションも行う。また、フォトグラファーとしても活動しており、パリなどに脚を運び、ヨーロッパの風景写真作品も多数制作。BiNDによるWebデザイン歴も長く、微妙な色使いやタイポグラフィなどにこだわったフルカスタマイズのデザインが特徴的。
URL:
http://4real-design.com/

【関連記事】
>>> 「Web制作会社ならではのBiNDビジネス活用術」はこちら
>>> 「BiNDで起業。Web制作で成功を収める新たなビジネスモデル」はこちら
「BiNDクラウド」&「BiND for WebLiFE* 10」
BiNDクラウド HTMLやCSSを意識することなく、プロレベルのハイクオリティなデザインができるWebオーサリングソフト。Webページ上のコンテンツをブロックという単位で追加・編集・削除ができ、テキストや画像以外にも、ボタンやスライドショーなどの各種機能を簡単な操作で配置していくことができる。
プロがデザインした豊富なテンプレートは、デザインやレイアウトパターンの組み合わせを変えることで、オリジナルデザインへと簡単に仕上げることも可能。導入環境に依存せず、バージョンアップも担保するクラウド版サービス「BiNDクラウド」もオススメ。

〇BiNDクラウド
URL:https://bindcloud.jp/

株式会社デジタルステージ
URL:https://www.digitalstage.jp/
■動作環境
[対応OS]:OS X 10.10.5 Yosemite、OS X 10.11.6 El Capitan、macOS Sierra 10.12.6、macOS High Sierra 10.13、Windows 7 SP1、Windows 8.1、Windows 10
[CPU]:インテルプロセッサ 2.4GHz 以上(Core i シリーズ 2.0GHz 以上推奨)
[メモリ]:2GB 以上(4GB 以上推奨)
[HDD]:5GB以上の空き容量(10GB以上の空き容量推奨/RAID環境を除く)
※ 32bit/64bit対応。ただし64bit版では32bitモードで動作します
※ いずれのOSも日本語版のみ対応しています
※ Windows 8.1、Windows 10では、「デスクトップモード」で動作します
【PR】
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在