今回はサイトで使用するカラーについてのお話です。サイトを制作する際、まずは基本となる色を決める必要があるわけですが、皆さんはどのように色を決めているでしょうか?好きな色で作るのも一つの方法でしょう。ご存知の人も多いかと思いますが、色にはそれぞれ視覚的効果があるとされ、見た人にある印象を与えると効果があると考えられています。自分のサイトなので、好きな色でサイトを制作するのも一つの方法ですが、色の持つ特性を活かして作ってみるのも良いのではないでしょうか。私が制作を受任した場合、お客さんにはサイトのイメージカラーをお伺いしています。イメージカラーが決まっていない場合は、そのサイトをどんな印象にしたいのか等をヒアリングし、基本となる色を決めていくようにしています。最初のうちは基本色(メインカラー)を含め、サイトで使用する色は3色程度にまとめるのがイイでしょうね。その理由は、色が多かったり、配色がマズかったりすると、サイト全体にまとまりがなくなり、さらには、目がチカチカして見づらいサイトになってしまう可能性があるからです。メインカラーとサブカラー、そしてサイトにアクセントを与える為のカラーを用意するのがサイト全体のまとまりやすさを考えるとお勧めです。色が多いとサイトにまとまりがなくなるのは、なんとなく想像がつくと思います。マズい配色とは、あまりお勧めできない色の組み合わせのことを言います。色は組み合わせることによって、単色の場合とは別の視覚的効果を生み出すことがあります。左のような黄色と黒の組み合わせ。黄と黒の組み合わせは警戒を表す効果があるとされ、サイトに安心感を持たせたい場合の使用にはお勧めできません。自然界においても、蜂のお尻なんかは、この色の組み合わせが使われていますね。逆にサイト訪問者の注意喚起を促したい場合には、黄と黒の組み合わせを効果的に使用することで、より強い印象を残すことができます。以下に、色から受ける印象一覧を記載しておきますので、参考までにご覧ください。いかがでしょうか?これらはあくまでも一般的に感じる印象とされていますので、過信しすぎるのもよくありませんが、上手く利用することで、より効果的にサイトを制作することができます。皆さんもサイトのイメージカラーに困ったときには、ぜひ参考にしてみて下さいね。~後半~以前の記事で『サイト制作の手順~前半~』として、サイト制作の流れを解説させていただきました。今回はその後半部分、作成したhtml文書を多くの人に公開するための作業についてお話をします。html文書の作成が終われば、後の作業はそんなに難しくはないと思います。前半の記事はこちらからどうぞ。サイト制作の手順~前半~それでは、始めましょう。ドメインを取得するまずは、ドメインを取得することから始めましょう。こちらのサイト(IT用語辞典)にも解説されているとおり、ドメインとは「インターネット上の住所」のようなものです。要は、そのサイトのURL(「http://www.○○○.com/」とか「http://www.□□□.net/」等)のことですね。ちなみにこのブログだと『http://web-gyousei.moyoric.jp/』となります。具体的には、ドメイン取得を取り扱っている会社を通して取得していくことになります。ムームードメインや名づけてねっと等は有名かもしれませんね。取得するドメインは未契約のものであれば、独自に決定して取得することが可能です。このドメイン自体もSEO上、意味があるとされていますので、なるべくサイトの内容と関連性が深いものにした方がイイと思います。業務を受注するためのサイトであれば、その業務の名前、物を売るサイトであれば、その商品のカテゴリー名もしくは、商品自体の名前は入れておきたいですね。あと、名刺等に自身のサイトのURLを記載するような場合は、短くシンプルなものの方が憶えていただきやすいですから、あまり長いものはオススメできません。何より見た目がよくありませんね。いうことで、ドメインは『シンプル』かつ『そのサイトを象徴するもの』にするのがベストだと思います。ウェブサーバを用意するドメインを取得したら、次は作成したhtml文書等のデータを置くための「場所」を確保する必要があります。このデータを置いておく場所がウェブサーバになります。ここに作成したhtml文書等の情報を置いておけば、インターネットを用いて自分のドメインにアクセスがあったときに、置いておいたデータを送信してくれます。Explorer等のブラウザを通して閲覧したときに、ウェブページとして表示されます。多くの場合、このウェブサーバは自分で作るのではなく、レンタルしてきます。レンタルサーバといって、ネットで簡単に契約することができ、非常に便利です。レンタルサーバでも有名なところを挙げておくと、エックスサーバ・チカッパあたりになるでしょうか。中には無料でレンタルできるサーバもあります。それなりに不自由な点や、不安定な部分が多く、特に業務で使用するサイトを運営する場合には、僕個人としてはオススメできません。サーバによって容量が違ったり、サイトで使用できるプログラム等に制限がある場合もありますので、ご自身のサイトの条件にあったものを選ぶのがイイでしょう。どのレンタルサーバも通常必要となる機能は大体揃っていますので、よほど特殊なサイトの運営を考えているのでなければ、あまりその選択に神経質になる必要はないと思います。ウェブサーバにデータをアップロードするドメインを取得し、サーバが用意できたら、いよいよデータをサーバに置いてサイトを公開します。サーバにデータを置くことを「アップロード」と呼んでいます。その逆をダウンロードと呼んでいます。ダウンロードはよく聞く言葉ですよね。データをサーバに送るためには、そのためのソフト(FTPソフト)が必要になりますが、ソフトを使えばドラッグ&ドロップでひょいっとアップロードできたりするので、とてもカンタンです。ソフトとしては、FFFTPが有名でしょうか。このような専用のソフト以外にも、htmlの編集にDreamweaver等のウェブ制作ソフトを使用していれば、FTP機能が付いていることもありますので、それを利用するのもひとつですね。FTPソフトを使ってデータをサーバのアップロードしたら、遂にサイトが全世界に向けて公開されたことになります。URLをアドレスバーに入力し、サイトが無事表示されれば、作業は問題なく終了しているということになります。公開したら...アレッ!!ってなることも...サイトを公開して、作業をしていた自分のパソコンからはちゃんと表示されていて、「よし!」と思っていても、友達や知り合いのパソコンから見てみると、サイトが崩れて、ちゃんと表示されない場合があります。僕がサイト制作の仕事に携わってまだ経験が浅い頃、同じような経験をしたことがあります。長時間の作業の後、「やったー!」という達成感の後に、とんでもない絶望感が襲ってくるんですよねー。htmlやcss等のデータのどこに問題があるのかを調べるというイヤーな作業が待っていますからね。使用しているOSやブラウザの種類によって、サイトの表示のされ方が異なるのが原因でこのような現象がしばしば発生します。一つの環境のもとできちんと表示されていても、条件が異なるパソコンで見てみると、同じように表示されるとは限らないんですよね。非常に困ったもんですが、仕方ありません。慣れてしまえば、ブラウザ毎の表示結果の違いについては、予想できるのようになるので、事前にCSS等で調整でき、崩れることはなくなります。失敗を恐れないで、ドンドン試してみることが大切だと僕は思います。データはいつでも書き換えることができるので、失敗は有り得ませんから。初めから全てを理解しなくても作っていくことは十分に可能ですので、まずはhtmlを触ってみるのもいいかも知れません。興味のある方は、ぜひ一度チャレンジしてみてくださいね。~前半~Webサイトを実際に作ってみたい...でも、Webサイトって一体どのように作っていったらイイの?と最初は疑問に感じる方は多いと思います。今回はWebサイト制作の全体的な流れについてお話しします。お読みいただくと全体の流れがイメージしてもらえると思います。どの分野(業務や商品)のサイトを制作するのかを決めなければなりませんが、これはWebマーケティングとも関係するので、別の記事でお話するとして、今回は分野が決まった後のサイト制作の部分に絞ります。html文書(htmlを使って作成したファイル)の作成html文書を作成するには、特別なソフトが必要になるとお考えの方も多いと思います。実は専用の特別なソフトは特に必要ではなく、メモ帳等の付属ソフトで作成することができます。いわゆる、テキストエディタというやつですね。Windowsをお使いの方は「メモ帳」、Macをお使いの方は「TextEdit」を使用することで、htmlを作成することができます。上記のテキストエディタで、前回ご紹介したようなタグを使って、文章をマークアップしていきます。Webサイト制作のために新しいフォルダを作成しておきます。作成したhtml文書を保存するときは、その拡張子を「.html」にして、あらかじめ作成しておいたフォルダの中に保存します。html文書の作成には、「DreamWeaver」等のWeb制作専用ソフトを使用することもできます。本格的にWeb制作をすることを検討されている方は、このような専用ソフトを導入するのも良いかもしれませんね。サイトで使用する画像やイラストの作成Webサイトは、テキストだけでなく、適宜、画像を挿入したり、ボタンやアイコン、バナー等を設置することで、視覚的に特徴を持たすことができます。このブログでも、いくつか画像を使用していますが、それらは全て専用の画像編集ソフトで作成しています。代表的な画像編集ソフトとしては、「Photoshop」等が挙げられます。最近では、無料ソフトでありながら、かなり高度な編集ができるソフトもありますので、まずは、無料ソフトでご自身が撮影した写真等を使って練習してみるのがイイと思います。無料ソフトでいうとpaint.netなどは有名かもしれませんね。画像編集のチュートリアルもネット上でいろいろ公開されています。画像の作成・編集が終了したら、html文書に下のようなタグを使用して貼りつけていきます。/>このタグはimg要素といい、イメージをサイト上に表示させる場合に使用します。「src」の中には、使用するイメージファイルのURLを指定します。画像だけでなく、様々なプログラムやシステムを搭載することで、サイト全体をよりユニークなものにすることもできます。このようにしてこのようにhtml文書が作成できたら、今度は多くの人に見てもらう為、公開する作業が必要となります。次回は、そのあたりのお話をさせていただきますね。コメント/トラックバック(3)カテゴリー:サイト制作のレシピHTMLってそもそも、なぁに?サイト制作に興味がある方なら聞いたことがあると思います「HTML」という言葉。いう意味なの?って感じている方も多いと思います。絶対に知っておかないといけないワケではありませんが、まずはホームページを作る前に言葉の定義を押さえておきましょう。簡単にイラストで表すと下のようになります。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とは少し違った概念になりますが、また順を追ってわかりやすいように解説等ができればなと思います。今回は少し長くなっちゃいましたが、最後まで読んでいただいて、ありがとうございました。掲載コンテンツ・イメージの転写・複製等はご遠慮下さい。神戸で行政書士・ウェブデザイナーとして活動する金澤淳平のブログ。