初めての方にも分かりやすく、順をおってwebサイトの作り方を紹介しています。

第6回は、”リンクをはる”です。

目次

作成ソフトはBiNDを使っています。説明はVer.10のものです。
BiNDはデジタルステージから購入してください。
https://www.digitalstage.jp  

その1   ページ構造を理解してから作り始める
その2  見た目はドレスに任せる
その3  記事の書き方
その4  画像の挿入
その5  ページを増やす
その6  リンクをはる
その7  メニューを作る
その8  ブロックを共用
その9  ヘッダを作る
その10  フッタを作る
その11  インデックスページの役割
その12  インデックスページの内容を作る
その13  ホームページを作る
その14  微調整する
その15  アップロードする

 

前回までで、ページを作り、内容を増やしました。
今回は、リンクについてです。
リンクがどういったものかは説明不要かと思います。
クリックしたりタップすると別のページへ移動するしかけですね。
リンクは、多くが文字にありますが、画像であったりボタンにあったりします。
インターネットがパソコンだけの時は、文字で問題ありませんでしたが、スマートフォンに適したリンクの表示も必要です。
リンクの設定、その表示を作っていきます。

ブロックエディタを開く

BiNDを起動してください。
サイトシアターが表示されたら、webサイトのアイコンの編集、このサイトを編集するとクリックします。
今まで作ってきたページが表示されました。
ウィンドウ上部の、このページを編集、をクリックして、ページの構造が見える編集モードにします。
リンクを設定したいブロックへカーソルをあわせて、左側に出るメニューから編集を選びます。
はい、ブロックエディタが開きました。
文字で書くと長いですが、10秒くらいの作業時間です、覚えてしまった方が早いです。

リンクの位置

ブロックエディタで、リンクを作りたい場所にカーソルもっていきます。
リンクが作られる文字を入力して、その文字の先頭から最後までカーソルをドラッグして選択状態にします。
ドラッグは、マウスのボタンを押したまま移動させる事です。

リンクはこの選択された文字に作られます。
ですので、いままで入力してきた文字も、選択状態にすればどこにでもリンクは作れます。
ただし、いきなりリンクがあってもなんのリンクかよく分かりませんから、どのページに進むリンクなのか分かる文字にすべきです。
また、リンクの位置もよく分かる場所が適当です。
ブロックエディタの上部からセンタリングを選んで、選択した文字だけ真ん中に移動させます。

リンクを設定する

では、実際にリンクを作ります。
ブロックエディタの右側、アイコンがたくさん並んでいるところから、リンクのアイコンをクリックしてください。

はい、これでリンクになりました。
簡単ですね。
ただ、このリンクがどういう働きをするのか設定が必要です。
それは、いま選んだブロックエディタ右側のアイコンがたくさんあった場所で設定します。
リンクを作ると、今までと見た目が違っていると思います。
ここで様々な設定をします。

まず、どのページに移動するのか指定しましょう。
右側のリンク先と書かれた下の枠、右側の三角をクリックします。
すると、このwebサイトの名前があります。
ここにマウスを合わせると今まで作ったページが表示されます。
移動させたいページをクリックしてください。

リンク先が設定できました。
BiNDはこの辺りは秀逸なんですよね。
webサイト内でのリンクはこのように超簡単です。

webサイト内でのリンクは上の方法ですが、インターネットの全く別のページへ移動させたい事があると思います。
その場合のやり方です。
移動先の設定は、上と同じ場所でやります。
違うのは、リンク先を三角から選ぶのではなく、枠の中にURLを直接入力します。

これでリンク先の設定ができました。

新規ウィンドウでリンク先を開く

このリンクは、クリックするとページが移動しますが、移動先のページは今ブラウザに表示されているページを書き換えて表示します。
つまり、今見ているページはブラウザの戻るボタンをクリックしないと見れません。
そうではなく、リンク先のページは、新たなウィンドウやタブに表示したい場合があると思います。
そういった時の設定です。

先程、URLを入力した下のほうにターゲットというボタンがあるのでクリックしてください。
ターゲットウィンドウが開きました。
これが、リンク先のページをどのように開くかの設定です。
ターゲットという枠の右側の三角をクリックするとメニューがでます。
ここから、_blankをクリック、OKをクリックします。

