なぜ和洋風◎のサムネイルリストが優れているのかの５つの理由

ちょっと思ったので書きます

なんか、前に書いた記事で多くの人に誤解を与えてしまったかもしれないのでちょっと書きます@shintarowfreshです。

和洋風◎

はっきりと一番最初に書きますが。
誰でも気軽に取り入れていい代物じゃないです。ポリシーがあって、目的があって、ちゃんとゴニョれるならやってみてもいいんじゃないですか？

まあ、僕的には流行ってくれたほうが、取り入れないことに意味が生まれるのでそれはそれとしてありがたいのですが、それにしたって誤解を与えたかもしれないままほうっておくのはどうもなぁ。

ほんとうに上部サムネイルリストは必要ですか？

関連≫おお！和洋風のサイトデザインが変わってる！！ビジュアルリストを全面に押し出してるね| frasm

なぜ和洋風のビジュアルリストが優れているのか

詳しく書けばたくさんあるが、大まかに言えば下の７つだろうか。

• サイトのデザインにマッチしている
• 巧みに視線の移動を利用している
• うるさくないし、邪魔ではない
• むしろ検索やSNSから方した人に関連カテゴリーやおすすめ記事をもう1記事読ませるうまい手
• ユーザビリティーに配慮
• 実装の際に設計思想がぶれていない
• 各個別記事記事表示とリスト表示に関連性がある
• 機能的に申し分ない

という理由で、画面上部に設置されたビジュアルリストは必要だと思うし、機能的効果的だと思う。

なにもビジュアルリストを取り入れたブログメディアは和洋風だけではもちろんないわけで。
ギズモード・ジャパン
ライフハッカー［日本版］
もうかれこれ２年以上まえからリストは上部にあったような気がする、もっと前からかな、ほかにも海外のテック系のブログや、デザイン形のブログだって取り入れている。んなことはしってたし、もちろんみんな知ってただろうし、ではなぜ和洋風のサムネリストが優れているのかをもうちょっと書こうと思う。

パーツデザインが、サイトデザインにマッチしているから(・∀・)ｲｲ!!

これが僕のノートパソコンで見た和洋風である。
水樹奈々の文字が光り輝いてるが、それは今回は関係ないのでスルーする。
マッチしているといえば大げさだろうが、どのパーツも干渉をうけず、独立性を保っているし、おそらく普通に普通だと感じるだろう。

しかし、普通に普通だと感じさせることがいかに難しいか。ちょっとでも何かをデザインしたり表現したりしたことがある人にはわかると思うが、普通に普通を感じさせるのはとても大変なのだ。

人は違和感に恐ろしく敏感であり、鈍感だ。
和洋風の場合、違和感は……まあ、なぜボーダーの色がほかは全部黒いのにサムネリストはグレーなのか、とか、ないこともないが、これはまあ、個人の趣味の問題の範疇か。マッチしてなくもない。
むしろ引き立てあっている。

トップメニューとコンテンツエリア、サイドバーエリアを良い感じに結ぶ引き立て役になっている。マージンのとり方、ボックスのサイズ、表示数、それぞれ和洋風にマッチしている。もちろん本人が実装している以上当たり前ですね。更にチューンしてるとおっしゃっていたので。更に変更や改造があるのかもしれませんね。

少しずつチューニング中です！RT @shintarowfresh: おお！和洋風のサイトデザインが変わってる！！ビジュアルリストを全面に押し出してるね goo.gl/fb/s14bR | frasm

— するぷさん (@isloop) 4月 18, 2012

追記：この記事をアップしてから数時間で修正が加えられました。

サムネイルの枠はあまりうるさくしたくなかったので灰色にしてたのですが、黒にした方がよかったですね。ありがとうございます！RT @shintarowfresh: なぜ和洋風◎のサムネイルリストが優れているのかの５つの理由 s-fre.net/JYCw2U #frasm

— するぷさん (@isloop) 4月 22, 2012

最終的にこうなりました。

スピード感が半端ない。プロはやっぱすげえ。

サムネリストが強調されてないのに、強調されているから(・∀・)ｲｲ!!

これがもっとも憎らしかった。@isloop氏心得ているぅぅぅううう！と叫んでしまった。
さすがアプリ開発も手がけていらっしゃるのでUIといか、人の目線というか、心理操作というか、実に巧みだ。デザイナーになっても売れること請け合いです。

別に難しいことを言うつもりはない。

この画面を開いて１番最初、そして２番目にどこに目が行くか、意見を操作するつもりもない。オレンジのバナーがちょっと派手すぎるな。

これが強調していないのに強調している項目の答えです。これを見ろー！って書いたり、度派手な強調符を使うデザイナーは２流です。
ほっといても視線が吸い寄せられる、どうしてか見ちゃう、これは戦略性とデザインの基礎を知っていないとできない芸当なのです。

テキストよりも画像のほうが情報量がある。当たり前ですね？本当に当たり前ですか？

