ページデザインを設定する

BiNDupを起動し、サイトのベースを作りましょう

まずはBiNDupを開き、サイトのデザインのベースになる、サイトのテンプレートを選択します。
どんな雰囲気のサイトにするかをここで決められるので、
400種類以上のテンプレートから、あなたのイメージに合ったテンプレートを探してみましょう。

【1】BiNDupを開こう

BiNDupのコントロールパネルにログインし、「BiNDupを起動」をクリックすると、Webアプリが開きます。デスクトップアプリ※1を使いたい方は、事前にインストールしておくとスムーズです。
※1 サイト編集するPCにダウンロードし利用するアプリケーション。

【2】作成方法を選ぼう

BiNDupを開き、最初に表示される画面が「サイトシアター」です。新しいサイトを作成する場合、右上に表示されている「サイトを新規作成」という緑のボタンをクリックし、サイトの作成方法を選択します。
ここでは、テンプレートを選んでサイトを作成していくので、「テンプレートから作成」をクリックしましょう。

【3】テンプレートを選ぼう

テンプレート一覧画面が表示されるので、お好みのテンプレートを選択します。カラーや業種でテンプレートを絞って探すこともできます。ここでは、「HOUR CRAFT Travel」というテンプレートを使って、サイトを作成していきます。

【4】カラーと構成を決めよう

使いたいテンプレートをクリックすると、サイトのメインカラーとページ構成が選べます。ここでは、1ページに情報を集約させられる「シングルページ」でサイトを作成していきます。メインカラーとページ構成を選択したら、「サイトを作成」ボタンをクリックしましょう。

【5】編集モードを選ぼう

編集モードは「スマートモード」と「エディタモード」の2種類があります。スマートモードは、用意されたフォーマットに沿って文字や画像を入れ替えるだけで、サイトが作成できるので、初めての方におすすめです。あとからエディタモードに切り替えることもできるので、まずは「スマートモード」でサイトを作成してみましょう。

STEP1が完了しました

サイトの編集画面（サイトエディタ）が開き、先ほど選んだテンプレートが表示されています。
ここからサイトの編集を行い、あなただけのサイトを作成しましょう。

ページデザインをカスタマイズする

サイトを編集する準備ができたら、いよいよ実際にサイトを編集していきます。次のステップで、ページのデザインを編集してみましょう。

次のステップを実践する

関連リンク

自由に作成[ブランクサイト]の紹介

こちらのページでは、作成したサイトデータをBiNDupからサーバーへアップロードする手順をご案内します。

FTPクライアントでのアップロードについては、サポート外の手順となります。

FTP情報を設定する

プロパティ設定のサイト設定画面より、<サーバー設定画面>で、FTP情報の入力ができます。
詳細は、こちらをご参照ください。
〈サーバーの種類〉を選ぶと、サーバーの種類が表示されます。

BiNDupをご利用の場合

表示された「サイトコード」、「独自ドメイン」から、アップロードをしたいドメインを選択すると自動で必要なFTP情報が設定されます。

WebLiFEサーバーをご利用の場合

ご契約されている、WebLiFEサーバーのコースを選択いただくと、FTP情報の入力画面が表示されます。

外部サーバーをご利用の場合

サーバーの種類は「一般的なFTPサーバー」、「一般的なSFTPサーバー」を選択いただくとFTP情報の入力画面が表示されます。

同じURLで複数サイトをアップロードする場合や、独自ドメインを利用してアップロードする際は
サーバー設定画面で事前にサーバーディレクトリを指定する必要があります。
独自ドメインをご利用する際は、ドメインごとにサーバーのアップロード先（ディレクトリ）が生成されます。

※エントリーコースはドメイン機能は使えません。

BiNDで作成したサイトを他社サーバーにアップロードした場合、BiNDupやWebLiFE*サーバーのサーバー機能はご利用いただけません。詳しくは手順4を参照してください。

サイトの容量を確認する

サイトの容量がサーバーの空き容量を超えていると、サイトをアップロードすることはできないため、
サイトシアターのマイサイト詳細の〈サイズ〉より、事前にサイトの容量を確認しておく必要があります。

アップロードを実行する

サイトエディタ右上の〈サイトを公開〉をクリックします。

アップロード開始の確認画面が表示されるので、〈はい〉をクリックします。

〈OK〉をクリックするとWebサイトが表示されます。
必要がなければ〈キャンセル〉をクリックしても構いません。

※サイトエディタ画面左側のサイトマップで、特定のページもしくはコーナーを選択し矢印のアイコンをクリックすることで、そのページ(もしくはコーナー)のみアップロードできます。

他社サーバーへのアップロードについて

他社サーバーに、BiNDで作成したサイトデータをアップロードした場合、以下の機能をお使いいただくことができません。
※他社サーバーの表現として外部サーバーやレンタルサーバーが含まれます。
※エントリーコースでは他社サーバーへのアップロードはできません。
《利用不可となる機能》
・かんたんパスワード（Basic認証）
・独自ドメイン設定
《一部制限あり》
・BiND for WordPress
他社サーバーの場合、管理は、他社サーバーやWordPress側での操作となるため、サポート対象外となります。
詳細な仕様は、サービス提供元へとご確認ください。
・Webフォント
FONTPLUS社以外が提供するフリーフォントやGoogle Fontsは他社サーバーでも使用できます。

