忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[1] [2] [3

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Webデザインに正解はない

当たり前の話ですが、ふとそう感じたので。

私もWebデザイナーではないので、偉そうなことは言えませんが、
最近、デザインについて「どっちが正しいの。」という現場に出くわすことがありました。


たとえば、
グローバルナビゲーションは上に付けるのと下に付けるのとどっちがいいの?
パンくずリストはつけるべきなんですよね?
など。


結論から言うと、
デザインは、「べき」論や、正否論で結論を出すことは不可能です

グローバルナビゲーションにしても、ページの上部にあるというのが一般的ですが、プロモーションサイトや、ヴィジュアルを重視したサイトでは、ヴィジュアルコンテンツの下部にナビゲーションが付いていることもあります。

パンくずリストだって、階層の深いWebサイトでは有効かもしれませんが、一概につけなければならないものではありません。

要するに、コンテンツやコンセプトによって、正解が異なるということです。

コンテンツやコンセプトがないままで、Webデザインについて論じることは不可能。
それをここに書きとめておきたかったのでメモ。


「どうしてこのテキストをh1でマークアップしたんですか?」
という質問にはっきりと回答できる自分がいるのと、
「どうしてここにこういうレイアウトをしたのですか?」
という質問に回答できるデザイナーというのは、一緒なんだなと感じたんです。


今まで、コンテンツだとかコンセプトよりも、ただ理由もなく表現方法を考えていたけれど、
デザインだってコーディングだって、「どうしてそうしたの?」という疑問に明確に答えられる必要があります。

そして、その回答はコンセプトの中にあるんだということに改めて気付きました。


コンセプトは重要。
コンセプトがなければ、デザインも、レイアウトも、マークアップも説得力のないものになってしまいます。

コンセプトは大切だからね、と何度も聴かされてきましたが、
今日、その意味をやっと、身を持って理解できた気がします。

本日の収穫でした。

PR

ウェブデザイン見本帳 実例で学ぶWebのためのレイアウト基礎

本日は、最近買ったWebデザインに関する書籍
P1120732.jpg
ウェブデザイン見本帳 実例で学ぶWebのためのレイアウト基礎 」について。


Webデザインのセオリーやノウハウがいっぱい書かれた本は数多くあります。
例えば黄金比であるとか、配色、視線誘導の方法とか、
デザイナーにとっては必要不可欠なことですが、
でも私は一からデザインについて学びたいわけではなくて。

コーダーとしては、
「こんなサイトをコーディングしたい、このサイトをどうやってコーディングしようか」を考える方が楽しい。
そのために、このようなデザインの見本がたくさん載っている本が欲しいなとずっと思っていたのです。

Web制作会社年鑑とかのポートフォリオ的書籍にはもちろん敵いませんが、
他のデザインノウハウ本に比べると、サイトデザインもまあ豊富だし、何より載っているサイト事例がいい!
デザインノウハウ本とかに載ってるデザイン例って、
デザイナーじゃない私が言うのもなんですが、あまりパッとしないので。
(たぶん、その本用に作ったデザインで、対クライアント向けのデザインではないからだと思います。)

こんな感じのサイトを作りたい、というときに、デザインをストックしておける。
ほんとに、「見本帳」という名前がふさわしいと。


ただ、デザインのいいサイトは多かったんだけど、ほとんどFlashサイトだなと。
コーダーとしてはちょっと複雑です。(じっくり見てから買えばよかったんですが(笑)

あとは例示サイトの使いまわしが多い、かな。
同じサイトの別のページが、本のいろんな場所で紹介されている。

あと、心なしか何度も同じようなことを言っているような気がするとか、
同じようなレイアウトがいろんなところで紹介されているような気がするとか。


なんか、ほめてるんだかけなしてるんだか分かりませんが、
貸し出しの依頼はいつでもどうぞ。



買ったら意外と最近の本で驚きました。
とりあえず、紙質がよくて、破れにくいです。
最近InDesignも勉強しようと思っているので、この本自体のレイアウトも参考にしたいなと思ってます。

直感的なアイコン販売サイト IconDock

楽しげなアイコン販売サイトがあったのでメモ。

Icon Dock

アイコンがかわいいのはさることながら、
注目すべきはインターフェース。

たとえば、
http://icondock.com/icons/higloss
このページではたくさんのアイコンが売られていますが、
右上にある+マークをクリックすることで買い物かごに追加することもできますし、
アイコンをドラッグして左側の「買い物かご」バーにドロップしても、アイコンが追加されるという。

気持ちのよい販売インターフェースです。


ちなみに、この効果はJavaScriptで実装されています。
さらに言うと、JavaScriptOFF環境ではお買い物できません。

やっぱりこれはアイコン販売サイトという、ある程度購入層が限られているからできることであって、
楽天とか、Yahoo!Shoppingとかのサイトではきっと採用できないだろうと思います。


ただ、このインタフェースは魅力的だし、何度も言いますがアイコンがかわいい。
サイトデザインもすっきりしていて素敵。
これがWordPressで作られているというんだから、なおすばらしいです。

DTPとWebのソフトウェア依存度

最近、ある会社のWeb制作に携わらせていただいて、
自分のソフトウェア使いこなし能力が未熟だなと反省しました。

基本的にWebサイトのコーディングをするときはDreamWeaverを使っているのですが、
私が使ってる機能というのが、「タグ予測変換機能」くらいなんです。
タグを自動的に予測してくれて、候補を出してくれる。簡単にタグを閉じてくれる。
それも、タグ打ちをしているから便利になる機能なのであって、

つまり、DreamWeaverでも単にテキストエディタと同様にタグ打ち作業していることに他ならず、
プレビュー機能だとか、クリックドラッグするとボックスが生成できるだとか、
そういった機能を一切使ってきませんでした。
(でも実際、予測変換機能だけでも本当に作業スピードが3、4倍になります)


で、話がずれました。

最近AdobeのDesign Premiumを買いまして、その中に人生初のInDesignが入っていたので使い方を勉強しようと思っていたんですが、
「雑誌を作るのに、ソフトウェアの使い方を勉強する」って、なんだか違うなと思って。
雑誌を作るなら、カラーリングとか、レイアウトの知識などが必要ですが、それなのにソフトウェアの使い方を学ぶって何なんだろうと思っていて。でも、ソフトウェアの使い方を知らないと、どういったことをどのように実現するのかが分からなくて。


そこで思ったのが、DTP系のものごとって、ソフトウェアの習熟度に依存してるんじゃないかということ。
手書きのポスターとか、版画とかは別ですが、現在、大量印刷されるほとんどの紙媒体は、デジタルデータで作られていますよね。
ポスターを描いていても、「もうちょっとここの曲線をなめらかにしたいのに」とか、「ここの色味が」とか、色々な修正点が出てきても、ソフトウェアに慣れていないと難しい部分なのかなぁ、と思います。

これはコーディングだけの話になってしまいますが、Webでコーディングする場合は、DreamWeaverがあれば便利ですが、別になくても制作できます。色を変えたいなら、ソフトウェアに変えてもらうこともできますが、自分でタグをいじればすぐに変えられます。

これって、Webサイトはバックグラウンド(ソースコード)が見えるようになっていて、
印刷物のデジタルデータはバックグラウンドが見えていない、という違いなんでしょうか。

ソフトウェアの習熟度の違いで、作業効率が変わってしまうのは仕方のないことですが、
デザイン自体の出来栄えも変わってしまうのは少し納得がいかないなと思っていて。


InDesign関連の書籍を見て、最近思ったことでした。

JavaScriptを投入したSonyのサイト

以前、SEOや情報の構造化といった観点から、WebサイトのアイキャッチにFlashではなく静止画像を埋め込むサイトが多くなっているということを聞いたのですが、
今回は、SonyグループポータルサイトでアイキャッチがJavaScriptで実現されていたのでメモ。
http://www.sony.co.jp/


実装にはjQueryライブラリを使用している模様。
イメージ画像の入れ替えや、メニュー部分をマウスオーバーするとなめらかに出てくる画像など、Flash風の挙動をしていますが、JavaScriptで作られています。

私はこのサイトのように、アイキャッチ部分をJavaScriptで上手に実装している例は見たことがなかったのですが、
もしかして最近は増えてきているのでしょうか?

さらに、JavaScriptがOFFの環境でもレイアウトが崩れず、
リンクもしっかり機能するという点がすばらしい。


近年、技術がどんどん進歩して、境界がどんどん曖昧になっているような気がします。
Flashでも、検索エンジンに引っかかるようになったり、情報を埋め込めるようになっていたり。
JavaScriptでも、Flashのモーショントゥイーンのようななめらかな動きが可能になったり。

可能性が広がれば広がるほど、ときに使い方を誤ってしまいがちです。
HTMLの二の舞にならないように、それぞれの長所を生かして使用していきたいですね。

 | HOME | 次のページ >>
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
03« 2017/04 »05
S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
ブログ内検索
忍者ブログ [PR]