webデザインを見てください。

質問

20代後半webデザイナーです。

実力不足であまり自信がないですが、
とりあえず練習で作品作ったので優秀なデザイナーさんなど見ていただけますでしょうか？
辛口コメントは覚悟の上ですが、その場合はどの部分が悪くてどのようにすれば改善されるか、具体的にアドバイスお願いします。

ちなみにプログラムは無知なので動きませんがご了承ください。

http://la-belle.uh-oh.jp/top/
http://dancers-trues.uh-oh.jp/index/

回答No.6

H240S18B73

とりあえず一つ目の方を例に出して言います

このサイトは
・いろんな人のメイクのテクを知ることができる
・誰でもユーザ登録して自分のメイクのテクを紹介できる
というサイトですよね？

よく見たらわかりました
よく見ないとわからない
ようなのじゃいかんのです
パッと見てわからないと

まずヘッダでそういったサイトの情報が弱いのもありますが
サイトのレイアウトがそういうサイトのものになってません

言葉で言わずともレイアウトがそのサイトが
どんなサイトなのか、どういう使い方をするのかを
一目で伝えてくるというのがあるもんです

レイアウトにもアフォーダンスあり

いわゆるSNS的なサイトというのは
デカデカとページの頭にイメージを置かないもんです
すくなくともカテゴリ一覧やログインフォームを
画面中央から追いやるほどに大きくはしない

なぜならユーザにとってカテゴリ一覧やログインフォームは
サイトを訪れる度に毎回最初に見たい触りたいものなはずだから

サイトイメージをデカデカ置くのは
サイトの情報が一方通行な場合です

特にSNS的なサイトなんていうのは
何度も繰り返し訪れるものなので
１クリック１スクロールの差が
普通の一方通行サイトより大きいです

使い勝手の追求はまたアフォーダンスの追求にもなるはずです

お礼

ありがとうございます。
目からうろこです。

とりあえず、どんなサイトか理解していただいて少しホッとしましたが、やはりパッと見ではわかりづらいのでしょうか。

snsサイトにおいてはログインしないといけないから、もし最初ログイン状態でなければ、twitterなりfacebookなりログインフォームがでかでかと出ていますね。

ただ、デザインの練習の場合ですと、ログインフォームが目立ったサイトばかりになるのもあれなので、ログイン前とログイン後のトップ両方を踏まえたほうがよさそうですね。

サイトイメージが大きいサイトは企業サイトなどですかね。

使い勝手にもパターンがあると思うのでもう少し研究してみる必要がありますね。

まったくあたらしいアフォーダンスを考えられるようになれば大したものかもしれません。

回答No.5

H240S18B73

>ahoo_okさん

ご指摘ありがとうございます
GET変数という呼称の延長でそんな風に呼んじゃってました
そういえばURLパラメータは変数名と値というように言われるけど
variableはparameterとは違うから変数訳すのは間違ってるとか
そんなやり取りをどっかで見た気がします

＞それとJavaScriptで作られたURLクエリパラメータなどでコンテンツの内容変わらないで
＞動きがあるサイトも動的ページって言う。

この定義はちょっと正確じゃないかと思います
Ajaxでコンテンツを読み込んだ場合も動的とは言いますが
単にアニメーションしてるだけで動的ページとは言わないかと思います

回答No.4

ahoo_ok

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
と指定しているのに使っている実際の文字コードはUTF-8だったり

今時、HTML5ではなくてXHTML 1.0だったり。

>動的ページ・静的ページってのはアニメーションの有無の話じゃありません
>URL変数などでコンテンツ内容が変化するかをもって動的・静的と言います
URL変数って何?新しい言葉?
URLクエリパラメータとかGETパラメータとかの言葉はあるけど
それとJavaScriptで作られたURLクエリパラメータなどでコンテンツの内容変わらないで
動きがあるサイトも動的ページって言う。

むしろGETパラメータの値で動的になるのは動的ページではなくて動的サイトです。

お礼

ソースコードまでよく見ていただきありがとうございます。
私のコーディングは、詰めが甘いとか基本がなってないとか言われることがあります。
やはりどこに行っても言われるのだなぁ～と実感しました。
後に修正いたしますので、また何か突っ込みどころがあればよろしくお願いいたします。

補足

ご指摘いただいたところは修正いたしましたので、また何かあればよろしくお願いします。

回答No.3

H240S18B73

＞No.1さん

誰かつっこむだろうと思ったけどだれも突っ込まないので

動的ページ・静的ページってのはアニメーションの有無の話じゃありません
URL変数などでコンテンツ内容が変化するかをもって動的・静的と言います

