ユージック WEBデザインのTIPSやWEBデザインの考え方に関するカテゴリ

つい先日参加したイベントでビジネスアーキテクツの森田雄さんもおっしゃってもいたんですが、WEBデザインって企業が発信したいメッセージと、それを受け取ったエンドユーザーが抱く企業のイメージとのギャップであったり、溝を埋めるようなコミュニケーションをデザインする役目がWEBデザインにおいて大事なんだなと感じます。

企業が発信したいメッセージは色々な利害関係によって角が尖ってしまい、エンドユーザーにはチクチクと刺さる。だからその角を丸める作業が必要になる。企業の理念であったり、事業が目指すゴールなどを考慮した情報を発信をするのはもちろん必要。でもそれをエンドユーザーのニーズに合うメッセージとして受け取ってもらわなければいけない。WEBデザインってそういうフィルターのような役割なんだと思います。

ちまたではユーザー中心デザインが何かと流行ってはいるけれど、かならずしもユーザー中心デザインで利益を上げられる企業が多いとは思わない所もあります。根本的には企業の問題解決はユーザー中心のデザインなんだとは思うんですけれど、商売ってそうも単純ではないと思うんですよね。

SEOで上位表示するだけで物が売れたり、サービスを提供できたりっていうのはもう難しいんじゃないかとも思うし、WEBマーケティングにおいてSEOを度外視することはできない。

企業中心デザインなのかユーザー中心デザインなのか、SEOなのかコンテンツなのか、これからはどこに力を入れたらいいのかっていう優先順位が重要になるんではないかと思います。

投稿者: u-ziq 日時: 00:58 | パーマリンク | コメント (0) | トラックバック (0) | ▲TOP

Jul05

超便利なブラウザチェックの仕方

一つのマシンでWindowsとMacのブラウザチェックをしようと思えばMacのParallelsを利用して仮想マシンとしてWindowsを起動してチェックする方法が有名ですが、WindowsでもソフトなしでWindowsとMacのブラウザチェックをできるサイトがあったのでご紹介します。

browsershots

以下の主要なブラウザチェックに対応可です。

Windows	Mac	Linux
Firefox 1.5	Firefox 2.0	Iceweasel 2.0
Firefox 2.0	Safari 2.0	Konqueror 3.5
IE 5.0
IE 5.5
IE 6.0
IE 7.0

ちなみに非常に重たくて、表示されるまでに時間がかかるので、チェックを入れてSubmit Jobを押した後のページをブックマークしておき、後でチェックして確認をするという形になるようです。

投稿者: u-ziq 日時: 22:48 | パーマリンク | コメント (2) | トラックバック (0) | ▲TOP

Jun23

CSS編集エディタ　CSSVista

CSSを編集するときに便利なアプリケーションを見つけたのでご紹介します。

SiteVistaこちらのサイトでCSSVistaをダウンロードすることができます。

CSSを編集を簡単に編集するだけならFireFoxのプラグインを使用するのが手っ取り早いかと思いますが、これだけだとIEでの確認ができませんよね？

今回ご紹介するCSSエディタはデザインビューでIEとFireFox両方で確認できるという優れものです。

他のソフトに使い慣れてる方でも、IEとFireFox両方のデザインビューを見れるって機能には惹かれませんか？

投稿者: u-ziq 日時: 23:45 | パーマリンク | コメント (0) | トラックバック (0) | ▲TOP

Jun10

アイコンの検索エンジン iconlet

ちょっとしたアイコンが必要なとき、アイコン素材のダウンロードサイトで探す方も多いかと思います。アイコンの素材を提供しているサイトはデザインが結構統一されていて、デザインのテイストが違ったら他のサイトを探したりと素材サイトめぐりで結構時間を使うってことも良くあることかと思います。そんなとき、アイコンだけの検索エンジンがあればな～って思うときもありませんか？

そんな時に便利なアイコンのダウンロードができる検索エンジンiconletをご紹介します。インターフェイスはどことなくGoogleを意識したデザインになってますね。

かなりバラエティー豊富なデータがそろっているので非常に便利です。海外サイトなので、アイコンを探す際は英語で探すことをお勧めします。

（例）home,mail,sitemap,download

投稿者: u-ziq 日時: 16:01 | パーマリンク | コメント (0) | トラックバック (0) | ▲TOP

