CSSで見た目が美しく使い易い日本のサイト

1 ：2006/01/06 〜 最終レス ：2013/03/02

1.見た目が美しければ少々の文法違反は気にしない（指摘は可だが、論争に持ち込まない）。
　
2.海外サイトは紹介しない事。日本のみ。
3.strict房はお断り。

2 ：

CSSでイケてるデザインサイト 29
http://pc8.2ch.net/test/read.cgi/hp/1135295733/
これとの違いを明確に

3 ：

国内のみ。

4 ：

てことはかぶる可能性あるよね？

5 ：

かぶらない可能性もある。

6 ：

むしろ向こうに含まれるぞ

7 ：

Strict厨はお断りな人が使うスレ

8 ：

ttp://version510.com/
このレベルも日本では少ないだろうから張ってみた。
アイコンなどの細かいところの作りが丁寧。

9 ：

>>8
糞重い、R

10 ：

>>8
firefox？
固定背景だとスクロールが重くなるね。

11 ：

あれ？おかしいな。何でこんなに重いんだろう。
IEとOperaでもスクロールが重い。
普通固定背景で重いのってfirefoxだけですよね？

12 ：

>>11
むしろ今のFxよりIEのほうが固定に弱いよ

13 ：

>>12
あ、そうなんですか。
ありがとうございます。
と言うことで自分も
ttp://coco.vivian.jp/top.html
メニューとかテキスト中心だけど、写真で上手くまとめていると思う。
ワンポイントのクリップもあると無いとで結構印象が違う。

14 ：

>>13
そのサイト、最小フォントを大きめに設定してると被って辛いわ。

15 ：

結局、こっちのスレではユーザビリティはどうなの？

16 ：

>>15
タイトルに使い易いって書いてしまったからなぁ。
まぁ、使いやすいに越したことは無い程度に捉えてもらえれば。
ただでさえ日本のサイト限定なのに、更に条件を厳しくすると全然サイトが上がらないだろうから。

17 ：

>>13
色遣いとかはそんな悪くないけど、使いにくいなあ・・・とくにリンク。
本文と色が同じだからどこがリンクか非常にわかりにくい。

18 ：

正確にはハイブリッドデザインだけど。
http://tabi2.jp/index_hotel.php
これぐらいのアイコンの作り込みができるようになると、印象が変わるなぁ。
ページトップに戻るリンクのスクロールは心地よいが、js切ると使えないのはマイナス。

19 ：

http://heteml.jp/
ここもハイブリッド。
作り込みは結構良いんだが、コーポレートカラーの扱いが難しいな。
上段背景が白で、下段背景が黒だから対比で目が疲れる。
でも、代替案は浮かばない。これはこれでいいかな。

20 ：

自演の臭いがプンプン･･･

21 ：

ん？ハイブリッド（というかレイアウト用テーブル）を認めてもいいのか？
>>1の「少々の文法違反」とは問題が異なると思うんだが、
lintで100点じゃなくてもいいって意味ではなくて？

22 ：

こんなところまで来て自演するデザイナーなんて居ないだろ。
と言うか、マジで自演じゃないよ。

23 ：

>>21
dat落ち防止の狙いもあったんだけどね。
基準があいまいになるから、やっぱり止めた方が良かったな。

24 ：

テーブルとCSSを両方レイアウトに使って
ハイブリッドデザイン！かっこいいなあ(棒読み)

25 ：

http://www.michaelsoft.jp/wiz2/
ゲームのサイトだけど、雰囲気を良く出していると思う。
js使ってflash呼び出したり閲覧者への配慮も伺える。
動作が重いのは多分サーバーのせい。
個人的にはゲーム系では一番。

26 ：

http://www.kawashimaai.com/
タイトル周りや、それぞれのページの背景は結構凝っている。
メニューは日本語でも良いと思うが、雰囲気が崩れるのかな。

27 ：

http://doc-r.net/
divがやや多いが、h2の装飾が少し凝ってる。
ユーザビリティもまあまあ。
サイドバーは左の方が良いかも。
全体的にこざっぱりして綺麗な印象。

28 ：

あと、メインの幅は狭いけど、文章量が少ないからこれはこれでOKなのかも。

29 ：

>>25
まったくスレチガイだがWizardryってこうなってしまったのか
時代の変化だろうかorz

30 ：

めちゃくちゃなのあがるかと思えば割とまともなデザイン紹介されてる。
この調子でどんどん紹介してください。

31 ：

>>27
うをーーーーかっこえー

32 ：

