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

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

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

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

レイアウト

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

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

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

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

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

配色

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

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

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

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

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

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

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

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

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

同一色相配色（モノトーン）

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

類似色相配色

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

補色（対照的な色）の組み合わせ

同一トーンの組み合わせ

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

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