webデザインメモ

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

好きなサイトまとめ71〜80

 

好きなサイト100選まとめ。

71〜80。

 

71.渋谷再開発と東急建設|東急建設

f:id:tomiko1226:20150420215919p:plain

白、黒、グレーの配色に青空やオフィスの写真が映える

ビルボードの背景画像の、マス目のような加工が、建設業らしい雰囲気を醸し出す

アイコンと写真を多く活用しユーザーが見ていてつい楽しくなれるようなデザイン

 

72.しつらえ ー お料理も、建築も、「一流」のおもてなし。 | [公式]博多竹彩

f:id:tomiko1226:20150501154230p:plain

トップページは背景画像いっぱいに店内の写真、ナビ、店舗情報のシンプルなデザイン

各階層では、縦書きのテキストを使用し、日本料理らしい雰囲気に仕上がっている

写真の明度が高く、店舗の清潔感を想像させる見せ方がどれも素敵

 

73.成瀬・猪熊建築設計事務所

スクロールすると大きな画像で実績紹介が見ることができるのシンプルなメインページ

ナビの各項目をクリックするとページ遷移することなく小さいウィンドウで情報が見ることができて便利

フッター上の背景画像のベージュが温かみのある木製の建築を連想させる

 

74.

t2-shibuya.com

ネイビー、ゴールドっぽいベージュ、グレーの配色がスタイリッシュな印象

container幅が大きめなので、文字も画像も大きく、余白も十分あり、読みやすい

背景の模様がカッコイイ

ページ上部、下部にSNSを掲載し、最新情報をアピール

 

75.

pebble-design.co.jp

jQueryを使用した動きが楽しい

デザインがシンプルで洗練されている

 

76.

journal-standard.jp

月ごとにコンテンツが更新されるブランド情報ページ

毎月のテーマ、コンセプトがわかりやすい

画像のサイズ感、スクロールしていくと現れる商品情報のスライダー、動きだけでなくしっかりテキストで情報も掲載している点がユーザビリティ

 

77.

ships40th.jp

ロゴのイメージカラーである、ネイビーと白を基調にしたシンプルでおしゃれなデザイン

SNSのリンクが常にページ左に表示され、効果的

men's,women'sがそれぞれネイビー、赤のマークで表示されていて、どのブランドに対応しているのかわかりやすい

 

78.

adidas.jp

写真、キャッチコピーを集めたランニングサイト

スクロールしていくと表示される写真、キャッチコピーが楽しい

縦長のスクロールページなので、右下にトップに戻れるボタンがあるのもユーザビリティ

 

79.

kankyo.joshibi.net

いろんな色が使用されているのに、まとまりがある

各ページは基本的に1カラムで読みやすい

画像がグリッドでレイアウトされており全体的に統一感がある

卒業生インタビューや地域とのプロジェクトなど、コンテンツが充実している

 

80.

shikikyoto.com

1ページのみのシンプルなサイト設計

テキストが全て縦書きで統一されており、文字間もたっぷりあるので読みやすい

背景画像のくすんだ黄色が濃すぎず、ちょうど良い