TOP＞ホームページ作成講座＞トップページの制作 目次 ・ホームページとは何か？ ・ホームページを作るための準備 ・基本設計 ・詳細設計 ・トップページの制作 ■基本デザインの検討 ■タイトル・ロゴの検討 ・下層ページの製作 ■基本デザインの検討 トップページは、ホームページの表紙です。ホームページを作って多くの人々に何かを伝えようとする時の最初のページです。インターネット上には様々なホームページがあり、そのトップページのデザインは正に千差万別です。ホームページのデザインにおいて、トップページに限らず、どんなページもこうでなければならないと言う決まりはありません。その意味ではどんなデザインのホームページを作ろうと作り手の自由な意思に任されています。一方、ホームページを見る側にすると、見やすく使いやすいページとそうではないページ、快いページと嫌悪感を覚えるページ、面白いページとつまらないページ、その結果、一度見たら再びは見たくないページと何度も見たくなるページがあると言うのも事実です。又、どんなにデザインが素晴らしくても、訴えかける内容を持たないページであればすぐに飽きられてしまいます。そう考えて来ると、トップページ製作の目標は、見やすく、使いやすく、快く、面白く、訴えかける何かを持ち、作り手の思いが明確に伝わるページという事になります。勿論、その逆を意図したページもありますが、それは特別な目的を持った製作意図によるものであり、一般的ではないので、ここでは取り上げていません。 　この講座で題材として選んだ写真をメインとしたページデザインを考えてみます。いくつかの例をあげてみます。文字のロゴはデザイン比較の為、明朝体のみを使っています。 横型１ 非常に一般的な形式です。デザインとしては面白みはあまりありませんが全体に安定感がありホームページ自体の信頼性、誠実さが感じられます。ページタイトルがひと目でわかり、写真も画面全体の中で訴求力があります。無難なデザインと言えます。 横型２ 写真の中にタイトルを入れたデザインにより、画面中央部分に集中力が生まれています。一方で写真の周りの白地の部分が大きく見える為、画面全体の緊密感が失われているように見えます。 横型３ 横型２の写真中央の文字部分を二段に並べたタイトルロゴをデザイン化した例です。横型２と同様に集中力が生まれていますが横型２と同様、、画面全体の緊密感が失われているように見えます。 縦型１ 横型１のタイトルロゴを縦置きにしたものです。文字が縦置きになることによって、躍動感が生まれています。また、縦横にある白地の空白部分に緊密感があり比較的安定した画面となっています。 縦型２ 縦型２に更に躍動感を与えた画面構成になっています。タイトルロゴを２行表示にしたことによって、文字の大きさが確保でき、よりインパクトが強く表現されています。 縦型３ 横型２の写真内のタイトルロゴを縦書きししたものです。文字の大きさが横書きに比べて小さくなっているので、タイトルが写真の中に溶け込み、抒情感が表現されています。又画面中央に視線が集中されるため締まった画面になっています。但し写真周辺の空白白地部分が多く取られているため、寂しげに見えます。 以上、基本的な６デザイン例を検討して見ました。どのデザインを選ぶかは作成者の感性によるところであり、どれがベストと言うことはできませんが、ここでは縦型２を採用することにいたします。 ■タイトル・ロゴの検討 　基本デザインの検討では、タイトル画像として明朝体を使用していました。ここではタイトル画像の書体について検討します。以下に様々な代表的な書体によるタイトルロゴの例を示します（表記されている書体名は使用しているパソコンにインストールされているフォントタイプによって変わる場合があります）。これらの文字を見てどのように感じますか？フォントにはそれぞれの特徴があります。平凡でありながら、それ自体でデザイン性が優れ、まとめやすい明朝、ゴシック体、親しみのある丸ゴシック、ポップクリップ、愛ライン体、歴史性やレトロ感を持った行書、江戸麗雅宋体などの特徴を感じることができると思います。 　又、使用する色によって見え方、感じ方も変わってきます。鋭く見える黒、温和に見える灰や緑、情緒性を持った金や茶などそれぞれの特性があります。又、これ以外に青や赤もありえます。書体や色を選ぶのは自由です。しかしながら考慮しなければならないのは、自分が作ろうとしているホームページのイメージとそれぞれの書体や色が合っているかどうかです。格調があって重々しい雰囲気を出したい、華やかで明るい雰囲気を出したい、あるいは面白くて楽しい感じにしたい、真面目で清楚なイメージを伝えたいなど、それぞれの主張に合わせてそれらは決定されます。 （注：テキストに特別なフォント指定をしている場合がありますが、閲覧しているパソコンにそのフォントがない場合は正確な表示ができないことがあるので、一般的ではありません） 明朝 ゴシック 丸ゴシック 麗雅宋 ポップクリップ 行書 江戸 愛ライン 黒 灰 金 茶 緑 　この講座では、一般的な明朝の黒、緑、金を選びたいと思います。実際の作成例を以下で見てみましょう。 　みなさんには、どのように見えるのでしょうか？平凡ではあるが、もっとも画面が締まって主張の強い黒、穏やかさを感じさせる緑、優雅さを感じさせる金。非常に難しい判断を迫られる場面です。デザインがある程度進んでくると、最終的にいくつかのデザインに絞られます。ここから先の判断は個人の趣味と感性によるところが大であると言えます。ここではもっとも平凡な黒を選びます。この講座では、初心者がある水準のホームページを作成するには、もっとも平凡に、単純に作ることが出発点であると考えているからです。 　何もしない、何も足さない、当たり前のデザインを行おうとすれば、全てを黒で統一したデザインもありえます。右の画像をご覧下さい。全てが黒で統一されモノクロームの世界を形作っており、かえって非常にインパクトが強い個性的なデザインになっています。ここからデザインが始まると言って良いかもしれません。 　これで、トップページのデザインが終わりました。 ・道草3:　画像作成ソフトは何を使うか 　　 　ホームページを作成する時、必要となる画像作成ソフトは何を使ったら良いのかという質問を受けることがあります。 一般にホームページに使用される画像の種類別に代表的なソフトをご紹介します。 １．写真画像用ソフトウエア [フォトショップ（PhotoShop）] 写真画像作成、修正でもっとも多く使われているアドビ社の写真画像用ソフトです。正式版のＰｈｏｔｏＳｈｏｐ及び簡易版のＰｈｏｔｏＳｈｏｐ　Ｅｌｅｍｅｎｔがあります。共に写真画像処理については定評があり、非常に精度の高い処理結果を得ることができます。正式版はかなり高価ですので、初心者にはＰｈｏｔｏＳｈｏｐ　Ｅｌｅｍｅｎｔがおすすめです。 ２．ロゴ画像（文字タイトルなど） [ファイアーワークス（ＦｉｒｅＷｏｒｋｓ）] ＤrｅａｍＷｅａｖｅｒを発売してるマクロメディア社の製品です。単体でも販売していますが、ＤrｅａｍＷｅａｖｅｒやＦｌａｓｈなどとセット販売してる版を購入するとかなりお得です。ＤrｅａｍＷｅａｖｅｒを使用してホームページ作成をする時に便利なように作られています。 [イラストレーター（Ｉｌｌｕｓｔｒａｔｏｒ）] アドビ社の印刷用版下などを作成するためのプロ仕様ソフトです。非常に高精度なロゴ画像を作ることができます。高機能な分だけ使いこなしにはかなりの熟練度が要求されます。 [ウェブアートデザイナー（Ｗｅｂ　Ａｒｔ　Ｄｅｓｉｇｎｅｒ）] ＩＢＭ社のホームページビルダーを購入するとおまけについてくるソフトです。上記２者に比べると精度的には劣る部分がありますが、一般に初心者が使用するロゴ作成ソフトとしては、使いやすくなっています。又、簡単な写真加工機能もあるので、それほど精度を要求しないのであればとりあえずはこれ一本で間に合うものと思われます。 ３．動画画像 [アニメーション作成ソフト] 一般にパラパラ漫画と呼ばれるアニメーション一画像は「アニメーションＧＩＦ」画像によって作られています。作成ソフトとしては、上記の[ファイアーワークス（ＦｉｒｅＷｏｒｋｓ）]、[ウェブアートデザイナー（Ｗｅｂ　Ａｒｔ　Ｄｅｓｉｇｎｅｒ）]などで作成が可能です。 [フラッシュ（ＦＬＡＳＨ）] 最近、多数使用されているＦＬＡＳＨ画像はマクロメディア社から発売さている専用ソフトウエアである「ＦＡＬＳＨ」が必要です。 ⇒次回、個別ページ製作へ続く TOP＞ホームページ作成講座＞トップページの制作

Copyright 爽快倶楽部