画像とテキストのジグザグ型レイアウトは、流し読みの効率を下げる
装飾用の画像は、互い違いになったリストのレイアウトで使われていると、ページを流し読みするユーザーがつまずく原因になることが、アイトラッキング調査でわかった。一方、テキストや画像が縦に整列しているページでは、ユーザーは効率的に流し読みをしていた。 Zigzag Image–Text Layouts Make Scanning Less Efficient by Kim Flaherty on November 26, 2017 日本語版2018年6月27日公開 画像は、大きな写真であれサムネイルであれ、現在のWebデザインには欠かせないものだ。特に、トップページや「こういう仕組みです」（How it works）ページのようなストーリーを伝えるページで、企業が複雑なトピックについて書いたり、製品の説明をするときには、関連する画像を付けた説明的なテキストのかたまりがあり、次の列も同じようなテキ
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
HTMLとCSSのコピペですぐに実装できる見出しデザイン14選
WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン
【ブックマーク必須】デザインに関するギャラリーサイトのジャンル別45まとめ
日頃デザインをしていると、デザインの傾向が似てきてなかなか新しいアイデアが浮かばないといった経験はないでしょうか。 そんなときはデザインの引き出しが詰まったギャラリーサイトのチェックをしてみることをオススメします。 また、常日頃からギャラリーサイトに目を通しておけば、新しいアイデアの創出に繋がるようなトレンドの理解にもなるはず。 今回は、デザインする際にチェックしておきたいギャラリーサイトをジャンル別にピックアップしてご紹介します。一般的なホームページからバナー、パーツに特化したものまで、ぜひ気になるものはブックマークに追加してみてはいかがでしょうか。 Webデザイン 1.straightline bookmark http://bm.straightline.jp/ 7000以上の幅広いサイトを収集した、沢山の数をチェックできるギャラリーサイトです。 サムネイルサイズの変更、ブックマーク
お客さんをバカにするな。 - 笑顔を創りたいWebディレクターの日常
こんな記事を見つけて。 curazy.com まーたこんな話かー、と思って。 前にこんなことも自分のブログで書いたけど。 toksato.hatenablog.com なんだろうなこのなんか腑に落ちない感じ。 そんなわけで、うぇぶぎょうかいのむめいディレクターのおじかんです。 御用聞きでもいいじゃんとか、知らないんだったらわかるようにすればいいじゃん的な話を長々書くのは↑でやったので、まあさらっと。まあさらっと（謎） とりあえずつくってみては家をとりあえずと同じ、みたいなツイートがあったけど、まあ、そんなわけないよね。せめて言うならば「とりあえず100ページぐらいのコーポレートサイトさくっとつくってみて」ぐらいならわかるけど、デザイン一枚と家が同じってのはさすがにねぇ。もちろん例えだってのはわかるけど、いくらなんでもそれは規模が違いすぎるので、それをクライアントがわかれってのは違うと思う。
Bootstrapよりキレイ！Googleのマテリアルデザインキット - ku-sukeのブログ
Bootstrapの見慣れた感というか、モック感から脱却しようとFoundationとかに手を出しかけてたのですが、Googleがだしてきたマテリアルデザインキットがすごく良かったので紹介します。 たとえば管理画面風のデザインはこれ ほかにもBootstrap風の上部メニューのデザイン（Android）もあったり コンポーネントと呼ばれる部品も充実しています。これ見るだけで色々できそうな気がしますね！ Blog風など幾つか提供されています。いまとあるサイドプロジェクトで簡易的な管理画面をつくろうとしてたのですが、早速活用していい感じに仕上げることが出来ました。 ダウンロードすると全テンプレートが含まれているので、コピペで組み合わせるだけでも結構いい感じに出来ます。Bootstrapに飽きてきたら、ぜひ使ってみてください。 www.getmdl.io
100種類以上のマウスホバーエフェクトを手軽に使えるCSSライブラリ「Hover.css」が便利。WordPressでも簡単利用。
Hover.cssとは Hover.cssとは、手軽にホバーエフェクトを利用できるようになるCSSライブラリです。 すべて、CSSで動作するので、AタグなどのHTML要素のクラス指定部分にクラス名を記述するだけで、100種類以上の様々なマウスホバーエフェクトを手軽に使えるようになります。 利用するときは、こんなタグで利用できます。 Font Awesomeのアイコンフォントを利用したことがある方なら、Font Awesomeを利用するように、クラスを指定するだけで使うことができるので、簡単に利用できます。 Hover.cssの主な利用手順 Hover.cssを利用するのに必要な主な手順は、以下の3手順です。 Hover.cssのダウンロード＆設置 Hover.cssを呼び出す Hover.css用のタグを記入する 利用するファイルも、hover.css（縮小版はhover-min.css）
画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログ
2014.11.19 / UI 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール Tomohiro Suzuki クライアントやディレクターから渡された画面遷移図を元にワイヤーフレームを作ってみると、後から足りない画面が次々に発見された、または画面内の情報がどこに繋がるのか分からないといった経験はありませんか？ この画面遷移図というものは本来は制作範囲の全体像と構造を明確にし、必要な画面というものを洗い出したりするものです。通常のWebサイトであれば、従来のような画面遷移図でも問題ないかもしれませんが、多くのインタラクションが発生するサービスの設計では複雑化しやすく、何度も情報を行き来して確認することになるため時間がかかります。 原因のひとつとして、画面遷移図では画面名のみを記載して繋げていくことになるため、必要な情報が不足していることが挙げられます。その結果、本来で
UIデザインにおけるナビゲーションのデザインパターンまとめ | ベイジの社長ブログ
前回エントリーでは「UIデザイナーが理解しておくべき11種類のナビゲーションと特徴」として、ナビゲーションの種類を、機能的な側面から分類し、ご紹介しました。 続編となる今回は、ナビゲーションをデザイン的な側面からとらえ、形状、ふるまい（動き）、階層というの3種類の表現軸に分けて、ナビゲーションでよく使われているデザインというものを整理してみました。 形状のデザイン UIにおけるナビゲーション要素が、主にどのような形状でデザインされているか、というパターンをここではご紹介しています。 メニューバー メニューをボタン化し、バー状にまとめたデザインです。PCサイトのグローバルナビゲーションやローカルナビゲーションなどによく採用されます。 一覧性に優れ、一目でナビゲーション要素と分かるため、ユーザビリティに優れます。一方、ある程度の表示スペースを必要とするため、スマートフォンではあまり用いられない
制作だけでなく、ちゃんとビジネスに貢献したいWebディレクター - インテリジェントネット株式会社の求人 - Wantedly
■経歴 1998年3月：筑波大学第二学群日本語・日本文化学類学士修了 2000年3月：同校研究生修了 2000年6月：インテリジェントネット株式会社 ボードメンバー 2003年7月：WebSig24/7代表就任（現任） 2004年3月：インテリジェントネット株式会社 取締役兼COO就任 2013年11月：インテリジェントネット株式会社 代表取締役社長就任（現任） ■社外活動 WebSig24/7代表 WebSig24/7(ウェブシグ・トゥウェンティーフォー・セブン)は、Webサイトに関連するマーケットの健全な発展を促し、人々の生活を豊かにすることを目的とした任意団体... ◆ やっていること◆ 私たちは、さまざまな大手クライアントのビジネス課題をWebの力で解決するマーケティングと開発の支援をしています。 ------------------------------------ ◆ 私たち
説得力がグンと上がる！UIデザインの心理学
オライリーから出ている「ユーザーインターフェースデザインの心理学」から使えそうなものを実例を踏まえピックアップ！これでUIデザイン説明の説得力をあげよう！ 情報は一度にすべて見せるのではなく、そのとき必要なものを段階的に開示させた方がよい。 デザイナーが犯しがちな失敗は一度に大量の情報をユーザーに与えてしまうことです。 情報は一度に大量に与えるのではなく、その時点で必要としている情報だけを与えるほうが様々なニーズに対応することができます。 ユーザーの中には大まかな説明でよい人もいれば、詳細を知りたがっている人もいます。 つまりどういう事？ 情報は一度に見せるのではなく段階的に見せる 重要なのはクリック回数ではない。クリックのたびに必要な情報が手に入るのであればユーザーは喜んでクリックする 誰がいつ何を必要としているかを理解する。各段階で何を必要としているか的確に把握していないと、この手法は
ズケズケズバズバ言えるWebディレクターになるたった一つの方法。 | 笑顔を創りたいＷｅｂ屋の日常
笑顔を創りたいＷｅｂ屋の日常 Ｗｅｂ業界からひょんなことで専門学校の先生に。そしてまたＷｅｂ現場に戻ったＷｅｄディレクターのブログ。情報デザインやＷｅｂの勉強をしています。 ええ、はい。タイトルは釣りです。 いや、まあ・・・釣りではないですけどｗ ただまぁーーーー世の中には分解すればありとあらゆるたくさんの方法があるわけでそれを一つにまとめてる時点で、正直言って身も蓋もない意見です。「それを言っちゃあ・・・」っていう話だと思いますｗ なので、そういうのが読みたくないと思った方はそっとPCかブラウザを閉じていただくとして・・・。でも、僕は嘘を言うつもりもなく本当にそう思ってることです。 っていうかおまえ、いま書くならどう考えても元切込隊長とイケダハヤトさんの話だろって自分で思うわけですけど、基本的に僕は旬を逃す人なので、今回もちゃんと旬を逃すのです（謎） というわけでうぇぶぎょうかいのむめい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://css.studiomohawk.com/in-browser-design/2011/04/16/designing_in_browser/
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Flipsblog.jp
UX/UIデザイン - OHAKO | 企画～実装をご支援