画像大きさ

HTML ＞ 他サイト調査

Yahoo!ニュース

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

キュレーション

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

NAVER まとめ


トップページ
・60×60

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

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

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

料理

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

感想

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

画像サイズ


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

インデックス


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

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



見せ方の工夫


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

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

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


「ホーム」に統一

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



類似度ページランキング
順位 ページタイトル抜粋 ％
1 画像大きさ 100
2 画像補正 44
3 画像素材 44
4 画像生成AI 36
5 画像縦横比の問題 31
6 作成画像保存ルール 29
7 Firefoxで画像が表示されない 27
8 PNG画像透明化問題 27
9 画像の上にテキスト表示 25
10 レスポンシブ画像系用語 25
11 画像フィルタ 選考落選 25
12 jpg画像サイズを下げる 24
13 レスポンシブ画像実装方式 24
14 主要サイトの横幅と、メイン広告の大きさを調査 22
15 画像使用に関する個人ルール 22
16 「漫画」画像フィルタ実行例 22
17 CSSで画像をロールオーバー 21
18 複数画像一括レタッチ処理実行 21
19 「油彩画」画像フィルタ実行例 21
20 「水彩画」画像フィルタ実行例 21
2024/10/28 13:39 更新
週間人気ページランキング ／ 10-21 → 10-27
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 16
2 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 11
3 RGB ⇔ Lab | 色変換(色) 8
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 7
4 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 7
4 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 7
5 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 6
5 「z-index」効果を打ち消すスタイルシートは、「z-index:auto;」 6
5 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 6
6 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 5
6 鉄道会社毎のカラーコード | カラーコード(色) 5
7 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 4
8 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 3
8 「transform:translate3d();」でスマホ実機画面が一瞬だけチラつく → 「backface-visibility:hidden;」指定すると解消される | CSSトラブル対応(CSS) 3
8 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 3
8 Design 0 3
8 「display:flex;」を設定している「
  • タグ」内の「タグ」クリック範囲を拡大する | Flexible Box Layout Module(CSS)
    		• 3
    9 色モデルイメージ図 | 色変換(色) 2
    9 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 2
    9 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 2
    2024/10/28 1:01 更新