画像大きさ

HTML他サイト調査

Yahoo!ニュース

 状態:調査中  閲覧数:1,934  投稿日: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が上限。縦上限は不明

キュレーション

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

NAVER まとめ


トップページ
・60×60

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

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

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

料理

 閲覧数:370 投稿日: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

感想

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

画像サイズ


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


インデックス


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

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




見せ方の工夫


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

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

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


Twitter検索結果。「画像大きさ」に関する最新ツイート


「ホーム」に統一

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



週間人気ページランキング / 1-28 → 2-3
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 49
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 37
3 「bgcolor」「background-color」「background」の違い | CSS 36
4 RGBの種類 / ビットカラー | RGB(色) 30
5 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 25
6 「東京都」のカラーコード取得は難しい | カラーコード(色) 18
6 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 18
7 「属性」「プロパティ」「アトリビュート」の違い | CSS 17
8 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 16
8 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 16
9 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 15
9 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 15
9 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 15
10 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 14
11 Design 0 13
11 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 13
12 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 12
12 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 12
12 HSLとHSVの違い | 色変換(色) 12
13 ICCプロファイル | カラーマネージメント(色) 11
2023/2/4 1:01 更新