フラットデザインやミニマルデザインといった「Webデザインのシンプル化」が進む中、アクセントとなる「ちょっとした動き」を取り入れるWebサイトが増えています。本連載では、ブログ「<a href="http://zxcvbnmnbvcxz.com/">Stronghold</a>」のメンバーが、いま注目のWebサイトを毎回1つピックアップ。特徴的なインタラクション表現を紹介するとともに、CSS3やjQueryを使って実装する方法を解説します。
![先端サイトに学ぶCSS3/jQueryアニメーションデザイン](https://cdn-ak-scissors.b.st-hatena.com/image/square/03944603b19a64b59f5aec387e0bd61a741748bf/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2014%2F05%2F12%2F1589415%2Fl%2F813dc89de62d5c55.gif)
box-shadowで表現する、「セミフラット」なズルいデザインテクニック:ズルいデザイン(3)(1/2 ページ) 世の中、フラットデザイン流行りですが…… iOS 7がフラットデザインを採用したのを皮切りに、Webデザインのトレンドがフラットデザイン一色になってきましたが、立体感を完全に排した色面と空間、シンプルな描画の組み合わせだけのデザイン表現は、ある種ごまかしが効かず、また適切な利用方法を喚起させるようなUIも表現がなかなか難しいものです。 例えば、「ボタンは押せるもの」であると表現するための「押したくなる感じ」を喚起させる立体感は、ユーザビリティ面でもまだまだ有効です。今回は、流行のフラットデザインの中でも違和感なく使えて、また適切なアフォーダンスの表現が可能になる、「やりすぎていない立体感」を目指した、box-shadowを活用した各種ボックス表現の作り方を紹介します。 NGな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く