ナビゲーションが美しいサイト
参考先:都電荒川線
”電車サイト”らしくキッチリを区画を見やすいように表示してあるサイト
![]()
メインナビゲーションもタブを視覚的に2分して「ここからは企業サイト」と利用者が分かりやすいようにしてある
これは秀逸だと思う

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

これもメニューだが、上手く組み合わせてある
単純にボーダーで囲むのではなく、太さを変えて立体的にしてあるのも良い
背景色で二十三重に項目を区分してあり、見た目で理解しやすい
![]()
メニュー項目もグラデーションを使ってて見事!
”一覧”だけテキストであとは画像・・・どんなCSSなのだろう?

荒川線のナビゲーションも背景のグラデーションと組み合わされて良い
色数は少ないものの、どれもシンボル化してあり、とても分かりやすい
アイコンが一定の角度で斜めになってて、上下がはみ出る形になっているのも、広がりがあって良い
間隔が美しい
参考サイト:フエル フォトブック
TOPページでの項目の作り方がナイスだと思った
画像を配置して、リンクを貼ることでボタン化して、その上に解説用の数行テキストも配置
画像を選べばそのアイテムの最上部に飛び、テキストを選べばアイテムのテキスト解説部分にダイレクトに飛ぶ
誘導する側からすると便利だ
見る側もサイドメニュ−が少なくなって見やすいと思う

サイドメニューも画像を配置しながら文字もはえるようなデザインになってて分かりやすくて良い
色も優しいし、女性や高齢者が安心して選べそうな気がする
グリッドの間隔も上下左右で同じピクセルだけあけていてスッキリして好きだ
画面構成が立体的なサイト
参考先:365CALENDER
- 手作り感がある、年代を問わない女性好みのサイトになっている
- 見た目が立体的
- 上部のナビゲート部分はセンター配置でも均等配置でもないのに見事に見栄えが良い
- 一番上の線も重要で、画面左の商品解説バナーがとても映えるし、イヤミがなく、立体的に見える
- 下の各インデックスも、項目によって修飾を変えてあり、一目瞭然
- 「ホワイトボード=お知らせ」が素晴らしい、エントリーしたい人などサイトの連絡はここだけ見ればよい
- 全体的に飛び出るような画像配置(斜め、枠からはみ出る)が楽しい
- 項目間隔も余裕があって圧迫感がない
デザインが素敵なサイト
参考先:基礎化粧品ドモホルンリンクル
- バックグラウンド(body)と項目の背景とを区分けしてあるのがミソ
- 区分けに線やシャドウではなく、バックグラウンド画像に白い透過を重ねたようなのが見やすい
きっとバックグラウンドが和紙のような淡い柄だからこその効果かも - ターゲットが年配の女性なのだろう、配色もその年代が好みそうなのを使っている
- 文字も大きく行間もあり、文字数も少なくまとめてあって読みやすい
色合いがナイス
- 落ち着いた年代の女性をターゲットにした配色
- 全体的にグレーとベージュでまとめてあり、蛍光色やパステルカラーは注目させたい場所にだけピンポイントに使用
- 項目タイトルなどは、白を背景色を利用して、文字とCSSにイメージ配置して表記させているのが良い
- 全体的に見やすい



