ページの演出〜見栄えの良いページを作る〜 １．グループ化 ページをデザインする上でもっとも基本的なテクニックが「グループ化」です。グループ化とは同じグループの要素を近づけ、違うグループのものは離す。といった操作のことで、文章や写真をグループ化すると視覚的に一目で情報の概要がつかめる様になります サンプル−グループ化されていない文章 ○井上委員 抑えていかなければならないというものがどういうものかということを具体的に私はお聞きをしたんですけれどが、再度、抽象的なお言葉でお話しがございましたので、もう一度具体的に、どういうところを抑えていかなければいけないのかちょっとお教えをいただいておければ参考になると思います。よろしくお願いいたします。 ○立木会長はい、どうぞ。 ○石井委員 具体的にといいましても、なかなか申し上げにくいんですけども、にくいというよりもわかりにくいところがあるんですけども、これから建設計画をいろいろ考えていかれるだろうと思います。その建設計画の中でスクラップ・アンド・ビルドを十分頭の中に入れながらやっていただきたいと、そういう気持ちでございます。 以上でございます。 ○立木会長はい、どうぞ。 ○妹尾委員 川上町の妹尾です。今、協議事項第１９号の２で、病院、診療所の取り扱いについてというとこで今の議論ができてると思うんですが、私以前にも行政っていうのは何をしなきゃいけないかということを言ったと思うんですが。 上のグループ化されていない文章を全体の内容によって分けると下のようになります。 サンプル２−段落のみグループ化した文章 ○井上委員 抑えていかなければならないというものがどういうものかということを具体的に私はお聞きをしたんですけれどが、再度、抽象的なお言葉でお話しがございましたので、もう一度具体的に、どういうところを抑えていかなければいけないのかちょっとお教えをいただいておければ参考になると思います。よろしくお願いいたします。 ○立木会長 はい、どうぞ。 ○石井委員 具体的にといいましても、なかなか申し上げにくいんですけども、にくいというよりもわかりにくいところがあるんですけども、これから建設計画をいろいろ考えていかれるだろうと思います。その建設計画の中でスクラップ・アンド・ビルドを十分頭の中に入れながらやっていただきたいと、そういう気持ちでございます。 以上でございます。 ○立木会長 はい、どうぞ。 ○妹尾委員 川上町の妹尾です。今、協議事項第１９号の２で、病院、診療所の取り扱いについてというとこで今の議論ができてると思うんですが、私以前にも行政っていうのは何をしなきゃいけないかということを言ったと思うんですが。 配置にデザイン性を加えて見出しを強調します。 サンプル３−段落のみグループ化した文章 ○井上委員 抑えていかなければならないというものがどういうものかということを具体的に私はお聞きをしたんですけれどが、再度、抽象的なお言葉でお話しがございましたので、もう一度具体的に、どういうところを抑えていかなければいけないのかちょっとお教えをいただいておければ参考になると思います。よろしくお願いいたします。 ○立木会長 はい、どうぞ。 ○石井委員 具体的にといいましても、なかなか申し上げにくいんですけども、にくいというよりもわかりにくいところがあるんですけども、これから建設計画をいろいろ考えていかれるだろうと思います。その建設計画の中でスクラップ・アンド・ビルドを十分頭の中に入れながらやっていただきたいと、そういう気持ちでございます。 以上でございます。 ○立木会長 はい、どうぞ。 ○妹尾委員 川上町の妹尾です。今、協議事項第１９号の２で、病院、診療所の取り扱いについてというとこで今の議論ができてると思うんですが、私以前にも行政っていうのは何をしなきゃいけないかということを言ったと思うんですが。 論議参加者 ○井上委員 ○立木会長 ○石井委員 見出しや文章に強弱を付けたり装飾を施します。 論議参加者 ○井上委員 ○立木会長 ○石井委員 ○井上委員 抑えていかなければならないというものがどういうものかということを具体的に私はお聞きをしたんですけれどが、再度、抽象的なお言葉でお話しがございましたので、もう一度具体的に、どういうところを抑えていかなければいけないのかちょっとお教えをいただいておければ参考になると思います。よろしくお願いいたします。 ○立木会長 はい、どうぞ。 ○石井委員 具体的にといいましても、なかなか申し上げにくいんですけども、にくいというよりもわかりにくいところがあるんですけども、これから建設計画をいろいろ考えていかれるだろうと思います。その建設計画の中でスクラップ・アンド・ビルドを十分頭の中に入れながらやっていただきたいと、そういう気持ちでございます。 以上でございます。 ○立木会長 はい、どうぞ。 ○妹尾委員 川上町の妹尾です。今、協議事項第１９号の２で、病院、診療所の取り扱いについてというとこで今の議論ができてると思うんですが、私以前にも行政っていうのは何をしなきゃいけないかということを言ったと思うんですが。

２．メリハリをつけたページの制作

ページを制作する上でタイトルや写真など強調したい部分を大きく配置し、逆に補助的な部分は思い切って小さくレイアウトすることで見た人が「このページがどんなホームページなのか」と一目で把握できるようになります。 サンプル１．下のような観光地の紹介サイトを作ったとします。 今の状態ではメリハリがなく「だら〜」とした印象を受けます。 高梁海岸へようこそ！ 冬は空気が澄んでいて対岸の高梁半島や三浦の山々がとても美しく見えます。 カメラや双眼鏡をもって高梁海岸で自然を眺めるのには絶好の季節です。 午前中砂浜を歩いたら、福の家で『まぐろ丼ランチなどいかがですか！ 今月のランチまぐろ丼定食は南まぐろでつくる“鮪のメンチカツ”のセットです。 サンプル２．タイトルや文字の頭に装飾を加え、あまり意味を持たない は空気が澄んでいて対岸の高梁半島や三浦の山々がとても美しく見えます。 カメラや双眼鏡をもって高梁海岸で自然を眺めるのには絶好の季節です。 午前中砂浜を歩いたら、福の家で などいかがですか！ 今月のランチまぐろ丼定食は南まぐろでつくる のセットです。

３．揃える・繰り返す

「揃っている」ページと「揃っていない」ページを比べると、完成度に驚くほどの違いが現れます。 極端な話、ページは揃っていれば揃っているほど完成度が高まりきれいに見えます。 更に言えば「左揃え」を多用することで見栄えの良いページを作ることが出来ます。 さらに繰り返す表現を使用することで見た目の印象が強くなります。 ■ボタンを揃える サンプル１（悪い例：それっていないボタン） 大きさや色がバラバラで見た目にも美しくありません 　　　 サンプル２（良い例：ボタンの左右の幅を揃える、ベースカラーを揃える） 明らかに統一感が生まれます。 　　　 ■写真の大きさやイメージを揃えるて繰り返す サンプル１（悪い例：写真の大きさがバラバラでメリハリも効いていない。） サンプル２（良い例：写真の大きさを統一し、繰り返しによって印象を強くする。）

４．グリッドシステム

グリッドシステムとはグラフィックデザインに置いてよく使われる手法ですが、テーブルをレイアウトに使用するホームページの制作には非常に親和性が良く多くの企業サイトなどで使用されているデザイン手法です。 使用は簡単で、まず画面を縦横のグリッドに仕切り、すべてのページの要素をこのグリッドに沿うように配置して行きます。さらに各パーツを重要度によって分類し、強調すべき部分はふつうの部分の倍のセル内に配置して行きます。 →詳細は講習会にて