Apr01

PNGを使ったデザインに変更

日曜日の休みを利用してサイトのデザインを少し変えてみました。今回はPNGを利用して画像を重ねるデザインに挑戦してみました。せっかくなので少し解説してみます。

上部背景の青い空はbodyの背景で幅1ｐｘの画像で横方向にリピートしています。その上にヘッダー部にbottom付け、右寄せに背景を指定しエラスティックレイアウトにも対応しています。画像はPNGを利用してbodyの背景画像と重なってもグラデーションがきっちり表現できるようにしています。オブジェクトは盛り上がりのある丘と、月か太陽かわからない球体。奥行き感を出すために丘を登るビジネスマンのシルエットを配置しました。

一応IE6でもPNGがきっちり表示される仕掛けはしているのですが、僕のPCはIE6をIE7にアップデートしちゃったので確認してません。上からおりてくるメニューもPNGなんですが、IE6でPNGを表示する仕掛けを使ったら画像がめちゃくちゃになったのでそのまんまです。これPNGがきっちり表示されなかったらかなりぐちゃぐちゃなんだろうな...

デザインコンセプトは僕自身が最近デザイナーからスーツを着るディレクターというポジションに移動したということもあり、自分自身の気持ちを投影したような感じにしてみました。なんというか、先も見えずにどこに向かっているかもわからないけども、上ってみなければわからない道を突き進むといったような感じです。

デザインは結構気分ですぐ変えるので、また数ヵ月後には変わっていると思いますが、デザインをコロコロ変えるのっておもしろいですね。やっぱりデザインは仕事じゃなくプライベートでするのが一番やってて楽しいと思いました。日曜デザインおすすめです！

投稿者: u-ziq 日時: 21:14 | パーマリンク | コメント (0) | トラックバック (0) | ▲TOP

Mar09

クールなフッターのデザインギャラリー

Put Your Best Foot Forward: 19 Gorgeous Website Footers

フッターのデザインっていつも同じ感じに落ち着いてないでしょうか？なかなかサイトのイメージがわかない時や、何かが足りないなぁなんて思っているときにフッターのデザインを楽しい物にすると意外とイメージが変わったりします。

フッターのギャラリーサイトを見つけましたのでご紹介します。ただのナビゲーションにも花を添えてあげましょう。

投稿者: u-ziq 日時: 10:53 | パーマリンク | コメント (4) | トラックバック (0) | ▲TOP

Feb15

WEBデザインで行き詰まった時に助けになる8つの戦略

デザインで行き詰ったときの8つの戦略というタイトルの記事を見つけました。デザイナーは人それぞれ違った対処法でスランプを脱出するかと思いますが、個人的にも共感する部分が多かったので以下の原文を翻訳し要約したものをご紹介したいと思います。

尚、多少の翻訳のミスがある場合があるかもしれませんがご了承ください。

英語の原文はこちら

http://www.seomoz.org/blog/web-design-tactics

内部のコンテンツから内から外の順に作業しよう

通常はheader部から作っていくというのが一般的かと思いますが、内部のコンテンツから作っていくことで新たな発見が生まれるかもしれない。

ホワイトボードや紙、ペンを使ってスケッチをする。

ソフトを使用せずアナログなツールを使ってイマジネーションをスケッチすることによって新たなアイデアが生まれることもある。

参考サイトなどからインスピレーションを得る

CSSギャラリーやデザイン書などから積極的にインスピレーションを得る事によって新たなアイデアを発見することもある。

放置することを覚える

作りこんだボタンや素材だけど、いまいちだなと思うような素材は、とりあえず放置する。次回で再利用できるかもしれないので、放置するファイルのフォルダなどを作って保存しておく。そして一から作成にとりかかる。

パソコンの前から離れてみる

何をやってもうまくいかない時など、パソコンの前から離れてみる。外の空気を吸ったり、人と会話をすることによって、落ち着きを取り戻し、あたらしいアイデアが生まれることもある。

吸収することを心がける

アートは無から作りだすものではなく何かと何かを組み合わせてクリエイトしていくもの。好きなデザインや綺麗なアイコンなどからアイデアを盗むのではなく、インスピレーションを自分なりに解釈し、リミックスすることによって新たなクリエイティブが生まれる。

