BiNDupの教科書 by digitalstage Ltd.

ビジネスに必携

サイト制作＆運用ノウハウの教科書

レスポンシブ Web対応

エディトル編デジタルステージ監修

BiNDupを正しく使いこなすためのバイブル

バインド・アップ公式ガイドブック

テンプレートから用途や目的にあわせてカスタマイズして作る方法や

集客に欠かせない基本的な S E O の設定など、サイト運用に必要なノウハウをすべて網羅。

最新機能の解説は専用の W e b ページでもフォローする、ずっと役に立つガイドブックです。

BiNDupと、そのデスクトップアプリお

02 BiND

BiNDのデスクトップ版とクラウド版の違いと各種コースを説明します。

どちらを選んでも同じアプリとサービスを利用可能なBiNDup 「BiNDup （バインド・アップ）」は、従来からデ

Lesson 1

ジタルステージが開発・提供してきたデスク

この２つのBiNDは、一部の機能やユーザーインターフェイスを除いて同一になっています。

トップアプリ「BiND for WebLiFE*」シリー

本書で解説している内容は、特別に区別してい

ズと、そのWebアプリ版である「BiNDクラウ

る場合を除いて、両方のBiNDに対応しています。

ド」を統合したサービスです。Webアプリとは、

BiNDupのパッケージを購入した場合、デスク

JavaScriptなどのプログラミング言語による

トップアプリが提供されるだけでなく、Webア

プログラムとWebサーバーと連動し、Webブラ

プリ版やサーバー機能などを無料で1年間利用

ウザ上で動作するソフトです。デスクトップア

できます。逆に、BiNDupの基本コースを年契

プリ版がPCやMacにインストールして利用す

約すると、デスクトップアプリが提供され、期

るのに対して、Webアプリ版はブラウザでサイ

間の制限なく利用できます。このため、BiNDを

ト（https://bindup.jp/）へアクセスし、ログイ

１年間利用する上では、パッケージ購入と年契

ンして利用します。

約で違いがないようになっています。

デスクトップアプリとWebアプリの仕組みと特徴デスクトップアプリ

Webアプリ PC/Mac

PC/Mac インストールしたアプリを起動

ブラウザでログイン

サーバー

マシンの中で独立して動作する

・保存するデータ容量はWindows ／ Macのマシンのストレージに依存する。・インストールできるのは２台まで。・インターネットに接続していないオフラインでも起動可能。・サーバーサービスとの契約が別途必要。

インターネット接続したマシンのブラウザ上で動作

・保存できる容量は、コースによって上限あり。・インストールが不要で、インターネットに接続したマシンであれば、ブラウザ上で利用可能。・ BiNDのサーバー機能および他のサーバーサービスを利用可能。

よびWebアプリについて

Lesson

BiNDの基礎知識

BiNDupの各コースとその内容（※2018年9月現在）基本コース（旧プロコース）エントリーコース

価格

BiNDupアプリ

年契約 ¥29,760+税/年額年契約 ¥98,000+税/年額（※加入月は無料）または（※加入月は無料）または月契約 ¥2,980+税/月額月契約 ¥9,800+税/月額

デスクトップアプリ※1

ー

○（2ライセンス）

ウェブアプリ

○（1 ユーザー）

※2 △（1ユーザー）

○（1ユーザー）

○（20ユーザー )

機能アップデート

○

△※2

○

テンプレート

183サイト

276サイト

公開可能なサイト数

無制限

Lesson 1

カート機能

※4

ビジネスコース

¥29,760+税

1サイト

フォーム機能

クラウド登録

月契約 ¥480+税/月額（※初年度無料）

公開サーバー

サーバー機能

パッケージ購入（ダウンロード）

公開サーバー、常時SSL等公開サーバー、常時SSL等公開サーバー、常時SSL等

○

△※2

○

独自ドメイン設定

5ドメイン（無料1ドメイン）

40ドメイン（無料1ドメイン）

公開容量

1GB

300GB

1TB

日本語Webフォント

15書体

541書体

Smooth Contact

○（フリーコース）

△※3（プロコース）

○（プロコース）

集計データ閲覧数

直近100 件まで

直近 5000 件まで

BiNDカート

○

△※2

○

取扱商品数

5商品

1,000商品まで

無制限