この設定で、リンク先のページは新たなウィンドウに表示されます。
他にも設定がありますが使いません。
新たなウィンドウで開きたい時は、blank。
それ以外の場合は、設定不要です。

では、ブロックエディタの適用をクリックして今回の変更を確定してください。
しばらくお待ち下さいが、消えたらその横の閉じるをクリックします。
ウィンドウ上の編集を終了するをクリックしてプレビューモードに戻ります。
リンクを作った文字にポインタを合わせると、文字の色が変わると思います。

リンクを見やすく

リンクができたはできましたが、これがリンク？って感じですね。
文字の文言からなんとなく分かる程度です。
パソコンならこれでも良いと思いますし、文中に出てくるリンクならこのままで構いません。
ただ、スマートフォンではスルーされるでしょう。
されなくても、タップしずらいです。
ですので、もっとタップしやすく、見やすいリンクに変更します。

変更するには、画像を用意するパターンが多いです。
画像のリンクはわかりやすいです。
慣れてきたら画像を使っても良いでしょう。
今回は、もっと簡単にスタイルシートを使います。
スタイルシート？…どこかで聞いたような、そうです、ドレスの元ネタですね。
ドレスも簡単でしたが、今回も難しくありません。

ここまでやってきたリンクを設定するところまで操作してください。
ブロックエディタが表示されましたか？
先の設定でブロックエディタの中にリンクができています。
まず、これをクリックします。
四角の枠に緑の縁取りができて選択されていることが分かります。
これをすると、右側のところの表示変わって、設定が現れます。
ここの１番下、デザインと書いてある枠の横の三角をクリックします。

リンクのデザインウィンドウが開きました。
下の方にいろいろ細かくありますが、ここはいじらないで。
はじめに、class名の横の枠の三角をクリックして出てきたメニューから.btn-defaultを選びます。
こういう訳のわからん英語はいらんのですが、ここだけです。
何をしているのかというと、今後、見た目が同じリンクのデザインを作ったほうが良いので、その時にこのclassから.btn-defaultを選ぶと同じのになるよ、ということです。
ですから、今回はデザインを選びますが、以降はclass名から.btn-defaultを選択するだけです。

では、デザインを選びましょう。
その横のテンプレートをクリックします。
いろいろ出てくると思いますので、お好きなものを選びます。
選んだら、OKで前のウィンドウに戻り、保存をクリックします。
ブロックエディタに戻ったら適用をクリックして今回の変更を確定。
閉じてからプレビュー画面にてください。

リンクがボタンに変わりました。
このウィンドウの右上にあるスマートフォンっぼいボタンをクリックしてスマートフォンでの表示を確認しましょう。
タップしやすくなりましたね。

以上で、リンクをはるは終了です。
次回は、メニュー作りをします。

素人でもwebサイトが作れる方法

第4回は、”画像の挿入”です。

目次

作成ソフトはBiNDを使っています。説明はVer.10のものです。
BiNDはデジタルステージから購入してください。
https://www.digitalstage.jp  

その1   ページ構造を理解してから作り始める
その2  見た目はドレスに任せる
その3  記事の書き方
その4  画像の挿入
その5  ページを増やす
その6  リンクをはる
その7  メニューを作る
その8  ブロックを共用
その9  ヘッダを作る
その10  フッタを作る
その11  インデックスページの役割
その12  インデックスページの内容を作る
その13  ホームページを作る
その14  微調整する
その15  アップロードする

画像の単位はピクセル

前回までで新しいページに文字を書き込みました。
今度は、画像を挿入したいと思います。

画像は、パソコンで使うデジタル画像です。
紙にプリントしたものは使えません。
カメラはデジタルカメラです。
デジタルカメラで撮影した画像をwebページに挿入します。

デジタルの画像には大きさがあります。
単位はピクセルです。
アルファベットではpx。
どうしても使わないといけない単位なので、しかたありません、覚えるしかないです。
画像の単位はピクセルです。

画像は大きく

デジタルの画像は、どんな大きさでも良いのかというとそうではありません。
大きい方が良いのですが、ちょっと厄介なのは、画像がパソコンで必ずそのままの大きさで見えない点です。
？
大きい画像が大きく見えて当然ですよね。
パソコンでの画像は、拡大と縮小が簡単にできてしまうのがその原因です。
画像が最初から持っている大きさはそのままに、ディスプレイに表示する見た目の大きさだけ大きくなったり小さくなったりします。
画像を扱うソフトが自動調整したりするので分かりにくいです。
ですので、見た目の大きさで判断するのではなく、どのくらいのピクセルの画像なのかで大きさは判断してくだい。

