Vimmers 2 のカードの大きさに関して

[osyo-manga]

#129 より派生。
関連：#129, #128

[osyo-manga]

#129 (comment) への返信

「見づらい」は一覧性にかけていて見づらいということなんですかね？

はい。
旧版は各カードが小さかったので全体を把握するのが比較的楽だったんですが、新版だとかなりスクロールしないと全員を見ることができないのが気になりました。

今までのプロフィールアイコンが小さかったので、それを128px前後にしたかった

わたしは逆に前のアイコンの大きさぐらいがちょうどいいかなーとと思っています。
他の人の意見も気になりますね。

[supermomonga]

私も一覧性が高い、つまり画面の表示領域内の情報量がもう少し多いとよいかなと思います。
個人的にはアイコン画像はユーザーと名前しかユーザーを識別する情報がなく、そして目に入ってくるのはアイコン画像なので、アイコン画像の大きさは現状で良いと思うのですが、カード自体がもう少し小さければ一覧性が上がって良いかなと思います。

これくらいでしょうか？
これは1,366 x 768ピクセル解像度のマシンでブラウザを最大化した時のスクリーンショットです。

この辺りは個人の感覚によるので調整が難しいかもしれませんね。

[osyo-manga]

あと今のレイアウトだと少し圧迫感があるのが気になりますね。余裕がないというか。
カードの大きさ影響していると思いますが、もう少しウィンドウの左右に余白があってもいいんじゃないかと思います。

[dictav]

未実装の点:

APIを使ってGitHubのアイコンを読みに行く
short_nameの表示
descriptionの表示

この辺も入ってくるとなるとそこそこスペースが必要な気もしますが、ぼくも一目でたくさん見れる方が好みです。
サンプルとして 2560x1440 の環境で表示した Vimmers ページを添付します。

通常

safariによる縮小時

[osyo-manga]

上で余白とか言っていましたがサイズによって変動するのであまり意味がなかったですね…。
ちなみにわたしの環境は 1024x768 ぐらいでウィンドウ表示していて以下のような感じです。

[supermomonga]

イカ娘（どうみても）

[supermomonga]

おしょーさんとかdictavさんのスクリーンショットを拝見すると、そもそもブラウザの大きさによって（並びを調整するだけでなく）カードの大きさ自体もある程度調整する方向が良いかもしれない、と思いました。複雑そうですが…

[koron]

スゴく…レスポンシブです…

[hail2u]

カードの大きさはもうちょっと小さくする方向で考えてみます。幅は最大6つのソーシャルアイコンのことがあってちょっと難しい気がするので、主に高さをコンパクトにする感じが良いのかなと。

左右の余白についてはカラム増やすタイミングの調節である程度(カードの幅の半分くらいは必ず)確保するように調節してみます。

[mattn]

何度見ても tsukkee さんが一番目立ってるな

[hail2u]

http://hail2u.net/pub/test/561.html

• 左右に最低限確保する余白を少し広く
• プロフィールアイコンをひと回り小さく
  • 名前をそれに併せて小さく
• ソーシャルアイコンの大きさはそのまま、丸背景を削除して占有領域を小さく

左右の余白はもうちょっと多めに確保しても良さそうです。

おおまかに3/4くらいになったような。これ以上小さくするとすると、オリジナルのVimmersと同じようにプロフィールアイコンの横に名前とソーシャルアイコンを並べるという形になりそうです。

[supermomonga]

(〃l _ l):+1: ☆

いい感じだと思います！

[mattn]

👍

ぜんぜん関係ないけど placeimg 便利だなー。