デザインの最近のブログ記事

ロゴ

画像にネオンの曲線や、光の効果を加えると写真がかなりかっこよくなります。
挑戦しようと思ってもなかなか難しいと思います。
ただ、本気でやりたいと思っている人は是非ここで勉強してみましょう。
英語のサイトですがわかりやすくチュートリアルで書いてあるので、やりながらCGデザイナー気分が味わえて
さらには全部達成すればかなりのスキルアップになるでしょう！おすすめです

Adobe Photoshop Tutorials - Rainbows, Glows and Light Effects

MephoBox

「 http://box.mepholio.com/ 」



WEBデザインをしていていつも苦しませられる「生みの苦しみ」

発想が尽きたあの焦燥感なくるしいです。

そんなとき助けてくれるこのサイト。

様々なデザインがヘッダーなどのカテゴリわけされて
インスピレーションを刺激します。

困ったときには他の作品をみるのもいいと思います。

ＷＥＢ制作をする上で切手も切り離せないユーザビリティ。
このサイトでも何度もご紹介していることです。

少し古い記事ですがＷＥＢページを見る人の目の動きを検証した記事を見つけたので
ご紹介します。

「 http://www.useit.com/alertbox/reading_pattern.html 」

人の目は「Ｆ」の字を書きながらページを見ていきます。


これは232人の被験者を対象に行われたもので、大体1ページから重要なコンテンツを見つけるために2秒から3秒というものすごい短時間に驚異的な速度でページを見ていくそうです。


その視線の経路をビジュアル化したのがこの画像。全部で3段階のステップを踏んでおり、各段階を踏んでいった結果、「F」の字を描いていく。大体どのユーザーも一貫してこのパターンを踏んでいるらしい。以下がその全3段階の説明。どういうレイアウトが効果的なのかが分かります。


第1段階：
訪問者は最初にページの一番上のコンテンツエリアを水平に視線移動させる。これが「F」の一番上の水平ラインになる。

第2段階：
次に訪問者はページを少し下に向かって視線移動させてから、再び第2の水平移動をする。この第2の水平運動は最初の水平運動よりも短い。これが「F」の字の上から2番目の短い水平ラインになる。

第3段階：
最終的にユーザーは左サイドから垂直下方向に向かってページをスキャンするようにして視線移動させる。時折ゆっくりとした速度で、そして機械的に見ていくとのこと。中にはまだら状に視線移動させる人もいるとのこと。いずれにしろ下方向に移動するので、これが「F」の最後の要素になります。

なお、この図の色は何を示しているかというと、最も見られているのが赤色、次が黄色、最小が青色。全く見られていないのが灰色とのこと。

結果、累計パターンとしてはコンテンツの内容によって大体以下の3パターンに分類されるらしい。


パターン1：記事



企業のウェブサイトにある会社概要や一般的な記事の場合がこの画像のパターン。典型的な「F」パターンです。

パターン2：製品ページ


これもF字のパターン。一番上のタイトルを見てから製品写真を見て、あとは説明をざっくりと見ているようです。

パターン3：検索結果


各検索結果のタイトルを見ていくわけですが、トップページの上位しか見ていないことがわかります。


ＷＥＢで調べ物をするときなどは自分がほしい情報を見つける為にかなりのページを見ると思います。
そのなかで自分にマッチングしたものしか集中的に見ないと思います。

ページ構成を考える際、見せたいものを効果的に配置すること、重要です。

先日は補色についてお話しましたが、今日は「近似色」について。

補色は色相環の反対側の色でしたが、「近似色」はその名の通り、基本的に色相環で近い色となります。



近似色を使うメリットとしては、「色調が整う」「見た目の統一感が出る」などですが、「目立たなくなる」というデメリットもあります。

なので、近似色で構成するとき、たいていの場合は補色やそれに近い色などを織り交ぜてアクセントをつけるのが基本的です。


近似色の例


補色（の近似色）例


もちろん補色にこだわる必要はなく、違和感のない色であれば織り交ぜていくが良いでしょう。

ただしその場合も色の使い過ぎには注意です。

色を使いすぎると、キーカラーが何なのか分かりずらくなり、バランスも崩れてしまいます。

トータルバランスを見て、色を使うようにしましょう。

また色関係のお話です。

webデザインに関わる方々の間では、「補色」というのをご存じの皆さんも多いかと思います。

この「補色」というもの、これは何かと言いますと、

「色相環で反対側に位置する色」です。

ちなみに「色相環」はこちら。



RGBでは、混ぜると白になる色ということらしいです。

サンプルはこちらです。



見てわかるとおりですが、コントラストの対比がハッキリしていて、まさに「反対側の色」ですね。

