最近思う、デザインに関する「なんで?」を書きたいと思うので、デザイナーな方とか、答えられそうな人は答えてくれると嬉しいんす。

  • この「なんで?」の想定しているサイトは、コーポレートサイトとか、学校のようなサイトとかの、ヘッダー、ナビ、メイン、サイドバー、フッターがある様な感じです。
  • フラッシュばりばりな感じのキャンペーンサイトとかは無しで考えてます。
  • ちゃんと伝えている事もあれば、明確な理由付けが出来ないために言えなかった事もあったりします。

トップページとトップ以外のページの関係性

ココで言いたいのは、全部「トップだけ違う」っていう部分だと思うです。

グローバルナビゲーションの位置が変わる

横ナビが縦ナビに変わるのは極端にしろ、トップではメイン画像(フラッシュ)が来て、その下にグローバルナビ。トップ以外のページは、上部にグローバルナビっていうパターン。

よく聞くのは、「トップだけ他のページとの差別化を図りたいから。」
言ってることはすんごく分かるんだけど、使い勝手悪くしてるだけじゃないの?

なんでだろ。

同じバナーなのにサイズやデザインが変わる

トップも他のページも同じように存在しているべきサイドにあるバナーのサイズやデザインが変わる。
これは、トップは300pxくらいのバナーで、他のページだと200pxくらいに変更されるようなイメージをしてもらえれば。

これもトップとの差別化がメインな理由なのかなぁ?

そのバナーがトップページでも「バナー」としての位置づけで、実際の配置も同じ位置(サイドメニューが入って下がる事はあるにしろ)に存在しているなら、そのバナーが示すレベルは同じだと思うんだけど、違うのだろうか。

階層によって大枠のレイアウトが変わる

トップページっていうのは、やっぱり他とは違って特別っていうのは理解してるつもりだけど、2階層目のindexにあたるページでは2カラムが1カラムになって、固定で存在してると思い込んでいたバナーは消える。
で、その奥のページに入ると2カラムになってバナー復活。

パンくずでいうと、
トップ > 商品一覧
だと、1カラムに。バナー消える。

トップ > 商品一覧 > 商品詳細
だと、2カラムに。バナー復活。

パンくずの内容がいけてないから、アレだけど極端にindexに表示すべき内容が多いなら、サイドバーを取っ払ってしまう理由付けになってるけど、数個程度で消す理由がイマイチ見えてこない。

なんでだろ。

フッターのメニューが変わる

トップだけ、フッターにメニューが無く、copyright表記のみで、その他のページに行ったら、グローバルナビとかの内容が全部フッターに表示されるっていう場合。

ココで上げた内容が全部当てはまるんだけど、トップページってそんなに別格でルールから外してOKなんでしょうか。

こういう部分まで統一することはデザイナーにとってはつまらないデザインになってしまうのかな。

トップとの関連以外

CSSではあまりにも無理があるってことや、センス的な問題も多分に含んでいる気がすること。

画像と画像の説明文の配置

■テキスト
  画像の説明テキスト

こんな配置。
画像の横にあるのは、画像とは直接関係無いテキストで、その下に画像と関連のあるテキストが入る場合。

構造を考えると、img→画像の説明テキスト→テキストっていう位置関係か、テキストが最初ってなると思うけど、このデザインの配置だと、img→テキスト→画像の説明テキストっていう順番でしか組み方が浮かばなかったんです。

これってテキスト量が増えたら、画像と説明文の関連性が全く見えなくなる気がするんだけどなぁ~

上下中央

テーブルだと分かりやすいけど、名前がthで入力フィールドがtdな場合に、thにあたる要素を上下中央に配置するっていう状況です。

コレって、tdに入る内容が極端に多い、もしくは文字サイズを極端に大きくしたら、thに入ってる要素がソコまでスクロールしないと分からなくなる恐れがあると思うんだけど、そういうリスクを背負ってまで上下中央にする意図はなんだろう。

あと、個人的なデザインセンスで言うと、統一感が無いように見えて格好悪いんだけど、ソレはボクがデザイナーじゃないから分かってねーっていうだけなんですかね、、、

コレがテーブルなら実現することに何の問題も無いけど、例えば、人物のアイコンとセリフみたいな場合だと、どう考えてもimg要素で配置するのが正しいと思うんだけど、backgroundやテーブル要素使わない場合って実現するの厳しくないっすか?
そのセリフが極端に長い場合は、前述の問題も出てくるわけで。

近い例はデジパオフィシャルのウェブサイト制作ページの下部にある、アイコンとテキストのような関係です。これのアイコンが右のテキストに対して上下中央っていうデザイン。

んーなんでだろう。

画像テキスト

見出しが画像になってるのは、ものっそい理解出来るけど、サイドメニューみたいなのとか、中見出し、小見出しまでとにかく画像オンリーっていう状況。

コレは規模によって使い分けるべきだと思ってて、小規模なサイトで一部のページを除いてあまり頻繁に更新・修正が入らないサイトならいいんだけど、それなりに規模がでかくて、ページ追加、更新などが想定される場合、そのデザイナーに同様の画像を都度依頼するってのは必ずしも出来るわけじゃないし、他人がいじる場合に、持って無かったり、OSの違いで微妙に変わってしまうフォントもある訳で、そこまで画像にこだわる必要があるのかな。

コレはかなり立ち位置的な問題で割れそうな意見なんだけど。

あるべき場所に有るだろう要素の位置を変える

「ページのトップへ戻る」みたいなのって、右下にあって然るべき。みたいに思ってるんだけど、左下にあったり、2カラムでメイン左、サイドバー右の場合に、メインエリア内に有ったり、別のページでは、サイドバーの下にあったり。

配置が変わるのはただのミスっぽいですが、過去に見たことがあったりするので一応。

どうやっても繰り返さない背景

ソコにテキストが有る以上、高さは変わって当然なのに、どうやって切り出しても繰り返す箇所が見つからないっていう場合。
なぜ、そこまでしてそのデザインにしなければならないのかがイマイチ見えないんです。

縦グラデとドロップシャドウ

HappyLifeでも背景グラデってて、内容は白背景にしてますが、この白背景にドロップシャドウが落ちている場合とか、斜線背景にドロップシャドウとか。
透過pngの出番なんだろーけど、Photoshop上で見たすんげーキレイな状態で透過って出来るんでしょうか。何か汚くなる。
大抵のデザインは、透過pngをわざわざ使わなくても意外と何とかなるんで、困らないんですけどね。

かどまるかどまるかどまる

あらゆる場所が角丸!どーしてソコまで角丸!?っていうくらい角丸。
(すんませんコレはただ大変だっていうアレです。角丸にする理由はわかっておるのです。)

おわりに

最後のは一応落としたかったつもりなんです。許してやってください。(ルール無視で突然角丸だと、なんで?ってなりますけど。)

以前に、とあるお方が「名刺のデザインは名刺サイズの中でデザインするからこそデザイン」みたいな事を言ってて、すごく共感した覚えがあります。
ちょっと前にクリエイティブな名刺のまとめ?みたいなエントリーを見たけど、あそこまでサイズ無視の名刺が「クリエイティブな名刺」なんだろーか?って思う人です。
決められた枠の中で最高にかっこいいデザインをする事のがずっとかっこいいんだけどなぁ~。

ずっとデザインしてると見えなくなる部分もあったりするんだろーなーとか、言いたい事はすごーくわかるんだけどなーとか思いつつも、イマイチ自信が無かったりで突っ込めなかったりする事もあったりするんで、素敵な理由が有れば知りたいのです。

気が向いた方、何個でも良いので答えてやって下さい。