※1 従来の「BiND for WebLiFE*」シリーズ同様、PCやMacにインストールして利用できるアプリケーションです。 ※2 利用は1年間のみ、2年目以降は必要に応じてパッケージの購入またはクラウド登録が選べます。 ※3 利用は１年間のみ、2年目以降は、更新またはフリーコースを利用できます。 ※4 ショッピングカートの開設可能な数は各コースとも、1契約につき1ショップまでです。また、他社サーバーにサイトを公開した場合でも利用可能です。

08 BiND

BiNDのユーザーインターフェイス BiNDを操作する際に覚えておきたい各部の名称や役割などを説明します。

サイトシアター ❶ ［マイサイト］ボタン

既存のサイトを編集する場合は、ここをクリック。表示されたサイト一覧から選ぶ

❼

❻

❷ ［テンプレート］ボタン

サイトテンプレートの一覧を表示する

❸ ［Webアプリで編集］ボタン

ブラウザが立ち上がり、Webアプリ版のBiNDで編集を行うことができる

Lesson 1

❹ ［BiNDの使い方］ボタン

BiNDの使い方ムービーやオンラインマニュアルなどへのリンクが表示される

❺ ［作ったサイトを共有］ボタン

「NiCE SiTE Gallery」のWebページが開き、自分のサイトを応募することができる

❻フォルダ追加アイコン

サイトを収納するフォルダを追加できる

❼フォルダ一覧の開閉アイコン

フォルダ一覧の表示を開いたり閉じたりできる

❽フォルダ一覧

サイトを分類したフォルダ。ドラッグで順番を変更できる

❾ ［編集］ボタン

各サイトの管理画面を開く（P.39）

❿マイサイト一覧

自分で作成したサイトのサムネールが一覧表示される

❶

❿

❷ ❸ ❹ ❺

❽

❾

Lesson

BiNDの基礎知識

⓫BiND Boxステータスアイコン ⓬

⓭

⓮

⓯

⓰

BiND Boxとの同期の有効／無効、完了／未完了などが確認できる。またクリックすると、同期の設定を変更できる

⓬ ［マイサイトを検索］欄 ⓫

作成したサイトのタイトルをキーワード検索する

⓭ ［サイトをインポート］ボタン

別環境で作成した、既存のサイトデータを取り込む画面が開く

サイトを新しく作成する方法を選択する画面が開く

⓯お知らせアイコン

デジタルステージからのお知らせを確認できる

⓰ヘルプアイコン

クリックするとWebブラウザが開き、オンラインマニュアルが表示される

Lesson 1

⓮ ［サイトを新規作成］ボタン

12 ブロックエディタ

メニューをブロック共有で一括変更すグローバルメニューをすべてのページに一括共有します。

Webページに配置するコンテンツを項目ごとに

で表示させたい項目もあるでしょう。そんなと

ブロック単位で追加、編集できるのがBiNDの

きに活用したいのが、目的のブロックを各ペー

特徴です。そうして作成したブロックの中には、

ジに組み込める「ブロック共有」です。ここでは、

Webサイト内の移動に便利なグローバルメニュー

グローバルメニューをすべてのページに一括で

や重要なお知らせなど、すべてのページに共通

共有する手順を紹介します。

グローバルメニューを作成してブロックを共有する ❷ ブロックの種類を選択

Lesson 2

❶ ［ナビゲーション］をクリック

❹ パーツをクリック ❼ タブを切り替えて各項目を設定

メニューの項目を減らしたいときは、不要な項目のタブを選択した状態で、タブ下のゴミ箱アイコンをクリックします。

POINT

メニュー項目の並び順は、タブをドラッグ＆ドロップすることで変更できます。

POINT

P.64の❶～❷と同じ手順でサイトエディタの［ヘッダー］エリアにブロックを追加して、ブロックエディタを起動します。［ブロックテンプレート］画面左側にある［ナビゲーション］からブロックの種類を選択して［適用］をクリックします。 ❸ ［適用］をクリック ❺ テキストを入力 ❻ リンク先を設定［メニューアイテム］のパーツを選択し、画面右側の［リンク］でメニューに表示するテキストやリンク先のページを設定します。必要に応じて、画面左下の複製アイコンをクリックして、メニュー項目を追加します。タブを切り替えて❹～❻の手順を繰り返します。 ❽ ［ブロックを共有にする］を選択

