«Prev || 1 | 2 | 3 | 4 | 5 || Next»

ナビゲーションが美しいサイト

参考先:都電荒川線

”電車サイト”らしくキッチリを区画を見やすいように表示してあるサイト

画像
メインナビゲーションもタブを視覚的に2分して「ここからは企業サイト」と利用者が分かりやすいようにしてある
これは秀逸だと思う

画像
背景とテキストを上手に組み合わせてあり、まるで”テーブル?”と錯覚してしまう作り

画像
これもメニューだが、上手く組み合わせてある
単純にボーダーで囲むのではなく、太さを変えて立体的にしてあるのも良い
背景色で二十三重に項目を区分してあり、見た目で理解しやすい

画像
メニュー項目もグラデーションを使ってて見事!
”一覧”だけテキストであとは画像・・・どんなCSSなのだろう?

画像
荒川線のナビゲーションも背景のグラデーションと組み合わされて良い
色数は少ないものの、どれもシンボル化してあり、とても分かりやすい
アイコンが一定の角度で斜めになってて、上下がはみ出る形になっているのも、広がりがあって良い

2010年07月20日:デザイン::zizodo

カッコいいメニュー

参考先:和洋風◎

ここのメニューアイコンにヒント見っけ!

画像

カテゴリを色分けして、これとリンクさせたらどうでしょう?
付け加えて、AQUA風アイコンも作って(私の場合は丸が欲しい)

ナビゲーションで、該当カテゴリidで絡ませて、そのカテゴリを開いた時に、ナビゲーションバーがその色になる・・とか

これと「カテゴリ毎にデザインを変えたい」を組み合わせて、可能になったらイイネ!
スキンに記述

<body id="catID<%category(id)%>">
<div id="itemID<%itemid%>">
内容
</div>
</body>

2010年07月12日:デザイン::zizodo

ナビゲーションが分かりやすいサイト

参考先:シェル石油

画像

ここまでスッキリしていると、自分が何処にいるのか?がよくわかる
これくらいの作りが「手間かからず&親切&簡素」でいいのかも!?

2010年07月12日:デザイン::zizodo

間隔が美しい

参考サイト:フエル フォトブック

画像

TOPページでの項目の作り方がナイスだと思った

画像を配置して、リンクを貼ることでボタン化して、その上に解説用の数行テキストも配置
画像を選べばそのアイテムの最上部に飛び、テキストを選べばアイテムのテキスト解説部分にダイレクトに飛ぶ
誘導する側からすると便利だ
見る側もサイドメニュ−が少なくなって見やすいと思う

画像

サイドメニューも画像を配置しながら文字もはえるようなデザインになってて分かりやすくて良い
色も優しいし、女性や高齢者が安心して選べそうな気がする
グリッドの間隔も上下左右で同じピクセルだけあけていてスッキリして好きだ

2010年05月24日:デザイン::zizodo

画面構成が立体的なサイト

参考先:365CALENDER

画像:TOPページ

  • 手作り感がある、年代を問わない女性好みのサイトになっている
  • 見た目が立体的
  • 上部のナビゲート部分はセンター配置でも均等配置でもないのに見事に見栄えが良い
  • 一番上の線も重要で、画面左の商品解説バナーがとても映えるし、イヤミがなく、立体的に見える
  • 下の各インデックスも、項目によって修飾を変えてあり、一目瞭然
  • 「ホワイトボード=お知らせ」が素晴らしい、エントリーしたい人などサイトの連絡はここだけ見ればよい
  • 全体的に飛び出るような画像配置(斜め、枠からはみ出る)が楽しい
  • 項目間隔も余裕があって圧迫感がない

画像:TOP上部

2010年04月20日:デザイン::zizodo

デザインが素敵なサイト

参考先:基礎化粧品ドモホルンリンクル

画像:画面キャプチャ

  • バックグラウンド(body)と項目の背景とを区分けしてあるのがミソ
  • 区分けに線やシャドウではなく、バックグラウンド画像に白い透過を重ねたようなのが見やすい
    きっとバックグラウンドが和紙のような淡い柄だからこその効果かも
  • ターゲットが年配の女性なのだろう、配色もその年代が好みそうなのを使っている
  • 文字も大きく行間もあり、文字数も少なくまとめてあって読みやすい

2010年04月20日:デザイン::zizodo

色合いがナイス

参考先:ファッション通販・レディース通販のOtto

画像:画面イメージ

  • 落ち着いた年代の女性をターゲットにした配色
  • 全体的にグレーとベージュでまとめてあり、蛍光色やパステルカラーは注目させたい場所にだけピンポイントに使用
  • 項目タイトルなどは、白を背景色を利用して、文字とCSSにイメージ配置して表記させているのが良い
  • 全体的に見やすい

2010年04月20日:デザイン::zizodo

立体的で面白いデザイン

単純なんですが、単純じゃない作りのサイト

参考先:モバツイ開発者blog

画像:画面キャプチャ

サイドメニューをヘッダー部分と重ねているように見えてるのがすごい
CSSで調整してるのかな?

2010年04月16日:デザイン::zizodo

小さい

画像:画面キャプチャ

iMacのモニター(24インチ)とCRT(19インチ)を比べてみた
ブラウザの大きさが19インチでフル表示したもの
それをiMacにひっぱってくるとこんなにも大きさが違う

サイズはかなり気をつけないと(汗)

今時、15インチのCRTなぞを使っている人はいないだろうけれど、ネットノート等の小型のもあるし、いろいろ小さなモニターで表示して閲覧する人がいるのを頭に入れて作らないといけないな・・と実感した

しかし、こんなにも大きさが違うとは・・以前のMac環境が懐かしい(あまり深く考えないで良かったから)

2010年03月24日:デザイン::zizodo

メインメニューがカッコイイ

参考サイト:エプソンダイレクト

画像:画面キャプチャ

ここは「パソコン=男性」のイメージなのだろうか?全体的にカッチリしたイメージだ
個人的にはスッキリしてて好きである

メインメニューにしても、単純な四角ではなく、ちょこっとデザインが加わっていて「パソコンメーカー」らしき印象を与える

画像:画面キャプチャ

これはサイドメニューのデザインだが、このように項目毎に分けて、タイトルを色でデザイン分けすると「メニュー項目」とぱっと見て理解できる
グレーも有効的に使っていて、見やすい

2010年03月24日:デザイン::zizodo

«Prev || 1 | 2 | 3 | 4 | 5 || Next»

サイトナビゲーション

新着記事
ナビゲーションが美しいサイト(07/20)
カッコいいメニュー(07/12)
ナビゲーションが分かりやすいサイト(07/12)
間隔が美しい(05/24)
画面構成が立体的なサイト(04/20)
Twitter
Wed, 08 Sep 2010 13:39:22 +0000@kogebow1039 ありがと〜、こんなにも「ドンマイ」の言葉が有り難いなんて(うるる)。プラスチック部分が溶けてしまったので、ゴミに出す事になりました、仕方ないですねぇ。旦那、やっとこさ帰宅できました! (9月8日22時39分)

検索

ログイン

リンク

SKITEM DESIGN WORKS