一発屋になるな

得意なデザインのフォーマットを選んだり、同じテキスチャなどを繰り返し使うのではなく、色々なフォーマットのデザインを追及していこう。

他者の意見を求めてアイデアをインプットしていく

様々な人の意見を求めてインプットしていく。それによって改善点がわかり、より良い物を作る手助けとなる。しかし、明らかにセンスの悪い人の意見は鵜呑みしないこと。

投稿者: u-ziq 日時: 17:39 | パーマリンク | コメント (0) | トラックバック (0) | ▲TOP

Feb08

エラスティックレイアウト

ブログのレイアウトをエラスティックレイアウトにしてみましたので、やり方を簡単にまとめて紹介しようと思います。

まずエラスティックレイアウトとは何かということからご説明します。

エラスティックレイアウトとは幅は固定ながらウィンドウサイズや文字サイズを変更することで固定幅が変化するレイアウトのことを指します。

参考にした2つのサイトをご紹介します。

2xupで実装されているエラステックレイアウトを調べてみた。をご参照ください。

一行あたりの文字数を制限する elastic layout （エラステックレイアウト）

まずは(X)HTMLの構造を以下だと想定します。

<div id="container">
	<div id="main"></div>
	<div id="sidebar"></div>
</div>

div#containerのmin-width、max-widthをemで指定します

これは文字サイズ変更でレイアウトが変わるようにするためです。IE6はmin-width、max-widthが効かないのでIE独自の指定した数値の幅まではフレキシブルに変動する機能を持つプロパティを指定します。

*html div#container{  /* IE6ハック */
width:expression(document.body.clientWidth > 960? "960px" : "auto");
}

div#container {　　
min-width:40em;
max-width:60em;
}

div#mainとdiv#sidebarのwidth、marginを％で指定します

これはdiv#containerの幅によってdiv#mainとdiv#sidebarのwidthを変動するようにさせるためです。div#containerの内部はリキッドレイアウトということですね。

div#main {
float:left;
width:59%;
margin:0 0 0 4%;
}
div#sidebar {
float:right;
width:29%;
margin:0 2% 0 0;
}

エラスティックレイアウトを実践するためにはプロパティの指定でem、%、 pxなどを併用して使用するため、これらの数字が一体どのくらいの幅なのか直感的にわかりにくいと思うので、近似値表を見つけたので、これを参考にしてください。

Approximate Conversion from Points to Pixels

imgも文字サイズによって拡大したい場合はFLASHとJavascriptを組み合わせたライブラリを使うことで実現します。エラスティックレイアウトでイメージを自動で拡大する方法

投稿者: u-ziq 日時: 18:51 | パーマリンク | コメント (2) | トラックバック (0) | ▲TOP

Jan27

これからのWEBデザインの考え方

結構ひさしぶりにWEBデザインのエントリーを書いてみました。最近はユーザーの操作によって変化できる、ユーザー視点でのデザインが重要視されていますね。

それらに対応していくためにも、近い将来(たぶん1.2年？)100％そうなりそうな、これからのWEBデザインをもうそろそろ実践していき、過去の効率の悪い手法(CSSハックなどの類)を捨てていこうってわけ。

まずは最近流行のエラスティックレイアウトから。
エラスティックレイアウトっていうのはウィンドウズの幅に合わせてwidthやheightが変動するリキッドレイアウト+固定レイアウトって感じ。

もうひとつはpng画像の使用。グラデーションが効いたPNG画像をリピートさせることによってレイヤー感覚でウィンドウサイズやコンテンツの量によっても柔軟に対応できる綺麗なデザインを実現することができます。

業務の効率化を図ることで1時間、2時間でも早く帰り、僕を含め日本中のWEBデザイナーが家族や恋人と幸せな時間を過ごす事ができるよう心から願います。

投稿者: u-ziq 日時: 16:42 | パーマリンク | コメント (2) | トラックバック (0) | ▲TOP

Nov14

Dream weaverのテンプレートの属性をページごとに変更する

Dream weaverのテンプレートを使用するとテンプレートの編集可能領域に含まれない部分にidをふれなくなるため全ページ同じレイアウトになってしまう。
効率よくかつページレイアウトを変えるためにTIPSをご紹介。

編集したいタグのカーソルであわせてから

