最近のWebサイトで使われてる、UI要素をデザインするテクニックのまとめ -Little UI Details by Steve Schogerぱっと見ただけではなかなか気がつかないような、ディテールにこだわった素晴らしいデザインのアイデアとテクニックを使ったUI要素を紹介します。 最近のWebサイトで見かけるUI要素がたくさんあり、すぐに次のプロジェクトに役立つと思います。
ウェブサイト制作に欠かせない、アニメーション人気テクニック4つまとめ
機能的で楽しいアニメーションは、現代のウェブデザインに欠かせない重要な要素のひとつです。論理的に考えられたアニメーションを活用することで、ウェブサイトに大きな違いを生み出します。アニメーションはステータスを伝えたり、注意を引くことはもちろん、ユーザーの行った行動の結果をうまく表現できます。 今回は、より快適なウェブサイト体験を実現するために加えたい、アニメーションの制作テクニックをサンプル例と一緒に詳しく見ていきましょう。 進行状況（英: Progression） ローディング・アニメーション ウェブデザインに使われるアニメーションでもっとも一般的なもので、ページの読み込みに関係しています。ローディング・アニメーションは、コンテンツを読み込むまでの待ち時間をユーガーが短く感じられるように工夫されています。 シンプルな動きがローディング・アニメーションにとって最適で、音や余計なエフェクトなど
UIデザインの引き出しを増やしたいときや悩んだときに参考になるデザインギャラリー 20 - NxWorld
webサイトやアプリなどのUIデザインに悩んだときに参考になるデザインギャラリーを全20サイト紹介します。 よくあるコンポーネントのデザインや配置の仕方、カラーの組み合わせ方を眺めるだけでなく、ギャラリーによってはクールなものからユニークなものまである様々なアニメーションをまとめているところもあるので、デザイン以外の部分でも参考になるギャラリーもいくつかあります。 また、悩んだ・困ったときに見るだけでなく、お気に入りのギャラリーがあればブックマークやフィード登録などして普段から空いた時間に目を通すことでデザインの引き出しも増やせますね。 Calltoidea 細かいコンポーネントからページ全体のレベルまで様々なデザインがまとめられています。 カテゴリーを表すアイコンもわかりやすく参考デザインのキャプチャも大きくて見やすいので、個人的によく見るギャラリーサイトのひとつです。 Collect
PCサイトのUIデザインにおける12のトレンド | ベイジの社長ブログ
スマートフォンの普及で、PCで閲覧するWebサイト（以下、PCサイト）に対する注目度は下がっています。しかし、BtoBのデジタルマーケティングにおいては、PCサイトが今後も戦略の中心になるでしょうし、BtoCにおいても、PCサイトが不可欠な領域もまだまだ多いです。 ハードウェア的に大きな変化のないPC向けのWebデザインというと、ノウハウは固定化されている印象もありますが、実際には時代の流れを受け、今も変化を続けています。特に以下のような環境変化が、PCサイトのUIデザインにも大きな影響を与えています。 表示デバイスの多用化 スマートフォンアプリの一般化 タッチスクリーンの普及 トレンドに合わせれば成功、というではありませんが、その根底に流れているユーザ動向の変化については、十分に理解しておく必要はあるでしょう。そこでこのエントリーでは、PCサイトのUIデザインにおける最新動向を、その背景
ポータルサイトのデザインリニューアル案件で気をつけたこと＆使える心理学 - Design Color
色を使いすぎない 以前に書いた「ポータルサイトのデザインをする時に意識したこと5つ」という記事でも触れましたが、今回も特に気をつけました。 ポータルサイトは一画面に表示される情報が多いです。文字はもちろん、画像の量が多くなります。サイトによってはバナー広告もあるので、それらの色に加えて、サイト自体の色もカラフルだと、目が疲れてしまいます。 そのため、色数を極力おさえることでサムネイル画像やタイトルに注目が集まるよう心がけました。そうすることで、ユーザーは情報を探しやすくなり、記事を読む事に集中できます。 逆に、色がゴチャゴチャしてどこを見たらいいのかわからない状態になると、ユーザーの離脱を招くことにもなるため注意が必要です。 選択肢は4つ程度にとどめる 今回のリニューアルにあたり、ポータルサイト内の選択肢を極力4つ程度にとどめる工夫をしました。その理由についてはふたつの心理学が関係していま
ウェブサイトやブログによくあるリストデザインが流行のグリッドデザインよりも有効なわけ
「ウェブの未来を担う次のUIデザインは『カード』にあり」と言われるなど、ウェブサイトを格子状にレイアウトしたグリッドデザインは人気で、多くのアプリやウェブサイトで採用されていますが、実際にグリッドデザインと以前からあるリストデザインの2種類をテストしてみたところ、「リストデザインの方が明らかに見やすく、ユーザーの反応がいい」という結論が出ました。 List Beats Grid: Linear Feeds Perform Two to Three Times Better Than Grids http://blog.getprismatic.com/list-beats-grid-linear-feeds-perform-two-to-three-times-better-than-grids-2/ グリッドデザインとリストデザインのどちらが本当に効果的なのか？ということを調査したのはソ
The ustwo™ Pixel Perfect Precision Handbook 2 日本語版
『Pixel Perfect Precision™ Handbook 2』（以下PPP™）は、ウェブサイトなどのデジタル環境用のデザインをする上での基本原則と、実践ですぐに使える具体的なPhotoshopのテクニックが収録されているドキュメントです。その名の通り、パーフェクトな精度のピクセルでデザインをするためのノウハウが、わかりやすいビジュアルと簡潔な文章でまとまっています。 元々PPP™は、グローバルに拠点を置くデジタルデザインスタジオustwo™ のGyppsy氏が制作したドキュメントです。iBooks版とPDF版のPPP™ドキュメントに加え、スクリプトやPhotoshopパターン集を付録の「エクストラ」として、ustwo™ ウェブサイトにて無償で配布しています。 PPP™は、デジタルデザインを学びたい人に、デザインの基礎知識と概念的な全体像を提供できるドキュメントであると同時に、既
無料で商用利用も可能なフラットデザインUIキット「Flat Rounded Square UI Kit」
iOS 7へのアップグレードに合わせてさまざまなアプリがインターフェースや機能の変更を行っていますが、これからウェブサイトやアプリをフラットデザインにしよう、という時に便利なUIキットが「Flat Rounded Square UI Kit」です。ブログのデザインや各種ボタン・アイコン・グラフ・テキストボックスなどが統一感のある落ち着いたデザインで作られており、ファイルはPSD形式、JPG形式、ACO形式の3種類、ライセンス・フリーなので商用・非商用を問わず自由に使用することができます。 Flat Rounded Square UI Kit http://www.webappers.com/flat-ui-kit/ まずはウェブサイトやソフトウェアなどで使用するナビゲーション・ボタンいろいろ。紺色を基調としており、効果的に赤や水色が使用されています。 ノーマルのボタンはバリエーションのある
フラットなデザインを理解する上で知っておきたい5つのポイント -Principles of Flat Design
フラットなデザインは、決して単純なデザインと同じ意味ではありません。もちろんシンプルにデザインして答えがでるのであれば、それにこしたことはありません。 フラットなデザインのUI素材を数多くリリースしているdesignmodoから、フラットなデザインとは何かを理解する上で重要となる5つの特徴を紹介します。 フラットにあまり心を動かされなかったのですが、ぐらっときました。 Into the Arctic フラットなデザインはその名の通り、二次元のフラットなスタイルを使用します。このコンセプトは既存のエフェクトなしで機能します。ドロップシャドウ、ベベル、エンボス、グラデーションなど奥行きを与えるエフェクトは使わないようにします。 ページ内のテキスト、ボックス、画像、フォーム、ナビゲーションなどの全ての要素はエッジのきいたスタイルで、シャドウはありません。Appleによく見るSkeuomorphi
デザイナー必見！アプリのUIを一覧で見られるギャラリー。
iOS7のフラットデザイン化でほとんどのアプリがデザインの路線を大幅に変更する事を余儀なくされました。これまでのお馴染みアプリもどんどんアップデートされ、フラットデザインへの対応がなされています。これからアプリを開発するにもフラットデザインのUIというのは非常に重要な要素になっています。 App Storeでデザインの参考になるアプリを一つ一つ見ても良いのですが、UIを一覧で表示してくれる非常に便利なサイトを見つけたのでご紹介。 アプリのUIを集めた「Pttrns」 こちらがトップ画面。アイコンではなくUIで並んでいるのでたくさんのデザインを素早く見る事ができます。新着順で並んでいるので、フラットデザインのものばかりが表示されています。見ているだけでも楽しいですね。 簡単に細部のチェックが可能 画像にカーソルを合わせると、ルーペで拡大してくれます。なので細部のデザインやフォント・ボタンを確
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ピュアCSSでシャキシャキ動くローディングアニメーション集「Loaders.css」:phpspot開発日誌
Webデザインの引き出しを増そう！細部までこだわったUIデザインが参考になるDribbbleアートワークのまとめ
PCサイトのUIデザインにおける12のトレンド
ブレないアプリデザインのすすめかた
スマホアプリのUIを再現できるCSSフレームワークまとめ
新着記事
ウェブデザインのセンスを磨こう！ 2013年洗練されたディテールのUIデザインのまとめ
ウェブやモバイルの次のプロジェクトの参考にしたい、わくわくするUI/UXデザインのまとめ | コリス
新着記事
新着記事