また、画像が最初から持っている大きさを変更することもできます。
小さいピクセルの画像をすごく大きく拡大することも、その逆も簡単です。
ですが、小さいピクセルの画像を大きく拡大しても、拡大した部分の情報が追加される訳ではありません。
フィルムの写真だったら、引き伸ばしても多少ぼやける程度ですし、コピー機でも同様です。
けれど、デジタルの画像はそうはいきません。
拡大すると、その画像の最小単位が拡大するので、ガタガタの画像になってしまいます。
なので、小さいピクセルの画像を大きく拡大はできません。
ただ、逆の場合。
ピクセルの大きな画像を縮小した場合は、途中のピクセルを端折っているだけなので、画像が汚くなりません。
webページではこの拡大縮小が頻繁にあります。
ですので、最初からピクセルの大きな画像を用意しておく必要があります。

横幅3000ピクセル

どの程度のピクセルの大きさが必要なのか？
おおよそ横が3000ピクセルくらいあれば全く問題ありません。
横が2000ピクセルくらいまでなら大丈夫です。
それって私のデジカメでも大丈夫？とお思いでしょう。
iPhone7の外側のカメラで撮影すると、おおよそ3000×4000ピクセルです。
ですから、最近のデジカメなら使えると思います。
よくデジタルカメラの性能で比較される、画素数でいうとiPhone7は1200万画素なのでそのくらいのものです。

加工しても小さくしない

少し注意しておきたい点があります。
パソコンの操作などに慣れて、画像を扱えるようになると加工したくなります。
いらない所を切り取ったり、傾きを直したり、色合いを変えたり、別の画像と合成したり、そんな事をやりたくなってしまうものです。
画像は目立つのでそういった加工は積極的にすべきです。
ただし、加工をする時に大きなピクセルの画像が大きすぎるからといって小さいピクセルにしてはいけません。
3000ピクセルの画像を100%の大きさでパソコンに表示すると、それはそれは大きく見えます。
ですが、その大きさが正しい大きさです。
加工しずらい時は、見た目の表示を小さくできる機能が加工するソフトに必ずついているので、それを使って表示だけ小さくしてください。
決して、解像度の変更で500ピクセルなどと打ち込んではだめです。

1ページ3枚

それでは、カメラを持って画像を撮影してください。
1ページにつき3枚をめやすにしてください。
100ページ作るのなら300枚です。
たくさん撮影しましょう。
撮影したらパソコンに取り込みます。

ブロックエディタを開く

ここからBiNDの作業になります。
BiNDを起動してサイトシアターから自分のwebサイトを選んで編集をクリックします。
右下のサイトを編集をクリック。
プレビューの画面になったら上の方にあるページを編集するをクリックして編集モードへ
ページの構造が表示されたら、メインのところにポインタを持っていき、表示されるメニューから編集をクリックします。
はい、ブロックエディタが表示されました。
毎回毎回このパターンですので、ブロックエディタの表示方法は、初めに覚えてしまってください。

画像の挿入方法

前回入力した文字があると思います。
この文字の途中に画像を挿入します。
画像は、文字と同じようにカーソルの位置に挿入されます。
改行して場所を作り、カーソルをその位置に移動して右側のアイコンがたくさん並んだところから画像を選択をクリックします。

画像の選択ウィンドウが開きます。
ここから画像を選びます。
すでに、BiNDをインストールした時点で使える素材が用意されています。
自分の画像を使いたい時は、ここに一旦画像を登録しなければなりません。
ここがちょっと面倒で、自分パソコンのものを直接選んで使えません。
仕様です。
画像を登録するには、左側のユーザフォルダを選んでからこのウィンドウに画像をドラッグ&ドロップしてください。

画像がたくさんになって分類したい時は、フォルダ+のアイコンをクリックするとフォルダ分けできます。
この画像選択ウィンドウは、BiNDで共用です。
まったく別のwebサイトを作っていても同じウィンドウが開くのでかなり細かく分けておいたほうがわかりやすいです。