修正→テンプレート→属性を編集可能にする

そのつど変更を加えたいページの属性を変更したらテンプレートの更新を行うことをお忘れなく。

投稿者: u-ziq 日時: 18:25 | パーマリンク | コメント (0) | トラックバック (0) | ▲TOP

Sep06

WEB制作でベストな画像処理ソフト

僕が使ってる画像処理ソフトは主にフォトショップで、地図とかちょっとこったイラストを描きたいときはイラストレーターを使っています。バージョンはフォトショップが7でイラストレーターが9。

なぜCS2じゃないかというと、外注さんやクライアントでも作ったファイルが編集できるからっていうことと、PCのCPUをあまり食わないってのが理由。

しかしなんだか最近WEBならFireWorksのほうが絶対使えるんじゃねーかとしか思えないんですよね～。だってドリームウィーバーからもすぐ立ち上げれるしFLASHとの連動もスムーズ。簡単なアニメーションGIFだって作れちゃう。そしてCPUもフォトショップ+イラストレーターほど食わない。
長年フォトショップ+イラストレーターを使ってDTPやってきたプロの人でもWEBに転身してからFireWorksに切り替えてる人も多いみたいだ。
てことはきっとWEBをやるならFireworks!

でも実際どうなんやろ～。出来ることの幅はフォトショップ+イラストレーターのほうが多いかもしれないし。。。
う～ん。グラフィックデザイナーと絡む機会があれば話を聞いてみたい所です。

投稿者: u-ziq 日時: 22:52 | パーマリンク | コメント (2) | トラックバック (0) | ▲TOP

Aug25

良いデザインのWEBサイトとは

ある程度本数を作っていると( といってもそんなに多くないけども... )何が良いデザインでどうすれば良いデザインになるかという事を考える時間が、作業をする時間の中でも割合が大きくなってきてしまいます。

商用デザインならまず

