できれば連載第一回目の記事から読んでください!
この連載は全体を通して一つの文章になっていますので、一部だけを取り出して解釈してしまうと間違った方向へのアドバイスになってしまうこともあります!
この連載は全体を通して一つの文章になっていますので、一部だけを取り出して解釈してしまうと間違った方向へのアドバイスになってしまうこともあります!
〜配置を考える〜
コンテンツ内での配置を考えます。
これはかなり重要です。
それぞれのパーツがキチンと作られていても、配置がダメなために全体がダメになっているサイトをよく見かけます。
たとえばボタンが4つ並んでいるとして、それぞれの間の間隔が1ピクセルでもずれると気持ち悪くなるものです。
1番目と2番目の間隔が10ピクセルなら2番目と3番目、3番目と4番目の間隔も10ピクセルにするなど。
また、外側のボタン(1番目と4番目)とページの端との間隔も左右(上下)で同じにするべきでしょう。
文字などの位置も、上だけ詰まっていたり、右が多く開いていたりすると気持ち悪いです。

上の画像はみどり同盟ブログのメニュータブを拡大したものですが、タブ部分全体の左右の間隔、各タブごとの間隔、中の文字までの間隔がそれぞれ同じになっているのはもちろん、文字のと文字の間隔も2ピクセルにと、厳密に調整しています。
注:Habboホテル公式サイトにはここまで厳密なデザインルールは定められていません。
このようにあらかじめ決めておいたデザインルールに則(のっと)って、正しく配置を決めていけば、ひとつ決まれば次もという具合にどんどん作業がはかどっていきます。
ですが、今回の企画の場合は、なんとなくみどり同盟ブログの『サイトマップ』のようなものになることが見えてきていますので、≪企画≫のところで出てきたように「机の上にばらばらに散らばる感じ」に画像をちりばめていきます。
「わざと崩した感じ」にするという、これはこれでかえって難しい配置方法です。
≪素材を作る≫で作った画像素材を≪プログラムを書く≫で書いたプログラムでコントロールし、それを一画面の中に配置していくというのが今回の作業になります。

こんな感じで画像をバラバラに配置していっていますが、このコンテンツは拡大・縮小機能を持っていますので、ただバラバラに配置していいわけではなく、縮小したときにどう見えるか、なんてことも考えて進めています。
実際にどうなったかは完成品でお確かめください。
配置も重要ということがわかっていただけたでしょうか?
これはかなり重要です。
それぞれのパーツがキチンと作られていても、配置がダメなために全体がダメになっているサイトをよく見かけます。
たとえばボタンが4つ並んでいるとして、それぞれの間の間隔が1ピクセルでもずれると気持ち悪くなるものです。
1番目と2番目の間隔が10ピクセルなら2番目と3番目、3番目と4番目の間隔も10ピクセルにするなど。
また、外側のボタン(1番目と4番目)とページの端との間隔も左右(上下)で同じにするべきでしょう。
文字などの位置も、上だけ詰まっていたり、右が多く開いていたりすると気持ち悪いです。

上の画像はみどり同盟ブログのメニュータブを拡大したものですが、タブ部分全体の左右の間隔、各タブごとの間隔、中の文字までの間隔がそれぞれ同じになっているのはもちろん、文字のと文字の間隔も2ピクセルにと、厳密に調整しています。
注:Habboホテル公式サイトにはここまで厳密なデザインルールは定められていません。
このようにあらかじめ決めておいたデザインルールに則(のっと)って、正しく配置を決めていけば、ひとつ決まれば次もという具合にどんどん作業がはかどっていきます。
ですが、今回の企画の場合は、なんとなくみどり同盟ブログの『サイトマップ』のようなものになることが見えてきていますので、≪企画≫のところで出てきたように「机の上にばらばらに散らばる感じ」に画像をちりばめていきます。
「わざと崩した感じ」にするという、これはこれでかえって難しい配置方法です。
≪素材を作る≫で作った画像素材を≪プログラムを書く≫で書いたプログラムでコントロールし、それを一画面の中に配置していくというのが今回の作業になります。

こんな感じで画像をバラバラに配置していっていますが、このコンテンツは拡大・縮小機能を持っていますので、ただバラバラに配置していいわけではなく、縮小したときにどう見えるか、なんてことも考えて進めています。
実際にどうなったかは完成品でお確かめください。
配置も重要ということがわかっていただけたでしょうか?