アイキャッチ画像が見切れてしまう問題が気になり、
レイアウトを「縦型カード2列」から、「タイルカード2列」に変えてみた（結論）
これで終わってもいいんだけど、それにあたって調べたこととか下に書く。
変更前後での画像比較
左：従来の表示（縦型カード２列） …画像が見切れている
右：新しい表示（タイルカード２列） …画像が見切れていない。
変化点
「タイルカード２列」はアイキャッチ画像が見切れていないが、
代わりに、１つ１つの記事カードが縦長になり、一覧性が下がっている。
また記事の表示順番が左右入れ替わっている。
（３番めの記事である、「検索が使いにくいという話。」が、右のカラムに出ている等）
縦型カード2列の特徴
特徴
- 1行に2記事表示される
- それぞれの記事カードの縦の長さは固定（同じ高さになる）
- ノートのマス目に合わせて書いているとか、
同じサイズの付箋をきれいに並べて貼っていく、みたいな感じ。
メリット
- 左上（最新）→右上→左下→右下（最古）と並ぶので、投稿順がわかりやすい。
- 全体として整然としていて、きれいな印象。
- タイルカード2列に比べて、ページが短くなるので、多くの記事をひと目で把握しやすい。
デメリット
- 記事カードのサイズを画一的にするために、アイキャッチ画像が見切れる
（※アイキャッチ画像の位置は調整できない）
結論
見切れないようにしようとすると、アイキャッチ画像を調整する必要がある。
タイルカード2列の特徴
特徴
- 1行に2記事表示される。
- それぞれの記事カードの縦の長さは、固定されていない（高さは記事ごとにまちまち）
→実質的にアイキャッチ画像のサイズにより、記事カードの高さが変わる。 - スクラップブックとか、いろいろなサイズの写真や記事を貼ったようなイメージの見た目。
やや雑然とした印象。定型でない事による良さを狙える。
メリット
- アイキャッチ画像のサイズに記事カード側が合わせてくれるため、見切れることがない。
デメリット
- 記事の表示順について、左上（最新）→右上（次）までは縦型カード２列と同じだが、
そこから先は記事カードの高さによって変わる。
（2行目以降は、「記事カードの開始位置（上端）がより上の方にあるものが、新しい記事」となり、左右の配置は投稿順には関係ない） - １つ１つの記事カードがデカくなるので、ページ全体が縦長になる。スクロールがダルい。
結論
タイルカード２列で無駄にデカくならないように、かつ、
表示順もある程度意識しようとすると、アイキャッチ画像を調整する必要がある。
まとめ
| メリット | デメリット | デメリットへの対策 | |
| 縦型カード | 記事カードの高さは固定 記事の並び順は固定 | アイキャッチ画像が見切れることがある | アイキャッチ画像を調整 見切れないサイズにリサイズするなど |
| タイルカード | アイキャッチ画像は基本的に見切れない | 記事カードの高さがアイキャッチ画像に依存して変わる 記事の順番が左右入れ替わる場合がある 記事カードがデカくなった結果、一覧頁が縦長になる | アイキャッチ画像を調整 記事カードの縦の長さが大きくならないよう 全体的に小さくし、サイズを統一するなど |
結局アイキャッチ画像を調整しないといけないじゃないか。
複数の選択肢があるが、結局同じような結果に辿り着くというのは、よくあることである。
毎度調整する前提なら、タイルカード２列（変更後）のほうが良くなる（可能性を秘めている）が、
もし毎回アイキャッチ画像をいじらない前提なら、縦型２列（従来のまま）の方がメリットが多い。
あれ、変えないほうがよくね？
そもそもアイキャッチは横長の画像が前提になっているように思われるので、
縦長の画像をアイキャッチにないほうがいいのかもしれないとも思った。
思ったが、基本いらすとやさんの素材をダウンロードしてそのままアップしているので、
リサイズするのは少々面倒だな。
縦型カード表示は連続性とか時系列がある程度価値を持つものに向いていて
タイルカード表示は記事を読む順番がさほど重要でないものに向いている…
わけではないが、そういうブロブなら使ってもいいように感じた。
アイキャッチが重要な、写真サイトとかは向いているかな。
| 向いているブログ？ | |
| 縦型カード | 連続性や時系列にある程度価値があるもの （日記、小説、学習記事を主体とするブログなど） |
| タイルカード | 各記事が独立・完結しており、読む順番に余り左右されないもの （商品紹介、写真系、攻略記事を主体とするブログなど） |
結局、レイアウト的には縦型カードのほうがよいとは思うのだが、
アイキャッチが変な状態だとモチベーションが下がるので、今回試験的に変えてみた。
また変えるかもしれない。
…単にレイアウト変えただけで、どうしてこんなに長文の日記になってしまうんだ。
おかしいだろ。
コメント