http://www.wwjpn.com/
まぁ、それなりの美しさ。
トップは色数がちょっと多すぎてうるさいかも。
他のページはシンプルだけど手抜きとは違うだろう。
メニューはhoverで変化を付けたほうが良いと思うな。

33 ：

http://www.abn-tv.co.jp/
配色がばらついた印象があるが、ユーザビリティはOKだと思う。
アイコンをもう少し使えば見栄えは良くなるかと。

34 ：

http://www.kaikaikiki.co.jp/
それぞれのコンテンツ毎の色使いを上手くまとめている。
やや画像が多すぎる印象。テキストをもっと使った方が良いかも。
画像リンクのhoverがピンク色なのは個人的に嫌。

35 ：

http://www.hidesigns.co.jp/index.php
擦れ系クールなデザイン。
雰囲気が好きな人と嫌いな人で分かれそう。
メニューのhover処理が薄くなるのは個人的には嫌い。
でも、これはなかなか真似出来ないんじゃないかと。
ってか、さっきから自分ばっか紹介してるｗ

36 ：

日本のサイトのデザインも捨てたもんじゃないな。
やはり日本人をターゲットにしたサイトが一番デザインの参考になる。
海外は綺麗は綺麗だけど、何か違うんだよなぁ。

37 ：

>>32-35
がんばってるね。

38 ：

http://idnagano.net/index.php
使い易さは多少犠牲になってるが、綺麗だと思う。
ロゴだけって気がしなくも無いが、配色もまぁまぁ。
ただ、黄緑とピンクはもうちょっと彩度を下げた方が良いと思う。
今のままだと目が痛い。

39 ：

いいよいいよ、どんどん紹介して〜

40 ：

http://www.j-cnet.co.jp/index.html
多分それなりの出来なんだけど、なんか見飽きちゃったのかな。
新鮮味は無いけど、しっかり作られている。
正統派デザインと言うべきか。
でも、リンクのhoverが眩しい。

41 ：

文字をIE中の100%程度より小さく指定しないでデザインがいいサイトってないかなぁ。
自分でサイト作るときに字が大きくても綺麗でまとまっているサイトみたいなのを参考にしたい…
カスイケスレで聞いたほうがいいだろうか

42 ：

そう思う。それにその条件だけならリンク集にあると思うよ

43 ：

>>1
なぜわざわざ日本限定に？　海外は別でやるってのも無駄じゃないか

44 ：

>>43
それは海外はポータルが沢山あるから日本限定にしたの。
日本のサイトをデザインするには、日本のサイトを見るのが一番参考になりそうだし。

45 ：

>>44
たくさんあがったほうがよりよいもの自分で選べてよくないか？

46 ：

てかもともと「見た目がよければユーザビリティはどうでもいい！」って主張と戦ってできたスレだからねぇ。
のわりには「使い易い」ってあるけど・・・。日本語とかも特に論議の対象にはなっていなかったのは事実。

47 ：

>>46
逆、「見た目がよければユーザビリティはどうでもいい！」と
主張して派生したスレだよ。

48 ：

>>45
まぁ、そうなんだけど、ポータル見たほうが早いと思うから。
あれだけ沢山あれば殆ど網羅されると思うし。
>>46
そこはミスった。<使い易い

49 ：

>>47
ああそうだったな。

50 ：

>>48
それはこれからの書き込みの人次第だから、やっぱ限定する意味ないと思う。
限定しだすからおかしくなるんじゃないのかな。

51 ：

http://www.willsystem.co.jp/index.html
殆どフラッシュだけど、見た目は凄く綺麗。
でも、これって有料テンプレート（http://www.mizutamari.net/とか）で配布されてそう。
なんかこのセンスは外国人っぽい。
制作実績見ても自分たちで作ったとは考え難い。

52 ：

