04 BiND
BiND8とBiNDクラウドについて BiNDのデスクトップ版とクラウド版の違いを説明します。
BiNDには、Windows／Macに対応するデスク
に対応しています。
トップアプリ版 「BiND8」 とブラウザ上で動作す
ぞれぞれのバージョンにはメリット、デメリッ
るWebアプリ版 「BiNDクラウド」 が用意されて
トがありますが （図参照） 、ポイントはWebア
います。
プリ版のBiNDクラウドをブラウザで開けばど
Webアプリとは、Webブラウザ上で動作する
んな環境でも利用できる点でしょう。デスク
JavaScriptなどのプログラミング言語による
トップアプリ版BiNDがインスール可能なマシ
プログラムとWebサーバーと連動することで
ンの台数 （２台まで）やWindowsやMacといっ
動作するソフトです。デスクトップアプリ版が
たプラットホームの制約から解放されるのは、 BiNDクラウドの大きなメリットと言えます。
クラウド版はブラウザで 「BiNDクラウド」サイ
また、デスクトップアプリ版からWebアプリへ
ト （http://bindcloud.jp/） へアクセスしてログ
データを移行するのは、エクスポート／インポー
インして利用します。
トの機能が用意されているので、それを使えば
この２つのBiNDの機能やユーザーインターフェ
問題ありません。
イスは同一になっています （Attention参照） 。な ので、どちらかのユーザーであればもう一方を、 トレーニングなどをすることなく使うことがで きるはずです。本書で解説している内容は、特 別に区別している場合を除いて、両方のBiND
２つのBiNDの機能などに大きな違いがないの ATTENTION は、2015 年 11 月末時点の状態です。バージョ ンアップ時期などによっては、それぞれの機能の有無に 差が出ることもあります。詳細は、公式サイトの 「BiND クラウドとパッケージ版の違い」 （http://bindcloud. jp/package.html） などを確認してください。
デスクトップアプリとWebアプリの仕組みと違い デスクトップアプリ
Webアプリ PC/Mac
PC/Mac インストールした アプリを起動
ブラウザでログイン
インターネッ ト接続したマシンのブラウ ザ上で動作
マシンの中で独立して動作する
デスクトップアプリ版BiNDの特徴
Webアプリ版BiNDの特徴
・ 保存するデータ容量はWindows ／ Macのマシンの ストレージに依存する。 ・ インストールできるのは２台まで。 ・ インターネットに接続していないオフラインでも 起動可能。 ・ 利用できるサーバーサービスを自由に選択できる。
・ 保存できる容量は、コースによって上限あり。 ・ インストールが不要で、インターネットに接続した マシンであれば、ブラウザ上で利用可能。 ・ サーバーの設定不要。 ・ １契約でさまざまなサービスが利用可能。 （月額税抜 ・ WebLiFE*サーバープレミアムコース 2980円） と同等のオプションが利用可能。
デスクトップアプリとWebアプリでBiNDは機能や使い勝手の差はほぼない
試用版として利用可能な BiNDクラウドのエントリーコース BiNDクラウドをまだ利用していない人にオ ススメなのが、エントリーコースです。独自 ドメインなどに対応するプロコースが月額 税抜2980円なのに対して、エントリーコー スは１年間、無料で利用できます （２年目以 降は月額税抜480円） 。 デスクトップアプリ版BiNDのユーザーで、 クラウドアプリ版を使ってみたいという人 は、デジタルステージIDを使えば登録手続 きもなく利用できるので試してみるといい でしょう。
BiNDの基礎知識
BiND8 動作環境 編集機能 基本的なパーツ
エディタモード／スマートモード 画像パーツ、 リンクパーツ、テーブル パーツ、カスタムタグ、スライドショー （SHiFT） など
○
○
○
○
○
○
○
○
BiNDカート
△ （一部制限のあるフリーコースのみ）
○
Smooth Contact
△ （一部制限のあるフリーコースのみ）
○
エクスポート／インポート機能
○
○
ソーシャル系 ソーシャルボタン、Instagram、Twitter、 パーツ Facebook Page Pluginなど ウェブサービス系 ニュース、ブログ、 ドキュメント、Google パーツ フォーム、地図、サイト内検索、翻訳
BiNDク ラ ウ ド のWebペ ー ジ （http://bindcloud. jp/） へアクセスして登録すれば、１年間は無料でエ ントリーコースを利用可能です。
ショッピング カート コンタクト フォーム データのバック アップ／移行
BiNDクラウド
１ライセンスにつきWindowsか、 インターネット環境のある Macいずれかの２台まで Windows、Mac問わず利用可能
17
Lesson 1
PCやMacにインストールして利用するのに対し、
1
サーバー
Lesson 1
Webとローカル、異なる動作環境に対応するBiND
16
Lesson
04 BiND
BiND8とBiNDクラウドについて BiNDのデスクトップ版とクラウド版の違いを説明します。
BiNDには、Windows／Macに対応するデスク
に対応しています。
トップアプリ版 「BiND8」 とブラウザ上で動作す
ぞれぞれのバージョンにはメリット、デメリッ
るWebアプリ版 「BiNDクラウド」 が用意されて
トがありますが （図参照） 、ポイントはWebア
います。
プリ版のBiNDクラウドをブラウザで開けばど
Webアプリとは、Webブラウザ上で動作する
んな環境でも利用できる点でしょう。デスク
JavaScriptなどのプログラミング言語による
トップアプリ版BiNDがインスール可能なマシ
プログラムとWebサーバーと連動することで
ンの台数 （２台まで）やWindowsやMacといっ
動作するソフトです。デスクトップアプリ版が
たプラットホームの制約から解放されるのは、 BiNDクラウドの大きなメリットと言えます。
クラウド版はブラウザで 「BiNDクラウド」サイ
また、デスクトップアプリ版からWebアプリへ
ト （http://bindcloud.jp/） へアクセスしてログ
データを移行するのは、エクスポート／インポー
インして利用します。
トの機能が用意されているので、それを使えば
この２つのBiNDの機能やユーザーインターフェ
問題ありません。
イスは同一になっています （Attention参照） 。な ので、どちらかのユーザーであればもう一方を、 トレーニングなどをすることなく使うことがで きるはずです。本書で解説している内容は、特 別に区別している場合を除いて、両方のBiND
２つのBiNDの機能などに大きな違いがないの ATTENTION は、2015 年 11 月末時点の状態です。バージョ ンアップ時期などによっては、それぞれの機能の有無に 差が出ることもあります。詳細は、公式サイトの 「BiND クラウドとパッケージ版の違い」 （http://bindcloud. jp/package.html） などを確認してください。
デスクトップアプリとWebアプリの仕組みと違い デスクトップアプリ
Webアプリ PC/Mac
PC/Mac インストールした アプリを起動
ブラウザでログイン
インターネッ ト接続したマシンのブラウ ザ上で動作
マシンの中で独立して動作する
デスクトップアプリ版BiNDの特徴
Webアプリ版BiNDの特徴
・ 保存するデータ容量はWindows ／ Macのマシンの ストレージに依存する。 ・ インストールできるのは２台まで。 ・ インターネットに接続していないオフラインでも 起動可能。 ・ 利用できるサーバーサービスを自由に選択できる。
・ 保存できる容量は、コースによって上限あり。 ・ インストールが不要で、インターネットに接続した マシンであれば、ブラウザ上で利用可能。 ・ サーバーの設定不要。 ・ １契約でさまざまなサービスが利用可能。 （月額税抜 ・ WebLiFE*サーバープレミアムコース 2980円） と同等のオプションが利用可能。
デスクトップアプリとWebアプリでBiNDは機能や使い勝手の差はほぼない
試用版として利用可能な BiNDクラウドのエントリーコース BiNDクラウドをまだ利用していない人にオ ススメなのが、エントリーコースです。独自 ドメインなどに対応するプロコースが月額 税抜2980円なのに対して、エントリーコー スは１年間、無料で利用できます （２年目以 降は月額税抜480円） 。 デスクトップアプリ版BiNDのユーザーで、 クラウドアプリ版を使ってみたいという人 は、デジタルステージIDを使えば登録手続 きもなく利用できるので試してみるといい でしょう。
BiNDの基礎知識
BiND8 動作環境 編集機能 基本的なパーツ
エディタモード／スマートモード 画像パーツ、 リンクパーツ、テーブル パーツ、カスタムタグ、スライドショー （SHiFT） など
○
○
○
○
○
○
○
○
BiNDカート
△ （一部制限のあるフリーコースのみ）
○
Smooth Contact
△ （一部制限のあるフリーコースのみ）
○
エクスポート／インポート機能
○
○
ソーシャル系 ソーシャルボタン、Instagram、Twitter、 パーツ Facebook Page Pluginなど ウェブサービス系 ニュース、ブログ、 ドキュメント、Google パーツ フォーム、地図、サイト内検索、翻訳
BiNDク ラ ウ ド のWebペ ー ジ （http://bindcloud. jp/） へアクセスして登録すれば、１年間は無料でエ ントリーコースを利用可能です。
ショッピング カート コンタクト フォーム データのバック アップ／移行
BiNDクラウド
１ライセンスにつきWindowsか、 インターネット環境のある Macいずれかの２台まで Windows、Mac問わず利用可能
17
Lesson 1
PCやMacにインストールして利用するのに対し、
1
サーバー
Lesson 1
Webとローカル、異なる動作環境に対応するBiND
16
Lesson
05 BiND
BiNDで実際にWebサイトを作る
Lesson
Web作成の一連の手順を覚えましょう。
BiNDの基礎知識
ここでは、BiNDによるWeb制作に実際に取り
ページ制作の作業は、最初にテンプレートを選
かかります。必要なのは、Webサイトのテキス
びます。まったくの空白のページから始めるこ
トや写真といった素材ですが、まずは手近にあ
ともできますが、BiNDにあらかじめ用意され
る材料を使って作り始めて、手順を覚えていく
たテンプレートから作り出すほうがずっと素早
といいでしょう。なぜなら、BiNDは、あとから
くページを完成させることができます。今回は、
素材などを入れ替える作業も簡単に行えるから
左下のテンプレートを選んでから、右下のサイ
です。
トを作るまでの流れをたどります。
01 サイトの基になるテンプレートを選択＜サイトシアター ❷ ［絞り込み表示：］ でテンプレートの カテゴリーを選択
❶ ［テンプレートを選ぶ］ をクリック
❸ テンプレートを選んでクリック BiNDを起動すると、サイトシ アターの画面が最初に表示され ます。その左側にある項目の ［テ ンプレートを選ぶ］ から作業は スタートします。
テンプレートからWebサイトを作る 完成
❹ ［プレビュー］ をクリックして テンプレートを確認する バリエーションが表示されたら、 ［プレビュー］ をクリックして確 認します。使用するテンプレー トを決めたら ［このテンプレー トを使用］ をクリックします。
❺ ［このテンプレートを 使用］ をクリック
編集モードはあとか ら変更可能です。 「エ ディタ （標 準 ） 」と 「ス マート （簡易） 」 の詳細について は、P.56を参照。
POINT
❼ テンプレートを基にしたサイトが出来上がる
❻ ［編集モードの選択］ 画面で ［エディタ （標準） ］ をクリック
テンプレートから作り変えていく箇所
・ タイトルロゴを追加する ・ トップページのメインビジュアルに動画を 配置する ・ 記事のコンテンツを作成する ・ サイトの色味などデザイン要素を変更する
20
このサイトの制作で、レイアウトが固定で 簡単にコンテンツを編集できる 「スマート （簡易） 」 か、よりカスタマイズの自由度が 高い 「エディタ （標準） 」のどちらのモード で作業するかを選択します。ここでは、 「エ ディタ （標準） 」 モードで進めます。
サイト作成が完了。このデータを基にしてカス タマイズし、自分のオリジナルサイトを作って いきます。
21
Lesson 1
Lesson 1
テンプレート
1
05 BiND
BiNDで実際にWebサイトを作る
Lesson
Web作成の一連の手順を覚えましょう。
BiNDの基礎知識
ここでは、BiNDによるWeb制作に実際に取り
ページ制作の作業は、最初にテンプレートを選
かかります。必要なのは、Webサイトのテキス
びます。まったくの空白のページから始めるこ
トや写真といった素材ですが、まずは手近にあ
ともできますが、BiNDにあらかじめ用意され
る材料を使って作り始めて、手順を覚えていく
たテンプレートから作り出すほうがずっと素早
といいでしょう。なぜなら、BiNDは、あとから
くページを完成させることができます。今回は、
素材などを入れ替える作業も簡単に行えるから
左下のテンプレートを選んでから、右下のサイ
です。
トを作るまでの流れをたどります。
01 サイトの基になるテンプレートを選択＜サイトシアター ❷ ［絞り込み表示：］ でテンプレートの カテゴリーを選択
❶ ［テンプレートを選ぶ］ をクリック
❸ テンプレートを選んでクリック BiNDを起動すると、サイトシ アターの画面が最初に表示され ます。その左側にある項目の ［テ ンプレートを選ぶ］ から作業は スタートします。
テンプレートからWebサイトを作る 完成
❹ ［プレビュー］ をクリックして テンプレートを確認する バリエーションが表示されたら、 ［プレビュー］ をクリックして確 認します。使用するテンプレー トを決めたら ［このテンプレー トを使用］ をクリックします。
❺ ［このテンプレートを 使用］ をクリック
編集モードはあとか ら変更可能です。 「エ ディタ （標 準 ） 」と 「ス マート （簡易） 」 の詳細について は、P.56を参照。
POINT
❼ テンプレートを基にしたサイトが出来上がる
❻ ［編集モードの選択］ 画面で ［エディタ （標準） ］ をクリック
テンプレートから作り変えていく箇所
・ タイトルロゴを追加する ・ トップページのメインビジュアルに動画を 配置する ・ 記事のコンテンツを作成する ・ サイトの色味などデザイン要素を変更する
20
このサイトの制作で、レイアウトが固定で 簡単にコンテンツを編集できる 「スマート （簡易） 」 か、よりカスタマイズの自由度が 高い 「エディタ （標準） 」のどちらのモード で作業するかを選択します。ここでは、 「エ ディタ （標準） 」 モードで進めます。
サイト作成が完了。このデータを基にしてカス タマイズし、自分のオリジナルサイトを作って いきます。
21
Lesson 1
Lesson 1
テンプレート
1
06 BiND
BiNDのユーザーインターフェース BiND8の操作を解説するうえで頻出するボタンなどの名称を示し、説明してい
Lesson
きます。
1
BiNDの基礎知識
サイトシアター ❶ ［サイトを検索］ 欄
❶
作成したサイトを検索できる
❷ ［マイサイトを編集］ ボタン
保存済みのサイトを ［サイト エディタ］ で開く場合に、ここ をクリックして選択し、 ［選択 する］ ボタンを押す
❷
❸ ［テンプレートを選ぶ］ ボタン
❺
❼
❻
❶
❷ ❸
❸ ❹
サイトテンプレートの一覧を 表示するボタン
テンプレートを使わず、白紙 の状態からサイトを作成でき るボタン
❺ ［サイトをインポート］ ボタン
サイトをインポートして新規 サイトを作成できるボタン
❽
Lesson 1
Lesson 1
❹ ［ブランクサイトから 作成］ ボタン
❾
❻ヘルプアイコン
ここをクリックするとWebブ ラウザが開き、オンラインマ ニュアルのページが表示され る
❹ ❺
❼ ［選択する］ ボタン
編集するサイトの選択を決定 するボタン
❽ ［マイサイト一覧］
❶ ［一覧に戻る］ ボタン
自分で作成したサイトのトッ プページがサムネールで一覧 表示される
［マイサイト一覧］ に表示を戻す
❷歯車アイコン
❾ ［絞り込み表示］
テンプレートを絞り込み表示 できる
❿ ［テンプレート一覧］
レスポンシブ、PC専用サイト、 スマホ専用サイトと、用途に 応じたテンプレートが用意さ れている
34
❻
❿
❼
❹複製アイコン
サイトのデータの複製を作る。作られた複製サイトは ［マイ サイト一覧］ に登録される
サイトをエクスポートしたり、サイトフォルダを開くため のアイコン
❺ゴミ箱アイコン
❸バックアップアイコン
❻ ［アクセス数］
サイトのデータのバックアップを作成する。バックアップ したデータは、アイコンをクリックすると表示されるメ ニューから呼び出せる
サイトのデータを削除する Googleアナリティクスの解析を設定したサイトのアクセス数 を表示する。Googleアナリティクスのビュー IDの設定が必要
❼ ［このサイトを編集する］ ボタン
サイトデータを ［サイトエディタ］ で開く
35
06 BiND
BiNDのユーザーインターフェース BiND8の操作を解説するうえで頻出するボタンなどの名称を示し、説明してい
Lesson
きます。
1
BiNDの基礎知識
サイトシアター ❶ ［サイトを検索］ 欄
❶
作成したサイトを検索できる
❷ ［マイサイトを編集］ ボタン
保存済みのサイトを ［サイト エディタ］ で開く場合に、ここ をクリックして選択し、 ［選択 する］ ボタンを押す
❷
❸ ［テンプレートを選ぶ］ ボタン
❺
❼
❻
❶
❷ ❸
❸ ❹
サイトテンプレートの一覧を 表示するボタン
テンプレートを使わず、白紙 の状態からサイトを作成でき るボタン
❺ ［サイトをインポート］ ボタン
サイトをインポートして新規 サイトを作成できるボタン
❽
Lesson 1
Lesson 1
❹ ［ブランクサイトから 作成］ ボタン
❾
❻ヘルプアイコン
ここをクリックするとWebブ ラウザが開き、オンラインマ ニュアルのページが表示され る
❹ ❺
❼ ［選択する］ ボタン
編集するサイトの選択を決定 するボタン
❽ ［マイサイト一覧］
❶ ［一覧に戻る］ ボタン
自分で作成したサイトのトッ プページがサムネールで一覧 表示される
［マイサイト一覧］ に表示を戻す
❷歯車アイコン
❾ ［絞り込み表示］
テンプレートを絞り込み表示 できる
❿ ［テンプレート一覧］
レスポンシブ、PC専用サイト、 スマホ専用サイトと、用途に 応じたテンプレートが用意さ れている
34
❻
❿
❼
❹複製アイコン
サイトのデータの複製を作る。作られた複製サイトは ［マイ サイト一覧］ に登録される
サイトをエクスポートしたり、サイトフォルダを開くため のアイコン
❺ゴミ箱アイコン
❸バックアップアイコン
❻ ［アクセス数］
サイトのデータのバックアップを作成する。バックアップ したデータは、アイコンをクリックすると表示されるメ ニューから呼び出せる
サイトのデータを削除する Googleアナリティクスの解析を設定したサイトのアクセス数 を表示する。Googleアナリティクスのビュー IDの設定が必要
❼ ［このサイトを編集する］ ボタン
サイトデータを ［サイトエディタ］ で開く
35
11
ブロック エディタ
Webページに動画を組み込む
Lesson
スマートブロックなら動画を貼り付けるのも簡単です。
BiNDのブロックエディタには、テキストや写
ここでは、YouTubeで公開されている動画を
真だけでなく、動画などの素材を配置するテン
SYNCパーツを含んだブロックを使って、簡単
プレートも用意されています。
にページへ配置する方法を説明します。
2
テンプレートを使ってWebページを作成する
POINT
YouTubeの動画をページに組み込む
SYNCは初回起動時のみ、利用規約の 確認と同意が必要です （P.30参照） 。
❽ ［前へ］ を４回クリックして ［動画URLの入力］ 画面を表示
❶ URLをコピーする
SYNCの ［設定の確認］ 画面が開いたら、画面右下の ［前へ］ を４回クリックして ［動画URLの入力］ 画面へ移動します。
❾ URLをペースト ❿ ［次へ］ をクリック
❷ ［スマートモード］ をクリック
Lesson 2
Lesson 2
ペ ー ジ に 掲 載 す るYouTube動 画 の ページを開いて、URLをコピーします。
［動画URLの入力］画面になったら、 ［動画 ページURL］ に❶のURLをペースト。 ［次へ］ をクリックして動画を確認したら、さらに ［次へ］ をクリックします。
❸ ［ソーシャル］ をクリック ❹ ［YouTube］ を選択
⓫ プレイヤーのデザインを選択 ⓬ ［次へ］ をクリック
P.60 の❶～❷と同様の手順でブロックエ ディタを起動。 ［ブロックテンプレート］で ［スマートモード］ → ［ソーシャル］ をクリッ クし、 ［YouTube］ を選択して ［適用］ をクリッ クします。
⓭ 動画を確認
❺ ［適用］ をクリック ❻ ［YouTubeパーツ］ をクリック ❼ ［Syncを起動する］ をクリック ［YouTubeパーツ］をクリックし、 ［Syncを 起動する］ をクリックします。
66
ページに埋め込むプレイヤーのデザイ ンを選択して ［次へ］をクリック。オプ ションの設定を行ってから、 ［設定の確 認］ 画面で ［適用］ をクリック。最後にブ ロックエディタで ［適用］ をクリックし ます。
サイトエディタ画面右上の ［プレビュー］ をクリック して、設定した動画がページに組み込まれたことを 確認します。
67
11
ブロック エディタ
Webページに動画を組み込む
Lesson
スマートブロックなら動画を貼り付けるのも簡単です。
BiNDのブロックエディタには、テキストや写
ここでは、YouTubeで公開されている動画を
真だけでなく、動画などの素材を配置するテン
SYNCパーツを含んだブロックを使って、簡単
プレートも用意されています。
にページへ配置する方法を説明します。
2
テンプレートを使ってWebページを作成する
POINT
YouTubeの動画をページに組み込む
SYNCは初回起動時のみ、利用規約の 確認と同意が必要です （P.30参照） 。
❽ ［前へ］ を４回クリックして ［動画URLの入力］ 画面を表示
❶ URLをコピーする
SYNCの ［設定の確認］ 画面が開いたら、画面右下の ［前へ］ を４回クリックして ［動画URLの入力］ 画面へ移動します。
❾ URLをペースト ❿ ［次へ］ をクリック
❷ ［スマートモード］ をクリック
Lesson 2
Lesson 2
ペ ー ジ に 掲 載 す るYouTube動 画 の ページを開いて、URLをコピーします。
［動画URLの入力］画面になったら、 ［動画 ページURL］ に❶のURLをペースト。 ［次へ］ をクリックして動画を確認したら、さらに ［次へ］ をクリックします。
❸ ［ソーシャル］ をクリック ❹ ［YouTube］ を選択
⓫ プレイヤーのデザインを選択 ⓬ ［次へ］ をクリック
P.60 の❶～❷と同様の手順でブロックエ ディタを起動。 ［ブロックテンプレート］で ［スマートモード］ → ［ソーシャル］ をクリッ クし、 ［YouTube］ を選択して ［適用］ をクリッ クします。
⓭ 動画を確認
❺ ［適用］ をクリック ❻ ［YouTubeパーツ］ をクリック ❼ ［Syncを起動する］ をクリック ［YouTubeパーツ］をクリックし、 ［Syncを 起動する］ をクリックします。
66
ページに埋め込むプレイヤーのデザイ ンを選択して ［次へ］をクリック。オプ ションの設定を行ってから、 ［設定の確 認］ 画面で ［適用］ をクリック。最後にブ ロックエディタで ［適用］ をクリックし ます。
サイトエディタ画面右上の ［プレビュー］ をクリック して、設定した動画がページに組み込まれたことを 確認します。
67
23
サイト エディタ
Dressのさまざまな使い方
Lesson
カラー変更など、さまざまなDressの使い方を紹介します。
テンプレートを基にしたサイト作りは、整った
が 「Dress」です。ドレスを着替えるようにデザ
ページを手軽に構築できる一方で、デザインを
インを刷新できるほか、独自に手を加えたCSS
変更したくなったときに融通が利かなくて困る
を独自のテンプレートとして保存することも可
ことがあります。そんな悩みを解決するヒント
能です。
スマホとPCに対応したページを作る
Dressの設定を変更する ❶ カラールールを選択
❶ Dressテンプレートから 使用するDressを選択
Lesson 4
❷ ホイールで色を選択 ❸ ［編集中のページでプレビュー］ に チェックを付ける
❺ ［背景 （下層レイヤー） ］ で ［背景色］ をクリック
ここではルールに ［近似値］ 、パターン に ［パステル］ をそれ ぞれ指定したため、 ❹ ホイールで選択中の ［ページ］ タブをクリック 色に近い色が割り出 され、さらにパステ ❻ ル調になっています。 ［設定する］ に チェックを付ける
❸ テンプレート名と 説明文を入力
❹ ［OK］ をクリック
❺ 新しいテンプレートが 作成された
テンプレートを詳細に編集したい 場合には、必ずオリジナルのDress を複製します。複製したDressは、新 しいテンプレートとして保存され ます。
❻ ［テンプレートを編集］ を クリックすると 再び編集できる ［テンプレートを編集］ をクリックし て、複製したテンプレートをベース に詳細を編集します。複製したテン プレートは、後から編集することも できます。
92
❼ 背景色を指定
Dressでページ内のデザインを詳 細に設定するには、パーツごとに 分類されたタブを使います。ここ では、 ［ページ］ タブを開いて背景 色を変更しました。実際のページ のプレビューを見ながら作業する といいでしょう。
❽ ［保存］ をクリック
❾ サイト全体のデザインが 変更された
93
Lesson 4
Dressを適用したいサイトをサイト エディタで開き、Dressアイコンを クリックして 「Dressテンプレート」 を表示します。使用したいDressを 選択し、詳細ウインドウの ［複製］ を クリックします。
カラールールで ［カスタム］を 選ぶと、好きな３色を個別に 設定できます。それ以外は、カ ラーホイールで選択した１色からルー ルに合った２色を自動で割り当てます。
POINT
Dressテンプレートは、３色 の基本カラーで構成されてい ます。このカラーを変更する には、まずカラールールと配 色パターンを決めておきます。
Dressを複製して独自の設定を保存する
❷ ［複製］ をクリック
4
23
サイト エディタ
Dressのさまざまな使い方
Lesson
カラー変更など、さまざまなDressの使い方を紹介します。
テンプレートを基にしたサイト作りは、整った
が 「Dress」です。ドレスを着替えるようにデザ
ページを手軽に構築できる一方で、デザインを
インを刷新できるほか、独自に手を加えたCSS
変更したくなったときに融通が利かなくて困る
を独自のテンプレートとして保存することも可
ことがあります。そんな悩みを解決するヒント
能です。
スマホとPCに対応したページを作る
Dressの設定を変更する ❶ カラールールを選択
❶ Dressテンプレートから 使用するDressを選択
Lesson 4
❷ ホイールで色を選択 ❸ ［編集中のページでプレビュー］ に チェックを付ける
❺ ［背景 （下層レイヤー） ］ で ［背景色］ をクリック
ここではルールに ［近似値］ 、パターン に ［パステル］ をそれ ぞれ指定したため、 ❹ ホイールで選択中の ［ページ］ タブをクリック 色に近い色が割り出 され、さらにパステ ❻ ル調になっています。 ［設定する］ に チェックを付ける
❸ テンプレート名と 説明文を入力
❹ ［OK］ をクリック
❺ 新しいテンプレートが 作成された
テンプレートを詳細に編集したい 場合には、必ずオリジナルのDress を複製します。複製したDressは、新 しいテンプレートとして保存され ます。
❻ ［テンプレートを編集］ を クリックすると 再び編集できる ［テンプレートを編集］ をクリックし て、複製したテンプレートをベース に詳細を編集します。複製したテン プレートは、後から編集することも できます。
92
❼ 背景色を指定
Dressでページ内のデザインを詳 細に設定するには、パーツごとに 分類されたタブを使います。ここ では、 ［ページ］ タブを開いて背景 色を変更しました。実際のページ のプレビューを見ながら作業する といいでしょう。
❽ ［保存］ をクリック
❾ サイト全体のデザインが 変更された
93
Lesson 4
Dressを適用したいサイトをサイト エディタで開き、Dressアイコンを クリックして 「Dressテンプレート」 を表示します。使用したいDressを 選択し、詳細ウインドウの ［複製］ を クリックします。
カラールールで ［カスタム］を 選ぶと、好きな３色を個別に 設定できます。それ以外は、カ ラーホイールで選択した１色からルー ルに合った２色を自動で割り当てます。
POINT
Dressテンプレートは、３色 の基本カラーで構成されてい ます。このカラーを変更する には、まずカラールールと配 色パターンを決めておきます。
Dressを複製して独自の設定を保存する
❷ ［複製］ をクリック
4
34 SiGN Pro
新規に画像を追加して編集する
Lesson
画像をレイヤー単位で配置、編集できるのがSiGN Proの特徴です。
実際に画像を作成しましょう。まずは画像レイ
できます。ほとんどの操作は、マウスだけで直
ヤーを追加し、使用したい写真を読み込んで配
感的に行えます。またSiGN Proには、シャドウ、
置します。配置した写真は画面のサイズやデザ
明るさ、カラー調整、モザイクなどといった 「エ
インに合わせて拡大・縮小したり、回転させたり
フェクト」 も豊富にそろっています。
SiGN Proで画像を作り込む
画像のサイズや配置を調整する ❶ 画像の枠のハンドルを 動かして画像のサイズを調整
サイズの変更は四角いハンドルを、 画像レイヤーを移動するときはタブ の部分をマウスでドラッグします。
❶ ［新規レイヤー］ の画像アイコンを クリック
新規画像の追加は、 ［新規レ イヤー］ の画像アイコンから 行います。
縦横比を固定 して拡大／縮 小したいとき は、 ［shift］キ ー を 押 した状態でハンドル をドラッグします。ま た、写真の拡大／縮小 はツールバーのスライ ダーでも操作できます。 写真の長辺をレイヤー 枠の縦または横に合わ せる場合は ［フィット］ を使用します。
POINT
❷ タブ部分をドラッグして レイヤーを移動する
画像レイヤーを追加する
❸ 右下のハンドルをドラッグして 画像を回転する
Lesson 6
Lesson 6
6
レイヤー枠の右下に突出している丸 いハンドルは、画像を任意の角度で 回転させることができます。 ❷ 追加された 画像レイヤーの 枠内をクリック
パソコンに保 存してある写 真や画像を SiGN Proに 追 加 す るには、画像を選択す るウィンドウで ［画像 を取り込み］をクリッ クして、BiNDに取り 込んでおく必要があ ります。
POINT
120
❹ ❸の画面右上の ［エフェクト］ を クリックし、 画像にエフェクトを追加する
画面上部のツールバーにある ［画像選択］ メニューからも画 像の読み込みが可能です。
❸ 使用する画像を選択 ❹ ［選択］ をクリック これで画像がレイヤーに読み 込まれます。
❺ ［完了］ をクリック
画面左側で追加するエフェクトを選択し、詳細を設定 します。設定後 ［OK］ をクリックし、編集画面が開いた ら左上の ［完了］ でSiGN Proの基本画面に戻ります。
画面右下の ［完了］ をクリックします。
121
34 SiGN Pro
新規に画像を追加して編集する
Lesson
画像をレイヤー単位で配置、編集できるのがSiGN Proの特徴です。
実際に画像を作成しましょう。まずは画像レイ
できます。ほとんどの操作は、マウスだけで直
ヤーを追加し、使用したい写真を読み込んで配
感的に行えます。またSiGN Proには、シャドウ、
置します。配置した写真は画面のサイズやデザ
明るさ、カラー調整、モザイクなどといった 「エ
インに合わせて拡大・縮小したり、回転させたり
フェクト」 も豊富にそろっています。
SiGN Proで画像を作り込む
画像のサイズや配置を調整する ❶ 画像の枠のハンドルを 動かして画像のサイズを調整
サイズの変更は四角いハンドルを、 画像レイヤーを移動するときはタブ の部分をマウスでドラッグします。
❶ ［新規レイヤー］ の画像アイコンを クリック
新規画像の追加は、 ［新規レ イヤー］ の画像アイコンから 行います。
縦横比を固定 して拡大／縮 小したいとき は、 ［shift］キ ー を 押 した状態でハンドル をドラッグします。ま た、写真の拡大／縮小 はツールバーのスライ ダーでも操作できます。 写真の長辺をレイヤー 枠の縦または横に合わ せる場合は ［フィット］ を使用します。
POINT
❷ タブ部分をドラッグして レイヤーを移動する
画像レイヤーを追加する
❸ 右下のハンドルをドラッグして 画像を回転する
Lesson 6
Lesson 6
6
レイヤー枠の右下に突出している丸 いハンドルは、画像を任意の角度で 回転させることができます。 ❷ 追加された 画像レイヤーの 枠内をクリック
パソコンに保 存してある写 真や画像を SiGN Proに 追 加 す るには、画像を選択す るウィンドウで ［画像 を取り込み］をクリッ クして、BiNDに取り 込んでおく必要があ ります。
POINT
120
❹ ❸の画面右上の ［エフェクト］ を クリックし、 画像にエフェクトを追加する
画面上部のツールバーにある ［画像選択］ メニューからも画 像の読み込みが可能です。
❸ 使用する画像を選択 ❹ ［選択］ をクリック これで画像がレイヤーに読み 込まれます。
❺ ［完了］ をクリック
画面左側で追加するエフェクトを選択し、詳細を設定 します。設定後 ［OK］ をクリックし、編集画面が開いた ら左上の ［完了］ でSiGN Proの基本画面に戻ります。
画面右下の ［完了］ をクリックします。
121
41
Smooth Contact
セキュリティ万全なSmooth Contact
でフォームを作成
Lesson
問い合わせフォームなどをWebページに設置します。
BiNDで は、フ ォー ム を 簡 単 に 作 成 で き る 「Smooth Contact」が利用できます。データの
7
BiNDの機能を拡張する
「アンケート」 「資料請求」 など９種類。またデザ
を選 POINT ［イチから作る］
インも28種類から選べます。
暗号化の手段として広く利用されているSSLに
さらには、専用の管理画面で問い合わせ状況
対応しているため、セキュリティ面でも安心で
を確認したり、件数などをグラフ化することも
す。用意されているフォームは、 「問い合わせ」
可能となっています。
ぶと、オリジナルの フォームを作成でき ます。項目やチェックボック ス、プルダウンメニューなど を自由に配置できます。
❹ フォームテンプレートを選ぶ
新規に問い合わせフォームを作成する フォームのテンプレートが表示されます。 利用したいフォームを選択しましょう。 ここでは ［簡易問い合わせフォーム］ を選 びました。
❶ ［フォーム］ をクリック
❺ タイトルや項目を入力
Lesson 7
❷ メールアドレスとパスワードを 入力してログイン
初回にログインする 場合は、 ［デジタルス テージIDで登録］を クリックし、IDやパスワード などを入力、利用規約に同意 します。
❻ ［詳細設定］ をクリック ❼ 必要に応じて項目を入力
POINT
❸ どちらかの ［新規フォームを登録］ をクリック
「項目を編集」 の画面が表示されるので、 タイトルや本文など、内容を入力します。 項目を追加することもできます。 ❾ ［公開前］ をクリック
詳細設定では、投稿をメールで知 らせる設定や、入力した人にメー ルを送るといった設定ができます。
「Smooth Contact」 の画面が開くので、 ［デ ジタルステージIDで登録］ をクリックし、 IDとパスワードを入力してログインしま す。２回目以降は、登録したメールアドレ スとパスワードでログインできます。 「フォーム一覧」 が開きます。作成済みの フォームがある場合は、ここに表示され ます。ここでは ［新規フォームを登録］ を クリックします。
140
❽ ［設定］ をクリック
「項目を編集」の画面で ［登録］をクリックする と、 「フォーム一覧」の画面に戻ります。作成し たフォームが確認できます。 「ステータス」 の欄 にある ［公開前］ の文字をクリックしましょう。
NEXT PAGE
141
Lesson 7
フォームを配置したいブロックで、 ブロックエディタを開きます。続け て 「パーツ一覧」 にある ［フォーム］ を クリックします。
41
Smooth Contact
セキュリティ万全なSmooth Contact
でフォームを作成
Lesson
問い合わせフォームなどをWebページに設置します。
BiNDで は、フ ォー ム を 簡 単 に 作 成 で き る 「Smooth Contact」が利用できます。データの
7
BiNDの機能を拡張する
「アンケート」 「資料請求」 など９種類。またデザ
を選 POINT ［イチから作る］
インも28種類から選べます。
暗号化の手段として広く利用されているSSLに
さらには、専用の管理画面で問い合わせ状況
対応しているため、セキュリティ面でも安心で
を確認したり、件数などをグラフ化することも
す。用意されているフォームは、 「問い合わせ」
可能となっています。
ぶと、オリジナルの フォームを作成でき ます。項目やチェックボック ス、プルダウンメニューなど を自由に配置できます。
❹ フォームテンプレートを選ぶ
新規に問い合わせフォームを作成する フォームのテンプレートが表示されます。 利用したいフォームを選択しましょう。 ここでは ［簡易問い合わせフォーム］ を選 びました。
❶ ［フォーム］ をクリック
❺ タイトルや項目を入力
Lesson 7
❷ メールアドレスとパスワードを 入力してログイン
初回にログインする 場合は、 ［デジタルス テージIDで登録］を クリックし、IDやパスワード などを入力、利用規約に同意 します。
❻ ［詳細設定］ をクリック ❼ 必要に応じて項目を入力
POINT
❸ どちらかの ［新規フォームを登録］ をクリック
「項目を編集」 の画面が表示されるので、 タイトルや本文など、内容を入力します。 項目を追加することもできます。 ❾ ［公開前］ をクリック
詳細設定では、投稿をメールで知 らせる設定や、入力した人にメー ルを送るといった設定ができます。
「Smooth Contact」 の画面が開くので、 ［デ ジタルステージIDで登録］ をクリックし、 IDとパスワードを入力してログインしま す。２回目以降は、登録したメールアドレ スとパスワードでログインできます。 「フォーム一覧」 が開きます。作成済みの フォームがある場合は、ここに表示され ます。ここでは ［新規フォームを登録］ を クリックします。
140
❽ ［設定］ をクリック
「項目を編集」の画面で ［登録］をクリックする と、 「フォーム一覧」の画面に戻ります。作成し たフォームが確認できます。 「ステータス」 の欄 にある ［公開前］ の文字をクリックしましょう。
NEXT PAGE
141
Lesson 7
フォームを配置したいブロックで、 ブロックエディタを開きます。続け て 「パーツ一覧」 にある ［フォーム］ を クリックします。
46
サイト エディタ
Webサイトへのアクセスを解析する
Lesson
無料のアクセス解析ツール、「Googleアナリティクス」を利用します。
Webサイトに訪れた人の動向を記録・解析する
「トラッキングID」 と呼ばれるコードの取得、そ
無料サービス 「Googleアナリティクス」を利用
してそのコードをBiNDサイトに埋め込むまで
して、作成したWebサイトへのアクセス解析を
の手順を説明します。なお本機能の利用には、
行います。
GoogleアカウントによるGoogleアナリティク
ここでは、Googleアナリティクスへの登録と
スへの登録が必要になります。
サイトを管理する 初めにトラッキングの 対象として ［ウェブサイ ト］を選択します。以降 はトラッキング対象に なるWebサイトの情報 などを入力します。
❺ ［ウェブサイト］ を クリック
❻ 任意の 「アカウント名」 を入力
Googleアナリティクスの登録、設定を行う
WebブラウザでGoogle アナリティクス （http:// www.goo gle.com/ intl/ja/anal ytics/）の ページを開きます。ログ インしていない場合は、 ［ログイン］をクリック し、Google ID （Gmailな ど） でログインします。
❷ ［ログイン］ をクリック
Google IDを使ってログインし ます。Google IDを持っていない 場合は、❶の画面で ［アカウント を作成］ をクリックして新規アカ ウントを作成します。
❹ ［お申し込み］ をクリック
❸ メールアドレスと パスワードを入力
開始までのステップが 表示されるので、内容 を確認して ［お申し込 み］ をクリックします。
158
❼ サイト名や URLなどを入力
❽ 必要に応じて 共有の設定を行う
Lesson 8
Lesson 8
❶ ブラウザで Googleアナリティクス にアクセスする
8
❾ ［トラッキングIDを取得］ をクリック
❿ ［日本］ を選択する 利用規約が表示された ら内容を確認して ［同意 す る ］を ク リ ッ ク し ま す。なお、規約文が日本 語以外の言語で表示さ れ た 場 合 は、左 上 の メ ニューから［日本］を選 択します。
⓫ 内容を確認して ［同意する］ をクリック
NEXT PAGE
159
46
サイト エディタ
Webサイトへのアクセスを解析する
Lesson
無料のアクセス解析ツール、「Googleアナリティクス」を利用します。
Webサイトに訪れた人の動向を記録・解析する
「トラッキングID」 と呼ばれるコードの取得、そ
無料サービス 「Googleアナリティクス」を利用
してそのコードをBiNDサイトに埋め込むまで
して、作成したWebサイトへのアクセス解析を
の手順を説明します。なお本機能の利用には、
行います。
GoogleアカウントによるGoogleアナリティク
ここでは、Googleアナリティクスへの登録と
スへの登録が必要になります。
サイトを管理する 初めにトラッキングの 対象として ［ウェブサイ ト］を選択します。以降 はトラッキング対象に なるWebサイトの情報 などを入力します。
❺ ［ウェブサイト］ を クリック
❻ 任意の 「アカウント名」 を入力
Googleアナリティクスの登録、設定を行う
WebブラウザでGoogle アナリティクス （http:// www.goo gle.com/ intl/ja/anal ytics/）の ページを開きます。ログ インしていない場合は、 ［ログイン］をクリック し、Google ID （Gmailな ど） でログインします。
❷ ［ログイン］ をクリック
Google IDを使ってログインし ます。Google IDを持っていない 場合は、❶の画面で ［アカウント を作成］ をクリックして新規アカ ウントを作成します。
❹ ［お申し込み］ をクリック
❸ メールアドレスと パスワードを入力
開始までのステップが 表示されるので、内容 を確認して ［お申し込 み］ をクリックします。
158
❼ サイト名や URLなどを入力
❽ 必要に応じて 共有の設定を行う
Lesson 8
Lesson 8
❶ ブラウザで Googleアナリティクス にアクセスする
8
❾ ［トラッキングIDを取得］ をクリック
❿ ［日本］ を選択する 利用規約が表示された ら内容を確認して ［同意 す る ］を ク リ ッ ク し ま す。なお、規約文が日本 語以外の言語で表示さ れ た 場 合 は、左 上 の メ ニューから［日本］を選 択します。
⓫ 内容を確認して ［同意する］ をクリック
NEXT PAGE
159