ビジ ネスに 必 携
サイト制作＆ 運用ノウハウ の教 科書
レスポンシブ 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のマシンの ストレージに依存する。 ・ インストールできるのは２台まで。 ・ インターネットに接続していないオフラインでも 起動可能。 ・ サーバーサービスとの契約が別途必要。
12
インターネッ ト接続したマシンのブラウ ザ上で動作
・ 保存できる容量は、コースによって上限あり。 ・ インストールが不要で、インターネットに接続した マシンであれば、ブラウザ上で利用可能。 ・ BiNDのサーバー機能および他のサーバーサービス を利用可能。
よびWebアプリについて
Lesson
1
BiNDの基礎知識
BiNDupの各コースとその内容（※2018年9月現在） 基本コース （旧プロコース） エントリーコース
価格
BiNDupアプリ
年契約 ¥29,760+税/年額 年契約 ¥98,000+税/年額 （※加入月は無料） または （※加入月は無料） または 月契約 ¥2,980+税/月額 月契約 ¥9,800+税/月額
デスクトップアプリ※1
デスクトップアプリ※1
デスクトップアプリ※1
デスクトップアプリ※1
ー
○（2ライセンス）
○（2ライセンス）
○（2ライセンス）
ウェブアプリ
ウェブアプリ
ウェブアプリ
ウェブアプリ
○（1 ユーザー）
※2 △（1ユーザー）
○（1ユーザー）
○（20ユーザー )
機能アップデート
機能アップデート
機能アップデート
機能アップデート
○
△※2
○
○
テンプレート
テンプレート
テンプレート
テンプレート
183サイト
276サイト
276サイト
276サイト
公開可能なサイト数
公開可能なサイト数
公開可能なサイト数
公開可能なサイト数
無制限
無制限
無制限
Lesson 1
カート機能
※4
ビジネスコース
¥29,760+税
1サイト
フォーム機能
クラウド登録
月契約 ¥480+税/月額 （※初年度無料）
公開サーバー
サーバー機能
パッケージ購入 （ダウンロード）
公開サーバー、常時SSL等 公開サーバー、常時SSL等 公開サーバー、常時SSL等
○
△※2
○
○
独自ドメイン設定
独自ドメイン設定
独自ドメイン設定
独自ドメイン設定
-
5ドメイン （無料1ドメイン）
5ドメイン （無料1ドメイン）
40ドメイン （無料1ドメイン）
公開容量
公開容量
公開容量
公開容量
1GB
300GB
300GB
1TB
日本語Webフォント
日本語Webフォント
日本語Webフォント
日本語Webフォント
15書体
541書体
541書体
541書体
Smooth Contact
Smooth Contact
Smooth Contact
Smooth Contact
○（フリーコース）
△※3（プロコース）
○（プロコース）
○（プロコース）
集計データ閲覧数
集計データ閲覧数
集計データ閲覧数
集計データ閲覧数
直近100 件まで
直近 5000 件まで
直近 5000 件まで
直近 5000 件まで
BiNDカート
BiNDカート
BiNDカート
BiNDカート
○
△※2
○
○
取扱商品数
取扱商品数
取扱商品数
取扱商品数
5商品
1,000商品まで
1,000商品まで
無制限
※1 従来の 「BiND for WebLiFE*」 シリーズ同様、PCやMacにインストールして利用できるアプリケーションです。 ※2 利用は1年間のみ、2年目以降は必要に応じてパッケージの購入またはクラウド登録が選べます。 ※3 利用は１年間のみ、2年目以降は、更新またはフリーコースを利用できます。 ※4 ショッピングカートの開設可能な数は各コースとも、1契約につき1ショップまでです。また、他社サーバーにサイトを公開した場合でも利用可能です。
13
08 BiND
BiNDのユーザーインターフェイス BiNDを操作する際に覚えておきたい各部の名称や役割などを説明します。
サイトシアター ❶ ［マイサイト］ ボタン
既存のサイトを編集する場合は、 ここをクリック。表示されたサイ ト一覧から選ぶ
❼
❻
❷ ［テンプレート］ ボタン
サイトテンプレートの一覧を表 示する
❸ ［Webアプリで編集］ ボタン
ブラウザが立ち上がり、Webアプ リ版のBiNDで編集を行うことが できる
Lesson 1
❹ ［BiNDの使い方］ ボタン
BiNDの使い方ムービーやオンラ インマニュアルなどへのリンク が表示される
❺ ［作ったサイトを共有］ ボタン
「NiCE SiTE Gallery」 のWebペー ジが開き、自分のサイトを応募す ることができる
❻フォルダ追加アイコン
サイトを収納するフォルダを追 加できる
❼フォルダ一覧の 開閉アイコン
フォルダ一覧の表示を開いたり 閉じたりできる
❽フォルダ一覧
サイトを分類したフォルダ。ド ラッグで順番を変更できる
❾ ［編集］ ボタン
各サイトの管理画面を開く （P.39）
❿マイサイト一覧
自分で作成したサイトのサム ネールが一覧表示される
36
❶
❿
❷ ❸ ❹ ❺
❽
❾
Lesson
1
BiNDの基礎知識
⓫BiND Boxステータス アイコン ⓬
⓭
⓮
⓯
⓰
BiND Boxとの同期の有効／無効、 完了／未完了などが確認できる。 またクリックすると、同期の設定 を変更できる
⓬ ［マイサイトを検索］ 欄 ⓫
作成したサイトのタイトルを キーワード検索する
⓭ ［サイトをインポート］ ボタン
別環境で作成した、既存のサイト データを取り込む画面が開く
サイトを新しく作成する方法を 選択する画面が開く
⓯お知らせアイコン
デジタルステージからのお知ら せを確認できる
⓰ヘルプアイコン
クリックするとWebブラウザが 開き、オンラインマニュアルが表 示される
37
Lesson 1
⓮ ［サイトを新規作成］ ボタン
12 ブロック エディタ
メニューをブロック共有で一括変更す グローバルメニューをすべてのページに一括共有します。
Webページに配置するコンテンツを項目ごとに
で表示させたい項目もあるでしょう。そんなと
ブロック単位で追加、編集できるのがBiNDの
きに活用したいのが、目的のブロックを各ペー
特徴です。そうして作成したブロックの中には、
ジに組み込める 「ブロック共有」 です。ここでは、
Webサイト内の移動に便利なグローバルメニュー
グローバルメニューをすべてのページに一括で
や重要なお知らせなど、すべてのページに共通
共有する手順を紹介します。
グローバルメニューを作成してブロックを共有する ❷ ブロックの種類を選択
Lesson 2
❶ ［ナビゲーション］ を クリック
❹ パーツをクリック ❼ タブを切り替えて 各項目を設定
メニューの項 目を減らした いときは、不 要な項目のタブを選 択した状態で、タブ下 のゴミ箱アイコンをク リックします。
POINT
メニュー項目 の並び順は、 タブをドラッ グ＆ドロップするこ とで変更できます。
POINT
68
P.64の❶～❷と同じ手順でサイトエディ タの ［ヘッダー］エリアにブロックを追加 して、ブロックエディタを起動します。 ［ブ ロックテンプレート］ 画面左側にある ［ナビ ゲーション］ からブロックの種類を選択し て ［適用］ をクリックします。 ❸ ［適用］ をクリック ❺ テキストを入力 ❻ リンク先を設定 ［メニューアイテム］ のパーツを選択し、画 面右側の ［リンク］ でメニューに表示するテ キストやリンク先のページを設定します。 必要に応じて、画面左下の複製アイコンを クリックして、メニュー項目を追加します。 タブを切り替えて❹～❻の手順を繰り返し ます。 ❽ ［ブロックを共有にする］ を選択
グローバルメニューの設定完了後、 画面右上部の ［なし］ をクリックし、 表示されたメニューから ［ブロック を共有にする］ を選択します。
る
Lesson
2
テンプレートを使ってWebページを作成する
❾ 共有ブロック名を入力 ❿ ［OK］ をクリック 共有ブロックに名前を付けて、 ［OK］をク リックします。共有ブロックは複数作成でき るので、それぞれ名前を付けて管理します。 ［サイトの全ページに追加］ が選択されている ことを確認し、 ［はい］ をクリックします。 ［い いえ］ をクリックすると、現在のページにのみ 追加されます。 ⓫ ［サイトの全ページに追加］ を選択
Lesson 2
⓬ ［はい］ をクリック
ブロックエディタの ［なし］ をクリックして 共有ブロックを選択し、 ［適用］ をクリックし ます。グローバルメニューを組み込むすべて のページで同様の作業をします。
⓮ ［閉じる］ をクリック
⓭ ［適用］ をクリック サイトエディタ画面右上の ［プレビュー］をク リックし、共通のグローバルメニューがそれぞ れのページに組み込まれたことを確認します。
69
ト 24 サイ エディタ
レスポンシブWebサイトをカスタマイズ レスポンシブ対応のテンプレートを使ってサイトを作成します。
BiNDの 「レスポンシブ （テンプレート） 」 は、PC
サイトとスマホサイトの表示を切り替えます。
にもスマホにも対応したWebサイトが作れます。
そのため、スマホサイトのコンテンツの表示幅
まずはテンプレートを使って、作り方や構造を
は固定値ではなく 「％」 で指定します。レスポン
理解しましょう。PC版とスマホ版で、それぞれ
シブの特性を考慮して、PCサイトは固定値で
個別に設定できる部分もあり、柔軟なデザイン
はなくリキッド （可変幅） が推奨されています。
が可能です。なお、ブラウザの横幅を基準にPC
レスポンシブWebで重要になる横幅を設定する ❶ ［テンプレートを選択］ を クリック
❷ ［レスポンシブ］ をクリック
Lesson 4
❸ テンプレートを選択 テンプレート選択画 面でレスポンシブサ イトのテンプレート を選びます。 「絞り込 み表示」で ［レスポン シブ］ をクリックする と、レスポンシブ対応 のテンプレートだけ が表示されます。
❹ レスポンシブサイトを サイトエディタで開き、 歯車アイコンをクリック
PC
❺ ［ページ設定］ タブをクリック
❼ PCアイコンのタブをクリック
スマホ
❽ スマホアイコンの タブをクリック
❻ レスポンシブサイトの横幅は、 「ページ設定」の ［ページレイアウト］ 「ページレイアウト」 タブで設定します。PCサイ タブをクリック トとスマホサイトそれぞれ個別に設定できます。
94
❾ 表示エリアに対する 横幅の比率を指定する
する
Lesson
4
スマホとPCに対応したページを作る
PC／スマホサイトの背景画像を個々に設定する ここではPCサイトとスマホサイトに異なる 背景画像を設定します。まずは、PCサイトの メインコンテンツに背景動画を設定します。 ❷ PCアイコンの タブをクリック ❸ 「メイン」 にチェック を付ける
❶ ［ページデザイン］ タブをクリック
❺ 動画のURLを入力 ❻ ［OK］ をクリック
❹ メニューから ［動画URL を指定］ をクリックク
❽ 「メイン」 にチェックを付ける
動 画 は、YouTubeやWebサ ー バー上のファイルのリンクを 使って設定します。必要に応じ て、動画が読み込まれるまでの 間に表示する画像の設定も可能。
❾ ［画像ファイルを選択］ をクリック 次に、スマホタブでスマホサイトのメ インコンテンツに背景画像を設定しま す。なお、スマホサイトでは、背景動画 には対応していません。
❿ それぞれの背景が 反映された
ブラウザの横幅が一定のサイズよ り小さくなると、スマホ用のレイア ウトに切り替わります。パソコンの Webブラウザでスマホサイトをプレ ビューするには、ブラウザの横幅を 狭めます。
95
Lesson 4
❼ ［スマホ］ タブをクリック
30 BiND
スマートフォン用メニューをカスタマイズ スマホメニューの配置や表示方法をカスタマイズします。
レスポンシブサイトのテンプレートでは、スマ
表示時の動作の変更が可能です。ほかにも、ス
ホ表示時のメニューは自動で生成されます。メ
マホのブラウザからPCサイトの表示に切り替
ニューの配置位置は、テンプレートの初期設定
えるボタンの設置など、 「スマホメニューの設定」
によって異なりますが、後からボタンの位置や
を使ってカスタマイズする方法を紹介します。
メニューの配置や表示方向を変更する ❶ スマホボタンをクリック
Lesson 5
❷ ［スマホメニュー］ をクリック
始めにレスポンシブ対応の サイトをサイトエディタで 開き、 ［スマホ］ボタンで表 示を切り替えます。続けて ［スマホメニュー］ をクリッ クします。 ❸ 配置スタイルと アニメーションを設定
❺ 固定されたメニューは スクロールしても同じ 位置に表示される
スクロール
「スマホメニューの設定」 画 面が開いたら、 「配置スタイ ル」と 「アニメーション」そ れぞれのメニューから配置 や動きを選択します。 ❹ ［OK］ をクリック
112
配置スタイルで 「右上に固定」を設定したメニューは、画面をスク ロールしてもメニューボタンが常に画面右上に表示されます。
する
Lesson
5
こだわりのレイアウトに挑戦する
スマホで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
6
SiGNで画像を作り込む
SiGNのレイヤー構造を知る SiGNは、画像、シェイプ、テキスト、スタンプ
配置するなど、レイヤーの重ね順はコントロー
といったパーツを重ねて１つのイメージを作成
ル可能です。SiGNでの画像編集をスムーズに
します。このパーツの層をレイヤーといいます。
進めるためには、まずはこのレイヤー構造を覚
例えば、必ず見せたいテキストは階層の上位に
えておきましょう。
複数のレイヤーが重なったイメージ SiGNの画面。４つのレイヤーが重なって １つのイメージとなっています。
Lesson 6
画像レイヤー
写真やイラストなどの画像データ を読み込みます
シェイプレイヤー
四角形や円形などの図形を配置で きます。塗りの背景として、あるい は写真を切り抜く際に使用します。
スタンプレイヤー
吹き出しやフレーム、矢印など を配置できます。
テキストレイヤー
文字を配置するレイヤーです。 フォントの変更ができます。
129