1. ウェブデザイナー・行政書士 金澤淳平ブログ | WEB集客の薬箱 TOP
  2. サイト制作のレシピ

知っておきたい!サイトのイメージカラー決定のルール

サイトのイメージカラーの決め方

今回はサイトで使用するカラーについてのお話です。

サイトを制作する際、まずは基本となる色を決める必要があるわけですが、皆さんはどのように色を決めているでしょうか?

好きな色で作るのも一つの方法でしょう。

ですが、既にご存知の人も多いかと思いますが、色にはそれぞれ視覚的効果があるとされ、見た人にある印象を与えると効果があると考えられています。

自分のサイトなので、好きな色でサイトを制作するのも一つの方法ですが、色の持つ特性を活かして作ってみるのも良いのではないでしょうか。

私が制作を受任した場合、お客さんにはサイトのイメージカラーをお伺いしています。

特にイメージカラーが決まっていない場合は、そのサイトをどんな印象にしたいのか等をヒアリングし、基本となる色を決めていくようにしています。

最初のうちは基本色(メインカラー)を含め、サイトで使用する色は3色程度にまとめるのがイイでしょうね。

その理由は、色が多かったり、配色がマズかったりすると、サイト全体にまとまりがなくなり、さらには、目がチカチカして見づらいサイトになってしまう可能性があるからです。

メインカラーサブカラー、そしてサイトにアクセントを与える為のカラーを用意するのがサイト全体のまとまりやすさを考えるとお勧めです。

色が多いとサイトにまとまりがなくなるのは、なんとなく想像がつくと思います。

マズい配色とは、あまりお勧めできない色の組み合わせのことを言います。色は組み合わせることによって、単色の場合とは別の視覚的効果を生み出すことがあります。

警戒を表す色の組み合わせ例

例えば、左のような黄色と黒の組み合わせ。


黄と黒の組み合わせは警戒を表す効果があるとされ、サイトに安心感を持たせたい場合の使用にはお勧めできません。

自然界においても、蜂のお尻なんかは、この色の組み合わせが使われていますね。

しかし、逆にサイト訪問者の注意喚起を促したい場合には、黄と黒の組み合わせを効果的に使用することで、より強い印象を残すことができます。

以下に、色から受ける印象一覧を記載しておきますので、参考までにご覧ください。

カラーから受ける印象一例

危険・禁止・情熱・興奮
安全・平穏・平和・自然・平静
清潔・冷静・クール・水・空・爽快・・知的
注意・快活・自由・楽天的
マゼンタ 華麗・神秘的・女性
潔白・冷たい・シンプル・純粋
威厳・フォーマル・モダン
オレンジ 明るい・元気・社会的・喜楽・安心

いかがでしょうか?これらはあくまでも一般的に感じる印象とされていますので、過信しすぎるのもよくありませんが、上手く利用することで、より効果的にサイトを制作することができます。

皆さんもサイトのイメージカラーに困ったときには、ぜひ参考にしてみて下さいね。

2011年9月12日 | コメント/トラックバック(0)

カテゴリー:サイト制作のレシピ

サイト制作の手順 ~後半~

以前の記事で『サイト制作の手順~前半~』として、サイト制作の流れを解説させていただきました。

今回はその後半部分、作成したhtml文書を多くの人に公開するための作業についてお話をします。html文書の作成が終われば、後の作業はそんなに難しくはないと思います。

前半の記事はこちらからどうぞ。 サイト制作の手順~前半~

それでは、始めましょう。

ドメインを取得する

まずは、ドメインを取得することから始めましょう。

こちらのサイト(IT用語辞典)にも解説されているとおり、ドメインとは「インターネット上の住所」のようなものです。