FTPクライアントでのアップロード方法について

デスクトップアプリで作成したサイトを、FFFTPなどのFTPクライアントを使いアップロードするには、サーバー設定画面で「ファイルシステム」を選択し書き出したデータをご利用ください。

具体的な手順としては、サーバーの種類で「ファイルシステム」を選択後、「参照」を選び、データの書き出し先を指定します。

デスクトップなどに、「sitedate」などのフォルダをあらかじめ新規作成しその中を指定します。
デスクトップに直接出力すると、サイトデータを構成するファイルが分かれて出力されますのでご注意ください。

出力先フォルダを指定後、サイトエディタ画面で「サイトの公開」を行うと、サイトデータをローカル環境に書き出すことが可能です。
書き出されたデータを、FTPクライアントで指定のサーバーへとアップロードしてください。

FTPソフトを使用したアップロードのサポートは行っておりません。あらかじめご了承ください。

画像パーツの設定手順を案内します。

BiND13までをご利用のユーザー様は、こちらのサポートサイトをご確認ください。

「エディタモード」の場合、ブロックエディタで画像を挿入したい位置にマウスカーソルを合わせ、
〈画像を挿入〉をクリックします。

スマートモードの場合は、画像をクリックし表示される<画像変更ボタン>から編集します。

画像ファイルを選択し設定します。

画像は、書式設定エリアからも設定ができます。

ご自身で用意された画像を使用されたい場合は、あらかじめパソコン内に保存している画像を「ユーザフォルダ」にアップロードしておく必要があります。
ユーザフォルダへの画像のアップロード手順は、「画像ファイルをアップロードする」を参照してください。

〈フォルダ〉

画像フォルダの一覧が表示されます。
※ご自身でアプリへ取り込み（アップロード）をされた画像は、「ユーザフォルダ」内に保存されています。
「materials素材検索」「materials素材取り込み」では、素材提供サービスmaterialsの素材を検索し、取り込むことができます。
「Unsplash 素材検索」では、Unsplashの画像を、取り込むことができます。

【materialsの利用について】
「materials素材検索」では、materials上のデータからキーワード検索し、検索結果から画像を選び、購入することができます。
「materials素材取り込み」では、実際にmaterialsで購入した画像一覧が表示され、BiNDにダウンロードし取り込むことができます。

購入した画像のダウンロード可能数は5回です。BiND上でダウンロードしても、ダウンロード可能数が減りますのでご注意ください。

画像一覧

各フォルダに保存されている画像が表示されます。

〈キャンセル〉

画像の選択をキャンセルします。

〈選択〉

画像の選択を確定します。

画像パーツを設定する

ここでは、あらかじめユーザフォルダにアップロードしておいた画像を設定してみましょう。設定したい画像が格納されているフォルダを選択し［1］、画像を選択し［2］、〈選択〉をクリックします［3］。

ブロックエディタで画像パーツが設定されたことを確認します。

画像パーツ一覧に表示されているパーツは以下の通りです。画像のサイズやALTテキストなどの設定を行う〈ソース〉タブと、画像をクリックした際の動作を設定する〈クリック設定〉タブに分かれています。

読み込み可能な画像ファイル形式は、JPEG、GIF、PNGなどです。

プレビューエリア

配置された画像のサムネイルが表示されます。

〈ソース〉

配置した画像の表示状態を設定する際に開くタブです。

〈編集〉

クリックすると、〈SiGN〉が起動して、選択した画像の拡大・縮小、回転、トリミングなどが行えます。SiGNの詳細についてはこちらを参照してください。

〈画像変更〉

画像選択画面を開き、使用する画像を変更します。

〈サイズ〉

画像サイズをピクセル単位、％単位で指定できます。

レスポンシブ形式では、出力サイズの自動調整も可能です。

〈コメント〉

画像に対するコメントを入力することができます。ここに入力したテキストは画像の下に小さな文字で表示されます。
コメントは画像に対するキャプション（説明文）のように利用できます。


コメントを設定した場合の表示です。

〈テキストの回り込み〉

画像に対するテキストの回り込みを、プルダウンメニューから〈左寄せ〉〈右寄せ〉で指定できます。


回り込みを左寄せに設定した場合の実際の表示です。

〈ALT〉

ALT（オルト）は、ブラウザ側で画像を非表示にしていた場合や、なんらかの原因で画像が表示できない場合、画像の代わりに表示されるテキストです。入力しない場合は画像のファイル名が表示されます。

ブラウザによっては、各ブラウザの仕様により、ALT項目の入力をしても表示されない場合があります。

【SEO対策】
SEOアシスタントで「画像にALTが設定されていません」と表示された場合の解決のヒント！

SEO対策の基本「検索エンジンに分かりやすいサイト」にするためには、積極的に設定しましょう。