>>42
あると言えばあるけど、新しいのが見てみたいなと思って。
最近新しく紹介されてくるのって小さい文字が多いから、やっぱり文字は小さいほうが綺麗なのか…？とか思ったり。
なんか文章めちゃくちゃですね。ｽﾚ汚しｽﾏｿ。
先に配色とかレイアウトの基礎を勉強します
|ω･`)ﾉｼ

53 ：

>>50
やっぱり海外ありにしますかね。
そろそろ日本のサイトもネタ切れしそうなのでｗ
でも、なるべくポータルとの重複は避けて欲しい。
http://www.chukyo-u.ac.jp/
大学のサイトってcssでレイアウトされたの結構少ないね。
ここは文法はあまり良くないけど、学校らしく落ち着いた雰囲気を上手く出せてると思う。
色使いと写真のセレクトが良いと思う。
メニューの背景マークに何かあれば良かったなぁ。

54 ：

SONYで検索してみた。
どこもかしこもテーブルだったんだけど、CSSのもあった。
http://www.sony.fr/
パクリ防止策か無駄な改行ならHTMLはいいとはいえないけど
デザインは素人の個人サイトでは難しいな。
適当に検索したものだけど
残念ながらテーブルレイアウトのほうがデザインはイイ。

55 ：

×改行なら→○改行やら

56 ：

>>54
その色使いは海外ならではって感じするね。
ただ、真ん中のコンテンツの枠の左と上が切れてて不自然。
あえてやってるんだろうけど、ちょっと気持ち悪いなぁ。

57 ：

玄人のやつもっと晒してください

58 ：

http://www.takayanagi-isu.jp/
少し和風。
色使いは良いと思うが、マージンとかリンクの色の配慮がちょっと足りない。
home以外のサイドバーが途中で切れてるのもダメ。
この辺直せばもっと良くなるかと。

59 ：

http://www.vision-two.com/
硬い内容だけど、見た目は結構頑張ってる方。
と言っても上の画像だけって気もするが。
リストの画像が一種類でしかも地味なので寂しい。

60 ：

http://www.vision-two.com/day/
ソースは結構問題ありだが、すぐ直せる範囲内。
意味の無い時計とかあるけど、クールで美しいのは確か。
トップ以外のページはフッターも多少だが凝っている。
ここまでやるならリストの画像もただの点だけじゃなく、もっと凝った方が良い。
問題を直せばかなりいけると思う。

61 ：

下の二つはオーソドックスすぎますね。悪くはないですけど。

62 ：

>>61
まぁ、読ませてナンボのブログだからね。
変に奇抜なレイアウトは本末転倒だし。

63 ：

そうだとしても新しいもの見たいですね。

64 ：

ちゃちゃいれてすまん。もっと頼む

65 ：

こりゃーがんばればこっちが本スレになるかもな

66 ：

>>63
探してるけどなかなか無いね。
自分的には>>35が一番独創性があると思った。
でまた、固定幅中央寄せ。
http://www.webhut.jp/index.html
てか、リキッド自体が少ないし、あっても糞デザインばっか。
ここは目新しさは無いけど、普通に作り込まれてる。

67 ：

このスレには期待してる。

68 ：

つーか結局、がんばってる一人の人がどっちのスレにいるか、でしかない気も…

69 ：

>>68
そうかもね。
その頑張ってる一人が言うんだから間違いないｗ
まぁ、荒れないだけ良いわ。

70 ：

くそ、見た目はいけてたのにハイブリッドだったorz

71 ：

もうCSSの時代だろうと思っても企業は未だにテーブルだな。意外と探すの大変

72 ：

>>66
リキッドじゃなくてソリッドでも、そのデザインを良いと思ってるならアレだ・・

73 ：

アレって何だ？はっきり言ってくれ。

74 ：

荒れませんように。

75 ：

まあいいや。
荒れそうだから回答はいらない。

76 ：

http://semkim.net/
下段のvalidのリンクをあえて少し隠しているところが新鮮。
コンテンツとしてはそれほど重要では無いリンクなので、遊び心で許せるレベル。
全体的に重いのは海外だからか？

77 ：

http://jmby.info/
落ち着いた色使いと装飾のレベルの高さ。

78 ：

日本のサイト？

79 ：

>>78
スレタイにちょっと間違いがあるだけなので気にしないように。

80 ：

http://fremdenzimmer-karlsruhe.de/index.php
良くも悪くもグラフィックと言う気はするが、クオリティは高い。
もう一捻り欲しいところか。
キーワード詰め込み過ぎｗ

81 ：

http://www.lucer.cz/
背景が全て。
コンテンツ自体が少ないし、使い難さは感じない。

82 ：

http://mikepiontek.com/
グラフィック系だけど、アクセシビリティを良く考えている。
カッコいいし美しい。
文字サイズ変更機能がlargeでもやや小さいのが気になる。
xhtml1.1で作られていた。

83 ：

参考になるサイトがたくさんありますね

84 ：

>>82
カコイイのは認めるが、そこまで小さくてアクセシビリティは誉めすぎ

85 ：

>>84
やっぱそうだよね。
書いてからしまったと思ったorz
気になったらどんどん突っ込んでください。
http://digg.com/
準リキッドデザイン。
メニュー下の広告ウゼーとか、右側の緑色サイドバーの配色が気になるけど
ギリギリOKにしておく。
フォントサイズ切り替えボタンが一つなのに、二回押せば元に戻るのは初めて見た。
もうちょっと作りこめばいけそう。

86 ：

http://www.w3cn.org/index.html
漢字も悪くないかも。
画像のめり込みで少し変化をつけている。
div病なのと一部の背景はマイナス。
zeldmanの「Design with Web Standards｣の中国語版の表紙にﾜﾛﾀ

87 ：

ttp://revway.jp/
肝心のgalleryがJavascriptなんで、offにしている人
（俺とか）は観れないのがうざいかな

88 ：

ブラウザの設定によってはフォントサイズが小さすぎて
つぶれてなにも読めないのばっかり…
Mac IE で
フォントサイズ 12
解像度　96dpi
なんだけどね。
Macromedia のサイトもコンテンツによっては
なにが書いてあるのかさっぱりわからんです。

89 ：

Mac IE の設定を 72dpi すりゃぁいいジャマイカ

90 ：

Macは基準にできないよ。
多い方に、Macが合わせてくれ。

91 ：

んまぁあれだ
Mac使いがIEを使うなよとｗ

92 ：

つらい世の中ですね…
なんか思いっきり<FONT size=2>とか
<TABLE>で思いっきりレイアウトとか…
もうダメなんですね…　w

93 ：

要素名が大文字
値をダブルクォーテーションで囲ってない
もうダメもクソも初めっからダメだろカスｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗｗ

94 ：

HTMLの構造は多少難ありだが
色遣いとかも綺麗でいいと思いました
ttp://www.twilightning.jp/

95 ：

ttp://www.teichiku.co.jp/artist/nakanomori/

96 ：

>>95
ほほぅ、POPで良いね。
Lintだと一部点引かれてるけどまぁ許容範囲（W3C ValitatorだとValidだし）。

97 ：

>>95
cssがすごく長い。IE5.x for Macとかまでサポートしてくれてるのがありがたいね。

98 ：

初歩的なことを聞いてすんません
>>95のサイトのcssで、
h1 {
position: absolute;
top: -9000px;
left: -9000px;
text-indent: -9000px;
}
としてるのは、特に問題なし？
だったら、漏れも真似しようかと...

99 ：

それってh1を表示させたくないだけ？
だったらdisplay: none;の方がいい

100read 1read

1read 100read
TOP カテ一覧 スレ一覧 2ch元 削除依頼 ▲

Adobe GoLive Final ? - 8th.site (279)
ウェブ会社で働く人達の交流スレ　part1 (899)
有名リモホ(RemortHost)/偽装UA(UserAgent) 2訪目 (662)
自称コンサルタントに悩まされています (572)
別サイトへの target="_blank" は利用価値があるか (355)
[MSN・Yahoo!等]■ロボット型検索エンジン46■ (414)
--log9.info------------------
【PS3】機動戦士ガンダム バトルオペレーション#832 (1001)
SDガンダム Gジェネレーションオーバーワールド171 (431)
スーパーロボット大戦UX ネタバレ報告スレ (1001)
スーパーロボット大戦UX part120 (1001)
スパロボ図鑑 2762冊目 (1001)
スーパーロボット大戦F&F完結編 90周目 (491)
ニコニコ動画の不快なコメント inロボゲ板2 (350)
【Xbox360】重鉄騎 Part7【Kinect】 (968)
【SDガンダム】Ｇジェネシリーズ攻略33【G-GENE】 (717)
スーパーロボット大戦UX part119 (1001)
【ACVD】アーマード・コア VD【4日目】 (1001)
ヴァンドレッド参戦希望スレ ♯02 (400)
第2次スーパーロボット大戦TDN(´･ω･｀)UX (372)
スパロボ参戦希望 in 家ロボットゲー 23 (233)
ドラえもんのび太と新・鉄人兵団参戦希望スレ (203)
ゼーガペイン参戦希望 (365)
--log55.com------------------
封神演義とかいう漫画ｗｗ
ハーレム漫画を語るスレ 嫁一人目
【藤崎竜×田中芳樹】銀河英雄伝説未読者専用#1
漫画家の学歴
何でラブコメ主人公は総じてクズなの？
【ジョジョ】お前らディアボロ馬鹿にしてるけど
ジャンプ短命・打ち切り漫画について語るスレ part2
何故久保帯人が嫌われているのか考察するスレ