画像大きさ

HTML他サイト調査

Yahoo!ニュース

 状態:調査中  閲覧数:2,884  投稿日:2015-07-31  更新日:2015-07-31
ニュースページ
・200×109
・199×123
・200×130
・200×191

画像ページ
※実サイズと異なるサイズを指定
・450×245
・634×391
・634×412
・499×476

結論
・ニュースページ … 横200が上限。縦上限は恐らく200
・画像ページ … 横634が上限。縦上限は不明

キュレーション

 閲覧数:561 投稿日:2015-07-31 更新日:2015-07-31

NAVER まとめ


トップページ
・60×60

まとめページ
・300×271
・250×313

画像ページ
・600×541
・250×313

結論
・トップページ … 60×60固定
・まとめページ … 横300が上限。縦上限は不明
・画像ページ … 横600が上限。縦上限は不明

料理

 閲覧数:592 投稿日:2015-07-31 更新日:2015-07-31

cookpad


トップページ
・94×94
※角丸正方形固定


カテゴリーページ
・100×141
※縦長固定


料理ページ
メイン
・280×420
・280×280

サブ
・136×90
・136×181


画像ページ
・387×580
・435×580


結論
・トップページ … 94×94。角丸正方形固定
・カテゴリーページ … 100×141。縦長固定
・料理ページメイン … 横280が上限。縦上限は不明
・料理ページサブ … 横136が上限。縦上限は不明
・画像ページ … 横上限は不明。縦上限は580

感想

 閲覧数:570 投稿日:2015-07-31 更新日:2015-07-31

画像サイズ


大きな画像
・画像個別ページ以外で大きな画像を表示させているケースは見当たらない
※画像個別ページでも、サイズ上限は600px


インデックス


インデックスとして画像表示する場合は、正方形の方がお洒落に見える
・トリミングが必要?

img(画像)を正方形に切り取って表示させる
CSSだけでサイズ不定画像の中央を正方形に切り抜きサムネイル (かんたん!)




見せ方の工夫


ページ単位でのメインサブ
・cookpadのように、ページ単位でメインサブ画像をサイズで切り分けるとお洒落に見え、かつ見やすい

サイズ切り分けの法則
・メインサブ画像をサイズで切り分ける際には、縦または横を、サブ画像の2倍となるよう設定
※この2倍という明示的な数値が、統一感を出すためには非常に大事

キレイに見せるためにはサイズに法則性が必要
・1BOXの「幅」「高さ」に相関関係があり、お互いの「倍」あるいは「半分」ではないと綺麗に見えない
・一見して、無秩序な状態から綺麗に並べ替えてくれるように見えるがそれは幻想
・中途半端なサイズで作成すると、微妙な仕上がりになる



「ホーム」に統一

トップページタイトル表示形式調査



週間人気ページランキング / 11-27 → 12-3
順位 ページタイトル抜粋 アクセス数
1 鉄道会社毎のカラーコード | カラーコード(色) 14
2 RGB ⇔ Lab | 色変換(色) 13
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 9
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 7
5 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 6
6 似顔絵ジェネレーター : 似顔絵メーカー / NIGAOE MAKER 5
6 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 5
7 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 4
8 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 3
8 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 3
9 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 2
9 Flickrがサポートするライセンス 9 + 特別なライセンス 2 | 画像著作権(画像) 2
9 CSSで出来ないこと | CSS 2
9 16進数カラーコード / 2進数 2
9 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 2
9 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 2
9 色モデルイメージ図 | 色変換(色) 2
10 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 1
10 HSLとHSVの違い | 色変換(色) 1
10 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 1
2024/12/4 1:01 更新