HTML5とCSS3の実用的なテクニックが丁寧に丁寧に解説されたウェブ制作に真剣に取り組みたい人にオススメの本 -HTML/CSS デザインの教科書ウェブサイトの制作時によく使用される実践的なテクニックの一つ一つが丁寧に解説された「HTML/CSS デザインの教科書」を紹介します。 最新の知識をおさえつつ、基本を正しく理解し、しっかり身につくオススメの本です。
背景固定で美しいブラーがかかった半透明のパネルだけがスクロールするスタイルシート | コリス
レスポンシブ対応で背景画像は固定表示、美しいブラーがかかった半透明のパネルだけがスクロールするコンテンツを実装するスタイルシートを紹介します。 最低限の要素にしたデモ 実装は、こんな感じになります。 HTML パネルはarticle要素で実装します。中身はテキストでも画像でもフォームでも何でもOK。 <body> <article> <h1>半透明の美しいパネル</h1> <p>洋酒といえば、誰でも最初に思い浮かべるのがウイスキー。いわば洋酒のシンボル的な存在なのだが、英語表記が［一般に〔米〕では Whiskey,〔英〕では Whisky.］であることはあまり知られていない。米英両国では、このスペルの差で自国産と輸入品を区別しているという。わが和製ウイスキーの“Whisky”という英国式表示は、手本にしたスコッチのフォルムに倣ったものであり、それ以上の意味はないようだ。カナ表記にしても、ご
Color Match, HTML color code, match website colors, color scheme
Hypergurl Games Web Design vs. Web Creation Anybody not in the website industry could be forgiven for thinking that web design and web creation are the same things. This blog will enlighten readers on the essential differences between the two aspects of building a website. Exciting articles will focus on how web design focuses on the user experience and how the site looks. Whereas web creation is
HTML5＋CSS3は「メニューの作り方」を覚えるだけ！
HTML5＋CSS3は「メニューの作り方」を覚えるだけ！：にわかデザイン（1）（1/3 ページ） Photoshopなどの画像処理ソフトを使わず、CSSでできる表現の幅が広がっています。にわかデザイナーになれる、簡単Tipsをお伝えします。 Web製作の現場では、予算の都合上Webサイトのデザインをデザイナーに発注できず、エンジニア自身が担当しなければならないことがままあります。昨今は「Twitter Bootstrap」などのCSSフレームワークを使って、そんな状況に対応している方も多いと思います。確かに、Twitter Bootstrapはリッチなデザインや機能を持つパーツがそろっていて、素早くレイアウトを組み上げるには便利です。しかし、そのためには独自の指定方法やお作法をそこそこ知っておかなければならないのも事実です。 であるならば……、CSS自体を覚えてしまうというのも1つの手では
脳に優しいデザインを！「Vertical Rhythm」の基本と実現方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。 どうも近頃はいぬ肌が恋しく、無性にワンコちゃんをなでなですりすりしたくてうずうずしるのですが・・ こういう写真を眺めているだけで心がほわ～っとしてきますよね 久しぶりに記事を書きます。「Vertical Rhythm」と呼ばれているデザイン手法ご存知でしょうか？さり気なく取り入れることで、文章が読みやすくなったり、レイアウトが整ったりすることが期待できるという。 デザインに限った話ではないが、完璧な正解など存在しないと思うので、あくまで一つの考え方として捉えて頂ければと思います。 実例を挙げながら進めて行きますので、「Vertical Rhythm」の考え方とその良さ、便利さをきっと理解してもらえるんじゃないかと思います。 前書き クライアントに「説得力のあるデザイン」を届けよう！ LIGでデザイナーをやってて、よくベテランデザイナーさんにこういう風に言わ
優れたUIデザインを作るために知るべき12のTips | Goodpatch Blog
こんにちは、だいきです。 海外のUIデザインに関する記事「14 Golden Eggs of Good UI Design（直訳: 優れたUIデザインの14の金の卵）」で書かれていたUIデザインに関するTipsがとても勉強になったので、その中からいくつか抜粋したものを翻訳しました！ （この記事はJohannes Thönesというブログの14 Golden Eggs of Good UI Designという記事の抜粋翻訳ブログです。） 1, 先進的な技術を使う理由 photo credit: Carlos Varela via photopin cc HTML5が新しい技術だからといって、それを使う必要性はありません。 新しい技術を使うことが目的になってはいけません。 ユーザーとユーザーが期待している事を考えてください。 どんなUX（ユーザーエクスペリエンス）をユーザーに与えたいですか？
UIデザインの参考になるサイトまとめ | ナナメウエblog
毎日仕事中と寝る前にチェックしてるUIの参考になるサイトをまとめました。 もう、見ているだけで涎が出ますね。 Dribbble – Following もはや知らない人はいないでしょう。世界中からハイレベルなデザインが集まるこのサイト。3時間に1回は見てます。 JAYPEG 日本版Dribbbleというとわかりやすいかもしれません。昨年末にできたばかりですが、すごく好きです。投稿しまくってます。自分で作ったUIを素材として公開してたりします。1時間に1回は見てます。 Inspired UI – mobile ui patterns カテゴリーが細かく分かれていて非常に嬉しいです。数も豊富で見やすいサイトです。 iOS Mobile Patterns カテゴリーがわかりやすく、マウスが拡大鏡になるので細部まで見ることができます。 iPad and iPhone Design Ins
ダウンロードしておきたいフリーのデザインフォントのまとめ -2013年1月
Deco Neue 個人・商用利用無料。 このフォントずっとダウンロードできなかったのですが、解禁されました！ 1年近くチェックしてた気がします、、、
UIの改悪がUXを改善させる場合 - A Successful Failure
2013年01月20日 UIの改悪がUXを改善させる場合 Tweet Good UI≠Good UX UIとUXについてはその理解について多くの議論がなされてきた。たとえば、Googleの及川氏は「写真が語るUXとUIの違い」というエントリにおいてコーンフレークの例を元にUIとUXについて説明したが、その後、ERATOの渡邊氏が「1分でわかるUIとUXをわかりやすく説明する写真とお話」というエントリにおいて、ATMを例によりわかりやすい説明を挙げている（次の写真は当該エントリからの引用）。 この例ではたとえUIが素晴らしくても、そのATMは時間がかかるため、長い待ち時間ができ、結果としてUXが損なわれる場合を示している。 しかしながら、実際にはATMの劣悪なUIが悪いUXの原因となっている可能性があり、本当にこのATMのUIは素晴らしいのかという疑問が残る。つまり「Good UI ≠ Go
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブデザインのセンスを磨こう！ 2013年洗練されたディテールのUIデザインのまとめ