では、画像を挿入しましょう。
挿入したい画像をクリックして選んだら、右下の選択ボタンをクリックします。

画像が挿入されました。
ブロックエディタ内でもそれらしく画像が見えていますが、あくまでここに画像があるくらいに思ってください。
ページでの見え方は全く違います。

ブロックエディタの右下にある適用ボタンをクリックして今回の変更を確定します。
お待ち下さいが消えたら、適用の左にある閉じるボタンをクリックします。
最後に上の真ん中にある編集を終了ボタンをクリックしてプレビューの画面に戻ります。

大きい表示は問題ない

画像がバーンって入りましたね。
ちょっと大きすぎやしませんかと思われますか？
BiNDでは、画像の大きさは自動で調節されます。
というのもこのページがレスポンシブのページになっているので、パソコンで見た時とスマートフォンで見た時にどちらにも最適に見えるように調整しているためです。
右上のほうにパソコンとスマートフォンっぼいアイコンがあると思います。
これのスマートフォンをクリックしてください。
スマートフォンでの表示に切り替わります。
どうですか？
画像が大きすぎるでょしうか。

そうです、スマートフォンでの表示はちょうど良いバランスです。
これを、パソコンでは大きすぎるからもっと小さい大きさにしてしまうと、今度はスマートフォンでの表示がおかしくなってしまいます。
なので、画像の表示は自動で調整のまま変更しません。
慣れてくれば、パソコンとスマートフォンで大きさを変えたりもできます。
できますが、今はしません。

先の右上のアイコンでパソコンぽいものをクリックすると元の画面に戻ります。

これで、画像の挿入は終わりです。
次は、ページを増やすを説明したいと思います。

#5 ページを増やすへ

BiND for weblife*を使った、素人がWebサイトを作る方法の紹介です。

第3回は、”記事の書き方”です。

見出しを使う

新しいページを作り、その見た目を決めました。
今回は、いよいよ記事作りをしていきます。

ええー、記事なんていいから、画像をバーンって貼り付けて、ちょこっと文字書けばいいじゃん…
私はそう思っていました、記事作りなんて面倒くさそうですもんね。

ところで、そのバーンっていう画像は、何の画像？
ちょこっとの文字は、何について書いてあるの？
ページを訪れた人は、そのページで知りたい情報を探しています。
パッと見た時に、すぐそれが自分の知りたい情報かどうか分からないといけません。
そもそも、そのページは何についてのページなのかも分からないのではどうしようもないですね。
まず、このページが何のページなのか知らせる必要があります。
そして、ページの内容についても分かりやすくしておくべきです。
そのために必要なのは、見出しです。

見出しを使う2つの意味

作文の題、新聞のタイトル、見出しがあると何についての情報なのがひと目で分かります。
ですので、webのページの記事でも、見出しを最初に作ります。
見出しなんてちょっと文字でも大きくしておけばいいんじゃないの、とお思いでしょう。
確かにそのとおりです。
ですが、その文字どのくらいの大きさにします？、色はどうでしょう。
1ページずつ見出しの文字を変えて作ってみたものの、100ページ目でやっぱりもう少し大きい方が良いななんて事があるかもしれません。
そうなると100ページ分全部やり直しです。
私は近い事をしました、とても大変な作業でした。

見出しと決めた文字が、webサイト全体どんな場所でも同じ大きさ色で、設定を１ヶ所変えると全部変更になったら便利ですよね。
前回でやった、見た目をドレスで設定していればそうなります。
ページに見出しの設定をしておくということは、見に来た人にわかりやすくする意味と、修正がむちゃくちゃ楽になる2つの意味があります。
ドレス選びの時に、見出しに注目してくださいと言ったのはこのためです。
見出しは重要です。

BiNDを起動

それでは、記事を見出しに注意して書いていきましょう。
BiNDを起動してください。
サイトシアターです。
編集をクリックします。

サイトを編集をクリックです。

ブロックエディタを開く

文字の入力などをする時は、モードを変えなくてはなりません。
ここだけ独特です、慣れてください。
中央上のページを編集するボタンをクリックします。

編集を終わる時は、同様に編集を終わるをクリックします。
つまり、編集モードではないこの画面はプレビューだと考えてもらうとわかりやすいです。
右上のほうにプレビューのボタンもありますが、これは実際にブラウザで表示するもので、見た目はほとんど同じなので使いません。

