10月17日に配信が始まった「Windows 10 Fall Creators Update」に導入された、マイクロソフトの新しいデザイン言語「Fluent Design System(フルーエントデザインシステム)」。コンセプトと実装へ反映する方法を解説します。 独自のデザイン言語やGoogleのMaterial Design(マテリアルデザイン)など既存の言語を実装して、統一のとれた堅牢なユー…

Copyright © 2017, Giannis Konstantinidis All Rights Reserved.

Giannis Konstantinidis

Giannis Konstantinidis

無料のオープンソーステクノロジーに情熱を燃やすフリーランスのフロントエンドWeb開発者です。Fedora ProjectやMozillaなどいくつかのコミュニティに参加しています。詳しくは彼のWebサイト、konstantinidis.meをチェック。

Loading...

FlashライクなWebアニメーションを実現するJavaScriptライブラリー「GreenSock」。イラストからテキストまで、思い通りのアニメーションを作成できる便利なプラグインを紹介します。 GreenSockのプラグインをいくつか紹介します。 紹介するプラグイン ベジェ曲線パスに沿ってプロパティをアニメーションする「BezierPlugin」 画面上で要素をドラッグできるGSAPの「Dra…

Copyright © 2017, Maria Antonietta Perna All Rights Reserved.

Maria Antonietta Perna

Maria Antonietta Perna

SitePointのHTML/CSSチャンネルの共同編集者・フロントエンドWeb開発者です。CSSでいろんな手法を試すことを楽しんでいます。また、フロントエンドのプログラミング指導方法にも興味を持っています。コーディングやWeb関連の執筆をしていないときは、哲学書や散歩、おいしいものを楽しんでいます。

Loading...

レトロなデザインとストーリーでユーザーを魅了する「ノスタルジア・マーケティング」。ユーザー心理を突いてコンバージョンを高め、エンゲージメントを深める方法を説明します。 「古き良き日々」を思い出させるノスタルジックな表現をよく目にします。旧作品のリメイクや、スパイダーマンやゴーストバスターズなどのシリーズが続々と再開したり、ブルーノ・マーズが、異様なほどクール・アンド・ザ・ギャングのヒット曲に似た曲…

Copyright © 2017, Suzanne Scacca All Rights Reserved.

Suzanne Scacca

Suzanne Scacca

フリーランスの記者です。Inc.com、Search Engine Journal、Elegant Themes、そのほかマーケティングや技術のブログに寄稿しています。技術、マーケティング、小規模ビジネスのベストプラクティスの考察をしています。Webサイト

Loading...

UXのベンチマークツール、プロトタイピングツール、VRを使ってデザインするツールなど、最新のデザインツールやリソースを紹介します。 最新のデザインツール、リソース、アプリ、参考書、トレンドなどを追いかけるだけでも大変なのに、そこから役に立っておもしろいものを探すのは、さらに大変です。そこで誰が見ても優れているデザインツールとリソースを紹介するProduct Hunt collectionを始めまし…

Copyright © 2017, Alex Walker All Rights Reserved.

Alex Walker

Alex Walker

sitepoint.comのデザイン・フロントエンド開発者で、SitepointのデザインとUX編集も担当しています。

Loading...

JavaScriptでFlashライクなWebアニメーションを作れる「GreenSock」。タイムラインを使った本格的なアニメーションの作り方、思い通りに動かすコツを解説します。 GreenSockのTimelineMaxを紹介し、以下の項目を説明します。 タイムラインの必要性 タイムラインに複数のトゥイーンを含める方法 複数のタイムラインを関数にまとめ、マスタータイムラインにネストすることで柔軟…

Copyright © 2017, Maria Antonietta Perna All Rights Reserved.

 Maria Antonietta Perna

Maria Antonietta Perna

SitePointのHTML/CSSチャンネルの共同編集者・フロントエンドWeb開発者です。CSSでいろんな手法を試すことを楽しんでいます。また、フロントエンドのプログラミング指導方法にも興味を持っています。コーディングやWeb関連の執筆をしていないときは、哲学書や散歩、おいしいものを楽しんでいます。

Loading...

古いブラウザーのサポートが必要ないなら、もうjQueryを使わなくてもいいかもしれません。 DOM操作が必要なとき、真っ先にjQueryを使うことを考えます。しかし、素のJavaScriptのDOM APIだけでも、実はかなりのことができるのです。また、IE10以下のサポートが終了したため、今後は素のJavaScriptによるDOM操作を心配なく使えます。 記事では、素のJavaScriptで一般…

Copyright © 2017, Sebastian Seitz All Rights Reserved.

Sebastian Seitz

Sebastian Seitz

哲学とコンピューターサイエンスを専攻しました。現在はクラックメタルバンドでベースを演奏しながらWeb開発者として働いています。

Loading...

スマホアプリやスマホサイトではおなじみになった「マイクロインタラクション」。なぜUIに動きをつける必要があるのでしょうか? どんな意味があるのでしょうか。 今週、私はカレンダー機能用のマイクロインタラクションをデザインしていました。「ビジュアルデザイン」はだいぶ前に完成したのですが、モーションをコードに埋め込んで正しく動作させるのは、ビジュアルデザインよりも大変でした。 浮き上がる、折りたたむとい…

Copyright © 2017, Alex Walker All Rights Reserved.

Alex Walker

Alex Walker

sitepoint.comのデザイン・フロントエンド開発者をマネジメントしています。またSitepointのデザインとUX編集も担当しています。

Loading...

ここ数年のデザイントレンドになっている、背景に動画やアニメーションを使ったWebサイト。海外の優れたサイトから、デザインのヒントを探ります。 Jakob Nielsonが1999年に発表した『Who Commits The "Top Ten Mistakes" of Web Design?(Webデザインでありがちな10個の間違いをしているのはどのような人か)』というリストをいま振り返ってみると、…

Copyright © 2016, Stephen Moyers All Rights Reserved.

Stephen Moyers

Stephen Moyers

オンラインマーケター、デザイナーで、テクノロジーに詳しいブロガーです。LAに拠点を置く最新型クリエイティブWebデザインエージェンシー、SPINX Digital Agencyとパートナー関係にあります。Webデザインや開発、UX、オンラインマーケティングなどについて書くのが好きです。原稿を書くことのほかには旅行や写真撮影を趣味としています。

Loading...

Web開発者が初めてゲームを作るときに戸惑うのが、「ゲームループ」という考え方。普通のWebアプリを作るのとどう違うのか、シンプルなゲームのプログラム構造に触れてみましょう。 「ゲームループ」は、時間をかけて状態を変化させることでアニメーションやゲームをレンダリングするために使う技術につけられた名前です。本来は、ユーザー入力を受け取り、経過時間の状態を更新してからフレームをできるだけ多くの回数描く…

Copyright © 2016, Mark Brown All Rights Reserved.

Mark Brown

Mark Brown

オーストラリア・メルボルン在住のフロントエンドのWeb開発者です。有能な人達に囲まれて自分自身を向上させ、Web設計の仕事に喜びを感じています。特にビジュアルプログラミングに興味があり、SVGとCanvasを使ったプログラミングに夢中です。

Loading...