要は、そのサイトのURL(「http://www.○○○.com/」とか「http://www.□□□.net/」等)のことですね。

ちなみにこのブログだと『http://web-gyousei.moyoric.jp/』となります。

具体的には、ドメイン取得を取り扱っている会社を通して取得していくことになります。

例えば、ムームードメイン名づけてねっと等は有名かもしれませんね。

取得するドメインは未契約のものであれば、独自に決定して取得することが可能です。

ですが、このドメイン自体もSEO上、意味があるとされていますので、なるべくサイトの内容と関連性が深いものにした方がイイと思います。

例えば、業務を受注するためのサイトであれば、その業務の名前、物を売るサイトであれば、その商品のカテゴリー名もしくは、商品自体の名前は入れておきたいですね。

あと、名刺等に自身のサイトのURLを記載するような場合は、短くシンプルなものの方が憶えていただきやすいですから、あまり長いものはオススメできません。

何より見た目がよくありませんね。

ということで、ドメインは『シンプル』かつ『そのサイトを象徴するもの』にするのがベストだと思います。

ウェブサーバを用意する

ドメインを取得したら、次は作成したhtml文書等のデータを置くための「場所」を確保する必要があります。

このデータを置いておく場所がウェブサーバになります。

ここに作成したhtml文書等の情報を置いておけば、インターネットを用いて自分のドメインにアクセスがあったときに、置いておいたデータを送信してくれます。

このときサーバから送信されたデータがFirefox・Google Chrome・Internet Explorer等のブラウザを通して閲覧したときに、ウェブページとして表示されます。

多くの場合、このウェブサーバは自分で作るのではなく、レンタルしてきます。

レンタルサーバといって、ネットで簡単に契約することができ、非常に便利です。

レンタルサーバでも有名なところを挙げておくと、エックスサーバチカッパあたりになるでしょうか。

中には無料でレンタルできるサーバもあります。ですが、それなりに不自由な点や、不安定な部分が多く、特に業務で使用するサイトを運営する場合には、僕個人としてはオススメできません。

また、サーバによって容量が違ったり、サイトで使用できるプログラム等に制限がある場合もありますので、ご自身のサイトの条件にあったものを選ぶのがイイでしょう。

でも、どのレンタルサーバも通常必要となる機能は大体揃っていますので、よほど特殊なサイトの運営を考えているのでなければ、あまりその選択に神経質になる必要はないと思います。

ウェブサーバにデータをアップロードする

ドメインを取得し、サーバが用意できたら、いよいよデータをサーバに置いてサイトを公開します。

サーバにデータを置くことを「アップロード」と呼んでいます。その逆をダウンロードと呼んでいます。

ダウンロードはよく聞く言葉ですよね。

データをサーバに送るためには、そのためのソフト(FTPソフト)が必要になりますが、ソフトを使えばドラッグ&ドロップでひょいっとアップロードできたりするので、とてもカンタンです。

ソフトとしては、FFFTPが有名でしょうか。

このような専用のソフト以外にも、htmlの編集にDreamweaver等のウェブ制作ソフトを使用していれば、FTP機能が付いていることもありますので、それを利用するのもひとつですね。

FTPソフトを使ってデータをサーバのアップロードしたら、遂にサイトが全世界に向けて公開されたことになります。

URLをアドレスバーに入力し、サイトが無事表示されれば、作業は問題なく終了しているということになります。

ファイルをアップロード

公開したら…アレッ!!ってなることも…

サイトを公開して、作業をしていた自分のパソコンからはちゃんと表示されていて、「よし!」と思っていても、友達や知り合いのパソコンから見てみると、サイトが崩れて、ちゃんと表示されない場合があります。

僕がサイト制作の仕事に携わってまだ経験が浅い頃、同じような経験をしたことがあります。

長時間の作業の後、「やったー!」という達成感の後に、とんでもない絶望感が襲ってくるんですよねー。

htmlやcss等のデータのどこに問題があるのかを調べるというイヤーな作業が待っていますからね。

使用しているOSやブラウザの種類によって、サイトの表示のされ方が異なるのが原因でこのような現象がしばしば発生します。

一つの環境のもとできちんと表示されていても、条件が異なるパソコンで見てみると、同じように表示されるとは限らないんですよね。非常に困ったもんですが、仕方ありません。

慣れてしまえば、ブラウザ毎の表示結果の違いについては、予想できるのようになるので、事前にCSS等で調整でき、崩れることはなくなります。

とにかく失敗を恐れないで、ドンドン試してみることが大切だと僕は思います。データはいつでも書き換えることができるので、失敗は有り得ませんから。

初めから全てを理解しなくても作っていくことは十分に可能ですので、まずはhtmlを触ってみるのもいいかも知れません。

興味のある方は、ぜひ一度チャレンジしてみてくださいね。

2011年8月7日 | コメント/トラックバック(1)

カテゴリー:サイト制作のレシピ

サイト制作の手順 ~前半~

Webサイトを実際に作ってみたい…でも、Webサイトって一体どのように作っていったらイイの?と最初は疑問に感じる方は多いと思います。

なので、今回はWebサイト制作の全体的な流れについてお話しします。

お読みいただくと全体の流れがイメージしてもらえると思います。

まずは、どの分野(業務や商品)のサイトを制作するのかを決めなければなりませんが、これはWebマーケティングとも関係するので、別の記事でお話するとして、今回は分野が決まった後のサイト制作の部分に絞ります。

では、早速始めましょう。

まずは、html文書(htmlを使って作成したファイル)の作成

html文書を作成するには、特別なソフトが必要になるとお考えの方も多いと思います。

ですが、実は専用の特別なソフトは特に必要ではなく、メモ帳等の付属ソフトで作成することができます。

いわゆる、テキストエディタというやつですね。

Windowsをお使いの方は「メモ帳」、Macをお使いの方は「TextEdit」を使用することで、htmlを作成することができます。

上記のテキストエディタで、前回ご紹介したようなタグを使って、文章をマークアップしていきます。

あらかじめ、Webサイト制作のために新しいフォルダを作成しておきます。

そして作成したhtml文書を保存するときは、その拡張子を「.html」にして、あらかじめ作成しておいたフォルダの中に保存します。

拡張子は「.html」で保存

html文書の作成には、「DreamWeaver」等のWeb制作専用ソフトを使用することもできます。

本格的にWeb制作をすることを検討されている方は、このような専用ソフトを導入するのも良いかもしれませんね。

サイトで使用する画像やイラストの作成

Webサイトは、テキストだけでなく、適宜、画像を挿入したり、ボタンやアイコン、バナー等を設置することで、視覚的に特徴を持たすことができます。

このブログでも、いくつか画像を使用していますが、それらは全て専用の画像編集ソフトで作成しています。

代表的な画像編集ソフトとしては、「Photoshop」等が挙げられます。

最近では、無料ソフトでありながら、かなり高度な編集ができるソフトもありますので、まずは、無料ソフトでご自身が撮影した写真等を使って練習してみるのがイイと思います。

無料ソフトでいうとpaint.netなどは有名かもしれませんね。

また、画像編集のチュートリアルもネット上でいろいろ公開されています。

画像の作成・編集が終了したら、html文書に下のようなタグを使用して貼りつけていきます。

<img src="sample.jpg" />

このタグはimg要素といい、イメージをサイト上に表示させる場合に使用します。

「src」の中には、使用するイメージファイルのURLを指定します。

画像だけでなく、様々なプログラムやシステムを搭載することで、サイト全体をよりユニークなものにすることもできます。

このようにしてこのようにhtml文書が作成できたら、今度は多くの人に見てもらう為、公開する作業が必要となります。

次回は、そのあたりのお話をさせていただきますね。

2011年7月24日 | コメント/トラックバック(3)

カテゴリー:サイト制作のレシピ

HTMLってそもそも、なぁに?

サイト制作に興味がある方なら聞いたことがあると思います「HTML」という言葉。

一体どういう意味なの?って感じている方も多いと思います。

絶対に知っておかないといけないワケではありませんが、まずはホームページを作る前に言葉の定義を押さえておきましょう。

簡単にイラストで表すと下のようになります。

HTMLとCSSについて

HTML(Hyper Text Markup Language)は、カンタンに言えば、Webページを作るための記述言語のことです。

このHTMLを使用して文書を記載することで、様々な環境下にあるパソコンや携帯等の端末でWebページを見ることができるようになります。

その方法はシンプルで、文章を「タグ」で囲って(挟んで)あげるだけです。

この文章を「タグ」で挟むことを「マークアップ」と呼んだりします。

例えば、こんな感じですね。

<p>Pタグでマークアップ中です</p>

HTMLの一番大きな特徴は、作成した文章に対して、上のようなタグを用いてマークアップすることで、文書に見出しや段落を付けることです。

ワード等で、文字の大きさや太さを変えて視覚的に見出しや段落分けをしていくのと同じですね。

同じようなことをHTMLという言語では、それぞれタグを使って行うわけですね。

この文章は見出しだよーっていうことにしたいときは、見出し用のタグを使ってその文章を囲ってあげれば、それで作業は完了です。

例えば、この記事のタイトルは「HTMLってそもそも、なぁに?」なので、

<h2>HTMLってそもそも、なぁに?</h2>

と記事の始まりに記載してあります。

上のタグは見出しを表すタグですが、簡単に言うと

<h1>見出し</h1>
<h2>見出し</h2>
<h3>見出し</h3>
<h4>見出し</h4>

と数字の少ない方から、大見出し・中見出し・小見出し・小小見出しのような形になります。「h」の後に続く数字が見出しのレベルを表すこととなるんですね。

使い方にも一定のルールがありますが、上記のタグで文章を囲むことで、その文章を見出しとして扱うことができるようになります。

と、このように、タグ自体は非常にシンプルな仕組みですので慣れれば使うことにストレスを感じることはなくなると思います。

そして、このようなタグを用いて文章全体をマークアップしていくことを「文書を構造化」すると言ったりしますが、サイトを制作するうえではこの言葉自体に大した意味はなかったりします。なので、そういう言葉があるんだぁ~っていうぐらいに覚えておいていただければ十分です。

見出しと本文

ですが、「見出し」と「段落」がに関するタグがHTMLをマスターする上での、一番の基本だと思うので、もしよければこちらは覚えておいてくださいね。

この他にも「表」として表示したり、「リスト」として表示するタグがよく使われますが、基本はやはり「見出し」と「段落」です。

多くのサイトはこの「見出し」とそれに関する「段落(文書)」で構成されていますからね。


応用として、HTMLにはその見栄えを良くしたり、メリハリを付けるために見た目を指定することもできます。例えば、下線を引いたり、色を変えたり、文字を右寄せや、中央揃えにしたりすることも可能です。

ですが、これらの表示方法に関する記述は、「CSS(スタイルシート)」と呼ばれる別のファイルに記述することが勧められています。

こちらのファイルはサイト全体の設計図のようなものになるので、HTMLとは少し違った概念になりますが、また順を追ってわかりやすいように解説等ができればなと思います。

今回は少し長くなっちゃいましたが、最後まで読んでいただいて、ありがとうございました。

2011年7月22日 | コメント/トラックバック(3)

カテゴリー:サイト制作のレシピ

Copyright (C) 2011 ウェブデザイナー・行政書士金澤淳平ブログ-WEB集客の薬箱- All Rights Reserved. 掲載コンテンツ・イメージの転写・複製等はご遠慮下さい。

ウェブデザイナー・行政書士 金澤淳平ブログ | WEB集客の薬箱
WEB GYOUSEI

神戸で行政書士・ウェブデザイナーとして活動する金澤淳平のブログ