webデザインメモ

webデザインの勉強をしています。ここでは、日々学んだ知識をまとめていきます。

好きなサイトまとめ81〜90

 

好きなサイト100選。

81〜90まとめ。

 

81.SCNR Inc. | Art direction + Visual consulting

f:id:tomiko1226:20150501152005p:plain

トップの画像にマウスを載せると画像がモノクロからカラにー変わる動きが素敵

各ページに遷移してもページ下部にトップページと同じメニュー画面があるのがわかりやすい

実績紹介では、スマホタブレット、PCでみた時のサンプル画像があり、レスポンシブ対応の実績を効果的にアピールしている

左上の3本線をクリックするとナビ、SNSメニューが表示される

 

82.Agentur - DOT23 Stilvoll, kreativ, digital – Ihre Full-Service-Agentur

f:id:tomiko1226:20150501152216p:plain

jQueryを使った、画面の動きがかっこいい

各階層では詳細情報を画面遷移せず小さいウィンドウで見ることができる

左の3本線をクリックすると左にナビが表示される

白、グレー、ピンクの配色がかっこいい

 

83.House on the Krasina

f:id:tomiko1226:20150501152334p:plain

トップページの縦長の画像を4枚使用したレイアウトが珍しく、おしゃれ

情報量が多いが、近接、コントラストが効いたレイアウトなので、読みやすい

常に画面右上に連絡先が載っているのがユーザーのニーズに対応している

 

84.IDÉE|イデー

f:id:tomiko1226:20150501152608p:plain

 

ナビの背景、ネイビーのボーダーの組み合わせが素敵

トップページの画像にマウスを載せるとテキストが表示されるので、トップページで情報をある程度把できる

ナビがブランド情報、企業情報、ショップの情報の3つに分かれていてまとまっている

ページ内検索があるのもユーザビリティ

 

85.東京のオフィスデザイン・レイアウトならWORK KIT

f:id:tomiko1226:20150501152918p:plain

ナビのアイコンがわかりやすい

連絡先がページ右上にpositionで表示、各ページ下部にも大きく掲載されているのが効果的

worksではjQueryを使用した画像置換で、様々な画像を大きく見ることができる

余白がゆったりあり、読みやすくストレスが少ない

 

86.女子旅つくるプロジェクト|JTB × KOBE COLLECTION

f:id:tomiko1226:20150501153441p:plain

パララックス効果を使用した動きが良い

各国の画像にマウスを載せると、背景画像がその国のイメージ色に変わり、LINE UPの文字の下の時計が現地時間に変わる仕組みが素敵

配色がポップで可愛い

 

87.ONEデザインズ株式会社

f:id:tomiko1226:20150501153229p:plain

背景画像のアニメーション、グラデーションがカッコイイ

スクロールすると自動でコンテンツが読み込まれるjQueryの動きもカッコイイ

テキストの横幅がちょうどよく、読みやすい文字数で改行されている

 

88.100 RECORDS | ABSTRACT.JP

f:id:tomiko1226:20150501153627p:plain

レコード型の画像をクリックするとその曲が聴けて、ページ下部で歌詞もテレビのテロップのように流れてくる。

レコード型の画像によりどういうサイトか分かるのが良い

 

89.今日のフライヤー | グラフィックデザイン集

f:id:tomiko1226:20150501153805p:plain


グラフィックデザインの紹介サイト

Pinterestのようなカード型レイアウト

ハッシュタグがついていて、わかりやすい

 

90.Quentin Morisseau - Designer

f:id:tomiko1226:20150501153926p:plain

スクロールしていくと、横にスクロールされる動きがかっこいい

各カテゴリ別にテーマカラーがあり、わかりやすい

PROFILEをクリックすると、左にデザイナープロフィールと各SNSリンクが表示される