http://www.adlabdesign.com 初心者向けホームページ作成講座 Fri, 27 Aug 2010 12:39:58 +0000 http://backend.userland.com/rss092 ja 各段落の文字数が少ない場合と、多い場合、量に応じて文章の配置を決めていきましょう。 ・少ない場合 １ページの中で、大見出し、中見出し、小見出しに分け、その中に文章を入れ込みます。 ■大見出しタイトル 「大まかな内容を入れる」 ●中見出しタイトル 「内容を入れる」 ・小見出しタイトル 「詳しい文章を入れる」 ・小見出しタイトル 「詳しい文章を入れる」 ●中見出しタイトル 「内容を入れる」 ・小見出しタイトル 「詳しい文章を入れる」 ・小見出しタイトル 「詳しい文章を入れる」 ・多い場合は、量に応じて１ページごと使っていきます。 文字だけではおさまりが悪いので、画像を入れ込んだり、イメージしやすいイラストやコラムなどを入れましょう。 「小見出し」となる文章の数が多ければ、「中見出し」のところで目次を作ってしまいます。 そのときには「小見出し」ページをテキストリンクにします。 そうすればそのページにダイレクトに飛ぶようになります。 http://www.adlabdesign.com/pagaes/21 初心者だと、「メニュー・カテゴリ・タグ」の違いに戸惑うようです。 サイドバーやヘッター（上）、フッター（下）にあるものをメニューと呼びます。 大きく分けられているものがメニューです。 ホームページなら、会社情報、配送方法、取扱商品、よくある質問といったものが配置されます。 カテゴリは、アイテム別に分けるといった意味で使います。 メニューで分けれた商品などが、ここで更に分類されます。 タグは、使われる言葉で分類したりします。 「カテゴリ分けはできないけれど、ダイエットに関するもので分類する」といった感じです。 どちらも、ユーザビリティーの視点に立って使われます。 http://www.adlabdesign.com/pagaes/20 ホームページを作る前にラフデザインをします。 その後、準備をしたいのが、 ・HTMLカラーコード ・HP素材集 などです。 カラーコードでは、色を出すためのコードと色が表になっています。 素材集には、メニューボタン、壁紙、アイコン、文字、その他があります。 書いてあることを読むだけではピンとこないでしょうから、 まずは「HTMLカラーコード」「HP素材集」を検索してみましょう。 本で勉強することもいいですが、インターネットならコピー＆ペーストで使うことが可能です。 http://www.adlabdesign.com/pagaes/19 ラフデザインの通りにいかない場合、 思い切って基本のシンプルなものから作ってみましょう。 基本となる色を決め、濃淡の色をいくつか選んでおきます。 基本色を入れたら、色に合わせた画像を入れてみます。 その後、濃淡の色をグラデーション、あるいはアクセントのように配置します。 シンプルなもので自信が付いたら、デザイン性のあるものにチャレンジしましょう。 http://www.adlabdesign.com/pagaes/18 ホームページでは文字色の統一も大切です。 ウェブでは、沢山のカラーを使うことが出来、いろんな色を試すことが出来ます。 しかし、新聞紙面、雑誌でも読みやすいものは全て、文字色が統一されています。 文字の大きさも見出しや、本文などで統一しましょう。 http://www.adlabdesign.com/pagaes/17 デザインとは設計と言い換えることができます。 配色やイメージ画像は手段でしかありませんから、 伝えたい事をどのように伝えていくかを 明確に設計する必要があります。 高級感のあるイメージを伝えたくてホームページを作ったとします。 訪問者がホームページを見て、 高級感のある印象を受けてくれれば それは良いホームページデザインである、という事ができます。 http://www.adlabdesign.com/pagaes/16 サイトが散漫な印象になってしまう原因には 色の使いすぎである場合があります。 サイトイメージを打ち出したいが為に、 様々な色を使いたくなるものですが、 かえって使う色は少なめな方が強い印象を与える事が出来ます。 テーマカラーを１色決めて、その色を繰り返し使う事で イメージを伝える事が出来るという訳です。 http://www.adlabdesign.com/pagaes/15 ページを作成する際に、 統一感を持たせるために同じ色ばかりを使う方法は 時にインパクトに欠けるページになってしまう事があります。 全く同じ色を多用するのではなく、 時に濃淡を付けたり、また、彩度が統一されていれば 多色であってもまとまりのあるページにする事が出来ます。 なんにしても、ページのベースカラーを１色決めて 他の色はアクセントとして使うようにしたいものです。 http://www.adlabdesign.com/pagaes/14 ｗｅｂページを作成する際には、情報のグループ化を行いましょう。 これは、載せる情報をカテゴリ分けし、 それぞれのコンテンツの優先度を付けて、 それらをユーザーの視点に立ってまとめるという作業になります。 ページに載せる要素の整理整頓がしっかりと出来ていないと、 視点がまばらになり、焦点の合わないサイトになりかねません。 http://www.adlabdesign.com/pagaes/13 商品一覧ページなどは、商品写真や説明文、セール情報などを すっきりと並べて見せる必要があります。 このようなページは、美しいグラフィックデザインも大切ですが ユーザーインターフェースとして適切に機能しなければ ユーザーにとって使いづらいサイト、という烙印を押されてしまいます。 お買い得商品などは、他の商品に埋もれてしまわないように 大きくトップに表示するなどの工夫をしながら 品の良いページに仕上げるようにしたいものです。 http://www.adlabdesign.com/pagaes/12