編集するをクリックすると、画面が全然別の表示になりますが、慌てる事はありません。
#1でも見ましたね。
#1で学んだページの構造が書いてあるだけです。

ここで、編集したい場所にカーソルをあわせます。
ページの構造について簡単におさらいしておくと、上からヘッダ、ビルボード、メイン、フッタです。
ヘッダには、お店のマークとかロゴ、メニュー。
ビルボードには、大きな画像とかスライド表示するやつ。
メインが記事とか動画や地図の貼り付け、フォームなど。
フッタがサイトマップとか住所などです。

今回は、記事を書くので、メインにカーソルを持っていきます。
すると、その枠の左上にメニューが表示されます。
ここの編集をクリックします。

これで、文字の入力などができるウィンドウが開きました。
このウィンドウをブロックエディタといいます。

ブロックエディタ！

BiND独特のやり方なのですが、正直面倒です。
プレビュー画面でいきなり編集できたほうが簡単そうです。
ただ、このブロックエディタは機能がめちゃくちゃ豊富です。
なので、面倒ではあるのですが結果的に効率が良いやり方ですから、慣れてください。
文字を入力したり画像を追加したり編集したくなったら、最初にウィンドウ上のこのページを編集。
そして、ブロックエディタを開くです。
百万回同じ事を繰り返します、早く覚えてしまってください。

見出しの種類

ブロックエディタが開いたら、左側に本文と表示されて所にカーソルがありますので、ここにを文字を入力します。
さて、記事はどのように書けば良いでしょうか？
もちろん、見出しに注意して書くのですが、見出しといっても具体的によくわかりませんね。
ブロックエディタの上の方に段落のスタイルというボタンがあります。
これをクリックしてください。

出てきたメニューが見出しです。
特に右側に<h1>のようにh＋数字のものが大切です。
見出しは単に長い文章の前につければ良いのではなく、分類しながら付けます。

見出しは分類

分類しながら？？
なんのこっちゃとなるはずです、私もそうでした、適当に使ってました。
例をあげて説明してみます。
バナナの記事を書きます（例です）
バナナについて長々と単に書いても、ページを見に来た人は読んでくれません。
その人はバナナについてはだいたい知っているけれど、フィリピンのバナナの味についてだけ知りたいからです。
そこで、見出しを考えます。

まずこのページはバナナについてのページだ→ページタイトル<h1>
フィリピンのバナナについてはこの辺り→タイトル<h2>
フィリピンのバナナの味はここ→大見出し<h3>
さらに詳しくするなら、
フィリピンのバナナの味の中で酸味については→小見出し<h4>

このように<h1>から<h4>に向かって、詳細な情報になるように分類しながら見出しを付けます。
こうする事で見に来た人が欲しい情報に簡単にたどり着けます。
もちろん、<h1>の下にフィリピンだけではなく、インドネシアのバナナだとかタイのバナナとして<h2>をいくつも置くことになるでしょう。
もちろん、<h2>の下にバナナの味だけではなく、サイズとか色とか<h3>をいくつか置きます。

見出しの設定

なるほど、見出しで分類するわけね、けど、実際の作業はどうすればいいでしょう。
見出しにしたい文字の１番後ろにカーソルをもって来て、先の段落のスタイルメニューから、適用したい見出しを選ぶだけです。

すると、左側にあった、「本文」がそれぞれの見出しに変化します。
若干、ブロックエディタ内の文字も変化しますが、これはあてにならないので参考程度に。

見出しを作ったらその後に文章を書いて記事を完成させます。
完成したら、右下にある適用ボタンをクリックします。

ページの構造画面に戻るので、編集を終了するをクリックします。

見出しが適用されたページになりました。
今までは真っ白なページでしたが、ドレスで選んだ色になっています。

んーなんかイメージと違うなーと思ってもがまんしてください。
大丈夫、意外と最終的にはいい感じになります。
小さな所にこだわるのではなく、webサイトを完成させることを優先しましょう。

以上が記事の書き方でした。
次回は、画像を挿入を説明します。

#4  画像の挿入へ

第2回は”見た目はドレスに任せる”です。

目次

作成ソフトはBiNDを使っています。説明はVer.10のものです。
BiNDはデジタルステージから購入してください。
https://www.digitalstage.jp  

