カード型UIという手法の紹介。カード型UIの考察と実例。

Publish2016/01/27(水)

カード型UIという手法の紹介。カード型UIの考察と実例。

今日はカード型UIを紹介して、ついでにカード型UIがどういう考え方で使われているのかという部分と、実際の使用例から紹介してみようと思います。

カード型のUIとは?

デザインをしている人であれば、カード型UIといえば「ああ、あんな感じのやつやね」というのがイメージできると思いますが、あまり普段意識しない人からすると「カード型のUI」と言われてもピンとこないと思います。
カード型UIをかなりざっくり説明すると、例えばサイト内に埋め込まれたTwitterのタイムラインのように、その情報が他の情報とは異なり、単独で存在している情報の集合体だと考えると分かりやすいかと思います。
下記に実例として色々なサイトのカードUIをサンプルとして掲載しておきますので、それを見たらなんとなくイメージがつかめるかと思います。
カード型UIを自社サイトに取り入れるかどうかは置いておいて、こういう手法でのアプローチもあるということを知っておいてもらえると手段の幅が広がります。

カード型UIの特徴とメリット・デメリット

実際にどう使うのかを考える分かりやすいパターンとして、カード型UIをサイト内に使用する場合のメリットとデメリットを考えてみます。
まずメリットとしては、カード型UIにすることによって、その情報が「わかりやすくまとめられた状態にすることができる」という点があります。
例えば、アクセスのページに住所と名前と電話番号がまとまった状態のカード型UIがあった場合、その情報は利用者にとってわかりやすく必要な情報が最小限にまとめられているので、使いやすくなっているという状態を作ることができます。
逆に、カード型UIを使うデメリットとして考えられるのは、その情報が他の情報と明確に分けられることにより、「別のもの」として認識される可能性があるということが考えられます。
先ほどのアクセスページの場合だと、情報をカード型UIにまとめることによってわかりやすさが上がる反面、そこに意識が集中するため、例えば補足情報としてアクセスの際の注意事項があった場合などにその情報がスルーされてしまうという可能性があります。
これらは一例ですが、使うタイミングと内容によってはカード型をUI採用した方が効果も上がる場合もあります。

カード型UIの実例

では実際に各サービスで提供されているカード型UIの実例を見て参考にしてみましょう。
これらのカード型UIは「外部サービスとして提供されているもの」をWebサイトに取り込む場合のサンプルになります。
外部サービスという特性上、埋め込まれるサイトとは違う情報のかたまりになるため、カード型UIとの相性がよいのかポイントです。
自身が提供するサービスがどこかのサイトで再利用される場合などであれば非常に参考になる例かと思います。

instagramの場合

deroter dgさん(@deroter)が投稿した写真

Twitterの場合

Facebookの場合

取材いただいた記事が掲載されました。

Posted by ふにす on 2016年1月12日

Google+の場合

Pinterestの場合


tumblrの場合

http://deroter.tumblr.com/post/135373619275

noteの場合

gistの場合

Mediumの場合

gulp istall-npm

まとめ

カード型UIを使用することで、情報のブロック化が行われ、分かりやすさが上がります。
その効果を活かせる状況であればカード型のUIを採用するというのも一つの選択肢です。
自社のサイトやサービスで利用できるかどうかは、デザイナーさんと相談する必要はあるかと思いますが、デザイナーさんがカード型のUIを提案してきてくれる場合などはそういう意図があって提案してくれているという風に考えてもらえると、デザイナーさんとの意識のズレは解消していくように思います。
この記事を書いたきっかけも、あるお客さんが「デザイナーがこういうデザインをしてきてくれたけど、これってどういう意図でしてるかわかりますか?」という質問を受けたことがきっかけです。
デザイナーはカード型UIの特性や使うタイミングを理解しているので問題はないですが、まだ一般の人にはこれってなんでこうしているのだろうというのがわかりにくい部分かもしれないなと思ったので、その意識のズレの解消に役立てば何よりです。

記事の著者:ふにすでぐち

ふにすでぐち

1978年生まれ。企業のWeb活用をテーマに、Webサイトの運用を中心とした戦略的な企画立案、サポートやWebサイトの構築などを行っています。
5年間のWeb制作会社勤務後、2年間のフリーランスで「フニス」として活動後に法人化し、2012年7月「ふにす株式会社」を設立。
Web活用の情報や考え方などを発信するブログ「ふにろぐ」を不定期で更新しています。
2015年11月より大阪府高槻市に「ふにすWeb相談所」を開設。
地域の方々に気軽にWebのことを相談できる場所として、より多くのWeb運用の問題解決をするために活動しています。
また、不定期で大阪を中心にWeb運用やブログなどをテーマにしたイベント「ふにセミWS」を開催しています。
サイトの運用や活用にお困りの方はお気軽にご相談ください。
お問い合わせはこちら

LINEでWebに関する質問にお答えしています。

ふにすでは、LINEでWebに関するご質問にお答えしています。Webに関するあんなことやこんなこと、今さら聞けない疑問などなんでもご相談ください。LINEアプリでQRコードを読み取ると友達登録のリンクが表示されますので、試しに登録してみてください。

ふにろぐとは?

でぐち

ふにろぐは「ふにす株式会社」の「でぐち」が書いているブログです。
このブログでは主にサイトの運営をしている企業のご担当者様向けに、「サイトの運営に役立つTips」や「今更人に聞けないような初歩的なこと」を中心に情報を配信しています。
その他には僕自身の考え方なども書いています。

このブログについて

ふにす株式会社

ふにす株式会社は大阪の高槻にある「Webを起点に会社の成長を応援するパートナー」をモットーに、Webにまつわるいろいろな問題を解決する、サポートをする会社です。
ホームページでお問い合わせを増やしたい、もっとたくさんの人に見てもらいたいなど、ホームページ/Webサイトを活用したい方向けの活動を行っています。
また、ホームページの作成や、外部パートナーとしての運用サポートなど、幅広くWebにまつわる諸々のことをおこなっております。

ブログ内検索

サービス

ふにすWeb相談所

ホームページの運用お得情報

ホームページ/Webサイトの運用に関する記事のまとめです。ツールや運用ノウハウなど、知っていると便利になる情報ですので、まずはこちらをご覧ください。

Webサイトの運用に関する情報

お問い合わせ

ホームページを成功させたいとお考えの方はお気軽にご相談ください。
ご相談は、下記の中からお好きなものを選んでいただければ大丈夫です。

  • メールで問い合わせる
  • チャットワークで問い合わせる
  • Facebookで問い合わせる
  • Twitterで問い合わせる

LINE@でも相談を受け付けています。
QRコードから友達登録を行って、メッセージを送ってください。

LINE@

最新記事

カテゴリ別記事一覧

月別記事一覧