はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

可読性に優れたサイト 8選

可読性に優れたサイト 8選

可読性に優れたサイトを保存しておきます。 ここでいう可読性は、モノクロにしてもちゃんと読めるかです。 カラー、モノクロの両方の画像を残しておきます。

通常

パララックスなど使用していない通常タイプのサイト。

アニコム パフェ株式会社

動物病院のサイト。

アニコム パフェ株式会社

使用ツール:jQuery

アニコム パフェ株式会社のサイト(カラー)の画像 カラー
アニコム パフェ株式会社のサイト(モノクロ)の画像
モノクロ

ビーナスベッド

- ベッド通販店 VENUS BED -快眠をお届けするベッド専門店「ビーナスベッド」

使用ツール:jQuery

ビーナスベッドのサイト(カラー)の画像
カラー
ビーナスベッドのサイト(モノクロ)の画像
モノクロ

植栽模型工房 樹海

事務所概要: 植栽模型工房 樹海 | 樹木模型の専門工房です。

使用ツール:

植栽模型工房 樹海のサイト(カラー)の画像
カラー
植栽模型工房 樹海のサイト(モノクロ)の画像
モノクロ

パララックス

パララックス タイプです。

メガネナビ

メガネのコーポレートサイト。パララックスでメガネを使ったアニメ行っている。

あなたに特化したメガネを!メガネの選び方なら − メガネNAVI

使用ツール:jQuery, Modernizr, PHP

メガネNAVIのサイト(カラー)の画像
カラー
メガネNAVIのサイト(モノクロ)の画像
モノクロ

evian

飲料水メーカーサイト。展開したグロナビが、ファーストビューに入りきれていないのがおしい。

ナチュラルミネラルウォーター | エビアン evian

使用ツール:jQuery, jQuery UI, Google Loader, SWF Object

エビアンのサイト(カラー)の画像

カラー

エビアンのサイト(モノクロ)の画像

モノクロ

探検!京都大学

大学サイト。フラットデザインかつ、色彩計画もちゃんと練られている。

探険!京都大学|データで見る京都大学

使用ツール:jQuery, nginx

探険!京都大学のサイト(カラー)の画像
カラー
探険!京都大学のサイト(モノクロ)の画像
モノクロ

redjuice

同人作品掲載サイト

redjuice on Tokyo Otaku Mode

使用ツール:jQuery, Typekit, Nginx

redjuiceのサイト(カラー)の画像
カラー

redjuiceのサイト(モノクロ)の画像

モノクロ

動画 + パララックス

動画とパララックスを使用ているサイト。

近衛ちゃんぽん亭

ちゃんぽん飲食店のサイト。

創業昭和三十八年。彦根発祥の近江ちゃんぽん専門店|ちゃんぽん亭総本家

使用ツール:jQuery, Google Font API

近衛ちゃんぽん亭のサイト(カラー)の画像
カラー
近衛ちゃんぽん亭のサイト(モノクロ)の画像
モノクロ

まとめ

色の決め方は、 明度で濃さから決めるといい。

の上に黒、黒の上にの組み合わせはよくあるが、、明度が近いので、難しい。 その場合、白の上に、白の上にに黒など白と組み合わせた方がいい。。

明度(V)ベースの色の組み合わせにおすすめのサイトは、、 HUE/360 https://hue360.herokuapp.com/