XserverXserverSupportDomainDomainSupportMany-KingMany-King Support

カテゴリー:「ウェブデザイン」に関するアーカイブ

本サイトで採用しているウェブデザインに関する投稿記事を総括。

色の組み合わせでセンスが決まる!?

「ウェブ標準」という言葉を意識し始めて、どれ位の時間が経過したのかな~以前、ウェブサイトの製作に興味を持った 10 年ほど前には、まったく意識していなかった「ウェブ標準」。当時は、HTML のコードをテキストエディターで作成していました。

今や本当に便利になった!とにかく、テンプレートと称して、いろいろなデザインやツールが無料で利用できるんですから。本サイトでもいまや WordPress というツールを利用して、更には XHTML と CSS を駆使すると直ぐに「ウェブ標準」準拠ってなことが達成できてしまうのですから。

さて、「ウェブ標準」は、何とか理解できるようになってきました。そこで問題!?になるのが、色の組み合わせ。私は、第2種赤緑色覚異常[1]なので、特に緑色と赤色といった組み合わせで設計されるウェブサイトがちょっと苦手。よって、ウェブサイトを構築するときは、自然と緑や赤が少なくなっているはずです(というかほとんど利用していません)。

上記のように、結構神経を使って色の組み合わせを検討しているはずなのですが・・・本サイトでは、勝手に自分では、「認知科学や心理学を扱いたいのでクラシックな感じ」を出したいな~と考えて、ブラウン系の色合いを多用しているつもりなのですが、閲覧して頂いている方々にはどう映っているのかは不明です。ブラウン系がクラシックな感じなのかも不明ですが・・・

そうしているうちに、面白い投稿記事がありました。「種から育てるWEBクリエイターの木::色の決まりを知っていれば「センス」がよくなる」というのがそれですが、投稿記事に以下のような一節があります。

色にはいくつか法則があって、この色とこの色の組み合わせは目に刺激が強いからダメ、とか、色のトーンは合わせようといった決まりがあるのだけれど、それを知らないと色の法律を犯してしまって、見ている人に不快感を与えたり、ダサいと言わせてしまうのだ

詳細は解りませんが、やっぱり色というのも何やら法則があるようです。更にこの投稿記事では以下のような記述もあるんです。

心がうれしいときには自然と明るい色を選ぶし、心がすさんでいるときは明るい色を選ぶことができない。人は自分の感情と共感するときに感動を受けるので、自分の感情にあった色のものを「好み」とする。

もうこうなると正に心理学の世界です。「Oricon::色が人間の心理に与える影響」というウェブページが紹介されていて、とても参考になりますね。ただ、私はもうちょっと実用的な「Color Lover」という実際の色の組み合わせのサンプルの方がいいかな・・・何せ、色に関してはちょっと過剰に反応してしまうので・・・

脚注 [1]
色覚異常といってもいろいろな種類があって、まったく日常生活には影響がない場合もあり、私個人もまったく日常生活では不便がない。信号も見分けられるし、緑単独、赤単独での色彩は完全に判断できる。

【追記】2007-10-16
「ウノウラボ Unoh Labs::色覚異常を考慮してWebColor216色を選択できる便利なサービス」という投稿記事を発見しました。記事によれば、「Color Laboratory — AWARE Center — HTML Writers Guild」というサイトでは、色覚異常の場合の色の見え方を考慮しつつ、Web Color 216 色のカラーパレットから色の組み合わせを試してみることが出来るそうです。とても興味深いですね!

グラフィックソフト:Photoshop vs. Illustrator

ブログを運営しているからということではないのですが、グラフィックデザインには昔から興味がありました。もともと Corporate Identity (CI) をやりたかった位ですから。ただ、仕事でグラフィックデザインをするほどのセンスは無いのですが。

グラフィックデザインで重要なのがグラフィックソフトウェア?!と勝手に思っているのですが、昔は、MAC が主流で Photoshop がその代表的なソフトウェア、独断場だったように記憶しています。いまでは Windows 版でも素晴らしいソフトウェアがあると聞いているのですが、その種類の豊富さに迷ってしまいます。現在は、PhotoImpact というソフトウェアを利用していますが、ちょっとマニアックで一般的ではないとの指摘もあって・・・

そろそろ Photoshop でも購入しようかな~と思っているのですが、同じ Adobe 社からリリースされているもう一つのグラフィック関連のソフトウェア Illustrator というのもあって。いったい何が違うのでしょう!?

どうやらグラフィックソフトウェアには、ペイント系ソフトとドロー系ソフトが存在していて、ペイント系ソフトの代表が Photoshop で、ドロー系ソフトの代表が Illustrator だそうです。これは、「すみかで遊舎::PhotoshopとIllustratorの違いは?」に詳細が説明されています。具体的にグラフィックが比較されていて、詳細が説明されていますから、興味のある方にはとっても参考になると思います。

さて、それぞれのソフトウェアに関する説明は、上記のページを参考にすると以下の通り。

「Photoshop」などのペイント系のソフトで作成される写真などは、“ピクセル(画素)” の集まりでデータを構築している。画面を拡大するとひとつひとつ色の付いたピクセルで絵が描かれている。

ドットではなく、座標と数値で表すのが「Illustrator」などのドロー系のソフト。グラフィックソフト以外にも図面を引くときに用いられるCADソフトなどのデータもドロー系。