＞grdrhaさん

自身でフェニッシュまでするけど
プログラム面は全然ダメだし
これからも習得するメドがつかないってことなら
Adobe Museお勧めしときます

スクロールアニメーションもかなり簡単に作れます
レスポンシブにもそこそこできます

直観的に作業できるのでデザインの改善も捗るでしょう

いまのデザイン（？）を見るに
「ほんとはこうしたいけど難しそうだからやめとこう」とか
技術的な限界に阻まれて直観的な作業ができず
デザインが精錬しきれてないカンジがします

これでやりきってるというなら
近接・整列・対比・反復
70:25:5の配色
とかのデザインの理論意識して
もうちょっと精錬してください

見た目の雰囲気ばっかりじゃなく
重要な情報にちゃんと眼がいくようになってるか
想定されるユーザーが迷わず欲しい情報に
たどり着けるようになっているかとか
もっと考えてデザインできるはずです

いまいち「どういう人がどういう使い方をするサイト」なのか
想定するユーザーと導線が見えません

優れたWEBデザインは「どう使うのか」が見えるものです

お礼

ありがとうございます。
Adobe Muse調べました。
グラフィックデザイナ用て感じですね。
色々使えそうでよさそうですが、
adobeのソフトは高いのが困りものですね。。。

>「ほんとはこうしたいけど難しそうだからやめとこう」とか
技術的な限界に阻まれて直観的な作業ができず
デザインが精錬しきれてないカンジがします

そうですね。まさに・・・難しいことや知らないことは避けてしまいがちで、そうなるとなかなか進歩しませんし分かってはのですが・・・
めんどくさがらずにどんどん新しい技術を取り入れるべきですね。

>いまいち「どういう人がどういう使い方をするサイト」なのか
想定するユーザーと導線が見えません

想定するユーザーが知りたい情報を得るための、情報の見せ方がイマイチだったんでしょうか・・・？

回答No.2

hue2011

作業時間の補足質問があったのでそれだけお答えします。

あなたの作品だと、2時間ぐらいかな。それは編集作業だけ。

写真をとるという工程は別として考えてますよ。
これはモデルやカメラマンのスケジュールを設定し埋めなくてはいけませんから日単位でかかります。

Webデザイナは、そういうメンバー調整の能力も必要とされますよ。

クライアントさんの思想で、このポーズはさけてくれなんていうことがあります。
プロのモデルさんを使う場合はそこの事務所の方針なんていうものも作品に抵触することがあります。

要するにデザイナといいながら、責任をもって依頼される場合はマネージメント能力が必要とされます。
これから仕事に入ったらそういうことがいろいろありますので、驚かないように。

お礼

2時間ですか・・・さすが早いですね。
私はその何倍もかかりましたorz
業界の中身についていろいろ教えてくださり、ありがとうございました。

補足

デザインも迷い迷いで、コーディングのタグは完全に暗記できてないため、リファレンスページで確認したり、css3などはコピペしたり確認したりで遅くなります。

プロのwebデザイナーさんは、ほかのウエブページをみて確認したりコピペしたりせず、タグは全部きっちり丸暗記しているものなのでしょうか？

また、デザインのレイアウトで迷って時間がかかったりせず、パッパッと作ることができるのでしょうか？
2時間で作るとなるとそうではないと仕上がらないと思いますので。。。

回答No.1

hue2011

静的ページですね。

いまの時代だと、これでは売りのメリットが薄い。

ページを動かしてください。
Flashである必要はありません。
Flashはアドオンが必要なのでどのブラウザでも動く保証はないからです。

動画として簡単なのはAnimatedGIFです。

FireWorksなんかをお使いなら簡単に作れます。プログラムなんていりません。

また、HTML5の機能で動きをつけてください。
お菓子のページ、化粧品会社のページを適当に見てみてください。
品の悪い動きをしているものもありますが、トレンドと思いましょう。

黙ってみてると何も動いていないようでも、スクロールなどをすると私が何を言っているかわかります。
そこに大きな価値の違いを見るディレクタが多いですからね。

お礼

ありがとうございます。
今時動かないサイトはやっぱ地味ですよね。。。
華やかにしたい内容なのに・・・
アニメーションGIFは、会社ではfireworks使ってましたが家にはないのでフォト所でつくっているので残念ながらできないですね。
パララックス効果などつけたサイトも多いですよね。
かっこいいですよね。
もうちょっと最新の機能を知らなければなりませんね。

補足

ちなみに、優秀なデザイナーさんなら、今あげているくらいのサイトのデザインを考えるところからコーディングを仕上げるまでどれくらい時間かかりますか？