福岡・北九州・WEBデザイン・ホームページ作成・CMSサイト構築ならTaniweb制作
  • デザイナー募集
  • サイトマップ
    • HOME
    • サービス
    • 制作実績
    • ダウンロード
    • 特集記事
    • お問い合わせ

    トップ » ホームページのレイアウトと配色

    ホームページのレイアウトと配色

    何がホームページの印象を決めるのか?

    使いやすいウェブサイトを実現できるかどうかを大きく左右するのはレイアウトですが、画面を見た瞬間、目に飛び込んでくるのは色(カラー)です。そして、意外にも全体のイメージを整える効果があるのがフォントです。せっかくホームページを作成するのですから、日頃あまり気を配ることがないと思われる、これらの事についても、すこし考えてみてください。

    レイアウト

    WEBデザインは、情報を整理することから始まります。伝えたいメッセージを上手に伝える為です。情報の重要度を考慮して、レイアウトを検討します。

    まずは、ページをデザインする(表示する)領域の幅について決定しましょう。ページ領域の設定には、ブラウザの幅に合わせて伸縮する『リキッドデザイン』と、横幅を固定してしまう『ソリッドデザイン』があります。

    そして、その領域の中に記事をどのように配置するか?段組を考えます。一般的には1~3カラムで構成されることが多く、カラム(Column)とは、本来円柱を指す言葉ですが、印刷物などの制作に於いて、段組(記事が掲載されるフィールド)のことを表します。

    トップページと下層ページは、カラム数が変わったり、デザインが変わったりする事の方が多く、それぞれをデザインする必要があります。


    ページレイアウトのサンプル

    配色

    なかなかイメージを伝えられない・・・・イメージが伝わってこない・・・

    そんな時、クライアントは、とても不安になります。言葉で説明するのには限界があるからです。また、デザイナーも同じような不安と作業の増加に悩むことになります。ラフデザインを起こす為にデザイナーは大変な時間と集中力を削ります。複数回の作り直しは、あきらかに、プランニングに問題があると云わざるを得ません。

    デザインする作業とは、ともすれば、そんな悪循環に陥り易いものです。こんな事にならない為に、ラフデザインを起こす前に工程を一つ入れる場合もあります。

    クライアントのイメージを掴むきっかけとして、「ムードボード」を作成することもあります。「想像」そして「考」という段階です。 本来、ムードボードとは、印象的な言葉や、イメージの断片を、ビジュアルに落とし込んだものを指し、デザインの方向性を決定する為に用いられます。

    実際には、おおまかなイメージの把握の為に、参考となるURLを探して頂いたり、使いたい写真があれば、それをご用意頂く、また、テーマカラーを決定して頂いて、色見本を作ったりします。
    色見本に合わせて、作成したワイヤーフレームに色を置いたり、写真を仮置きします。

    この作業を行わず、いきなりラフデザインを起こすWEBディレクターもいますので、必須の工程ではありませんが、デザインという定まらない価値観の中で、抽象的な所から形にするという作業は、非常に難しいものです。

    「配色サンプル」や「レイアウトサンプル」なら、複数回の作り直しでも、デザイナーに重労働を強いる必要がありません。

    もし、デザイナーでなくても、興味と時間があれば、「デザインする技術」や「デザイン・ルールズ デザインをはじめる前に知っておきたいこと」」など、これらの書籍に目を通してみてください。デザイナーが、どのようにモノを作ってゆくか、また、作ろうとしているか、などの全体像を見渡すことができると思います。

    よく使われる配色方法の一例

    同一色相配色(モノトーン)

    日本ではよく、白黒灰色などの配色をモノトーンと呼ばれますが、本来モノ(mono)とは数字の「1」の事です、従って、単色相での配色を意味します。ちなみに一色使いは「ユニ」といいます。

         

    類似色相配色

    色相環で近い色同士の組み合わせ。

         

    補色(対照的な色)の組み合わせ
         

    同一トーンの組み合わせ

    色相が違うが彩度が共通であり、明度に変化がある。統一感があるが、適度な変化も感じられる配色

         

    もちろんこの他にも配色例は沢山あります。

    お問い合せ
    サービス一覧
    • サービス一覧
    • 『unitMT』MT構築
    • MTサイト運用保守
    • 『imageUP』Flash更新
    • 『StyleE』テンプレート
    • 企業のページ制作
    • 通販サイト作成
    • キャンペーンページ
    • ブログカスタマイズ
    • ECCUBE
    • バナー制作
    • SEO対策について
    • 価格表

     

    ホームページ制作のリファレンス
    • 制作の流れ
    • 誰に何を伝えるのか
    • 必要なシステムは?
    • 事前の準備は?
    • レイアウトと配色
    • フォントについて
    • 色の指定
    • 色とフォントの見本
    • 色の心理的効果
    • 参考記事
    ホームページ制作のリファレンス
    • ご契約に際して
    • 制作費のお支払い
    • ご依頼をお断りするサイト
    • 検収期間の修正
    グラフィック素材とHPテンプレートのデイリーデザイン・会員登録で300円分のポイントプレゼント中!
    SEO対策済みのMovabletypeテンプレート
    ページの先頭へ戻る

    お問い合わせ|サービス|制作実績|価格表|フリー素材| プライバシーポリシー|免責事項|サイトマップ|オフィス|相互リンク

    インターネットで全国に対応可能。 北海道,青森,岩手,秋田,宮城,山形,福島,東京,神奈川,埼玉県,千葉,茨城,群馬,栃木,愛知,静岡,三重,岐阜,新潟,長野,山梨,石川,富山,福井,大阪,京都,奈良,兵庫,滋賀,和歌山,岡山,広島,鳥取,山口,島根,愛媛, 徳島,高知,香川,福岡,佐賀,長崎,大分,熊本,宮崎,鹿児島,沖縄
    ページランク4.net|PRC|相互リンクのリンクモスト|ページランク4+PageRank4+

    ホームページ制作・CMS・WEBデザインのWEB制作。福岡・北九州・日本全国のホームページ製作、更新・運営を行うホームページ作成デザイン事務所