最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材のまとめ
最近のWebのUIはフラットデザイン・Material Designが着実に進化し、シンプルでコンテンツにフォーカスされたデザインが定着してきました。テキストは読みやすく、写真はより大きく使用されています。レイアウトは縦長型やカード型の人気が高く、デスクトップでもスマホでもスクロールを前提にしたデザインが主流となっています。 最近のWebデザインで採用されているページレイアウトやUIの新常識がチェックできる素材やプレビューを紹介します。 Boring Cards UI Kit PSD、個人・商用利用無料。 Bootstrap 4でも新しいコンポーネントとして注目されているカードを使用したUIキット。黄金比をベースにしたデザインはさまざまなサイズ・カラーで展開することができます。
10歳のこどもから学んだユーザビリティ向上のポイント
2015年9月8日 ユーザビリティ 夏休みの後半、原稿用紙15枚の自由研究に苦しめられていた姪っ子（10歳）を「楽しそうだな〜」と手伝っていました。そんな時「私も久しぶりに自由研究したい！」と思い、ちびっこが家にいることですし、最近のちびっこがWebサイトをどのように利用しているのか研究してみることにしました。という事で今回の記事は自由研究風に進めようと思います！ ↑私が10年以上利用している会計ソフト！ 調べたいこと 認知度の高いWebサイトを、小学生がどのように利用するのかを観察し、こども向けのWebサイトに必要なもの、Webサイトを制作するうえで注意すべき点を調べます。 予想 難しい漢字は読めないので読みとばす イラストやキャラクターなど、可愛いものに興味を示す 明るい色彩のサイトに興味を示す まだ習っていない漢字や難しい表現は読み飛ばし、自分の理解できるもののみにフォーカスしていく
UIの新鮮なアイデアをチェック！デザインやインタラクションの工夫が素晴らしいナビゲーションのまとめ
最近のUIは、気持ちいいアニメーションが多く取り入れられています。アニメーションはある程度予測できながらも、いい意味で少し期待を裏切るくらいがちょうどいいなと思います。 アニメーションを使ったインタラクションやデザインが素晴らしいナビゲーションの実装例をまとめました。各デモは全て、HTML, CSS, JavaScriptなどをオンラインで編集することができます。
カルーセルのUIは売り上げにつながるのか!? カルーセルデザインを考えるときに知っておきたい7つのこと
HOME Contentsquare カルーセルのUIは売り上げにつながるのか!? カルーセルデザインを考えるときに知っておきたい7つのこと 皆さんこんにちは。ギャプライズ鎌田（@kamatec）です。 大きくきれいな画像を横並びに使い、視覚に訴えるサイトデザインを実現できる「カルーセル」。見るからにカッコいいデザインなので、サイトのクオリティを上げるため「カルーセルパネル」を導入したサイトも数多くあるでしょう。 とは言え、この「カルーセルパネル」を使用するか否かという議論がカルーセルが普及していくにつれて盛り上がってきました。ということで、今回はこの「カルーセル」の是非について、Clicktale社のアナリストが調査した結果を報告したいと思います。 (※2020/8/21更新) カルーセルパネルとは？ そもそもカルーセルパネルって何？ ここ数年多くのサイトに導入されているカルーセルパネル
Calltoidea - Light up your imagination
If you like Calltoidea, let's trythe first community for link lovers.
最適なテキストリンクの色は？ | ウェブ力学
青系統の色が使われていることに変わりはありませんが、検索エンジン以上にバラつきが見られます。特に、Yahoo!の場合は、各ジャンルごとのページでも微妙にテキストリンクの色が変わっていました。それぞれのサイトデザインの特徴に合わせて変化させているのだろうと思います。 楽天のようにデフォルト色を使用しているサイトもありましたが、全体からすると少数派のようです。 Q&Aサイトの最大手OKWaveはGoogleと同一でした。また、ユーザビリティといえばビービットさん、ということで調べてみましたが、やや暗めの青を使用していました。ビービットさんのことなので何か意味があるのかもしれません。 クックパッド クックパッドは、日本最大級のレシピ検索のサイトです。ユーザービリティには細心の注意を払っていて、ユーザー一人当たりの平均PVが高いことでも知られています。 そんなクックパッドですが、サイトをのぞいてみ
ユーザーにクリックされやすいボタンデザインの5つのポイント
ユーザーの行動への呼びかけを促す「ダウンロード」や「サインアップ」などのボタンをデザインする際に気をつけたい5つのポイントをLee Munroeから紹介します。 Web Design Trends: Call To Action Buttons 先日とりあげた「ハイパーテキストリンクのスタイル大全」の5. ボタンスタイルで紹介されているものです。 以下は、各ポイントを意訳したものです。 はじめに サインアップやダウンロードなど、ユーザーの行動への呼びかけを促すボタンのデザインはウェブデザインにおいて重要なものです。 ボタンはそのページのゴールの一つであり、その目的のためにそれぞれのページをデザインするといっても過言ではありません。 行動を呼びかけるボタン（Call to Action Button）はユーザーの注意を引く必要があります。以下に、そのボタンのデザインの5つの特長をあげます。
フッターとかの区切り『｜』のサンプル1種
ふと、昔のサンプルを見て、今そんな組み方しないよ。とか思ってしまったので、最近もっぱらコレっていうのを書き書き。 コレに限らず、昔のエントリーを見てると、自分で無いな～使えねー！って突っ込みたくなるエントリーが多いっす・・・うぅ。 念じたら全部最近の書き方になおらないかな。 ・・・ 残念ながらなおらないと思うので、昔のエントリーを見る場合は、ちょっと気を付けたって下さい。 何気に大掛かりな計画は有るけれど、計画がでか過ぎて中々どうにもこうにも。 というかブログ書いてる暇有るなら、「お前アレやれよアレ。」ってお怒りの声が聞こえてきそうなので、アレに専念する為にまた大人しくしてるっぽいです。 最近フッターで区切りが有る場合は、:first-child疑似クラスを使って対応するケースが殆どです。 実際のサンプルも用意しました。 サンプルサイトを見る XHTMLはこんな感じ。 <div id="f
【海外事例に学ぶ】 リッチ化するフッター (ユーザビリティ実践メモ)
これまで当サイトでも、いくつかの記事でフッターについて扱ってきました。最近、海外のサイトを見ていると、フッターについて新しい取り組みが見られます。 今回は、海外サイトの動向をサンプルとし、フッターにおける新たな取り組みのメリットをご紹介します。 Geek Trends: 15 Footers with great usability ( pop upon magazine ) 6 Things To Include for a User Friendly Footer ( UXBooth ) Modern Sitemap and Footer ( WebDesignerWall ) Footers (76 examples) ( Smiley Cat Elements of Design ) 例えばTIGERS （http://www.tigers.org.au）のフッター(下図)では、革
jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法:phpspot開発日誌
Justify elements using jQuery and CSS jQueryとCSSを使ってフォームのinput要素を楽に整列させる方法が紹介されております。 何ができるか？というのは次の図を見て頂くのがはやいでしょう。 ビフォア ↓↓↓↓ アフター これを実現するために、CSSとマークアップによって実現するのが普通ですが、jQueryによってもっとスマートに出来るようですね。 具体的には、次のように、label の中で width がもっとも大きいもののサイズを得て、そのサイズにJavaScriptで調整しちゃうというものです。 $(document).ready(function() { var max = 0; $("label").each(function(){ if ($(this).width() > max) max = $(this).width(); });
素晴らしいロゴをデザインするための45の法則 | CREAMU
ロゴをデザインしたい。 そんなときにおすすめなのが、『45 Rules for Creating a Great Logo Design』。素晴らしいロゴをデザインするための45の法則だ。 以下にご紹介。 3つ以上の色を使わない。 絶対に必要というわけでないものはすべて除外する。 文字はあなたの祖母でも簡単に読めなければならない。 ロゴとはっきり認識できなければならない。 ロゴにユニークな形やレイアウトを取り入れる。 あなたの親や配偶者がデザインについて思うことを徹底的に無視する。 3人以上の人にロゴが魅力的に見えるかを確認する。 有名なロゴの要素を使ってオリジナルだと主張しない。 どんな場合でもイラスト集を使わない。 ロゴは白黒でもかっこよく見えるべき。 逆さにしても認識できること。 リサイズしても認識できること。 ロゴがアイコンやシンボル、テキストを含む場合、それぞれ良さが引き立つよう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSのすごいアイデアが満載！実用的なものからスゴ技までスタイルシートのテクニックのまとめ
新着記事
ウェブデザインのセンスを学ぼう、2012年上半期洗練されたディテールのUIデザインのまとめ
Creative CSS3 Animation Menus
150 Free PSD Buttons For Every Day Use | Flash, Design, Vector, Photoshop, Adobe Tutorials | GraphicMania.net
IDEA * IDEA
IDEA * IDEA
http://www.designwalker.com/2009/04/wireframe-2.html
IDEA * IDEA