[B! webデザイン][WEBデザイン] tacshissのブックマーク

プログラマのためのUXチートシート — ありえるえりあ

はじめに http://msdn.microsoft.com/ja-jp/library/aa511258.aspx の「Windows ユーザーエクスペリエンスガイドライン」「ガイドライン」主に「コントロール」の抜粋です。以下の基準で抜粋しました Web UIに応用可能実用的かつ具体的自明ではないプライマリUIを目立たせるプライマリ UI 要素を強調するには、以下に従います。 - プライマリ UI 要素は、視線の通り道に配置します。 - タスクを開始する UI 要素は、左上隅または中央上に配置します。 - コミットボタンは、右下隅に配置します。 - 残りのプライマリ UI は、中央に配置します。 - コマンドボタン、コマンドリンク、アイコンなど、注意を引き付けるコントロールを使用します。 - 大きなテキストや太字のテキストなどの目立つテキストを使用します。ユ

tacshiss 2012/02/28

リンク

[JS]さまざまな動きが楽しくてかわいい、サークル状のナビゲーションを実装するスクリプト -Circle Menu

デモページ: Timing, Reversed 上のデモでの逆順です。 Circle Menuの使い方 HTML 各アイテムはリスト要素です。 <ul> <li><a href="#">+</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> 外部ファイル「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="http://ajax.google apis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jQuery.circl

tacshiss 2012/01/24

リンク

ウェブデザインのセンスを磨こう、素敵なUIデザインのまとめ

ウェブデザインのセンスを磨く方法の一つに、他人の作ったものを数多く見ることがあります。 2011年が終わる前に、チェックしておきたいUIデザインをdribbleから紹介します。

tacshiss 2011/11/22

webデザイン

リンク

javascriptで作った、フルフラッシュのようなサイト教えてください。

Asiance _Your Digital Ag... / Tatchies / jitto他...全21件

tacshiss 2011/11/19

リンク

CSSのみでテキストにグラデーションやリフレクトをかけるテクニック（ちょっと更新） - くらげだらけ

前回はiOS5のMobile Safariから使えるようになったHTML5・CSSについて前編と後編に分けてご紹介しましたが、そのなかで説明していない小さなテクニックについて少し紹介したいと思います。今回はCSSでテキストにグラデーションをかけるテクニックについてです。前回のWeb App Demoではフッタータブに特殊なWebFontを使ってアイコンを表示させるようにしていましたが、タブがActiveのときに色が変わってエフェクトがかかるようになっています。このエフェクト効果はCSSでテキストにグラデーションをかけるテクニックをつかってやっています。通常、CSSでテキストカラー（colorプロパティ）にグラデーションを指定することはできませんが「:after」擬似クラスや「mask-image」プロパティを組み合わせて使うことでグラデーションのような表現をすることができます。具体

tacshiss 2011/11/14

-webkit-mask-imageと擬似要素のcontent:attr(title);

リンク

スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog

最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。すべてのデモ（chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください） download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3>  <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT

tacshiss 2011/08/19

webデザイン

リンク

制作中の面倒を解決するFireworksの拡張機能のまとめ（2011年7月版） | Webデザインのタネ

一定期間更新がないため広告を表示しています

tacshiss 2011/07/02

webデザイン

リンク

スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (1/3)

スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？　実例で解説する。ウィンドウサイズを基準にデザインを調整レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい

tacshiss 2011/06/18

リンク

異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」:phpspot開発日誌

異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 2011年04月07日- Google image search style image alignment with jQuery Atteeeeention plugin | DreamersLab 異なる幅・高さの画像も超綺麗に並べられるjQueryプラグイン「Atteeeeention plugin」。 <img>でただ単に画像を並べると、幅、高さの違いから、ページがごちゃごちゃしてしまいますが、このプラグインを使うことでGoogle の画像検索のように綺麗にピッチリ並べられます。普通に並べるとちょっと残念なことに。空白ができちゃいます。プラグインを使うことで、あら綺麗。となります。 Firefox は 2以上、IEは6以上ということで殆どのブラウザに対応。まず、必要な