グローバルメニューの設定完了後、画面右上部の［なし］をクリックし、表示されたメニューから［ブロックを共有にする］を選択します。

る

Lesson

テンプレートを使ってWebページを作成する

❾ 共有ブロック名を入力 ❿ ［OK］をクリック共有ブロックに名前を付けて、［OK］をクリックします。共有ブロックは複数作成できるので、それぞれ名前を付けて管理します。［サイトの全ページに追加］が選択されていることを確認し、［はい］をクリックします。［いいえ］をクリックすると、現在のページにのみ追加されます。 ⓫ ［サイトの全ページに追加］を選択

Lesson 2

⓬ ［はい］をクリック

ブロックエディタの［なし］をクリックして共有ブロックを選択し、［適用］をクリックします。グローバルメニューを組み込むすべてのページで同様の作業をします。

⓮ ［閉じる］をクリック

⓭ ［適用］をクリックサイトエディタ画面右上の［プレビュー］をクリックし、共通のグローバルメニューがそれぞれのページに組み込まれたことを確認します。

ト 24 サイエディタ

レスポンシブWebサイトをカスタマイズレスポンシブ対応のテンプレートを使ってサイトを作成します。

BiNDの「レスポンシブ（テンプレート）」は、PC

サイトとスマホサイトの表示を切り替えます。

にもスマホにも対応したWebサイトが作れます。

そのため、スマホサイトのコンテンツの表示幅

まずはテンプレートを使って、作り方や構造を

は固定値ではなく「％」で指定します。レスポン

理解しましょう。PC版とスマホ版で、それぞれ

シブの特性を考慮して、PCサイトは固定値で

個別に設定できる部分もあり、柔軟なデザイン

はなくリキッド（可変幅）が推奨されています。

が可能です。なお、ブラウザの横幅を基準にPC

レスポンシブWebで重要になる横幅を設定する ❶ ［テンプレートを選択］をクリック

❷ ［レスポンシブ］をクリック

Lesson 4

❸ テンプレートを選択テンプレート選択画面でレスポンシブサイトのテンプレートを選びます。「絞り込み表示」で［レスポンシブ］をクリックすると、レスポンシブ対応のテンプレートだけが表示されます。

❹ レスポンシブサイトをサイトエディタで開き、歯車アイコンをクリック

❺ ［ページ設定］タブをクリック

❼ PCアイコンのタブをクリック

スマホ

❽ スマホアイコンのタブをクリック

❻ レスポンシブサイトの横幅は、「ページ設定」の［ページレイアウト］「ページレイアウト」タブで設定します。PCサイタブをクリックトとスマホサイトそれぞれ個別に設定できます。

❾ 表示エリアに対する横幅の比率を指定する

する

Lesson

スマホとPCに対応したページを作る

PC／スマホサイトの背景画像を個々に設定するここではPCサイトとスマホサイトに異なる背景画像を設定します。まずは、PCサイトのメインコンテンツに背景動画を設定します。 ❷ PCアイコンのタブをクリック ❸ 「メイン」にチェックを付ける

❶ ［ページデザイン］タブをクリック

❺ 動画のURLを入力 ❻ ［OK］をクリック

❹ メニューから［動画URL を指定］をクリックク

❽ 「メイン」にチェックを付ける

動画は、YouTubeやWebサーバー上のファイルのリンクを使って設定します。必要に応じて、動画が読み込まれるまでの間に表示する画像の設定も可能。

❾ ［画像ファイルを選択］をクリック次に、スマホタブでスマホサイトのメインコンテンツに背景画像を設定します。なお、スマホサイトでは、背景動画には対応していません。

❿ それぞれの背景が反映された

ブラウザの横幅が一定のサイズより小さくなると、スマホ用のレイアウトに切り替わります。パソコンの Webブラウザでスマホサイトをプレビューするには、ブラウザの横幅を狭めます。

Lesson 4

❼ ［スマホ］タブをクリック

30 BiND

スマートフォン用メニューをカスタマイズスマホメニューの配置や表示方法をカスタマイズします。

レスポンシブサイトのテンプレートでは、スマ

表示時の動作の変更が可能です。ほかにも、ス

ホ表示時のメニューは自動で生成されます。メ

マホのブラウザからPCサイトの表示に切り替

ニューの配置位置は、テンプレートの初期設定

