Webサイト100選

好きなサイト100個紹介します。

2018-09-01から1ヶ月間の記事一覧

No58:Brooklyn Parlor

好きなところ シンプルな配色、くせのないフォントが読みやすい どのページでもレイアウトがほとんど同じ ユーザビリティが高い http://www.brooklynparlor.co.jp/

No57:Why juice?

好きなところ スクロールした時の画面の切り替わりが楽しい 写真の色のまとまりと撮り方が素敵 写真の写し方も勉強になる http://www.why-juice.me/

No56:Mila Owen

好きなところ 1カラムの分かりやすい設計 コレクションの画像の余白のとり方が参考になる https://milaowen.com/

No55:SYAN

好きなところ 白、黒、水色の配色が写真と合っている 情報量がちょうどよく、分かりやすくまとまっている http://syan-tokyo.com/

No54:Bookmarc

好きなところ レイアウトや配色、フォントがスタイリッシュにまとまっている 上部、左部にそれぞれナビがついているので、ページ遷移しやすく分かりやすい 商品詳細ページでは、分かりやすいところに購入ボタンがあるので効果的 https://www.marcjacobs.com…

No53: マリンピア松島水族館

好きなところ TOPページの文字がアウトラインから表示、中の塗りが時間差アニメーションで塗られていく(SVGアニメーション)がカッコいい 動画をどっとレイヤーをかけてわざと荒くみせて、ボディー一杯に表示させるのはすごく効果的 http://matsushima-projec…

No52:クロノドライブ

好きなところ PC、スマホ等のアイコンをホバーすると拡大され、フラッシュのような動きが面白い ロゴデザインもシンプルで良い https://html-coding.co.jp/

No51:イヴ・サンローラン

好きなところ 白、黒、ゴールドの配色が高級感があり、ブランドイメージに合っている 商品画像が魅力的 https://www.yslb.jp/

No50:Form

好きなところ トーンが統一されているので使用色が多くてもまとまりがある 文字と、写真を交互に織り交ぜたグリッドデザインがおしゃれ フォントがおしゃれ http://by-form.net/

No49:COOL japan

好きなところ ロゴのデザインがかっこいい ピンクのアクセントカラーの配分が素敵 文字サイズ、フォント、文字間のスペースなどがちょうどよく読みやすい https://www.cj-fund.co.jp/

No48:studio STORY

好きなところ PCフルスクリーン時、キービジュアルが2カラムの写真スライドショーになっており、画面幅が狭まると1つに減る見せ方が上手い。 電話お問い合わせ・WEB予約が下段に固定されているため、ページを閲覧していていいなと思ったらすぐに予約が出来…

No47: Relate

好きなところ グリッドレイアウトで並べられたカバンやポーチが美しい。 すべての画像が対応商品ページへのリンクボタンになっている為、気になったものを直感的に押させ、詳細を見てもらうことが出来る。 http://ino-ya.com/

No46:茶ッカソン

好きなところ 美しい縦書きのレイアウトが特徴的。 また、javascriptによるアニメーションが盛り込まれており、見ていて飽きさせない作りとなっている。 https://chackathon.com/

No45:naturaglace

好きなところ 全体的に淡い配色が雰囲気を演出している。パッケージと同じ配色で、図や文字色にも共通して使われている。 ↓文字色の変化で区別をしている。背景色で分けがちだが、文字色で変化をつけるとビジュアル的にも素敵 https://www.naturaglace.jp/

No44:明光義塾

好きなところ 補色の青と黄色が印象的。 爽やかで朗らかな印象を受ける。 学習塾らしいスッキリとした見た目ながら、見ていて飽きない動的要素(スライドやドロップメニュー等)のアニメーションが多く盛り込まれている。 https://www.meikogijuku.jp/

No43:umbro

好きなところ モノクロの写真をがかっこいいサイト hoverすると画像がカラーに切り替わるので、わかりやすい フォント周りのボーダーを効果的に使用している http://www.umbro-jp.com/

