c
o
n
t
e
n
t
s
Lesson 1 基本操作 -1
BiNDによるウェブ作りとは
-2
ウェブページの構造とBiNDの仕組み
14
-3
BiNDで実際にウェブサイトを作る
16
-4
ユーザーインターフェース解説
32
12
Lesson 2 レイアウト＆コンテンツ -1
リンク付きの画像を配置する
47
-2
表をページに配置する
50
-3
アコーディオンメニューを作成する
52
-4
新規にページを作成する
54
-5
レイアウトにサイドバーを追加する
56
-6
背景に画像を使ったページを作る
58
-7
タブでコンテンツの表示が切り替わるページを作る
60
-8
リンクを追加する
62
-9
ページ全体とサイドバーの幅を変更する
63
-10
画像や文字のずれや
64
-11
ファイルダウンロード用のページを作る
65
サイトのコンテンツとSEO対策
66
Column
間を直す
Lesson 3 グラフィック＆デザイン
006
11
-1
トップページのイメージ画像を作る
-2
スライドショーが表示されるトップページを作成する
48
67
68 70
c
o
n
t
e
n
t
s
Lesson 1 基本操作 -1
BiNDによるウェブ作りとは
-2
ウェブページの構造とBiNDの仕組み
14
-3
BiNDで実際にウェブサイトを作る
16
-4
ユーザーインターフェース解説
32
12
Lesson 2 レイアウト＆コンテンツ -1
リンク付きの画像を配置する
47
-2
表をページに配置する
50
-3
アコーディオンメニューを作成する
52
-4
新規にページを作成する
54
-5
レイアウトにサイドバーを追加する
56
-6
背景に画像を使ったページを作る
58
-7
タブでコンテンツの表示が切り替わるページを作る
60
-8
リンクを追加する
62
-9
ページ全体とサイドバーの幅を変更する
63
-10
画像や文字のずれや隙間を直す
64
-11
ファイルダウンロード用のページを作る
65
サイトのコンテンツとSEO対策
66
Column
Lesson 3 グラフィック＆デザイン
006
11
-1
トップページのイメージ画像を作る
-2
スライドショーが表示されるトップページを作成する
48
67 68 70
-3
背景にスライドショーが流れるページを作る
72
-4
サイドバーにスライドショーを設置する
74
-5
ウェブサイトのタイトルロゴをデザインする
76
素材を使ってサイトをデザインする
79
-6
見出しを画像化してデザインする
80
-7
サイトのデザインをまとめて変更する
82
-8
メニューのデザインを変更する
86
-9
リンクボタンをデザインする
88
-10
画像を加工してページに配置する
92
-11
ロールオーバーでリンク画像を変化させる
94
-12
ロールオーバーで色が変化するリンク画像を作る
96
-13
文字の色を指定のコーポレートカラーにする
98
Column
Lesson 4 ウェブサービスとの連携
99
-1
ウェブサイトにブログを組み込む
100
-2
アンケートフォームをページに組み込む
104
-3
USTREAMが閲覧できるページを作る
106
-4
オリジナルアイコンを配置した地図をページに埋め込む
108
-5
YouTubeの動画を貼り付ける
110
YouTubeの再生リストを作る
112
-6
画像共有サービス上の写真をページに貼り付ける
113
-7
Google Mapをページに埋め込む
114
-8
ブログパーツをページに埋め込む
116
Column
007
c
o
n
t
e
n
t
s
ニュース情報をウェブページに組み込む
118
-10
ソーシャルブックマークへの登録ボタンを組み込む
120
-11
RSS購読ボタンをウェブページに配置する
122
-12
グループで作業可能な表を挿入する
124
-13
独自のRSSを設置する
126
RSSについて
129
Twitterへの登録ボタンとタイムラインを組み込む
130
Twitterrというウェブサービスの可能性
132
-15
サイトの内容を検索可能にする
133
-16
サイトを自動翻訳して表示させる
134
-9
Column
-14 Column
Lesson 5 ナビゲーション＆ユーザビリティー -1
パンくずリストを設置する
136
BDタグの使い方
137
-2
アンカーを設定してページ内で移動する
138
-3
ページの自動転送を設定する
139
-4
サイトやページの名前をウィンドウタイトルに表示する
140
-5
文字サイズ変更ボタンを日本語表記にする
141
テキストのスタイルを設定する
142
Column
Column
Lesson 6 応用＆運用 -1
Column
008
135
GoogleやYahoo!に登録される情報を設定する
リスティング広告について
143 144 146
-2
ウェブサイトのアクセス解析を設定する
147
-3
アクセスカウンターを設置する
150
-4
ウェブページで音楽を再生する
152
-5
サーバーに自動でデータをバックアップする
154
-6
ウェブページの公開・非公開を管理する
156
-7
サイトデータのバックアップを取る
158
-8
テストサーバーと正式サーバーを切り替える
160
-9
画像に著作権情報の表示を加える
161
-10
サイトを分割して管理する
162
-11
サイトにパスワードをかける
164
Lesson 7 モバイル＆ショッピングサイト
165
-1
サイトにショッピングカートを組み込む
-2
受けた注文の内容を管理する
171
-3
独自ドメインを使ったサーバーを用意する
172
-4
携帯電話からの閲覧に対応する
173
-5
オリジナルデザインの携帯サイトを公開する
174
-6
QRコードを使って携帯サイトへ誘導する
176
付録１
BiND4の標準テンプレート一覧
177
付録２
SiGNのエフェクト一覧
181
索引
185
166
009
Lesson
1-1
基本操作
BiNDによるウェブ作りとは BiNDによるウェブ作りは、ほかのさまざまなソフトやサービスと比べてどこが違うのか？ これを紐解くことで、 BiNDの上手な使い方が見えてくるはずだ。
テンプレートをカスタマイズするのがベース
文字を置き換えることで出来上がっていく。 テンプレートを基にすることで、BiND以外のウェブサイ
「BiND for WebLiFE* 4 （以下、BiND4） 」 でウェブサイ
ト制作ソフトであれば数日から数週間はかかっていた作業が
トを作る作業は、基本的にすべての行程が 「テンプレートを
ほんの数時間で完了する。そこから、じっくり自分好みのカ
基にそれをカスタマイズしていくことでオリジナルのサイト
スタマイズに時間をかけるのもよし、サイトに掲載するコン
を構築していく」 という流れで行っていく。
テンツそのものの制作に時間をかけるのもよし、という考
まず最初は ［カートリッジ］ と呼ばれるサイト全体のテンプ
えがBiNDというソフトの設計思想の根底にある。
レートを選んでウェブを構築する。 ［カートリッジ］ の中に
BiNDで用意されているテンプレートは、もともとのデザ
は、ウェブサイトを構成するひと通りのページが用意されて
インが非常に優れているうえに汎用的な用途を意識して作ら
いる。これらのページを削ったり追加したりすることで自分
れているので、それをカスタマイズしていけば、苦労せずに
のコンテンツに応じたサイトを構築する。ページの中身に関
スタイリッシュなオリジナルデザインのウェブサイトが完成
しても、 ［カートリッジ］ の各ページには最初からダミーの写
するという仕組みだ。
真やテキストが配置されている。それらの写真やテキストを 自分のものに置き換えていくことでページが出来上がってい く。ページの中身を入れ替えたい場合も ［ブロックテンプ レート］ というコンテンツのパターンに応じて用意されたテ
「テンプレートから作っていく」 というと、デザインのバリ
ンプレートから選んで挿入することができる。サイトを飾る
エーションや配置できるコンテンツに制限があるようにイ
イ メ ー ジ や ロ ゴ、 見 出 し な ど の 画 像 も ［SiGN for
メージするかもしれない。実際にブログサービスによるウェ
WebLiFE* 3 （以下、SiGN） ］ に用意されたテンプレートの
ブページなどは選んだデザインテンプレートにテキストや写
豊富なテンプレート
新しい技術を簡単に提供
［カートリッジ］というサイトのテンプレートを基にウェブを作っていく。 ［カートリッジ］の種類はBiND4 標準で 96 種類。別売りのテンプレー ト集を追加することも可能だ。
012
自由度が高いBiNDによるウェブデザイン
BiND4で新しく搭載された［SHiFT］を使ったページ。FLASH 技術を 使わずに、写真を動かす仕掛けをウェブに組み込める。技術に詳しく なくてもすぐにこうしたページを作ることができるのもBiNDの特徴だ。
真などのコンテンツを流し込むだけで簡単に構築できるが、
けてくれるツールがBiNDと言える。
どれも見た目は似たり寄ったりなものになりがちだ。しかし BiNDの場合、テンプレートを基にしつつも、そこからカス タマイズしていく機能が非常に充実しているので、デザイン の自由度が低いということはまったくない。コンテンツもテ キスト、写真、動画など種類を問わず配置できる。 ［テーマ］ と呼ばれる背景や文字の色、装飾などの設定をまとめたデザ
本当に必要なのは「コンテンツ」
基本操作
実際にBiNDでウェブを制作するとなると、必要になるの は、 「コンテンツ」 「パソコンとインターネット接続環境」 「BiND4」 、以上だ。
インセットを切り替えれば、サイトの印象をがらりと変える
もう少し詳しく言うと、コンテンツとは、すなわち自分が
ことも可能だ。レイアウトのバリエーションも用意されてお
ウェブで公開したいと思っているものやこと。これがなけれ
り、サイドバーの有無や横幅の固定・可変といった変更がワ
ば始まらない。パソコンおよびインターネット接続環境も
ンタッチで行える。また、最近のウェブの傾向である各種
ウェブサイトを作るのだから必要となる。
ネットサービスとの連携も ［SYNC for WebLiFE* 3］ を使
そしてBiND4。BiND4には、ウェブページ作成機能、画
えば、技術的な知識がなくても簡単にページに埋め込むこと
像編集機能、FTP機能、そして 「BiND Server」 というBiND
ができる。さらにBiND4では、最新のウェブ技術である
に最適化されたサーバーも用意されている （もちろん一般的
HTML5を取り入れて動きのあるページを作る新機能
なウェブページ用サーバーにも対応している） 。必要なほか
［SHiFT for WebLiFE*］ を搭載している。
1
2 レイアウト ＆ コンテンツ
3 グラフィ ック ＆ デザイン
のソフトといえばウェブブラウザぐらいだが、これは誰でも
日々進化していくウェブの技術を追いかけ続けたり、面倒
無料で利用できるのはご存知の通りだ。
な画像形式の変換やブラウザの違いによる表示の崩れの修正
こうした 「オールインワン」 で 「シームレス」 な作業環境は、
に腐心するより、もっとウェブサイトの中身のことに時間を
ウェブ制作を行う上で時間やコストを有効に使うのに大きく
かけたい。そんな人のために、面倒なことはまとめて引き受
役立つはずだ。
4 ウェブ サービス との連携
5
column BiNDが必要な人とは？ 以上のようなソフトがBiNDだ。これをふまえてBiND
開設している。Twitterアカウント@webcomposer
の利用法を考えると、 「自分でコンテンツを持っている
と@dsHiranoをフォローすることで無料で参加できる。
ナビゲー ション ＆ ユーザビ リティー
人」 や 「自らがウェブのデザイン、構築、更新、管理まで
6
をする人」 という人物像が浮かび上がってくる。クリエイ ター、店主などの個人事業主、アマチュアスポーツチー
応用＆運用
ムのメンバー、小さな会社のIT係、NPOの広報担当者な どなど。とはいえ規模の小さなサイトだけではない。 BiNDは大企業のウェブページ制作に利用された実績も ある。ただし、その場合もウェブ制作を外注するのでは
7
なく、社内で作って運用していくという方針に適うソフ
モバイル サイト ＆ ショッピン グサイト
トとして選定されている。 こうした 「自分たちのウェブをクリエイトしていく情熱 を持った人たち」 をBiNDの開発元であるデジタルステー ジでは 「ウェブコンポーザー」 と呼び、支援していくこと
a
を表明している。2010年８月からは、BiNDの使い方 を含めた、ウェブ作りのさまざまなレクチャーを行う ネット上のフリースクール「ウェブコンポーザー学校」を
「ウェブコンポーザー学校」のサイト（http://www.digitalstage.jp/ wcs/） 。
付録
013
Lesson
1-3
基本操作
BiNDで 実際にウェブサイトを作る
BiNDでのウェブ制作の一連の作業を覚えるには、 とにかく1つウェブサイトを作ってみるのが、最も速い方法だ。手 順は決して難しくないので、 まずはここでの説明をなぞりつつ作り始めてみてほしい。 ここでは、BiNDによるウェブ制作に実際に取りかかる。必
ずテンプレート選びから始める。まったくの空白のページか
要なのは、ウェブサイトのテキストや写真といったコンテン
ら作り出すことも可能だが、BiNDにあらかじめ用意された
ツの素材だが、まずは手近にある材料を使って作り始めて、
テンプレートから作り出すほうが作業効率がずっといいはず
手順を覚えていってもいいだろう。BiNDは、あとから素材
だ。今回は、左下のテンプレートを選んでから、右下のサイ
などを入れ替える作業も、簡単に行えるからだ。作業は、ま
トを作るまでの流れをたどっていく。
テンプレートからウェブサイトを作る テンプレート
完成
テンプレートから作り替えていく箇所 ・タイトルロゴをオリジナルにする ・ トップページ用のスライドショーを作る ・記事のコンテンツを作成する ・サイトの背景色などのデザインを変更する
016
1 Step
1
サイトの基になるテンプレートを選択
next step
〈サイトシアター〉 サイトシアターの ［新規サイトを作る］を開く
1 Step
3
バリエーションの中から テンプレートを選ぶ
BiND4を起動すると表示される ［サイトシア
各カテゴリーごとに色や飾りが異なるバリエー
ター］ で、画面上段にある ［新規サイトを作る］ ボ
ションが用意されているので、その中から好みの
タンをクリック。
テンプレートを選び、 ［作成］ ボタンをクリック。
［新規サイトを作る］ ボタンをクリック
基本操作
2 レイアウト ＆ コンテンツ
3 ①テンプレートを選択
グラフィ ック ＆ デザイン
②［作成］ ボタンをクリック
4 ウェブ サービス との連携
Step
Step
2
テンプレートの カテゴリーを選択する ［新規サイトを作る］ の ［カテゴリーエリア］ ボタン をクリックするなどして、テンプレートのカテゴ
4
テンプレートサイトの完成
5
サイト作成の処理が完了すると、ひと通りの要素 がそろったウェブサイトが出来上がる。これを基 に、自分のサイトを作成していく。
ナビゲー ション ＆ ユーザビ リティー
①サイト作成の処理が行われる
6
リーを選択する。BiND4では標準で、4種類のカ テゴリーが用意されている。
応用＆運用
①［カテゴリーエリア］ ボタンを選ぶ
②テンプレートを基にしたサイトの完成 ①テンプレートを選択
②カテゴリーを決める
③［決定］ ボタンをクリック
7 モバイル サイト ＆ ショッピン グサイト
②［作成］ ボタンをクリック
a 付録
017
Lesson
1-4
基本操作
ユーザーインターフェース解説
［サイトシアター］
［カテゴリーエリア］ ボタン
テンプレートのジャンルを切り替える。インス トールされているテンプレートによってボタン の数は変化する
［新規サイトを作る］ ボタン
［マイサイトを編集する］ ボタン
テンプレートから選んで新規サイトを 作成する際にクリックする （P.17）
032
保存済みのサイトを ［サイトエディタ］ で開く場合、ここをクリックして選択 して［決定］ ボタンを押す
［サポート］ ボタン
クリックするとウェブブラウザが 開いて、BiND のサポート情 報のページが表示される
［チュートリアルビデオ］ ボタン
BiND4に関する情報やチュートリア ルのビデオが閲覧できる
［ヘルプ］ ボタン
クリックするとウェブブラウザが 開いて、オンラインマニュアル のページが表示される
ここでは、BiND4の操作を解説するうえで頻出するボタン類などの名称を示して、それぞれについて簡単に説明 していく。
1 基本操作
2
［マイサイトを編集する］画面
レイアウト ＆ コンテンツ
3
［決定］ ボタン
編集するサイトの選択を決定する
グラフィ ック ＆ デザイン
4 ［マイサイト一覧］
自分で作ったサイトが、トップページのサムネールで一覧表示される
ウェブ サービス との連携
5 ナビゲー ション ＆ ユーザビ リティー
6
［バックアップを作成する］
サイトのデータのバックアップを作成する。バッ クアップしたデータは、右側の［▼］ボタンをク リックすると表示されるメニューから呼び出す
応用＆運用
7
［サイトフォルダを開く］ ボタン
モバイル サイト ＆ ショッピン グサイト
サイトのデータが保存されているデータのフォルダを開く
［編集］ ボタン
［複製］ ボタン
サイトデータを ［ブロックエディタ］ で開く
サイトのデータの複製を作る。作られた複製サイトは ［マイサイト一覧］ に登録される
［削除］ ボタン
サイトのデータを削除する
a
［一覧に戻る］ ボタン
［マイサイト一覧］ に表示を戻す
付録
033
Lesson
3-11
グラフィック＆デザイン
ロールオーバーで リンク画像を変化させる リンクが付いた画像にポインターを重ねると変化する仕組みを 「ロールオーバー」 と言う。BiND4では、リンク画像 にこのロールオーバーを簡単に設定することができる。
Step
1
ロールオーバーさせる画像がある ブロックを選ぶ
①［クリック設定］ をクリック
［サイトエディタ］ で、ロールオーバーを設定した い画像があるブロックを選択して、 ［編集］ ボタン をクリックする。 ①ブロックを選択 ②［リンクする］ になっていることを確認
③［ロールオーバー画像 ...］ をクリック
②［編集］ ボタンをクリック
ロールオーバーは主にリンクが存在していること
point を示すために使われる仕掛けだ。そのためBiND では、ロールオーバー画像を設定するには 「リン クする」 を選択するようになっている。
Step
2
ロールオーバーさせる画像を 選択して［クリック設定］を開く ［ブロックエディタ］ が開いたら、ロールオーバー
Step
3
ロールオーバーを有効にする
させたい画像をクリックして選択。画面右側の
［ブロックエディタ］ 画面上部に表示されたダイア
［画像パーツ設定］ で ［クリック設定］ をクリック。
ログで ［ロールオーバー画像を使用する］ にチェッ
［リンクする］ が選択されていることを確認して、
クを入れる。
［ロールオーバー画像...］ をクリックする。
ロールオーバーを設定したい画像を選択
094
［ロールオーバー画像を使用する］ にチェック
Featured Function ［ブロックエディタ］→［画像パーツ］
Step
4
ロールオーバー画像を設定する
Step
5
ロールオーバー画像の設定を 完了する
ここでは、ロールオーバーした際に明るくなり、
ロールオーバー画像の設定のダイアログで ［OK］
少し浮き上がったように見えるように、画像を設
ボタンをクリックし、 ［ブロックエディタ］ の ［適
定する。まずダイアログの ［明るく＋１］ と表示さ
用］ ボタンをクリックする。
1 基本操作
れたボタンをクリック。表示されたメニューか
2
ら、 ［明るく＋２］ を選択。次に ［画像編集］ ボタン をクリック。 ［画像エディタ］ が開いたら、画像を
レイアウト ＆ コンテンツ
ドラッグして少しだけ上に移動させる。 ①ボタンをクリック
3
①［OK］ ボタンをクリック
グラフィ ック ＆ デザイン
4
②［明るく＋２］ を選択
ウェブ サービス との連携
②［適用］ ボタンをクリック ③［画像編集］ ボタンをクリック
5 Step
6
ロールオーバーの効果を確認する
ナビゲー ション ＆ ユーザビ リティー
［サイトエディタ］ で ［プレビュー］ ボタンをクリッ クして、ブラウザでロールオーバーの効果を確認
6
する。
④画像をドラッグして上に移動
応用＆運用
7 モバイル サイト ＆ ショッピン グサイト
⑤［OK］ をクリック
a
画像エディタでどれだけ画像をずらすかは好みに
point よる。数ピクセルずらすだけでも十分効果的だ。
付録
大きくずらして特殊な効果を狙う設定も試してみ ていいだろう。
ポインターを重ねると、画像が明るくなり少し浮き上がったように見える
095
Lesson
4-1
ウェブサービスとの連携
ウェブサイトに ブログを組み込む 各種ブログサービスで公開中のブログをBiNDで作ったウェブページに組み込む方法を紹介する。現在、Blogger やYahoo!、Ameba、livedoorといったブログサービスをサポート。
Step
1
ブログを開設する
Step
2
ブロックエディタの パーツ一覧からブログを選ぶ
BiNDがサポートする各種ブログサービスでアカ
ブログを配置したいブロックを ［ブロックエディ
ウントを登録し、ブログを作成する
タ］ で開き、 ［ウェブサービス系パーツ］ タブにあ る ［ブログ］ ボタンをクリック。
①［ウェブサービス系パーツ］ タブを開く
②［ブログ］ ボタンをクリック
Bloggerで作成したブログの管理画面
BiNDがサポートしているブログサービスは、下
point 記の8種類 （2010年8月現在） 。 Blogger http://www.blogger.com/ Yahoo! ブログ http://blogs.yahoo.co.jp/ Ameba ブログ http://ameblo.jp/ ココログ http://www.cocolog-nifty.com/
Step
3
ブログサービスを選択する ［SYNC］が起動したら、利用しているブログ サービスを選び ［次へ］ ボタンをクリックする。
FC2ブログ http://blog.fc2.com/ JUGEM http://jugem.jp/ livedoor ブログ
①利用しているブログサービスを選択する
http://blog.livedoor.com/ goo ブログ http://blog.goo.ne.jp/
②［次へ］ ボタンをクリック
100
Featured Function ［ブロックエディタ］→［ウェブサービス系パーツ］→［ブログ］ パーツ
Step
4
ブログのURLを入力する
1
①ブログのデザインを選択
Step1で作ったブログを開いてURLを確認し、
基本操作
［SYNC］ の ［ブログの設定］ 画面に入力。さらに、 表示するエントリー （記事） の数と、ブログサービ スのウェブページへのリンクの文字も設定して、
2
［次へ］ ボタンをクリックする。 ①ブログサービスのURLを確認 ②［次へ］ ボタンをクリック
レイアウト ＆ コンテンツ
3 Step
6
設定を確認して適用する
グラフィ ック ＆ デザイン
［設定の確認］ 画面で各種設定項目を確認したら、 ［適用］ ボタンをクリック。ブロックエディタに戻
4
り、さらに ［適用］ ボタンを押して保存する。
ウェブ サービス との連携
②ブログのURLを入力
5 ナビゲー ション ＆ ユーザビ リティー
6
②設定がOKなら［適用］ ボタンをクリック
①設定を変更したい場合は［前へ］ ボタンで戻る
応用＆運用
7 ③表示するエントリーの数を設定
Step
5
モバイル サイト ＆ ショッピン グサイト
④ブログへのリンクの文字を入力
掲載するデザインを選択する ［デザインの選択］ 画面で、ウェブページの中でブ ログをどのように表示するか、デザインを選択し
a ③ブロックエディタでも［適用］ ボタンをクリック
付録
て、 ［次へ］ ボタンをクリックする。
101
Lesson
4-4
ウェブサービスとの連携
オリジナルアイコンを配置した 地図をページに埋め込む ウェブではアクセスマップやエリアガイドなど、地図上に情報を置いたコンテンツがよく見られる。BiNDの ［Yahoo! 地図］ パーツを使えば、 そうしたコンテンツを簡単に作ることができる。
Step
1
地図を挿入するブロックを開く
Step
3
地図の表示サイズを変更する
地図を配置するブロックを ［ブロックエディタ］ で
検索した場所が表示されたら、画面下部にある
開く。地図の挿入位置を決めて画面右側の ［パー
［地図サイズを数値設定］ をクリックして、地図を
ツ一覧］の ［ウェブサービス系パーツ］にある
配置するブロックに合わせた数値を入力して ［適
［Yahoo!地図］ をクリックする。
用］ ボタンをクリックする。
①［ウェブサービス系パーツ］ をクリック
②［Yahoo! 地図］ をクリック
Step
2
①［地図サイズを数値設定］ をクリック
地図を検索する ［SYNC］ が立ち上がり、Yahoo!地図の説明が表 示されたら ［次へ］ をクリック。 ［地図の編集］ 画面 で組み込みたい場所を検索する。
②地図のサイズを入力
①地名やランドマークの名称などを入力
②［検索］ ボタンをクリック
108
③［適用］ ボタンをクリックする
Featured Function ［ブロックエディタ］→［ウェブサービス系パーツ］→［Yahoo!地図］ パーツ
Step
4
地図にマーカーアイコンを配置する
Step
6
地図の設定を確認して適用
地図のマーカー （印） を配置したい場所をクリッ
［SYNC］ の ［次へ］ ボタンをクリック。 ［設定の確
ク。すると、赤いピンのアイコンが配置されて
認］ 画面で表示などをチェックして問題なければ
［マーカーの説明］ 画面が表示される。下段にある
［適用］ ボタンを押す。さらに ［ブロックエディタ］
［＋］ ボタンをクリックすると、画像選択ダイアロ
1 基本操作
で ［適用］ ボタンをクリックする。
2
グが開くのでアイコンに使用する画像を選ぶ。 ［マーカーの説明］ 画面に選んだ画像が表示された ら、それをクリックする。
①地図の設定や吹き出しの内容などを確認
レイアウト ＆ コンテンツ
3
①地図をクリック
②［＋］ ボタンをクリックして画像を登録
②［適用］ ボタンをクリック
Step
7
グラフィ ック ＆ デザイン
4 ブラウザでプレビューする
ウェブ サービス との連携
［サイトエディタ］ の ［プレビュー］ ボタンをクリッ クして、ブラウザで地図の表示を確認する。
5
③登録した画像を選択
ナビゲー ション ＆ ユーザビ リティー
Step
5
マーカーの説明を入力する マーカーの ［タイトル］ と ［説明］ を入力し、 ［更新］
オリジナルアイ コンを使ったマ ーカーが配 置 された地図
6 応用＆運用
ボタンをクリックする。ここで入力した内容が、 マーカーの吹き出しに表示される。
memo ①［タイトル］ を入力
複数の地点を指し示した地図
［Yahoo!地図］ では複数の マーカーを配置できる。ガ
②［説明］ を入力
１枚の地図の上に配置 した複数のマーカー
7 モバイル サイト ＆ ショッピン グサイト
a
イドマップなど、複数の地 点を指し示すコンテンツを 作る際に便利だ。
付録
③［更新］ ボタンをクリック
109
Lesson
4-14
ウェブサービスとの連携
Twitterへの登録ボタンと タイムラインを組み込む Twitterは、「ツイート」や「つぶやき」 と呼ばれる140文字以内のメッセージを公開したり、閲覧したりするサービ ス。BiNDでは、ツイートをページに表示したり、ウェブの記事をツイートさせるボタンを配置することできる。
Step
1
タイムラインを置くブロックを開く
Step
3
タイムラインのデザインを選択する
Twitterのタイムライン （ツイートを時系列に並べた
［デザインの選択］ 画面が開いたら、サンプルを参
リスト） を配置するブロックを ［ブロックエディタ］
照してタイムラインの文字色と背景色の組み合わ
で開き、画面右側の ［パーツ一覧］ の ［ウェブサー
せを選択。 ［次へ］ をクリックする。
ビス系パーツ］ にある ［Twitter］ をクリックする。
①［ウェブサービス系パーツ］ をクリック ①デザインを選択する
②［Twitter］ をクリック
②［次へ］ をクリック
Step
Step
2
4
表示するサイズやツイート数などを 設定する ［オプションの設定］ 画面が開いたら、必要に応じ
Twitterアカウントを入力する
て各種設定を行う。 ［自動調整］ にチェックを入れ て、ブロックの幅に合わせてタイムラインが表示
［SYNC］ が立ち上がったら、タイムラインを表 示するTwitterアカウントを入力して ［次へ］ をク
されるようにする。設定が完了したら ［次へ］ をク リック。
リック。 ① Twitterアカウントを入力
①［自動調整］ にチェック
②［次へ］ をクリック
130
②［次へ］ をクリック
Featured Function ［ブロックエディタ］→［ウェブサービス系パーツ］→［Twitter］ パーツ
Step
5
ニュースパーツを挿入する
Step
7
Twitterアカウントを入力
さらに ［次へ］ をクリックして、設定の確認をした
［サービスの設定］ 画面が開いたら、Twitterアカ
ら ［適用］ ボタンをクリックして ［SYNC］ を閉じ
ウントを入力。 ［次へ］ ボタンをクリックする。
1 基本操作
る。 ［ブロックエディタ］ に戻ったら、 ［Twitter］ パーツの下にカーソルを挿入してから ［ウェブ
2
サービス系パーツ］ にある ［ニュース］ をクリック。
レイアウト ＆ コンテンツ
① Twitterアカウントを入力
①パーツを挿入 する位置を指定
②［ニュース］ をクリック
②［次へ］ ボタンをクリック
Step
8
3 グラフィ ック ＆ デザイン
アップロードして確認する 設定を確認して ［適用］ ボタンをクリックし再び ［SYNC］ を閉じたら、 ［ブロックエディタ］ で ［適
4 ウェブ サービス との連携
用］ボタンを押す。 ［サイトエディタ］で ［アップ Step
6
ロード］ ボタンをクリックしてページが公開された
Twitterと連携するボタンを選択
5
ら、ブラウザで開いて確認する。ページには、指 定したTwitterアカウントの最近のツイートが表
P.120のStep2と同様に手順を進めて、 ［表示す
示される。また、その下にある ［つぶやくボタン］ を
るボタンの選択］ 画面になったら、 ［ 「つぶやくボ
クリックすると、ツイートにページのリンクを貼
タン」 を使用する］ にチェックを入れて、 ［次へ］ ボ
る項目と、指定したTwitterアカウントのフォロー
タンをクリック。
を設定する画面へ移動する項目が表示される。
ナビゲー ショ ン＆ □□□□□ □□□□■ ユーザビ リティー
6 応用＆運用
①［ 「つぶやくボタン」を使用する］ をチェック
指定したTwitterアカウントのタイムライン
7 モバイル サイ ト＆ □□□□□ □□□□■ ショ ッピン グサイト
Twitterと連携する ［つぶやくボタン］
［つぶやくボタン］ はプレビューでは動作しないの ②［次へ］ ボタンをクリック
point で、一度アップロードしてから動作を確認する必
a 付録
要がある。
131
Lesson
6-6
応用＆運用
ウェブページの公開・非公開を 管理する
BiNDで作ったサイトでは、 ワンクリックでページ単位やコーナー単位の公開・非公開を設定できる。作りかけのペー ジや公開が終わったページを非公開にするなど、サイト管理に便利な機能だ。
Step
1
サイトエディタで ページ名の横をクリック
Step
3
［サイトエディタ］ の ［サイトマップ］ で非公開にす
ページ名の横にマークが付き、非公開の設定に
るページ名の右にあるボックスをクリックする。
なったことを確認する。
ページ名の横のボックスをクリック
Step
2
確認ダイアログで [OK]ボタンをクリック
非公開マークを確認
非公開のマークが表示される
memo
非公開設定を使って 効率アップ
非公開にすることを確認するダイアログが表示さ
公開・非公開は、ページ単位だけでなく、コーナーごとに
れるので、 ［OK］ ボタンをクリックする。
まとめて設定することも可能だ。ページと同様に、 ［サイ トエディタ］ の ［サイトマップ］ でコーナー名の横のボック スをクリックして設定する。非公開のコーナーを作ってお けば、ページをドラッグしてこのコーナーから出したり入 れたりするだけで簡単に公開・非公開を切り替えられる。
［OK］ ボタンをクリック コーナー全体を非公開に設定できる
156
Featured Function ［サイトエディタ］→［サイトマップ］
Step
4
アップロードを実行して確認
memo
ラベルを使って作業状況を 管理する
［サイトエディタ］ で ［アップロード］ ボタンをク
［サイトエディタ］ の ［サイトマップ］ では非公開マークの右
リック。ウェブブラウザでページが公開されてい
横に、作業の状態を示すラベルを表示させることができ
ないのを確認する。
る。非公開コーナーと合わせてラベルを付ければ、サイト
1 基本操作
の更新の作業が管理しやすい。また、公開・非公開やラベ
2
ルの設定は、 ［サイトエディタ］の ［設定］画面内にある ［ページ設定］ でも設定できる。
レイアウト ＆ コンテンツ
3 グラフィ ック ＆ デザイン
①［アップロード］ ボタンをクリック
4 非公開マーク欄の右横をクリックするとラベルを指定できる
ウェブ サービス との連携
公開・非公開やラベルは、 ［サイトエディタ］ の ［設定］ の ［ページ設定］ でも設定可能
5 ナビゲー ション ＆ ユーザビ リティー
6
②非公開に設定したページが表示されないことを、ウェブブラウザで確認
ページを非公開にした場合、そのままにしておく
応用＆運用
point と上の図のようにエラーが表示されてしまうの で、代わりに 「工事中」 などのページを作って置き
7
換えておくと親切だ。
モバイル サイト ＆ ショッピン グサイト
a 付録
157
Lesson
7-1
モバイル＆ショッピングサイト
サイトにショッピングカートを 組み込む
BiND専門のサーバーサービス［BiND Server］ のPremiumコース に入っていれば、ネットショップを開設可能だ。 ここでは、開設のための設定からページにショッピングカートを設置するまでの手順を説明する。
Step
1
ショップの情報を入力する
①支払い方法を選択してチェック
ウェブブラウザで ［BiND Server］ （https:// mypage.bindsite.jp/） を開いて、Premiumコー スに登録しているアカウントでログインする。 ［BiND Server Contorl Panel］ 画面左側にある
②支払い方法に関する情報を入力する
［ショップ情報設定］ をクリックすると表示される 画面で ［ショップコード］ ［ショップパスワード］ ［ショップ名］ などを設定。各設定項目を入力した クレジットカード支払いなど一部の支払い方法を
ら ［次へ］ ボタンをクリック。
point 利用するには決済代行サービス 「イプシロン」 との 契約が必要になる。 ② BiNDでの設定に使う ［ショップコード］ を入力
Step ③ BiNDでの設定に使う ［ショップパスワード］ を入力 ④［ショップ名］ を入力 ⑤［ショップURL］ を入力 ①［ショップ 情報設定］ をクリック
⑥注文完了メールなど のFROM 欄に入る［メ ールアドレス］ を入力
3
送料の設定と 特記事項の表示の設定 次の画面の ［送料］ 欄には、全国一律の料金が決 まっている場合はその金額を入力。送料について は、購入総額が一定額を超えた場合、送料を無料 にする場合の設定もここで行う。また購入の際、 配送日時の指定などを利用者が入力する ［特記事 項］ 欄に初期状態で挿入されるテキストを設定。 ［次へ］ ボタンをクリックする。
⑦［次へ］ ボタンをクリック ①全国一律の送料を入力
Step
2
②送料無料になる条件を設定
支払い方法を設定する 次に、購入手続きの中で利用可能にする支払い方
③利用者からのメッセ ージが入力される［特記 事項］ での表示を設定
法を設定する。 ［銀行振込］ ［郵便振込］ ［代引き決 済］ など各種決済方法から選んで、項目チェック を入れる。チェックを入れた項目には、支払い方 法について説明など、必要な情報を入力。設定が 終わったら、画面の一番下にある ［次へ］ ボタンを クリックする。
166
④［次へ］ ボタンをクリック
Featured Function ［ブロックエディタ］→［ショッピングカートパーツ］→［ショッピングカート作成］ ※Premiumコース限定
Step
4
ンをクリックすると、画像がサーバーへ送信され
注文完了の設定を行う
て設定される。設定し終わったら ［在庫入力をす
1
る］ ボタンをクリック。 注文が完了した際に画面に表示するテキストを入
基本操作
力する。さらに、注文完了すると注文主に自動で
①［ステータス］ で注文可／不可を選択
送信されるメールの文面を設定。 ［次へ］ ボタンを クリックするとショップの設定が完了する。
②商品管理に使う ［商品管理番号］ を設定
①注文完了画面に表示されるテキストを設定
2 レイアウト ＆ コンテンツ
③［商品名］ を入力
3 ④［ファイルを選択］ ボタンをクリック
②注文完了メ ール のタイト ルおよび文面 を編集する
⑤［アップロード］ ボタンをクリック
グラフィ ック ＆ デザイン
⑥［標準価格］ を入力
ウェブ サービス との連携
③［次へ］ ボタンをクリックしてショップ設定の完了
Step
5
4
⑦［在庫入力をする］ ボタンをクリック
商品の登録設定を開始 ショップの設定が完了したら、商品を登録する。 画面左側にある ［商品管理］ をクリックすると表示 される ［新しく商品を登録する］ ボタンを押す。
Step
7
5 在庫数を設定
ナビゲー ション ＆ ユーザビ リティー
商品の在庫数を入力。色やサイズなど商品にバリ エーションがある場合は、それに応じて画面右側
6
のボタンをクリックして設定する。この数字は注 文が入るごとに減っていき、０になったら在庫切 れの表示が出るようになっている。設定できたら ②［新しく商品を登録する］ ボタンをクリック
［在庫を登録する］ ボタンをクリック。これで商品 情報の設定が完了。
7
①［商品管理］ をクリック
Step
6
応用＆運用
モバイル サイト ＆ ショッピン グサイト
商品情報を入力する 注文可／不可を示す ［ステータス］ や ［商品管理番
a ①在庫数を入力する
付録
号］ ［商品名］ などを設定する。また、 ［商品画像］ は画像データを選択してから ［アップロード］ ボタ
②［在庫を登録する］ ボタンをクリック
167
appendix
1
付録
BiND4の標準テンプレート一覧 Journal
Jurnal Red
Jurnal Blue
Jurnal Brown
Jurnal Gray
Jurnal Check
Jurnal Check2
Camera Black
Camera Red
Camera Green
Camera Blue
Camera Wall
Photo Red
Photo Green
Photo White
Photo Orange
Photo Blue
Film Brown
Film Blue
Film Orange
Film SkyBlue
Film Pink
Camera
Camera White
Photo
Photo Black
Film
Film Green
180
appendix
2
付録
SiGNのエフェクト一覧
1
SiGNには、テキストでは40種類の、イメージでは96種類のエフェクトが用意されている。 それぞれのエフェクトがどのような効果を生むか、用意したサンプルを基に、一覧できる ようにした。ロゴやメインビジュアルなどの画像データ作成に役立ててほしい。
基本操作
2 レイアウト ＆ コンテンツ
TEXTのエフェクト
3 グラフィ ック ＆ デザイン
エフェクトなし
4
縁取
ウェブ サービス との連携
1 縁取り1 2 縁取り2
1
3 縁取り3
2
3
4
5
4 縁取り(黒) 5 縁取り(白) 6 縁取り7 7 縁取り8
5
8 縁取り9
6
7
8
ナビゲー ショ ン＆ □□□□□ □□□□■ ユーザビ リティー
影
6
1 ドロップシャドー(黒)1 2 ドロップシャドー(黒)2 3 ドロップシャドー(黒)3
1
2
3
4
5
6
7
8
応用＆運用
4 ドロップシャドー(黒)4 5 ドロップシャドー(白)1 6 ドロップシャドー(白)2 7 ドロップシャドー(白)3 8 ドロップシャドー(白)4
7 モバイル サイ ト＆ □□□□□ □□□□■ ショ ッピン グサイト
鏡面反射 1 鏡面反射1 2 鏡面反射2 3 鏡面反射3
1
2
3
4
a
4 鏡面反射4 5 鏡面反射6
付録
6 鏡面反射7 7 鏡面反射8 8 鏡面反射9
5
6
7
※サンプルでは、効果がわかりやすく見えるように、文字や背景の色、位置などを適宜、調整しています。
8
181