ウェブデザインについて Archive

今回は「ウェブデザインのヒント」というサイトタイトルらしい話をします。

さて、ウェブデザイナーというのは、まあデザイナーというだけあって、ある程度技術を身につけたらその先はセンスというか感性というか、そういう不確定要素に依るところが大きいんですよね。

そこは当然、自分で学ぶしかないわけです。

電車のつり革とか、CMとか、お菓子のパッケージとか、コンビニに行けばありとあらゆるもののパッケージデザインが気になったりしちゃうのも、職業病といえばまあそうです。

で、最近もっとおもしろいお手本ツールを見つけました。

http://www.vecteezy.com/

海外のサイトなんですが、ここでは無料でベクター画像が手に入ります。

ベクター画像というのは、点と線で構成された拡大率に依存しない画像データで…って言うと余計わかりづらいんですけど、 要はイラストレーターなどで編集可能な画像ファイルです。それが無料でダウンロードできるんですね。（ライセンスに関しては個々の作品ごとに記載があります。みなさん基本的に寛容ですね。）

他人のデザインいじり放題。
これはパッケージデザインの模写とはまた違った楽しさがあります。

角度を変えたり色を変えたり、レイヤー（※1）の間に画像を挟み込んだりいくらでもできるわけですから、おもちゃとしてもずいぶん楽しめます。仕事に使うのでなければ、このまま切り貼りしてサイトやらブログテンプレートのデザインを作るのには充分なクオリティです。

また、自分で一度作った.aiや.psd （※2）のデータなどは、再利用できるように取っておく場合が少なからずあると思うんですが、そういったストックの中にこれらのファイルを一緒に保存しておくと、いざというときに思わぬヒントになるはずです。

常に新しい引き出しを用意しよう思いつつも、自分で生み出すだけだと枯渇してきてしまうもの。

他人のデザインは刺激的な教材ですが、実際にいじれる機会というのは案外ないので、こういうサイトはありがたいですね。自分の作品をアップロードすることもできるようなので挑戦してみるのもおもしろそうです。

ちなみに系列で、ブラシをダウンロードできるBrusheezy、フォントのUrbanfontsなどもあるようですよ。

素材サイトなど、海外のこういった活動は日本と比べてかなりオープンなので、探してみるとおもしろい発見が結構あります。そういう意味では、デザイナーも英語ができたほうが勉強しやすいはず。

で、教材にひとつ、と軽い気持ちでVecteezyのメルマガをとってみたら、
口語だらけで苦戦するはめになりました。

当然っちゃ当然ですね。撃沈。

※1…レイヤーとは、画像処理ソフトウェアなどに搭載されている、画像をセルのように使うことができる機能のことである。レイヤとも呼ばれる。Adobe PhotoshopやPainterなどの商用ソフトだけではなく、フリーの画像処理ソフトウェア(GIMPなど)にも搭載されているものがある。

※2….ai:Adobe Illustratorデータファイルの拡張子
.psd:Adobe Photoshopデータファイルの拡張子

出典: フリー百科事典『ウィキペディア（Wikipedia）』

関連記事：

• オンライン 画像クロッピング ツール – クロッパー
• mixiに複数のRSSを登録
• 作業の効率化
• ユーザビリティ＝ウェブデザインの柱
• 商用ウェブサイトの必要性（どんなに小さなお店でも！）

個人的に愛用している「@cosme（アットコスメ）」という化粧品クチコミサイトの姉妹サイトから、つい最近コスメコムオンラインストア楽天店がにオープンしました。

最大手のクチコミサイトでベストコスメ大賞に選ばれた商品がまとまっていて見やすいので、今まで地道にクチコミを見ていたけど、ちょっと手抜きができそうな予感がします。

ねば塾もトップに載せてくれてるし。でかしたぞ。

さて、ユーザーの立場として言わせてもらえば、アットコスメ自体は残念ながら使いやすいとは言いがたいのですけど、なぜかこっちのサイトはユーザビリティがアップしてます。（アットコスメも直せばいいのに…。←愚痴）

バナーや特集のタイトルロゴはちょっとうるさい感じもするけれど、左上に懸賞、トップ中央にビジュアルのいいピンクのバナーを持ってきているあたり、マーケティング戦略が盛り込まれてるのがよくわかります。

ウェブサイトのマーケティングって言っても、ふつうはあまり意識することはないと思うのですが、実はサイト内の配置にも工夫がされていることが多いです。

代表的なのは「一番視線のいくところに重要なものを置く」という方法。

ウェブサイトは通常、縦にスクロールするようにできているので、ユーザーの視線というのは左上から右上、そのあとスクロールしてまた左から右へ、と流れるのが普通です。

これを「Z型の視線軌跡」っていうんですが、そのため商用のウェブサイトを作るときは左上にいちばんのセールスポイントを持ってくるのが常識になっています。

これを知ってしまえば逆に、左上にあるものを見て「ああ、このサイトはこれを一番見てほしいんだな」と理解したうえでネットサーフィンすることができます。無駄に踊らされないように、知っておいた方がいいですね。

と、こんな風にウェブサイト戦略でいう一等地の左上コーナーですが、ユーザーの立場を考えると他のものを持ってきたほうがいい場合があります。

たとえば楽天ダウンロード・CD・DVD・楽器などを見てみると左上に検索窓があるのがわかります。色もわかりやすいように工夫されています。

これは、楽天がユーザビリティに配慮している証拠でもあるんですね。Yahooもわかりやすいと思いますが、やはり検索窓が一番左上に配置されています。

大手は特にユーザビリティの重視が求められるので、こういった配置になっていることが多いです。

ちなみに、センタリング（中央揃えの配置）されているサイトでは、中央の一番上がもっとも視線のいく位置なので、そのへんもチェックポイントです。

実はユーザビリティを向上するというのは、売り上げを増やすのに最も簡単で効果のある方法のひとつなのです。 ガツガツしているサイトはそのへんを見落としていることが多いんですね。

言ってしまえば、安心感と便利さを提供することが重要なのは、オンラインでも実店舗でも同じということですよね。

サービス業の皆様、共に頑張りましょう。

関連記事：

• このページにアクセスするための十分なアクセス権がありません。
• オンライン 画像クロッピング ツール – クロッパー
• ウェブサイトにおける言葉づかい
• ユーザビリティ＝ウェブデザインの柱
• 商用ウェブサイトの必要性（どんなに小さなお店でも！）

Flashをオススメしないポインツ、最後のひとつです。

（※参照　アンチFlashではないけれど。　/　Flashの理想と現実　1　　2　）

3.モバイルの転送速度はまだまだ遅い。

携帯電話のPCサイトビューアやらW-ZERO3やらPDAやら、モバイルの日進月歩ぶりはみんなが実感してるところですね。でもいかんせん「ケータイでインターネット」はまだまだ快適とは言いがたい。わたしは表示が遅いとイラっとするので最初から画像の表示は切ってます。Flashなんてもってのほか。

Flashの今っぽさに飛びつくより、モバイル市場の拡大に目をつけることを強くオススメしたいです。今はまだ「FlashはGIFアニメのちょっといいバージョン」くらいに思っていてちょうどいいくらいでしょう。

…だからFlashなんてまだ作れなくっていいやい。

ってつぶやきながら、半泣きでActionScriptと戦っていることは
トップシークレットです。

関連記事：

• .swfから.flaへ逆コンパイル！Motion Decompiler 3
• Dreamweaver8スニペットの文字化けを直してみた
• Flashの理想と現実　2
• Flashの理想と現実　1
• アンチFlashとまでは言わないけれど。