No42:adidas Originals

好きなところ ナビ、SNSリンクがページ上下にもあって分かりやすい 画像にhoverした時の動きがかっこいい 商品カテゴリが細かく分かれていて検索しやすい https://shop.adidas.jp/originals/

No41:キューピーハーフ

好きなところ 商品イメージの「白・赤・線・太く縦長のフォント」が一貫している。 その中でレシピ部分は他の色も使われていて、お互いが映えている。 https://www.kewpie.co.jp/half/

No40:キットカット

好きなところ ブランドカラーの赤が効いているサイト。 トップページではコンテンツがタブで選べる。currentのタブはサイズが大きくなりわかりやすい。参考にしたい。 https://nestle.jp/brand/kit/

No39:PARCO

好きなところ パララックス風のデザインで、スクロールするごとに背景の図形が動く。動きがとてもおもしろい。 ビビッドなカラーが使われているが、初めとおわり(ファーストビューとフッター)が無彩色なのでうるさすぎない印象。 http://parco.jp/

No38:生チョコパイ

好きなところ ファーストビューは、ほぼ半々になったスプリットレイアウト。タブレットサイズ以下では1カラムになる。 絵に描いた食器に乗った商品写真が印象的。 https://www.lotte.co.jp/products/brand/chocopie/nama/

No37:ハーゲンダッツ ソルティバタービスケット

好きなところ ビスケットモチーフがおしゃれ。罫線や枠線の装飾への展開がかわいく参考にしたい。 画像で作られていて、SPでは別の画像に切り替わる。 https://www.haagen-dazs.co.jp/salty_butter_biscuit/

No36:オンズ

好きなところ 動画の背景がかっこいい スクロールした時にいろんな方向からフォントや画像が動いて表示される効果がかっこいい https://on-ze.com/

No35:手作りパンとスコーンのお店 ラ・ブランジュリ キィニョン

好きなところ 全体的にアイコンや画像などが大きくてインパクトがある。 PC画面でも、大きなハンバーガーメニューが斬新。 手描きの素材が多用されている。 スライダーのページネーションがスコーンになっている。 スライドが入れ替わるときには、スコーンが…

No34:ビスコ(Web工場見学ページ)

好きなところ ベルトコンベアが動くアニメーション。カタカタとした動き方が、どこかレトロで楽しい。 手書き風のイラストなので、機械的な感じがなく、絵本のような印象。 コーポレートカラーのレッドを基調としている。 http://cp.glico.jp/bisco/about/

No33:資生堂recipist

好きなところ 文字まわり(個性的なフォント、縦組と横組の混在など)に工夫があると、雑誌のような雰囲気になる。 ロゴとイラストの雰囲気があっていて統一感がある。 リンクボタンはホバー時に濃グレーに変化。画面が引き締まる。 タブレットサイズ以下で…

No32:JTB 女子旅 COLLECTION

好きなところ パララックス効果を使用した動きが良い 各国の画像にhoverすると、背景画像が変わり、LINE UPの時計が現地時間に変わる仕組みが素敵 配色がポップ http://jtpj.jp/

No31:リクルートホールディングス

好きなところ 背景のカラフルな画像が最先端のIT企業っぽくてかっこいい プレスリリースが自動で表示され、半透明の背景画像もかっこいい 文字のサイズが3種類あるのもユーザビリティ https://www.recruit.co.jp/

No30:100 Tokyo

好きなところ 100の名所がmapとともに掲載されていて、中身が充実している 海外風のデザインでスタイリッシュ、かつ日本らしい風景を使用していてバランスがよい スクロールすると出てくる、photoページへのリンクのアイコンも遊び心があってかわいい http:/…

No29:Starbucks Coffee Company

好きなところ コーポレートカラーの緑を使用し、黒、グレーで落ち着いた雰囲気になってる 主な情報発信源でありそうなfacebook,twitterのリンクがページ上部にあるので効果的 https://www.starbucks.com/