tacshiss 2011/04/07

リンク

枠線付きの吹き出し

ミニブログの隆盛以降ウェブ上でよく見かける吹き出しをCSSで作るお話。単色のものはかなり前に書いた。今回はそれに枠線をつけてみよう！　みよう！　みよう！ Demo: Bordered Speech Bubble 枠線は単なるsolidなborderで少し角を丸めただけ。尻尾を付ける :before擬似要素を使う。デモの3番目のサンプルのように、まず枠線と同じ色で三角形を作る。三角形は以前のエントリで書いた手法と同じで、左右のborderをtransparentにすることによって作る。 .speech-bubble:before { border-top-width: 16px; border-right-width: 16px; border-bottom-width: 0; border-left-width: 16px; border-color: #369 transparent;

tacshiss 2011/02/24

リンク

Fluid 960 Grid System

Fluid 960 Grid System If you are looking for the Fluid 960 Grid System mentioned long ago on Smashing Magazine, I have moved it to the Markup Library. If you are looking for the Fluid 960 Grid System mentioned long ago on Smashing Magazine, I have moved it to the Markup Library. Initially released as open source on GitHub Jan 29, 2009. Markup LibraryDesign ProcessDesign is based on the inspiration

tacshiss 2011/01/19

リンク

購買意欲をコントロールするサービス・商品の価格一覧表を作成する7つのテクニック

ウェブサービスの価格一覧表をサンプルにし、ユーザーの購買意欲をコントロールする価格一覧表を作成するテクニックを紹介します。価格の一覧表を見るユーザーの一番の目的は、価格を知ることです。しかしながら、価格を強調しすぎて、お金を使うということを意識させすぎないでください。苦労して手に入れたお金を使っているように感じると、ユーザーはより使わないように思ってしまいます。価格のデザインはソフトにし、それ自体の特徴やベネフィットにフォーカスをあてるようにします。ユーザーがどの商品を選択するか決めている時に、あなたはその決め手として価格にフォーカスを合わせることを望んでいますか？　それとも特徴やベネフィットにフォーカスを合わせてほしいですか？もし、ユーザーが価格にフォーカスを合わせるのであれば、それは最も安いものに決めるでしょう。しかし、特徴やベネフィットにフォーカスを合わせるのであれば、ユーザ

tacshiss 2010/10/22

リンク

レイアウト作りを簡単にしてくれるCSSグリッドシステム

CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし

tacshiss 2010/10/19

リンク

見出しデザイン.com -Webデザインの“見出し”を集めたサイト-

TOP デザイン一覧グラデーションテキストのみテキスト非画像上線下線丸四角囲み線斜線未分類点線角丸はてなブックマークツイートするシェアする他のギャラリーファビコンギャラリーフッターデザインウェブコレクションこのサイトについていろんなWEBサイトの見出し部分を集めました。デザインの参考に。掲載サイトがリニューアルした場合はご紹介の見出しが使用されていない場合があります。連絡先：manage.hp+midashi@gmail.com copyright © midashi-design.com All Rights Reserved.

tacshiss 2010/09/01

webデザイン

リンク

見えてきたECサイトの人気レイアウト

ECサイトのレイアウトは、ユーザーに情報を的確に届ける上で重要な役割を果たす。サポタントの調査結果から、ECサイトでトレンドになっている検索窓の設置場所やサイト幅のピクセル数が分かった。 Web・モバイル業界の人材事業を手掛けるサポタントは7月30日、EC（電子商取引）サイトのレイアウトのトレンドに関する調査結果を発表した。楽天市場（100サイト）、Yahoo!ショッピング（50サイト）に出展しているECサイトおよび企業が独自に運営するECサイト（100サイト）を7月に調査した。 70％がページ上部に「検索窓」を設置 Webページの上部に検索窓を設置しているECサイトは全体の70％だった。増加する商品点数に対し、検索性を向上させる目的で検索窓を設置するECサイトが増えているという。