動くインフォグラフィックでサイトを楽しくするアイデア (1/3)
デザインとテクノロジーをもとにブランディングやWebサイト制作などを手がける、米国のエージェントのポートフォリオサイト。 気持ちよく回転する円グラフ シンプルなフラットデザインを採用した「Knormal」のポートフォリオサイト。このサイトでは、3枚の画像からなる円グラフを重ね合わせ、CSSアニメーションによって回転させている。インフォグラフィックとしてはごく単純なものだが、スムーズに気持ちよく動くアニメーションと独特の配色がサイトの個性を表していて、おもしろさがある。 今回は、Knormalのインフォグラフィックをヒントに、グラフの基本的な構造から、CSS3を使った動かし方、JavaScriptやSVGと組み合わせた発展的なグラフの作り方までを解説する。 STEP 1：グラフの構造を考える 最初に、円グラフの構造から考えてみよう。立体的に見える円グラフは、3つのレイヤーからなる。色や形状の
CSS3アニメーションの基本
CSS3アニメーションの基本：脱エンジニアっぽさ！ クライアントの笑顔を引き出すCSS3アニメーション（1）（1/3 ページ） エンジニアの立場でデザインまで積み上げていくのは、なにかと難しいもの。脱エンジニアっぽさを演出し、クライアントの笑顔を引き出す、CSS3アニメーションを紹介する。 クライアントさんからのさまざまな難しい要求を解決し、ようやく納品にこぎ着けたのに、クライアントさんから出た言葉は「ちょっとやぼったいね……」というつぶやき。Webエンジニアの方からよく耳にする嘆きの声です。エンジニアの立場でデザインまで積み上げていくのは、やはり難しいですよね。 しかし、いわゆる外観としてのデザインの他に、クライアントさんを「おっ！」と思わせる便利な手法が1つあります。それは「アニメーション」です。 Webサイトでの小気味良いアニメーションは、そのユーザー体験を豊かなものにしてくれます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