サイト訪問者と違い、検索エンジンは人間のように直接画像をみることができないため、
通常であれば、画像の内容を読み取り把握することができません。

しかし、画像にALT設定という「画像情報を裏側でテキストとして持っておく」ことで、
検索エンジンにも該当画像の内容が理解でき、結果「検索エンジンに分かりやすいサイト」になります。

なお、ALTテキストは「犬」のようなシンプルな内容よりも、「遠くを見つめる茶色い犬」など、画像の特徴を表したテキストを記載しましょう。

クリックした際の動作を設定する

画像パーツ設定で〈クリック設定〉をクリックすると、画像が実際にクリックされた際の動作を設定できます

〈クリック設定〉

ソースで配置した画像をクリックした際の動作を設定。

〈なにもしない〉

画像をクリックしてもなにも起こらない設定です。初期設定では〈なにもしない〉が選ばれています。

〈リンクする〉

画像にリンクを設定する際に選択します。ポップアップメニューからサイト内の別のページを指定することや、外部のURLアドレスを入力してリンクを作成することもできます。

外部サイトにリンクを設定する場合は、画像パーツを選択した状態でリンク先のURLをURL欄に入力します。

▼メールリンク設定

クリックしすると、メールソフトが起動します。（指定したメールアドレスが既に宛先に設定された状態）
設定には、リンク先に以下の内容を入力してください。

　mailto:受信したいメールアドレス　　　例）mailto:info@xxxxxx.co.jp

▼電話発信リンク設定

スマートフォンでクリックすると、電話発信します。
設定には、リンク先に以下の内容を入力してください。

　tel:電話番号　　　例）tel:03********

※お使いのブラウザや閲覧環境により、すべての端末で動作可能ではありません。予めご了承ください。

画像内の一部分にリンクを設定したい場合や、1つの画像内に複数のリンクを設定したい場合は、
「画像内に複数リンクを貼る（イメージマップ）」を参照してください。

〈ページ遷移〉

リンク先への移動方法を設定します。〈ポップアップ〉を選ぶと、ポップアップウインドウにリンク先が表示されます。
ポップアップウインドウのサイズなどは、下図のダイアログボックスで変更できます。

ポップアップリンクをされる場合、セキュリティ上外部サイトへはリンクはできません。

〈拡大表示する〉

拡大時の画像がオリジナルのサイズで表示されます。

元画像のサイズが800×600px以下の場合、チェックの有無にかかわらず元の画像サイズで表示されます。

ロールオーバー効果を設定する

クリック設定の〈ロールオーバー画像〉をクリックすると、画像にマウスポインタを合わせたときに画像を変化させるロールオーバー効果を設定できます。
下図のダイアログボックスが表示されるので、〈ロールオーバー画像を使用する〉をオンにして［1］、ロールオーバー時の画像を設定して〈OK〉をクリックします［2］。

※ロールオーバーは、モバイル端末では動作いたしません。

〈画像編集〉

クリックすると、画像エディタウインドウが表示されて画像を加工することができます。詳細については「画像を追加して編集する」を参照してください。

明るさ設定

ロールオーバー時に画像の明るさを変更します。

〈開く〉

クリックするとアイテムブラウザが表示され、ロールオーバー時に表示する画像を選択できます。

画像をアップロードする

お好みの画像をBiND上にアップロードすることができます。ブロックエディタで〈画像を選択〉をクリックし、〈ユーザフォルダ〉をクリックしてから、クリックしてファイルを選択するか、ドラッグ&ドロップをして、画像を取り込みます。

※取り込める画像はPING、JPEGとなります。取り込み後、アプリ側でWebp画像に自動変換されます。Webp画像を新規で取り込むことはできません。

画像を変更したい場合は、ブロックエディタで変更したい画像を選択し［1］、画像変更をクリックし［2］、〈ユーザフォルダ〉をクリックしてファイルを選択するか、ドラッグ&ドロップをして、画像を取り込みます［3］。
また、画像ファイルを複数選択して実行することで、複数同時取り込みが可能です。

画像のアップロードが完了しました。アップロードした画像は、〈ユーザフォルダ〉に保存されます。

取り込める画像サイズ、形式は以下の通りです。
ファイルサイズの上限：10MB
対応拡張子：bmp,gif,jpg,jfif,jpe,jpeg,pct,pict,tiff,tif,png,psd

アップロードした画像を使用したい場合は、〈ユーザフォルダ〉をクリックします［1］。
使用したい画像を選択し［2］、〈選択〉をクリックします［3］。

【Gif画像の貼り付けについて】

GIFアニメーションは、画像とシステムの仕様の兼ね合いにより、リサイズ処理など編集が入ると静止画となります。
レスポンシブサイトでこちらを回避するには、

・該当のページの「ページ設定」内の「ページレイアウト」にてページ全体の横幅を100%指定にして該当のGIFアニメーションを設定したあと、ページ幅を元のpx指定に戻す

上記の設定をお試しいただくことで、アニメーションを維持することが可能となります。