Clik here to view.
中央にロゴで看板効果
ナビゲーションメニューに注目。 ホームボタンをかねたロゴがWebページの左上にあるのをよく見かけますが、 このページ、ホームボタン「LAWSON」がど真ん中にあります。 ロゴって、ページ左上部にあるっていうのが当たり前な感覚になっていますが、 この「当たり前」な感覚ってどうやって作られたんでしょうか？ そもそも、左上がトップページに戻る動作をする人間工学的に一番適した場所であるのか...
View ArticleClik here to view.
付箋にルーズリーフでメモ感
付箋やルーズリーフといった、紙のメモをとるといった Webサイトでいてアナログ感のあるページです。 いやぁ、このデザイン、どっかで見たことあるな…とか思ったら 昔自分がデザインしたWebページのデザインのアイディアに似ているんですな。付箋とかルースリーフとか。 ちなみにそのページとは、私の所属している大学の研究室Webサイト2009年度版の特設ページ。...
View ArticleClik here to view.
削ってロゴ配置
Tideならではの爽やかなオレンジカラーが印象的なこのページ。 洗剤の粒やロゴをイメージしたかのような「丸」のイラストや模様もポイントになっています。 左上のロゴに視線が行きますね。 それも、ページ上部や中央のメニューやトップ画像のエリアが ロゴがおさまるように削られているからかもしれません。 きちんとロゴやメニュー、トップ画像の位置を決めるのも良いですが、...
View ArticleClik here to view.
単色多めで濃厚な色合い
リプトンカラーの爽やかな黄色が印象的なこのページ。 ページ上部のヘッダー部分には、上側に白色とのグラデーションが施されています。 メイン画像よりも下部には、オレンジ色とのグラデーションになっています。 どちらもグラデーションにしている範囲は少し狭めで、 基本的に単色の黄色やオレンジ色の部分が広めにとられています。...
View ArticleClik here to view.
湖イメージと線の切れ間の視覚トリック！？
「白鳥の湖」の名前の通り、白鳥のシルエットのロゴや 白鳥の形をした遊覧船のイラスト、湖の水の色、ブルーなどが散りばめられたこのサイト。 ナビゲーションメニューの水色と白のグラデーションのところ。 ボタン上部の白から水色に変わるところが、なんだか微妙に波打って見えませんか。 おそらく、本当はまっすぐな線で色が変わっているだけだと思うのですが、...
View ArticleClik here to view.
本文階層を色分け
爽やかな青色や水色が印象的なこのページ。 グローバルまびげーション部分はグラデーションになっていますが、 他のコンテンツごとのタイトルやリンクボタン部分はベタ塗りになっています。 本文内では、少し明るめの水色を、グローバルナビゲーションやフッター、各ページのタイトルなどには、 水色よりは少し濃いめの青色がベースになって配色されています。...
View ArticleClik here to view.
ピラピラでチラ見せ
本日はWebカタログのデザイン。 このページを開くと、カタログの右下部分がピラピラとなびいています。 ピラピラ動いているだけで、ページをめくりたい衝動に駆られますね。 これもチラ見せの一種でしょうか。
View ArticleClik here to view.
“わずかーに”デザイン
ビビットなイエローが印象的なこのサイト。 上記イメージ画像にあるように、フッターのところに注目します。 フッターのサイトマップ部分、わずかーに黄色がかっていますよね。 最近、個人的にこの「わずかーな」デザインに注目しています。 がつんと主張するのではなく、わずかーにデザインされていることによって 確かにそこにあるのだけれど、主張しすぎず、でもサイト全体の雰囲気作りに...
View ArticleClik here to view.
おまけにストーリー性
フランスのエアポートのこのサイト。 メインとなるボックスの背景の右側に水着姿の女性と青い海の写真が表示されています。 なぜこんな配置なのでしょうか。 だって小さい画面だったら、背景の青い海の画像は見えなくなってしまいます。 完全に背景画像が見えなくても、ヘッダーやメインコンテンツとのすきまから少し雰囲気が伝わってきますよね。 そんな感じに、背景で「なんとなく」リゾートの気分を出して、...
View ArticleClik here to view.
整理しつつ拡がる
ななめに傾いた写真が背景に配置されて、ライブの躍動感がまさに感じられます。 その上にはグローバルメニューやバナー、ボックス要素など四角い形状のものがたくさん配置されています。 メインとなる記事が記載されているボックスを中心に、上にはメニュー、右にはスポンサーバナー、 左には特集リンク、下にはビール紹介が整頓されつつ散りばめられていることがわかります。...
View Article