その1   ページ構造を理解してから作り始める
その2  見た目はドレスに任せる
その3  記事の書き方
その4  画像の挿入
その5  ページを増やす
その6  リンクをはる
その7  メニューを作る
その8  ブロックを共用
その9  ヘッダを作る
その10  フッタを作る
その11  インデックスページの役割
その12  インデックスページの内容を作る
その13  ホームページを作る
その14  微調整する
その15  アップロードする

見た目とは

#1ではページを作り、ページの構造を紹介しました。
今回は、ページの見た目について説明します。
見た目はいいから、とりあえず内容を作っていこうよとお思いかもしれせん。
ところが、作り始めるとそうは言っていられなくなるものです。
いろいろな格好いいサイトを見たりすると、あんな感じにしたくなります。
白の背景に黒の文字だけでは味気ないですからね。

では、そもそもページの見た目とは何でしょう？
背景？色？文字とかの大きさ？
どれも正解です。
ひとつ注意すべきはページ全体はもちろん、webサイト全体で同じ見た目にする事。
あまりにも見た目が違うと、別のwebサイトに飛んだのかと思われます。

素人的なやり方

では、どうやって同じ見た目のページをたくさん作ればいいでしょう。
素人の私は考えました。
まずタイトル的な文字を入力してそこだけ大きく。
改行や空白を多用して良い感じのスペースを作り、背景や文字の色を変えたページができたら、それを複製していけば良いだろうと。
完全に素人が陥る間違いです。
ワープロで作る書類ならそれでも大丈夫だったかもしれませんが、webのページではまったく使い物になりません。
なぜなら、webではページを見る人の環境がバラバラだからです。
自分のディスプレイで良い位置で文字が折り返されていても、それと同じように見ている人はいないと思った方が良いです。
せっかく作った改行も空白もただの汚い表示です、すべての人がA4サイズとか同じ物ではないのです。

スタイルシート＝ドレスを使う

それなら、どうやって見た目が同じページを作るのかというと、スタイルシートを使います。
ああ、また出たとお思いでしょう。
それでなくても特殊な作業なのに、また訳のわからないものが登場したと私も思いました。
なので、スタイルシートについては説明しません。
同じ見た目のものを作る手段だと覚えておけば構いません。

BiNDには、スタイルシートを設定できる機能があります。
BiNDではスタイルシートとは呼ばずドレス(Dress)といいます。
つまり、ドレスで見た目を決めれば、ページ全体の見た目はもちろんwebサイト全体の見た目が同じになります。
いちいち文字の大きさを変えたり、ここはボールド、こっちは黄色なんて作業は必要ありません。
ものすごく便利です。

よく、大見出しみたいな文字の左側にタテの棒があって、なんだかちょっとおしゃれっぽいページなんかがあると思います。
ああいったものを作っているのもスタイルシートです。
画像を挿入している訳ではありません(私はずっとそう思ってた)。
したがって、BiNDで言うところのスタイルシート、ドレスで決めた見た目でページやwebサイトのイメージが大きく左右します。
最初にこのイメージを決めてしまうとwebサイト作りがはかどる訳です。

ドレスの設定

それでは、実際にドレスの設定をしていきましょう。
BiNDを起動してください。
サイトシアターになります。
前回作ったwebサイトにマウスを合わせると編集と表示されるのでクリックします。

右下、このサイトを編集をクリックします。

#1で作ったページが表示されました。
ここにはまだドレスが設定されていません。
画面右上のドレスアイコンをクリックして設定画面を開きます。

ずらーとテンプレートが出てくるので、この中から自分の好きなものを選ぶ事で見た目を設定できます。
とは言ってもたくさんあるし、おしゃれな画像とかあってよくわからないかもしれません。

ドレスの選び方

画像は無視してください、関係ありません。
まず、どれでも良いのでクリックします。
すると詳細がすぐ下に吹き出しのように表示されます。
この吹き出しの中に注目します。

ここもなんだかごちゃごちゃしていて分かりにくいですが、チェックすべきは多くないので慌てずに。
よく見てみると左上に、ビルボードとかメインとか小さく書いてあります。
そうです、#1で覚えたページの構造です。
ドレスではひとつのページすべてを同じ見た目にしていません。
ビルボードやメインなどで少し変化をつけています。
コーディネートです。
つまり、構造の場所によって、見た目が少し違います。
下の画像では、ビルボードの背景は白ですが、メインでは灰色です。
けれど文字の色は同じですね。