この補色には、互いを強調しあう効果があるそうです。

外でよく見かける看板などにも使用されていることは多いです。

web上では片方の明度などを調整して、より見やすく（目に痛くない程度）で配色されているのをよく見かけます。

ただし見やすい配色ではありますが、無計算な多用は危険のようで。

いつでもそうですが、ベストなタイミングと場所で使っていただけると効果大だと思います。

web制作とは切っても切り離せない「色」との付き合い。

企業やロゴのイメージカラー、装飾用のカラー、注目度を与えるワンポイントカラー...などなど。

様々な状況・どう見せるか？など、色の使い方は千差万別です。

方程式のように明確な答えがあるものでもないので、使い方をマスターするのは大変難しいですね。

最近制作上で色を改めて考える必要があったので、初心に帰り基本色の人に与える印象を調べ直してみました。



赤　...　情熱、興奮、怒り、危険、激しい、愛情、熱い、炎、派手さ、力強さ、など

橙　...　新鮮、明るい、活発、元気、親近感、元気、明朗、開放的、新鮮、話し上手、など

黄　...　快活、幸福、光明、歓喜、希望、愉快、注意、緊張、軽率、友達、など

緑　...　平和、安全、永久、自然、若さ、爽やか、健康、癒し、安息、安定、思慮深さ、など

青　...　冷静、知性、忠実、誠実、冷たい、清潔、涼しい、憂鬱、静寂、インテリジェンス、など

紫　...　高級、神聖、神秘、高貴、豪華、崇高、優雅、精神世界、エキゾチック、など

白　...　清潔、明るい、純粋、素直、真実、真理、正しさ、涼しさ、など

黒　...　豪華、厳粛、重厚、高級、深い、男性的、悪、恐怖、不安、など



基本的な色だけでも与える印象は様々です。

色に迷ったとき、基本的な意味や目的を改めて考え直してみることで、ベストな色にたどりつけるかも知れませんね。

Googleの検索トップページがリニューアルしていました。


気づいた方いるのかな・・・・


検索の文字が大きくなりました。

微妙なリニューアルですが・・・
一部のユーザーからの意見だそうです。

確かにＷＥＢページにとってユーザビリティはとても大切です。
ちょっと考えさせられるリニューアルでした。

最近リリースされたCMSの中で特に印象的だったのが、デザイナーでも使いこなせるという「bingo!CMS」。

従来のデザイナー向けCMS は、「テンプレートはHTMLにコメントタグを入れるだけなのでDreamweaverでも編集できる」というものが多かったけど、bingo!CMSの場合はCMSのUIを進化させて、Web上の直感的な操作でページの編集が行えるようにした点がユニーク。

お約束どおりPHPとMySQLで動く感じ。

bingo!CMSは基本的には商用なんですが、ユニット数が少ない無償のオープンソース版も配布されているので、サポートは不要、自力で何とか派にはそちらでも。

見た感じ、他のCMSよりも直観的な操作っぽい。

なおかつ、ファイル・ディレクトリ構成がシンプルで丁寧な感じです。

結構ありそうで、なかなか見つからないのが和風デザインに拘ったサイト。

もともとアナログの要素が強い和風デザインなだけに、デジタルでの表現にはかなりの手間と労力がかかるせいもあると思います。

でも、やっているところは気合いを入れてやっていらっしゃるみたいで。

今回見つけたものを少しご紹介します。



・「Jonathan Yuen(2006)」

水墨画風のデザイン。マウスポインタも水墨画風に変わります。
画面遷移も素敵ですが、流れてくるサウンドも絶妙にマッチしています。




・「多田屋」

和風デザインでは結構有名らいいのですが、各ボタンを押したときの画面遷移にやられます。




・「日本の暮らし二十四節気めぐり 言の葉草 | 伊勢志摩の旅 よいとこせ」

「言の葉」と同時に奇麗な写真を楽しめるサイト。エフェクトもかなりかっこ良く大人なサイトです。


ゆっくりと眺めていたいような、どれもFlashならではのサイトですが、焦る気持ちを抑えてこういったサイトを周遊してみるのもたまにはいいかも知れません。

息抜きに、デザインの参考に...してみてはいかがでしょうか。

最近制作で手書き風のフォントを使いたくなったのでいろいろ調べてみました。

フリー、シェア、商用利用不可も含めると様々あるようです。

代表的なものを少しご紹介します。


「ミウラFONT」無償＆有償版あり。


「みんなのうた」商用利用不可。


「あんずもじ」ライセンスについては記述なし。


「みかちゃん」基本的にフリー。


「ふい字」基本的にフリー。