時と場合があります。
詳しく言いますと、和洋風の場合、サイトロゴがというか、ヘッド・ブランディングセクションが実にシンプルです。むしろシンプルすぎるくらいだと僕には思えますが、しかし今回サムネリストを放り込んだおかげで、実にデザイン的にもUI的にもリッチなヘッダーセクションになっています。

このへんが「frasm」がトップサムネリストを採用しない理由ですね。「frasm」がトップサムネリストを実装したら、めちゃめちゃうるさいだろうし、更に閲覧開始から記事までが超遠くなる。

はい、実装諦め。まあ、他の方法はいくつかあてがあります。

サムネリストがブランディングセクションとコンテンツセクションの架け橋になっているから(・∀・)ｲｲ!!

情報は打ち消しあう。「二律背反」は馴染むが、同じレベルのものが「２つ」は、もしくは「３つ」ある状態は読者・観察者に選択を強いるし迷いを生む。

簡単にいうと、色々派手にすると、もうなんか、どれを見ていいのか判断に困って、全部を「ないこと」と認識する状態です。
これはもろもろ派手にしたところで、結果全然意味がない状態を表しています。

ひとつ問いましょう、何を見てもらいたいの？

ヘッダーの画像ですか？それともサムネリストですか？それとも記事ですか？
この場合全部という答えは可能ですが、野茨の道です。覚悟が必要です。

僕なら

ヘッダーロゴ、バナー→記事→サイドバー（希望）→プロフィール

くらいのプライオリティーでしょうか。
UI的にスクロールはなるたけ最小限にという鉄則を、意図的に無視しています。
スクロースしてもらう必要はあるけど、それ以上にヘッダー画像を見てもらいたいので。こんなブログですよって。
当然リスキーな作戦です。さっきも書いたようにスクロースは少ないほうがいい。つまり、記事はできるだけ高い位置から始まるべきだという鉄則を無視しているので。それなりの覚悟は持っているつもりです。

話がそれましたが、あれもこれもは、結果無意味という話です。
和洋風のサムネリストは。、それぞれのエリアセクションが、うまく連結連携できる要としてサムネリストが配置されていて、巧みです。@isloop氏がそこまで本当に考えているのかはこの際関係ありません。少なくとも僕にはそう感じられました。

機能的に申し分ないから(・∀・)ｲｲ!!

まず機能の解説ですが、トップページではサムネリストは最新記事を表示しています。
個別記事ページでは、同じカテゴリーの記事を表示しています。
例えば読者が検索やSNSから個別ページにアクセスした場合、関連カテゴリーの記事を読者にビジュアルで提示することができる寸法です。効果的ですね。この効果が「frasm」にも欲しい！

半透明のバックグラウンドが控えめにサムネ上に敷かれて、その上に各記事タイトルがちゃんと読めるように書かれているので、マウスオーバーしなくても、記事内容がわかります。
見た目を損なうからと文字をどければ、何について書かれた記事なのかとたんにわからなくなりますし、いちいちマウスオーバーをしてもらうのは、面倒です。

という理由で、サムネリストパーツの機能思想もほぼ完璧。

何事もない風を完璧に装えているから(・∀・)ｲｲ!!

和洋風のこのUI変更は現状サイレントアップデートです。
さも初めからこうですよって、な感じです。
まあ、それもそうですね、今日はじめて和洋風に訪れた読者からしたら、意味があるのは記事の内容な訳で、どこにどんなリストがつこうが知るかよ。というものですね。

同様の理由でぼくも恐ろしくいろんな場所をサイレントに更新しています。見つけてほくそ笑んでください。

一応私の過去記事も載せておきます、感動と勢いが伝われば幸いです。

おお！和洋風のサイトデザインが変わってる！！ビジュアルリストを全面に押し出してるね| frasm

それではこれから実装する人にサムネ周りのCSSなアドバイスというか、なんというか。
CSSのOverflowを応用して画像を綺麗にリサイズ表示するサンプル:phpspot開発日誌
Create Resizing Thumbnails Using Overflow Property | Css Globe
記事のサムネイル画像をCSSでゴニョる時、上の方法を使えば縦横比を保ったまま綺麗に任意のサイズに収まるはずです。
サムネの縦横比が崩れてるのは、ちょっとアレですね。
お試しあれ。

さて、いろいろ書きました。ごますり野郎、腰巾着！なり、長いものに巻かれているなり、体制側め！なり犬なり好きなように呼んでいただいて結構です。やっぱり犬は勘弁して下さい。なんかプライドが許しません。
体制側め！とか、むしろ結構好きです。そして、僕的に何一つやましいところはありません、優れているものを優れていると言って何が悪いと思っています。
誰かのサイトデザイン、UI設計、ユーザビリティーとかの何かの役にたてばなぁと思っています。

@shintarowfreshでした。

文：シンタロヲフレッシュ

はてブ

pocket

twitter