全体のバランスと見出し

#1でやった構造の順番を思い出してください。
ページはヘッダを１番上にフッタを１番下としています。
その全体の流れをこの画面で確認してください。
背景色や文字の色、バランスそんな感じです。

次にチェックするのは、メインの中などにある【大見出し】とかです。
かっこに囲まれたものがいくつか種類があると思います。
今後、目立つところでこれを多用するので重要です。

その他はそれほど気にしなくても大丈夫です。
上の2点を重点的に自分の作るwebサイトのイメージにあったものを選んでください。
決まったら、右下の適用ボタンをクリックします。

はい、これで見た目が決まりました。
あっけないくらい簡単です。
簡単なので、ドレスを後から変えたくなります。
なりますが、あれこれ悩んでいろいろ試さない方が良いと思います。
悩んでいるとあっちが気になったりこっちが気に入らなかったり、本来すべき「情報の発信」ができなくなってしまいます。
ドレスは完璧ではないですが、そこそこ良い見た目です。
これと決めたら、あとはそのドレスを信じて、多少気になってもこだわり過ぎずにwebサイト作りを進めるべきです。

次回は、記事の書き方を紹介したいと思います。

#3 記事の書き方へ

第1回は”ページ構造を理解してから作り始める”です。

作成ソフトはBiNDを使っています。説明はVer.10のものです。
BiNDはデジタルステージから購入してください。
https://www.digitalstage.jp  

その1   ページ構造を理解してから作り始める
その2  見た目はドレスに任せる
その3  記事の書き方
その4  画像の挿入
その5  ページを増やす
その6  リンクをはる
その7  メニューを作る
その8  ブロックを共用
その9  ヘッダを作る
その10  フッタを作る
その11  インデックスページの役割
その12  インデックスページの内容を作る
その13  ホームページを作る
その14  微調整する
その15  アップロードする

全15回、順番に読んでいただくとwebサイト作りができるようになります。

練習しない

それではwebサイトを作っていきましょう。
いきなり本番のサイトを作ります。
とりあえず練習はかえって効率が悪いです。
本番を作りながら覚えていきます。

自由に作成を選ぶ

BiNDを起動してください。
BiNDを立ち上げるとサイトシアターというウィンドウが出てきます。
業者の方とかがいろんなサイトを作った時に一覧が出ると嬉しいやつです。
作ったサイトはここに表示されるので、次からはここのアイコンから編集を選んで続きの作業をします。

サイトシアター右上のサイトを新規作成ボタンをクリックします。
どんな方法でサイトを作り始めるのかの画面になります。

左の2つが簡単そうに思えますが、使いません。
テンプレートではあらかじめ、見栄えの整ったwebサイトが出来上がっています。
自動作成もそうです。
これをちょっと手直しすればできそうな感じがします。
実は、テンプレートで作られたページは、ガッチガチに固められています。
それをなにもしなければ良いのですが、ちょっと手直しのはずが、結構いじってしまいます。
少なくとも私はそうでした。
すると、表示がめちゃくちゃになってしまいます。
上級者の皆様はどうしてそうなったのか分かっていますが、私のような素人は元に戻すことすら困難。
BiNDはオートセーブなので、適用ボタンを押した瞬間に元に戻すことはできません。
ですので、ここでは右の自由に作成［上級者向け］を選んでください。
素人こそ自由に作成を選んで基本的な事を理解してからwebページを作ります。

自由に作成をクリックしてください。
アラートが出るのではいをクリックします。

はい、これでなにも書いていないページがひとつだけののサイトができました。
そんなのは、できたと言わないとお思いでしょう。
しかし、これも立派なサイトなのです。
このページのファイル以外にもいくつかファイルが作成されていますし、このページ自体も何も書かれていないようですが、そう表示するためのコードが書いてあります。
これを一瞬で作ってしまうすごいソフトです。

ページの構造が大切

