Webサイト100選

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

No100:カントリーマーム

好きなところ イメージカラーが赤であることに加え、画面の幅いっぱいに画像を利用されているためとてもインパクトがある 人の写り込みは「手」の部分だけとなっており、カントリーマームを食べるシチュエーションなど、その背景を想像させられる https://ww…

No99:イー・ステート・オンライン

好きなところ 伝えたいことを「文字のサイズ・色・太さ」「文章間の間隔・コンテンツ毎の間隔」などの組み合わせにより、分かりやすくなってる アイコンを利用することで文字の量を減らし直感的に伝わる作りになっているところはとても参考になる https://ww…

No98:キュービックホールディングス

好きなところ サイト内のコンテンツが四角をモチーフにした動きやデザインになっているところがおもしろい 企業カラーである青が使われているところも企業のイメージが出ていて良い https://cuebic.co.jp/

No97: Nikon Direct

好きなところ オンラインショップであるため、トップに検索メニューが設置されていて、利用者の利便性を考慮されている 商品のカテゴリーがしっかり分けられているので利用しやすい https://shop.nikon-image.com/

No96: lunasol

好きなところ ブランドのパッケージをイメージしたブラウンと白の背景が上品で清潔感がある 各ページすっきりしていて読みやすい https://www.kanebo-cosmetics.jp/lunasol/

No95: wythehotel

好きなところ ロゴがレトロで素敵 エアーメールのようなヘッダーのデザインがかわいい https://wythehotel.com/ja/

No94: FESTIVIN

好きなところ 写真がどれも魅力的 opacity,hoverの効果が素敵 http://festivin-kyoto.com/

No93:Volkswargen The Beetle

好きなところ ナビを選択すると、対応していないコンテンツ画像がopacityになる 上と左側の固定ナビゲーションがいい https://www.volkswagen.co.jp/ja/models/thebeetle.html

No92: Quoitworks

好きなところ フォントを巧みに使用したレイアウトが素敵 画面に100%で表示されるボーダーのピンクのラインがかわいい ロゴ、ナビがpositionで常に表示されるので、ユーザビリティ↑ http://quoitworks.com/

No91:umbro

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

No90:生チョコパイ

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

No89:adidas Originals

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

No88:PARCO

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

No87:明光義塾

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

No86:淡路島カレー

好きなところ シンプルに食材へのこだわりがわかりやすい 棚田の写真が素敵すぎる ページトップへ戻るボタンのホバーが気になる http://awajishima-curry.com/

No85:100 Tokyo

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

No84:キットカット

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

No83:Listen Today. Change Tomorrow.

好きなところ フォントがおしゃれ 左のナビにhoverするとアイコンの横にテキストが表示されるのが効果的 トップページでサンプルが聴けるのが嬉しい https://www.cadenceandcause.com/

No82:SPIRAL WEB

好きなところ ページを開いた時に表示されるロゴとアニメーションが素敵 スライダーの画像を変更した時の動きがカラフルで未来的 マップがおしゃれ http://www.spiral.co.jp/

No81:ONEデザインズ株式会社

好きなところ 背景画像のアニメーション、グラデーションがカッコイイ スクロールすると自動でコンテンツが読み込まれる動きもカッコイイ テキストが読みやすい文字数で改行されている https://www.koyou-onesd.co.jp/

No80:WORK KIT

好きなところ ナビのアイコンがわかりやすい 連絡先が効果的に表示されている worksの画像置換で、様々な画像を大きく見ることができる https://hitoba-office.com/

No79: IDÉE

好きなところ 配色が素敵 トップページの画像にhoverするとテキストが表示されるCSS3が素敵 ナビがまとまっている ページ内検索があるのもユーザビリティ↑ https://www.idee.co.jp/

No78:イタリア大使館

好きなところ 背景がイタリアの街並みでオシャレ コンテンツが多く、イベントなどの告知がされていて見応えがある。 http://www.ice-tokyo.or.jp/

No77:DEPOC INC.

好きなところ 商品画像が大きくて魅力的 配色がかっこいい https://zima.jp/

No76:Jet Edge

好きなところ スクロールすると、画像が変わる動きがかっこいい 常に連絡先がページに表示されていて、赤い背景色が際立つので効果的 http://www.flyjetedge.com/

No75: Works Medical

好きなところ カラフルなフラットデザイン アイコンが大きいので、視覚効果が高い http://www.worksmedical.com/site/

No74:豊田市美術館

好きなところ グリッドレイアウトで配置されている画像がおしゃれ 所蔵物の検索がしやすい https://www.museum.toyota.aichi.jp/

No73: Literally

好きなところ リンクにマウスを載せると、マーカーのラインを引いたようになるアイデアがおしゃれ googleフォントがおしゃれ 情報が多く、見やすくまとまっている http://tsukuruiroiro.hatenablog.com/

No72: オルニス

好きなところ ワイン型の背景に情報が浮かび上がってくるデザインがかわいい オンラインショップへのリンクがpositionで常に表示されるようになってる コンタクトフォームのワイン型もかわいい

No71:Taku Satoh Design Office

好きなところ ポートフォリオページでは画像のみを並べて、あえてデザインが際立つようになっている 白、黒、グレー基調のシンプルな配色が、制作物をより引き立てている http://www.tsdo.jp/index.html