Webサイト100選

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

No70:HARA DESIGN INSTITUTE

好きなところ グリッドレイアウトと写真のバランスが素敵 同じカテゴリ内のものは画像間の余白がないレイアウトになっていて分かりやすい 2カラムになっていて、余白が多く読みやすい https://www.ndc.co.jp/hara/

No69:Tatsuo Yamamoto Design Inc.

好きなところ 半透明のナビが素敵 WORKSの画像、文字のサイズ、配置がちょうど良い 画像にhoverするとモノクロからカラーになるのでわかりやすい http://www.tatsuoyamamoto.jp/

No68: Graphika inc.

好きなところ 黄色の枠を効果的に使用したデザインがオシャレ アイコンと配色使いが上手。カラフルでもスッキリとした印象 https://graphika-inc.com/

No67:THE TERMINAL

好きなところ ロゴと背景画像が統一されている ボーダーの使い方が素敵 http://terminalnet.ai/

No66:SHISEIDO THE GINZA

好きなところ 高級感があり、ブランドイメージに合う メイン画像の動画が美しい http://thestore.shiseido.co.jp/

No65: DHOLIC

好きなところ 写真のサイズがちょうどよく、商品がよく見える ナビが上部に、特集別、サイドに商品カテゴリ別で検索できるようになっていて、わかりやすい 白黒のシンプルな配色に、ピンクのアクセントカラーが効果的 http://www.dholic.co.jp/

No64:Pen Online

好きなところ 情報量の多い中、情報がまとまっている 画像にhoverすると詳しい説明文がでてくるので、内容をイメージしやすい https://www.pen-online.jp/

No63:重山陶器株式会社

好きなところ 紺、グレー、白の配色 華やかな商品画像を引き立てる洗練された配色、フォントが読みやすい ゆったりとした幅が程よい余白を演出している http://www.jyuzan.jp/

No62; dia STANDARD

好きなところ フォント、フォントのサイズ、配色が計算されていて情報量が多くても読みやすい ボーダーの使い方が上手 グリッドデザインを使ったカレンダー形式のdaily STANDARDのページのアイデアが素敵 http://www.diastandard.com/

No61: GELATERIA MARGHERA

好きなところ アクセントカラーの黄緑で華やかな印象 1ページに情報がまとまっていて見やすい メニューページの画像レイアウトもちょうどいいサイズ感 http://gelateriamarghera.jp/

No60: Indigo Architecture & Interiors

好きなところ ロゴ、ナビの配置が珍しく参考になる ロゴの色を黒にして、ナビよりも注目が集まるような工夫がされている http://beingindigo.com/

No59:web staff

好きなところ バナーがごちゃごちゃしていなくてすっきりおしゃれな印象 ベーシックなデザインでもメインカラーのビビッドピンクにより華やか https://www.webstaff.jp/

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/