企業サイトなどではあまり使う機会は少ないですが、手書き風フォントを使うとサイトイメージが一気にそれらしく変わります。
女性的なやわらかさを演出したいときや、ナチュラル感を演出いたいときなど、様々なシーンに使えますね。

「ここぞ」というタイミングで使ってみてください。

adobeからクロスブラウザー対策のツールが出たのでご紹介。

その名も『adobe browser lab』

Dream weaverのCS4装備の場合はエクステンションとして、ローカルに落とせる模様。

持ってなくても、adobe IDさえ取得していれば、オンライン上での確認が出来ます。

↑こちらは、プレビュー画面。
左がwindowsのFireFox3で右がWindowsのIE7。
それ以外でもWinとMac、各ブラウザーでのプレビューが可能です。

↑こちらはオニオンスキンモード。Flashのオニオンスキンと一緒です。（重ね合わせ。）
どれぐらいずれが発生しているか？などに便利です。

Adobe lab。

実際の制作で覗く機会はあまりありませんが、さすがに最先端のlab。

いろいろ面白そうなものが、開発されています。

2009年に発表されたWordpressのテーマ。
それを何と総勢100テーマを集めたエントリーサイトです。

「100 Amazing Free Wordpress Themes for 2009」

■City Dreams
全画面写真のテーマ。文章中心だけど、ブログは印象的に見せたい方に。

■Colourise
ネオンのような光のラインと背景のコントラストが印象的です。
2.0に代表されるデザインです。

■WP CODA
jQueryやBetter Coda Sliderで実現されたスライダーを実装したテーマ。
そこらへんの拡張狙ってる方は、実装する手間なし。

■Fholio
ポートフォーリオ用に作られたWordpressテーマ。スライダー付です。
写真の好きな方や、自分の作品を発表したい方はこちら。

これだけあるとさすがに迷いますね。

数点、インストール中してみましたが、インストール中にエラーを吐いたり、ちゃんと反映されない物もあったり。

使用目的がブログではなく、CMSを使ったサイトなものもあるので注意。

最近までDream Weaver上でホットスポットの設定が出来ることを知りませんでした・・・

今まではホットスポットはFireWorksのみなせる技かと思っていましたが。

実はかなり以前のDream Weaverから出来たらしいんです。

しかも実に簡単。

ホットスポットウィンドウを開いて、あとはイメージの上に領域を作るだけ。

領域はいつものごとく、長方形や楕円、多角形ツールを使って書くだけです。

いままでは、使いたくてもFireWorks上でJavaを自動生成させてHTML書き出しをして、

そんな具合でしたが、こんな簡単に出来たんですね。

ちなみにコードで書くとこんな感じです。

<img src="XXXXXX.jpg" width="299" height="190" border="0" usemap="#XXXXX" />
<map name="xxxxx" id="xxxxx">

インライン要素の記述方法
<area shape="エリアの形" coords="座標" href="リンク先">
※SHAPE rect=四角形　circle=円形　poly=多角形

関係図はこんな感じです。
<area shape="rect" coords="左上x, 左上y, 右下x, 右下y" href="リンク先">
<area shape="circle" coords="中心x, 中心y, 半径" href="リンク先">
<area shape="poly" coords="Ax, Ay, Bx, By, Cx, Cy..." href="リンク先">

これで見ると、Java、発生してないんですね。

デザイナー、コーダーを含めて制作環境の人にはかなり便利ツールです。

『IE tester』

先日最新の0.3.5がリリースされていました。

これさえあれば、IE5から最新のIE8まで、実際にどう表示されるかがわかります。

未だに、各ブラウザー、バージョンでの表示が問題になりますが、これさえあれば
納品後に表示が崩れてるといった問題も発生しません。

制作会社によっては、表示確認用でバージョン違いのIEを複数台のマシンで確認
している所もあるようですが、これさえあればもうWin1台で確認できるようになります。
この先IE8へ移行する中で、未だにIE6が現役なところもあり、さらにはHTMLのバージョンアップも世間では騒がれています。

こそ先しばらく表示問題からは離れられなそうですね。

Ｂｌog型CMSとして同じようで、対極にいる２者。

色々言われていますが、じゃーどちがいいの？てこと。

個人的には先に耳にしたのはWP。

先に触ってみたのもWP。

両社とも実際あまり触ってませんが、回りにあるのはMT。

文献によると世界シェアは圧倒的にWP。
でも日本のシェアはMTだそうで。

SEO的にWordPressよりMovable Typeの方が優れているような記事がある。
でも、SEOの観点では、ほとんど変わらないという記事も。

日本で使う分には拡張がいっぱいある（ほとんど有料？）のがMTで、デザインなどのテンプレートにはWPに分がある様な。

