大阪経済法科大学「入試ナビ」
http://www.keiho-u.ac.jp/entrance/index.html
大阪経済法科大学の入試情報サイト。
デティールがとても丁寧できれいなデザインだったので、
ピックアップさせてもらいました。
-----
【奥行きについて】
▼目線を集めたいエリアは凸表現に(ドロップシャドウをつける)
▼それ以外のエリアは凹み表現に
-----
【背景について】
画面上部と中間~下部の背景を使い分け。
▼画面上部の背景(格子パターン有)
▼画面中部~下部の背景(格子パターン無)
-----
【カーソルについて】
▼カーソルボタンの外枠の形がアクセントに
-----
【その他パーツ】
▼小さいパーツのデザインでもオリジナリティが出ますね。
HTML
BC:light blue(#e9f6f9 ざらざら感のあるテクスチャ)
MC:blue(#2ba5dc)
AC:yellow(#feef3a)
ハーゲンダッツ「3 Times happiness」
http://www.crispysand.jp/#home/
ハーゲンダッツのクリスピーサンドのキャンペーンサイトです。
キャッチコピーは「女の子が3倍幸せになる Web Magazine」。
ウェブマガジンという括りですが、
デザインはニューヨークタイムズを意識されてるようです。
----コンテンツ概要----
・mixiアプリの紹介
(ファッションブランドとタイアップし、アプリに参加するとアイテムを抽選でプレゼント)
・ブランドスタッフにインタビュー
(ファッションブランドのスタッフのインタビューを掲載。ツイッターと連携したプレゼントシステム有り)
・snsアイコンデコレーター
(Twitter・mixi・Facebookで使える3サイズのアイコンをカスタム出来る)
・ソーシャルアクセサリー
(PCの壁紙やTwitterのスキンを配布)
・占い企画
(独学で星占いを勉強した石井ゆかりさんが贈る、占い(というより教えという感じ)企画)
--------
タイトルエリアのデザインや線のかすれ具合が
新聞らしい雰囲気を演出しています。
クリスピーサンドの形のボタンも可愛らしいです。
ただ、ちょっと画面下部のナビゲーションが目立たない気もします。。
見出しの欧文フォントは「News 706 Italic」に似てますが。。
違うかもしれません(笑)
HTML
BC:white(#141414)
MC:gray(#f8f9f3 紙テクスチャ)
AC:pink(#efaecb)
▼ソーシャルアクセサリーページ
▼snsアイコンデコレーターページ
▼ブランドスタッフにインタビューのページ
▼パーツ
「Zahia Dehar official web site」
http://www.zahia.com/#/en/artistes/nick-chloe
フランスのサッカー代表選手リベリさんと噂のあった、
ザヒアさんのオフィシャルサイト。らしいです。。
ザヒアさんの色っぽい写真やムービー、さらには360°VRなどが見れます。。
コンテンツはかなりセクシーですが、サイトデザインはとても上品で可愛らしい。
ヌルっとした滑らかな動きや木琴(?)のような効果音が心地良いです。
また、タイポグラフィがとてもきれいです。
ワインのラベルような整然とした文字組に、手描きのサインの抜け感がアクセントになっています。
見出しの欧文フォントはたぶんDidotのBoldです。(テキストはDidotのItalic)
サイトの雰囲気にぴったり合ってます。
flash
BC:white(#ffffff)
MC:pink(ラメテクスチャ)
AC:black(#5a5a5a)
▼エンターページ
▼画像詳細ページ(ズームアウト時)
▼画像詳細ページ(ズームイン時)
▼画像詳細ページ(ナビゲーション表示時)
▼VRページ(ドラックするとザヒアさんが回ります)
▼SNSボタン(オンマウスするとカラーに)
ニューヨークのディレクター/デザイナーのポートフォリオサイト「Francesco Bertel」
http://www.francescobertelli.com/#-
ニューヨークでディレクター兼デザイナーとして活動している
francesco.bertelliさんのポートフォリオサイトです。
カレンダーのようなレイアウトがとても斬新です。
コンテンツは作品紹介と自己紹介のみ。
ポートフォリオのような類いのサイトは、
コンテンツを厳選して自由度の高いデザインをしている方が多いようです。
グレーと青の配色も洗練された雰囲気でかっこいい。
見出しフォントはたぶんPF DIN Mono Light
BC:gray
MC:blue(#00bbd2)(#00c2d9)
▼訪問したページには×印がつきます。
▼作品紹介ページ
▼作品タイトルページ
縦長のサイトいろいろ
http://www.manufacturedessai.it/it/
ページ遷移がない、縦に長いサイトを最近よく目にします。
しかも素敵なデザインが多い。。
見てみると、背景とコンテンツでスクロールによる移動のスピードを変えているようです。
そのため、背景画像レイヤーの上にコンテンツレイヤーが浮かんでいるような、
奥行きのあるデザインになっています。(説明下手で申し訳ありません。)
flashを使わずにビジュアルをおもいきり見せたい時に良い構成だと思います。
その他にもこの手のサイトがいろいろあったので、
興味がある方はのぞいてみてください。
http://www.netlash-bseen.be/
http://www.twofishillustration.com/
http://tedxportland.com/
http://hotel-anteroom.com/exhibition/polytope/#/top
http://admissions.ri.edu.sg/
▼ページ全体をキャプチャするとこんな感じです。長い!