できたは良いですが、これでは何の情報もありません。
文字や画像を置いていきたくなりますが、それは後の事。
まず、何がなんでも、理解していただきたい事があります。
それは、ページの構造です。
ページの構造？
webページは、ワープロの書類に似ているようですが、全然違います。
何でも適当な位置に好きなように配置できません。
できない事もないのですが、すべきではありません。
webページ作りの暗黙のルールがあるためです。
配置する場所が決まっていて、その場所の名前も付いています。
いったいどんな名前がどこにあるのか、見てみましょう。

BiNDで見てみる

新しくできたページのウィンドウで左上の歯車アイコンをクリックすると設定画面になります。
ここで、上のページ設定タブ→下のページレイアウトタブをクリックします。
左側に見える小さなアイコン「ページレイアウト」がページ構造を表しています。

構造を他のサイトと同じにする

いつも見ているインターネットのページを思い出してください。
１番上にメニューとか大きな画像、その下に主な内容、その両サイドにバナーとかメニューではないでしょうか。
インターネットのほとんどのサイトがこの構造をとっているので、見に来た人がサイト内の操作に迷うこと無くページを行き来できます。
全く無視しても作れますが、よほどインターフェイス作りに自信なければメリットがありません。

サイドは使わない

この構造は、数種類あります。
どのページ構造にするのか決めます。
先のページ構造アイコンをクリックすることで、構造が選べるようになります。
メイン＋サイドが良さそうな感じですが、これはやめておきます。
なぜなら、このwebサイトはレスポンシブです。
レスポンシブとは、PCで見たときとスマートフォンで見たときにレイアウトが自動で変化するページです。
サイドの情報はスマートフォンで見るとメインの下になってしまいます。
表示する内容によっては使えなくもないですし、パソコンとスマートフォンで表示を分けることもできます。
けれど、慣れないうちはやめておきましょう。
ですので、ここではビルボード+メインです。

ビルボード＋メインをクリックしたら、右下の適用をクリック。
そのすぐ左側閉じるをクリックして変更を確定します。

それぞれの役割

では、実際に構造の名前と役割を説明します。
ビルボード+メインのページ構造です。
さっきの小さなアイコンでは分かりにくいので大きくします。
ウィンドウ上のページを編集をクリックしてください。
このボタンは、ページに文字や画像を追加する時に必ずクリックするボタンです。
なにかしたいと思ったら、これを真っ先にクリックしてください。
めちゃくちゃよく使うボタンです、覚えてください。

ウィンドウの表示が変わりましたね。
色付きの線で囲まれているのがページの構造です。
名前も書いてあります。
これでどのようになっているのかわかりやすくなりました。

ページは１番上のヘッダと１番下のフッタに挟まれています。
ヘッダにはサイトのロゴとか名前、メニューを置きます。
他の情報も置けますがそれだけにしておくことで、作る側も見る側も分かりやすくなります。
フッタには、サイトマップと住所や電話番号といった情報とcopyrightなどです。

ヘッダの下はビルボードです。
トップページなどでスライドする大きな画像なんかが表示されている事が多いです。
スライド表示は見た目が派手なので使いたくなってしまいますが、ビルボードだけで使います。
説明的なページなどはビルボードは空白に、逆にここぞというページにはビルボードを活用する感じです。

ビルボードの下がメイン。
ページの主な内容を作るスペースです。
文字や画像、動画や地図の貼り付け、フォームの表示などはここです。
以上がページの構造です。
4種類しかありません。
単純です。
が、すごく重要なので理解しておいてください。

BiNDを終了する

前の画面に戻るには、ウィンドウ上の編集を終了するをクリックします。
これで、元の画面に戻りました。
この画面では編集できません。
編集したくなったら、もうお分かりですよね。
BiNDを終了するには、上のメニューをクリックすると、BiNDを終了と表示されるのでクリックします。

このようなページの構造に従って、ページ作りをしていきます。
それぞれの場所の役割も決まっていますので、おおよそのイメージもつかめたと思います。

オリジナルを求める方へ

いやいや、俺は俺のwebサイトを作る！ヘッダだのフッタだのいらない！
という方もいらっしゃるかもしれません。
それはそれで結構です。
けれど、見る側は情報を探しています。
できるだけ見に来た人が探しやすいwebサイト作りが求められています。
そのためには、いまどきのwebサイトの構造に沿って作るのが近道なのです。
俺のサイトはこのwebサイトが出来上がってからでも遅くはありませんよ。

次回は、見た目を決定するやり方について説明します。

#2 見た目はドレスに任せるへ