03
BiND for WebLiFE*
BiNDで実際にウェブサイトを作る ウェブ作成の一連の手順を覚えましょう。
ここでは、BiNDによるウェブ制作に実際に取
作業は、まずはテンプレート選びから始めます。
りかかります。必要なのは、ウェブサイトのテ
まったくの空白のページから作り始めることも
キストや写真といった、コンテンツの素材です
可能ですが、BiNDにあらかじめ用意されたテ
が、まずは手近にある材料を使って作り始め
ンプレートから作り始めるほうがずっと作業効
て、手順を覚えていくとよいでしょう。なぜな
率がいいはずです。今回は、左下のテンプレー
ら、BiNDは、あとから素材などを入れ替える作
トを選んでから、右下のサイトを作るまでの流
業も簡単に行えるからです。
れをたどります。
テンプレートからウェブサイトを作る 完成
Lesson 1
テンプレート
テンプレートから作り替えていく箇所
・タイトルロゴをオリジナルにする ・トップページ用のスライドショーを作る ・記事のコンテンツを作成する ・サイトのレイアウトなどのデザインを変更する
14
BiNDの基礎知識
01 サイトの基になるテンプレートを選択 ＜サイトシアター＞ ❶ ［新規サイトを作る］ ボタンをクリック
［サイトシアター］ 画面上段の ［新 規サイトを作る］ をクリックし、 次に ［BiNDサイト］の ［このカテ ゴリーで作る］ をクリックします。
❷ ［BiNDサイト］ の ［このカテゴリーで作る］ をクリック
❸ ［カテゴリーエリア］ ボタンを選ぶ ❹ ［カートリッジ］ を決める
❺ ［テンプレートを確認する］ ボタンをクリック ❾ ［エディタ （標準） ］ をクリック 編集モードを選択。簡単に サイトを制作できるスマー トモードと、自由なレイア ウトができるエディタモー ドがあります。ここでは ［エ ディタ （標準） ］ を選択。 ❿テンプレートを基にした サイトの完成
❼ ［このテンプレートを使用する］ ボタンをクリック
❽ サイトフォルダの保存先を ローカルフォルダに指定
サイト生成の処理が完了します。このサイトを基に自 分のサイトを作成しましょう。
15
Lesson 1
❻ テンプレートを選択
各カートリッジごとに色や飾り が異なるバリエーションがあり ます。好みのものを選び、 ［この テンプレートを使用する］ ボタン をクリックします。
04
BiND for WebLiFE*
BiNDのユーザーインターフェース
サイトエディタ ［サイトシアターに戻る］ ボタン クリックすると ［サイトシ アター］ が表示されます。
［サイトマップ］
Lesson 1
サイトのページ構成を確 認。ページやコーナーの公 開／非公開の設定も行う
［削除］ ボタン サイトマップで選択した コーナーまたはページを 削除する際にクリック （P.16）
［複製］ ボタン クリックすると、サイト マップで選択したコーナ ーやページを複製する （P.16）
［追加ページ］ ボタン クリックすると表示され るメニューから、タイプを 選んで新しいページを追 加する
［新規コーナー］ ボタン ［コーナー］ （ディレクト リ） を追加する際にクリッ クする
［設定］ ボタン クリックすると設定ウィンド ウが開く。 ［サイト設定］ ［コ ーナー設定］ ［ページ設定］ の 画面を切り替えて設定する
30
［レイアウト］ ボタン クリックすると表示され るメニューで、ページの レイアウトを変更する （P.23）
［ウェブフォント］ ボタン クリックするとウェブフ ォントが選択できる。なお 利用するには設定が必要 となる （P.168）
BiNDの基礎知識
［ページタイトル］ ［ページ設定］で設定した ページタイトルが表示さ れる
［更新］ ボタン クリックすると ［サイトエ ディタ］ で開いているペー ジをリロードする
モバイルサイトを簡易的 にシミュレートする ［Mo bile SIMULATOR2］が起 動する （P.48）
［PCブラウザ］ ボタン ［プレビュー］ で表示するウ ェブブラウザを選択する
［アップロード］ ボタン 作成したサイトをアップ ロードする （P.26）
［このページを編集する］ ／ ［ページの編集を終える］ ボタン プレビューモードで ［このページを編集する］ をクリックすると、 ページの編集モードに切り替わり、ボタン名が ［ページの編集 を終える］ に変わる。さらに ［ページの編集を終える］ をクリック すると元のプレビューモードに戻る （P.17）
31
Lesson 1
［モバイル］ ボタン
16
SHiFT for WebLiFE*
ページのトップに印象的なスライドショ 動きのあるスライドで、 目を引くページを作ります。
BiNDのテンプレートには、視覚的にアピール
作成します。スライドショーパーツ作成ソフト
するビルボードと呼ばれるエリアがあります。
「SHiFT2」には、いろいろなタイプのエフェク
ここではビルボードにスライドショーを配置し
トが用意されていますが、BiND7で新しく追加
てウェブサイトを訪れた人の目を引くページを
されたテンプレートも試してみましょう。
SHiFTを起動してテンプレートを選択する
Lesson 3
❶ パーツ一覧で ［SHiFTスライドショーパーツ］ をクリック スライドショーを設置するブロックをブロ ックエディタで開き、SHiFTを起動します。 ここでは 「ビルボード」 ブロックを使用しま す。
❷ ［ビルボード］ を クリック
❸ テンプレートを選択 ❹ ［OK］ をクリック 新しいテンプレートは ［SHiFT2 テンプレー ト］ から選択します。従来のテンプレートを 使用する場合は、左側のリストで ［SHiFTテ ンプレート］ をクリックします。
❺ SHiFTの編集画面が開いた
編集画面が開いたら、画面左下の ［新規画像］ ボタンをクリックして画像を読み込みます。
72
ーを置く
カスタマイズしてコンテンツを作成する
画像を読み込んでスライドショーの設定を行う ❶ ［新規画像］ をクリック ❷ 画像を選択する ❸ ［開く］ をクリック 複数の画像を一度に選択できま す。また、ドラッグ＆ドロップで の読み込みも可能です。
❺ 画像のサイズや 配置を調整する
❹ ［画像編集］ を クリック
❻ ［OK］ をクリック
画像にコメントやリンクを追加する❼
❾ ［保存］ を クリック
❽ 画像の切り替え間隔や アニメーションのスピードを指定する コメントやリンクは必要に応じて入力します。また、 画像をスライドする間隔やアニメーション効果のス ピードをミリ秒単位で指定できるようになりました。 100 ～ 20000の数値が入力できます。
❿ スライドショーが 配置された
トップページにスライドショ ーが配置されました。動作の確 認はウェブブラウザかサイト エディタで行います。
73
Lesson 3
テンプレートのサイズによって は、画像が意図した配置にならな いことがあります。その場合は、 編集画面で画像をドラッグした り、スライダーで拡大／縮小した りして調整します。
39
SiGN for WebLiFE*
エフェクトを使いこなす 写真やシェイプにエフェクトを追加してポラロイド写真風の画像を作成。
SiGN Proは、バナーやビルボードなどの画像
いいでしょう。
作成ソフトですが、写真の加工にも利用できます。
ここでは、SiGN Proの ［エフェクト］ を使って、
サイト内に配置する写真はもちろん、加工した
写真やシェイプに効果を適用して、ポラロイド
写真をパソコンに保存して別の用途に使っても
写真風の画像を作成します。
写真の明るさや色味を調整する
❷ ［エフェクト］ をクリック
❶ 写真を 編集モードで開く
Lesson 5
SiGN Proを起動して、 加工したい画像を読 み込みます。ここで はマスク処理で正方 形にしたいので、シ ェイプレイヤーを使 って読み込みました。 ❸ エフェクトの 種類を選択
❹ スライダーで色相や彩度、 輝度を調整 ここでは 「明るさ」 というエフェクトを選択して、明る さや彩度、コントラストを調整します。彩度を上げて ドラマチックに仕上げたり、コントラストを抑えれば レトロ風にもなります。
118
❺ ［明るさ］ を選択
❻ ❼ 明るさやコントラストを調整する ［OK］ をクリック ここではポラロイド風にしたいので、彩度やコントラ ストを抑えて古い写真に見えるように調整しました。
SiGN Proで画像を作り込む
シェイプを加工して写真と組み合わせる ❷ エフェクトをクリック ❶ 長方形のシェイプを作成する
ポラロイドのフレームをシ ェイプで作成します。適当 な大きさに成形して、背景 を白で塗ります。 フレームに影を付けます。 光が当たる方向を想定して 角度を調整したり、透明度 を下げたりといった操作を 行います。
❸ ［シャドウ］ を選択
❻ レイヤーの 並び順を 変更する
Lesson 5
❹ シャドウの内容を 調整する
❺ ［OK］ をクリックする
❼ 配置を調整
同じポラロイド風画像を複数作成して、 ビルボードを作成しました。作成した ファイルを画像として保存する方法は、 次のページで解説します。
［レイヤー操作］ でアイコンをドラッグ して重なりの順番を変更します。写真 とシェイプの配置を調整して出来上 がりです。必要に応じて背景を透明に して ［完了］ します。
❽ ［完了］ を クリック
119
43
SYNC for WebLiFE*
問い合わせなどのフォームをページに BiNDで作ったウェブページにフォームを設置してみましょう。
サイトへの問い合わせなどを受け取る際に、設
フォームを組み込めます。
置しておくと便利なのがアンケート形式のフォ
また、フォーム機能はGoogleスプレッドシート
ーム。SYNCではGoogleのフォーム機能を利用
と連動しているため、投稿内容を自動的にデー
するため、Googleアカウントがあれば、簡単に
タベース化できる点も便利です。
Googleアカウントを設定してフォームの種類を選ぶ スマートモード で は、 「MEDIA」 カテゴリーから 「フォーム」 を選択します。
POINT!
❶ ［フォーム］ をクリック
Lesson 6
ブロックエディタで ［ウェブサービス系パーツ］ から ［フォーム］ をクリックします。SYNCの起 動後 「ようこそフォームへ」 画面が開きます。 ［次 へ］ をクリックすると、Googleアカウントへの アクセス許可を求められます。
❷ ［アクセス許可］ をクリック Googleアカウントへのログイン画面が開いた ら再び ［アクセス許可］をクリックします。ロ グインしていない場合はGoogleアカウントに ログインします。Googleアカウントを持って いない場合は、新規にアカウントを作成して アクセスを有効にします。
❸ フォームの種類を選択する ❹ ［次へ］ をクリックする 「お問い合わせ」 や 「資料請求」 などフォームの テンプレートが用意されています。 用途に合っ たフォームを選んで ［次へ］ をクリックします。
128
組み込む
SNSなどと連携するサイトを作る
フォームの内容をカスタマイズする ❶ 不要な項目は ［削除］ する ❷ メニューをクリックして追加する項目を選択する ❸ ［追加］ をクリック ［項目を追加：］ の入力欄右側の矢印をクリックす ると、追加する項目の一覧が表示されます。また、 各項目の ［入力欄を編集］ をクリックすると、入力 する内容や項目名などを詳細に設定できます。 ❹ ［次へ］ をクリック
❺ フォームのタイトルを入力
Lesson 6
❻ フォームの説明や注意 事項などを入力 ❼ ［次へ］ をクリック フォームのタイトルなどを入力します。 「フォー ム送信完了時のメッセージ」にはサンプルが 入っていますので、適当なものに書き換えます。 ❽ 送信者に自動返信する 場合はチェックを入れる
フォーム投稿者に自動返信を希望する場合は、 ［お客さ んにメールを送る］ にチェックを入れてから、送信する 内容を入力し ［次へ］ をクリックします。次の画面で設 定の確認を行い、 ［適用］ をクリック。さらにブロックエ ディタで ［適用］ をクリックして完了です。
フォームが出来上がりました。フォームへの投稿内容は、 Googleスプレッドシートに蓄積されます。
129
50
BiNDカート
サイトにショッピングカートを組み込む BiND7には無料で使えるショッピングカート機能が用意されています。
オンラインショップを試験的に始めてみたい。
商品数は５点までですが、基本的な機能は備え
そんな需要に応えるのがBiNDカート機能です。
ています。また、他社サーバーを利用している
この機能を使えば簡単にショッピングカートを
場合でもフリーコースに登録すれば、ショッピ
設置できます。フリーコースでは、登録できる
ングカート機能が使用できます。
Lesson 8
ショップを利用するためのアカウントを登録する
ショップを開設したいペー ジでブロックを選択し、ブ ロックエディタを開きます。 ［パーツ一覧］の ［ショッピ ングカート］にある ［BiND カート］ボタンをクリック します。
❷ ［BiNDカートフリーコースへ］ をクリック
❶ ブロックエディタで ［BiNDカート］ ボタンをクリック
❸ デジタルステージIDと パスワードを入力
❹ ［認証］ ボタン をクリック ［BiNDカート2］ が起動したら ［BiNDカートフリーコ ースへ］ をクリック。無料の 「BiNDカート」 サービスを 説明するウェブページが開いたら、 「BiNDカートサー ビスにログイン」 をクリックします。
148
ログイン画面が開いたら、BiNDのユーザー登録など の際に使うデジタルステージIDとパスワードを入力 して ［認証］ ボタンをクリックします。次に利用規約の 確認画面が開くので、内容を確認して ［同意］ をクリッ クします。
BiNDの機能を拡張する
❺ ［ショップコード］ を入力 ❻ ［ショップパスワード］ を入力 ❼ ［ショップ名］ を入力 ❽ ［ショップURL］ を入力 ❿ ダッシュボードが 表示される
Lesson 8
❾ BiND上で必要になる ［ショップ を コード］ ［ショップパスワード］ ［ショップを開店］ のほかに、 ［ショップ名］ ［ショッ クリック プURL］ 、そしてユーザーが持っ ているBiND7のシリアルナンバ ーを入力し、 ［ショップを開店］ をクリックします。 Attention
!
１つの製品シリアルナンバーに つき、BiNDカートフリーコース に登録できるのは１回になります。
POINT!
ショップの設定や商品管理、受注管理を行うダッシュ ボードが開いてショップの登録が完了。
フリーコースと 有料コースの違い
WebLiFE*サ ー バ ー の プ レ ミ ア ム コースに契約すると、商品登録数が 1000点まで利用できるようになる ほか （BiNDカートフリーコースでは ５点まで） 、商品表示のレイアウトを ９種類のデザインから選択することも 可能となります （BiNDカートフリー コースでは２種類から選択） 。さらに は、商品の説明に複数の写真を用いる こともできます。
BiNDカート フリーコース
WebLiFE* サーバープレミアム
アイテムの販売
○
○
ダウンロード商品販売 ※
○
○
５点
1000点
スマートフォンでの購入
○
○
商品画像複数登録
×
○
２種類
9種類
アイテム登録数
商品表示のレイアウト
※ 2014年４月よりサービス開始予定
149