WPは動。、MTは静。

動、静による差別は以前みたくないんじゃないかな？
実際Yahoo!でもGoogleでも.phpとかは普通にキャッシュされてるし、1ページとして扱われてるし。
実際は動であれ、静であれ、コンテンツを見られてる様なする気もするし。

逆にMTは静が生成されるって事は、再構築しないと生成されないって事で、
再構築の度にめんどくさい度が上がり、サーバー負担も増える一方。

これから先、CMSはどんな感じになって、どこへいくのだろう？

最近の制作案件で地図を白地図を触る機会があったのでご紹介。

昔から素材で地図ってあまりいいのがないといつも思ってた時にコレ。

『地図を活用する人の総合サイト』

今回使ってみて、非常に便利でした。

各都道府県はもちろん、主要都市もあって、連携技で県章なんかもある。

なかでも一番使えたのが『地図ぬりぬり』という機能である。

好きな色で地図が塗れて、文字もかけて、おまけにBIGサイズでのダウンロード。

あとは、PhotoshopでもIllustlatorでも、煮るなり焼くなり。

今までも白地図を扱っているサイトは沢山あったけど、このサイトだけで十分です。

一度、使ってみてください。

それは、現段階ではまだ『メイリオ』を捨てるという選択肢。

そして、フォントファミリーの設定を通常『MSPゴ、Osaka、平角ゴ』の設定から
『平角ゴ、Osaka、MSPゴ』に変えるとゆう選択。

・winユーザーの為にMSPゴは外せない。
・MacユーザーがMicrosoft OFFICEをインストールしてる場合、MSPゴが前にあると
　Osakaをころしてしまう。だからMSPゴよりOsakaが前。
・Osakaはデフォが太めの為、太字にしてもわかりずらい。
　なんで、それ対策としての平角ゴ。
・合わせて、MSPゴの半角英数（妙な子ぶり）対策としてVerdanaを設定。

これが現段階での最善策だと。

Fontもユーザーによって好みがあるけど、そろそろMSP卒業したい・・・

使う時、いつもホントはどっちなんだろうと悩む...

意識をして制作を使うようにしてるけど、それが何でかの理由は不明。

何となく、自然と、もしくは意図的に「制作」を使うようにしている。

「制作」と「製作」、これってどう違うんだ？

オンラインの三省堂辞書でさっそくチェック。

制作：(芸術)作品を作ること
製作：物品を作ること

...。
納得がいかない。
もう一回、調べてみる。

制作：芸術作品(絵画、工芸品、展覧会の出品作品など)
製作：実用的で量産できるもの(精密機械、器具など)

...。

お芝居や部隊、映画が芸術作品だと「制作」と表記するのが正しいの？

しかし、違う。
映画のDVDやのジャケ、色々見ると「製作」の文字が多い。
映画は芸術ではなく、娯楽（実用的？）なの？

いや、よく読んだ。
そしたら、続きがあった。

「映画、レコード、演劇、放送、テレビ、ドキュメンタリー番組などは内容により使い分ける」

そして例が一つ。

芸術映画の「制作」
娯楽映画の「製作」

意味不明。

さらに、こう来た。

制作：作品を作る為の実作業
製作：作品の企画、資金調達、出資、制作、宣伝、興行全般

つまり、作品そのものを作る人を「制作」といい、
その作品に関わる(協力者を含む)すべての人を「製作」と表記するの？
「製作」の中に「制作」があるという関係なの？
会社単位になると「制作」よりも「製作」の方が立場が上なの？

うーん...。

いまだに理解度70%ではあるが。

結局の所、使い方は当ってたのだろうか、間違ってたのだろうか...。

いまだ、よくわからず。

先日、脱MSゴシックを試みた。

Windowsユーザーがwebを見る際、自分でブラウザーのフォントを自分で設定しない限り、
ほとんどの確率でMSゴシックである。

しかし、いい加減なんとかならないものかと色々と考えてみた。

Macユーザーは、ちょっと太めのOsakaか平角ゴシックで十分見た目もきれいに出来る。

しかし、winユーザーの場合、OSやブラウザーの種類、バージョンの幅があり過ぎるため、すべての人に、共通のきれいなフォントでwebを見てもらうことが難しい。

そこで白羽の矢を立てたのが『メイリオ』である。

アウトラインがスムースで、見ていてつかれない。

しかもVistaには標準装備と来ている。

これを使う手はない、と思いつつフォントファミリーの編集へ。

しかし、なぜかうまくいかない。

設定はちゃんとしたはず。

しかし、ブラウザー、バージョンともに統一表示が出来ない。

さんざん、考えた挙句、妥協案を発見。

次回へ。