えるボタンの設置など、「スマホメニューの設定」

によって異なりますが、後からボタンの位置や

を使ってカスタマイズする方法を紹介します。

メニューの配置や表示方向を変更する ❶ スマホボタンをクリック

Lesson 5

❷ ［スマホメニュー］をクリック

始めにレスポンシブ対応のサイトをサイトエディタで開き、［スマホ］ボタンで表示を切り替えます。続けて［スマホメニュー］をクリックします。 ❸ 配置スタイルとアニメーションを設定

❺ 固定されたメニューはスクロールしても同じ位置に表示される

スクロール

「スマホメニューの設定」画面が開いたら、「配置スタイル」と「アニメーション」それぞれのメニューから配置や動きを選択します。 ❹ ［OK］をクリック

112

配置スタイルで「右上に固定」を設定したメニューは、画面をスクロールしてもメニューボタンが常に画面右上に表示されます。

する

Lesson

こだわりのレイアウトに挑戦する

スマホでPC表示を有効にする ❶ スマホボタンをクリック ❷ ［スマホメニュー］をクリックサイトエディタでスマホ表示が選択されていることを確認し、［スマホメニュー］をクリックして「スマホメニューの設定」を呼び出します。

❻ ［PCサイトを表示する］をタップ

❸ ［スマホでPC表示を有効にする］をチェック

❹ 表示位置を指定する ❺ ［OK］をクリック PCのWebブラウザで、スマホサイトを擬似的にプレビューすることは可能ですが、表示が正しく切り替わらないことがあります。動作を試したいときは、サイトをサーバにアップロードして実際にスマホで表示してみましょう。

ATTENTION

❼ PCサイトの表示に切り替わった設定が済んだら、Webサイトをサーバーにアップロードして、実際にスマートフォンで確認しましょう。スマートフォンのブラウザでPCサイトが表示されました。

113

Lesson 5

「スマホメニューの設定」画面で、［スマホでPC表示を有効にする］にチェックを付け、表示位置を最上部または最下部のいずれかを選択します。

37 SiGN

SiGNの基本を理解する Web作成に最適な画像編集機能であるSiGNの基本的な使い方を説明します。

画像編集機能SiGNが新しくなり、インターフェ

効率的に作成できるツールとなっています。こ

イスが一新されただけでなく、グラデーションツー

こでは、まず基本的な操作方法をマスターしま

ルや複数のエフェクトを組み合わせたフィルター

しょう。

機能を搭載し、見栄えのいいWeｂ用の画像が、

SiGNを開く２つの方法 SiGNは、画像を編集するためのツールです。た

存すると、自動的にWebに最適化された状態に

とえば写真と文字を組み合わせたバナーなどを

なります。なお、このSiGNの編集画面を開くに

作成できます。またSiGNで画像を編集して保

は２通りの方法があります。

［画像を作成］から開く

Lesson 6

［画像を作成］をクリック

ブロックエディタの［パーツ一覧］にある［画像を作成］をクリックするとSiGNの編集画面が開きます。最初に表示されるのは、ロゴなどのテンプレートとなっています。

［画像］の［編集］から開く

［編集］をクリック

ブロックエディタで画像のサムネールをクリックして選択。続けて画面右側に表示される［画像］の［編集］を選択すると SiGNが開きます。

128

Lesson

SiGNで画像を作り込む

SiGNのレイヤー構造を知る SiGNは、画像、シェイプ、テキスト、スタンプ

配置するなど、レイヤーの重ね順はコントロー

といったパーツを重ねて１つのイメージを作成

ル可能です。SiGNでの画像編集をスムーズに

します。このパーツの層をレイヤーといいます。

進めるためには、まずはこのレイヤー構造を覚

例えば、必ず見せたいテキストは階層の上位に

えておきましょう。

複数のレイヤーが重なったイメージ SiGNの画面。４つのレイヤーが重なって１つのイメージとなっています。

Lesson 6

画像レイヤー

写真やイラストなどの画像データを読み込みます

シェイプレイヤー

四角形や円形などの図形を配置できます。塗りの背景として、あるいは写真を切り抜く際に使用します。

スタンプレイヤー

吹き出しやフレーム、矢印などを配置できます。

テキストレイヤー

文字を配置するレイヤーです。フォントの変更ができます。

129