やっぱり、相当違いがあるんですね~ビックリです。ウェブデザインであれば、Photoshop が良さそうですが、幾何学的な描写が必要な時は Illustrator の方が良さそうですね!

ソーシャルブックマークを使い易くする方法

ソーシャルブックマークは、以前から「del.icio.us」を利用しています。「はてなブックマーク」も考えたのですが、どうもインターネットのグローバル性を重視したくて、「del.icio.us」を使い続けています。

ソーシャルブックマーク自体、そのコンセプトに驚愕した記憶があるのですが、タグを多用していると本当に必要な情報に辿り着くまで時間が掛ったり、最悪辿り着けないといった本末転倒なことが・・・私の場合は、最近こうした馬鹿げたことが良く起きるんです。

何度もタグの付け方を変更したことか!情報技術に負けてはいけないと必死で頑張るのですが・・・やっぱり上手くいかないんです。ところが・・・

「ホームページを作る人のネタ帳::ソーシャルブックマークが使いやすくなるタグの付け方7つのコツ」という投稿記事を発見しました(というか結構以前に興味があって、ブックマークしておいた!)どうすれば、こうした情報が提供できるんでしょう!?もう、素晴らしいの一言です。

  1. 大きなカテゴリを決める
  2. アスタリスクを大きなカテゴリの頭につける
  3. 大きなカテゴリをタグ付けしたあと、ページ内のキーワードを入れる
  4. Google や、Yahoo などの話題性の高い物は必ず2個以上のタグに
  5. Ajax CSS JavaScriptの無料アプリケーションは、あえて分けない
  6. [*フリーソフト]はベクターを参考に
  7. 動画はYouTubeとかつけない

特に上記の第 1、2、3 項は、個人的にはとっても興味があり、本日より実践しようかな~って思っています。投稿記事によれば、「既に沢山のタグをつけてあっても遅くない!」ということに勇気付けられましたから!

リンク集 (BlogPeople) 用スタイルシート

最近追加したページに「リンク集」がありますが、一つ一つリンクを追加して作成しているのはめんどくさい!というより、現状のウェブ製作から、そうしたリンク集の作成方法は、ちょっと時代錯誤!?

そこで、私は昔から利用している BlogPeople を介してこのリンク集を構成しています。

更に、単純に BlogPeople が用意しているスクリプトを貼り付けているだけでは、あまりにも技がないので、以前から気になっていた「blog*citron::BlogPeopleのカスタマイズ」を参考にさせて頂きながら、ちょっとだけ自分用にカスタマイズをして、整えました。何にも難しいことはありませんが、忘れてしまいそうなので自分用の覚書として。

まずは、実際に本サイトで採用しているコードを書き出します。

 div.blogpeople-main p {
 padding:5px 0; }

 div.blogpeople-main p a {margin:0 0 0 1px; }

 div.blogpeople-main img {border:0px;}

 span.blogpeople-linklist {
 display:block;
 padding:0 0 0 5px;
 color:#0000ff;
 font-weight:bold;
 border-left:10px solid #ccaa66;
 border-bottom:1px solid #ccaa66;}

何てことはありません。参照している投稿記事をそのまま適用しているだけです!何んとも素晴らしい!!ちょっと参考までに以下も書き留めておきます。

  • div.blogpeople-main: BPリスト全体
  • div.blogpeople-main p: リンクリストのブロック
  • span.blogpeople-linklist: リンクリストの名前
  • div.blogpeople-main p a: リンク
  • span.blogpeople-update-suffixtext: up!のテキスト
  • div.blogpeople-powered-by: フッターのBPクレジット

こうした投稿記事が公開されているのは、本当に感動しますね!

やっぱり Favicon が欲しい!

「Cha’s Bar」でも設定していますが、以前から思っていた Favicon (ファビコンと読みます)の設定を作成、設定してみました。といっても基本的には、「Cha’s Bar」からの移行ですが・・・

Favicon とは、16 x 16 ピクセルの小さなアイコンですが、Firefox のタブに表示されたり、お気に入りに登録されると表示されたりと結構その姿が現れる!

Favicon に関しては、素晴らしいサイトがあります。「Favicon Japan」というサイトで、自作のイメージを Favicon に変換してくれるし、設置方法やブラウザの対応表等もあって至れり尽くせりです。

私はというと・・・以下の手順を踏みました!

  1. Ulead 社からリリースされている PhotoImpact を利用して、16 x 16 ピクセルのイメージを作成し、jpg ファイルとして保存
  2. 上記でご紹介した Favicon Japan で jpg ファイルを ico ファイルに変換
  3. Favicon をサーバーへアップロード
  4. ブログのヘッダーのところに以下のコードを記述

<link href=”http://www.nakui.biz/favicon.ico” rel=”SHORTCUT ICON” />

たったこれだけです。簡単ですが、意外と Favicon を設定していなサイトは多いようでしてちょっとだけ差別化できたような気がしています。

【追記:2008年02月11日】
「IDEA*IDEA::favicon.ico(ファビコン)の作り方」という投稿記事が公開されました!上記でご紹介させて頂いた「Favicon Japan」も紹介されていますが、その他にもとってもお役に立ちそうなサイトが紹介されていますよ!

Page 2 of 3«123»