目的にあったコンテンツ、テキスト、イメージ画像を考える
ターゲットを想定したデザインテイストを考える
ユーザビリティー、アクセシビリティーを考慮する(ターゲットユーザーが制作者サイドの意図する目的にたどり着きやすくする"誘導”に限りなく近い感じ)

続きを読む "良いデザインのWEBサイトとは" »

投稿者: u-ziq 日時: 23:06 | パーマリンク | コメント (0) | トラックバック (0) | ▲TOP

Aug23

デザイン書を読んでみる

最近、昼休みにデザイン書とかクリエーター向けの雑誌とかを読んでいます。なんだかかんだ言ってデザインしてる時が一番楽しいと感じるし、デザインで悩んだときに理論が助けになってくれたらいいなぁって思うしね。

とりあえず読みかけなんだけど、いいなぁって思ったのが、WEBデザイン業界で結構有名らしい矢野りんさんという人の書いた『デザインする技術』っていう本。ビギナー向けのWEBだけに限らない一般的なデザイン理論書って感じかな。黄金律だとか、メタファーだとかをわかりやすい感じに書いていました。たぶんずっとデザインしている人や芸大に行っていた人なんかは"そんなん基本ちゅーの基本やん”って感じなのかな～って思うけど、デザイン暦の浅い自分には読みやすくて、お昼休みに飯を食いながら読むのに超最適！って感じでした。

僕は雑誌とかをほとんど読まないし、オシャレ雑誌とかにはあまり興味がないんですけど、お隣さんが愛読している『pen』っていう広告業界のクリエーターの特集やコラムなどの内容の雑誌がありまして、読んでみるとこれが結構おもしろいんです。特に市バスや電車などの駅や繁華街の支柱とかにあるようなユーモアがあったり意図的にこちら側の感情に訴えてくるような情報を含んでいる広告デザインの特集があるんですけど、それがすごく面白いんです。

ユーモアを含んだデザインとか、人の感情に訴えるようなデザインっていいですよね。

投稿者: u-ziq 日時: 22:18 | パーマリンク | コメント (2) | トラックバック (0) | ▲TOP

Aug09

制作実績のポートフォリオを作る

今日は制作実績のポートフォリオを作ってみました。
WEBデザイナーに転職して半年でポートフォリオ？って感じなのですが、制作実績のほうも個人サイトも含めて13サイトほどになってきたので、ここらへんでいっちょかっちょいいポートフォリオでも！!
っとは気合は入らずに、登録も管理も楽ちんにできるシステムを使いたかったのでPhpSpotさんの所のWebshotというアプリケーションを使って作りました。

Webshotは便利で多機能！!なんたってRSS付いてるし、ブログなんかのサイドバーにも貼り付けちゃったりできる機能もあります。使うときにデータベースを作らないといけないので初心者があまりお手軽にはできないっつー難点もありますが。。まぁでも、ロリポップとかだったらMySQLの知識がなくても管理画面でphpMyadminを使ってサクっとデータベースも作れるので簡単っちゃー簡単です。

そこで自分の制作実績のポートフォリオもブログで公開！！っといきたいところですが、全部会社のクライアントのWEBサイトだし公開は控えて転職するとき等にこっそり活用しちゃおうかと思います。

制作実績のポートフォリオを作ることはWEBデザイナーとしては大事なことなんじゃないかと思いますね。

投稿者: u-ziq 日時: 23:03 | パーマリンク | コメント (4) | トラックバック (0) | ▲TOP

Aug08

Flashのイベント in 大阪

今日はAdobeと東京のRokunanaの企画のFlashのイベント
Flash® 8 INSPIRATION SCENE Summer Jamに行ってきました。
講演されてたのはタナカミノル氏とトザキケイイチ氏。
内容は御ふた方の仕事紹介だったり、ワークフローについてだったり、PIP(WEBサイトなどで人物による背景を抜いた映像によるナビゲーションとかのやつね)についてだったりでかなり面白かった。
僕はあまりFlashには興味ないほうなんだけど、御ふた方のワークスタイルにはほんま尊敬できるって感じ。特にトザキケイイチ氏の作品のクオリティーはめちゃくちゃ高くて日本でもきっと有数のFlashクリエーターなんやなって感じがした。トザキケイイチ氏の作品はホンダの博物館のキヨスクのシステムだとかDocomoのブランディングサイトなどがある。
PIPの話なんか特におもしろくて背景の色抜きのやり方だったり、撮影のコツだとかAdobeの映像編集ソフトのアフターエフェクトの操作方法や機能紹介など、今後もしPIPをするんであれば勉強になることだらけだった。
帰りにはAdobeのTシャツも頂けた。
こんな良いWEB系のイベントは大阪ではそうやらないだろうなって感じ。
本当に勉強になりました。

投稿者: u-ziq 日時: 22:15 | パーマリンク | コメント (0) | トラックバック (0) | ▲TOP

Jul14

WEB業界のイベントに初参加

土曜日は東京の六本木にWEBスタンダードのセミナーに行くことになった。新幹線代とセミナー代は会社もち！なんか有名な人らのパネルディスカッションもある１日がかりのイベントらしい。
講演内容

Web Standards:The Right Tool for the Right job
The Spry framework for Ajax & Web Standards
Web標準を最大限に活かすディレクション＆ガイドライン
Web標準テクノロジーの上手なマッシュアップ
すぐに役立つWeb標準テクノロジーの効率化テクニック
Web標準、SEOにも通じる”攻め”のアクセシビリティ
Dreamweaver&Contributeを使ったWeb標準実装ガイド
Web標準はビジネスをどう変えるか

アドビの人のSpryの講演とかAPIを活用したマッシュアップについての講演がおもしろそう。色々吸収してこなきゃ。

投稿者: u-ziq 日時: 00:10 | パーマリンク | コメント (0) | トラックバック (0) | ▲TOP

Jul07

META情報

XML、HTMLやプログラム言語にはメタという情報を定義する物がある。
HTMLで例えると、”＜meta discription="～のことなら○○株式会社"＞　”とかがそれにあたる。
＜meta discription=""＞はそのサイトがどういうサイトかをまとめた概要ですよっていうメタ情報。

そのメタ情報っていう概念は結構面白くてプログラム以外にも色んな事に当てはまる。
たとえば、仕事の出来る人から何かを学ぼうとするとき。そのノウハウだけを吸収するんじ
ゃなくて、なぜそれがベストな方法なのかという体系立てたメタ情報を意識することで、ノ
ウハウを吸収する効率が上がるし、自分が実践する時にも色んなパターンをそのメタ情報に当
てはめて実行することができ、なおかつアレンジが効く。
そもそもノウハウつーもんは無数にあるし、人それぞれに合う合わないがあるから、多くを覚
えて、実践するなんてそっちのほうが無理がある。

それ以外の例だと、情報を人に伝えるとき、例えばメールを送る際に、見出しにメタ
情報をつけてやると、相手がその情報を見たときに伝わる速度もグッと上がる。
例をだすと。”＜重要！＞○○のお知らせ　”みたいな感じ。

XMLを書くときにもこのメタを考えながらマークアップしていくわけなんやけど、
情報を体系立てて定義する”情報　”を考えるってなかなか難しいんよね。

投稿者: u-ziq 日時: 23:13 | パーマリンク | コメント (0) | トラックバック (0) | ▲TOP

Jun25

日曜のWEBデザイン

デザインってほどでもないけどブログのデザインを少しだけいじってみた。
ＭｏｂａｂｌｅｔｙｐｅのＣＳＳは結構複雑で最初戸惑った。
ていうのも全体的なＤＩＶのサイズ設計とテキストの装飾設定と各部分のページレイアウト装飾とか構造的にばらばらになっててそれがひとつのＣＳＳにまとめられている。
しかも編集画面がブラウザなんで超やりにくい。iframeかなんかで外部テキスト読み込みになってるからＣｔｒｌ+Ｆで文字検索できないのが辛い。
日ごろ手打ちでマークアップとＣＳＳ打ってるから打つのは問題ないんだけど確認画面ないし、反映されるのに時間がかかるときがあるから手の込んだデザインをしようとなるときつい。(うちの回線が遅いのが原因かもしんないけど。)
スタジオ８でＭｏｂａｂｌｅｔｙｐｅのタグ使えるプラグインあるらしいけど、うちのはＭＸのエデュケーションモデルだから使えない。

まぁでも不便なりにも夜の数時間を利用しての日曜大工しかり日曜デザインもおもしろいな～。

投稿者: u-ziq 日時: 23:16 | パーマリンク | コメント (2) | トラックバック (0) | ▲TOP

Jun05

角丸テーブルの作り方

角丸テーブルを作るとき

1.テーブルを組んで端に画像を配置する。
2.CSSのバックグラウンドで画像をdivの背景に指定する。
3.ニフティーコーナーのjavascriptとCSSで作る。
※参照URLhttp://www.html.it/articoli/nifty/index.html
4.CSSの-moz-border-radiusを使う。
※参照URLhttp://allabout.co.jp/internet/hpcreate/closeup/CU20060515A/index2.htm

1.のテーブルはスマートでないのでBAD
4はFirefoxがNGなので今のところBAD
3.はJavascriptが使えない環境では無理なのでSOSO
2は今のところほとんどの環境で使用できるのでGOOD

個人的には3.で丸角テーブルを作りたいところ。
Javascriptを使わない設定のやつは除外してでも、この方法は結構スマートでシステマチックだ。

投稿者: u-ziq 日時: 22:27 | パーマリンク | コメント (0) | トラックバック (0) | ▲TOP

Apr10

WEBの文章ライティング

WEBデザイナーになってまずは文章のライティングは大事だなって思うようになり、WEBの文章ライティングを勉強してみました。以下にテキストを綺麗に見せるTIPSを少しご紹介します。

1：行間を120％に指定する。
2：英数字は半角にする。
3：日本語と英語が混ざっている文章の場合は英単語と日本語の
間に半角スペースを入れる。
4：短い文章の場合はテキストインデントで文頭にスペースを入れ
ないほうがバランスよく見える。

投稿者: u-ziq 日時: 23:06 | パーマリンク | コメント (0) | トラックバック (0) | ▲TOP

内部のコンテンツから内から外の順に作業しよう

ホワイトボードや紙、ペンを使ってスケッチをする。

参考サイトなどからインスピレーションを得る

放置することを覚える

パソコンの前から離れてみる

吸収することを心がける

一発屋になるな

他者の意見を求めてアイデアをインプットしていく

まずは(X)HTMLの構造を以下だと想定します。

div#containerのmin-width、max-widthをemで指定します

div#mainとdiv#sidebarのwidth、marginを％で指定します

CONTENTS

BLOG SEARCH

ADS

FEED

JOB INFO

ANNOUNCE

WHO IS WRITING