インタラクションの参考にしたいUIアニメーション５選
MatthieuはUpLabsの創設者で、MaterialPaletteとWOW.js.のクリエイター。 良いユーザー体験のためには格好良いデザインだけではなく、仕組みや構造、使いやすさにも気を配る必要があります。近年ではUXデザインの重要性が叫ばれ、こういった考え方も徐々に浸透してきてはいますが、だからといってビジュアルやインタラクションのデザインを軽視してもいいと言うわけでもありません。 この記事では過去にも何度か取り上げている、UIコンセプトギャラリーサイトのUpLabsからまたいくつかのUIコンセプトを実装コード付きでご紹介します。ユーザーがサイトを使うときの心地よさを演出するためのヒントがたくさん詰まっていますので、是非参考にして下さい。 ※各項目ごとにCodePenを埋め込んでいるため、読み込みに少し時間がかかる場合があります UpLabsのオススメUIコンセプト５選 1. カ
10歳のこどもから学んだユーザビリティ向上のポイント
10歳のこどもから学んだユーザビリティ向上のポイント夏休みの後半、原稿用紙15枚の自由研究に苦しめられていた姪っ子（10歳）を「楽しそうだな〜」と手伝っていました。そんな時「私も久しぶりに自由研究したい！」と思い、ちびっこが家にいることですし、最近のちびっこがWebサイトをどのように利用しているのか研究してみることにしました。という事で今回の記事は自由研究風に進めようと思います！ 調べたいこと認知度の高い Web サイトを、小学生がどのように利用するのかを観察し、こども向けの Web サイトに必要なもの、Web サイトを制作するうえで注意すべき点を調べます。 予想難しい漢字は読めないので読みとばすイラストやキャラクターなど、可愛いものに興味を示す明るい色彩のサイトに興味を示すまだ習っていない漢字や難しい表現は読み飛ばし、自分の理解できるもののみにフォーカスしていくと予想。これは自分の知らな
Webデザインのレイアウトや配色の参考になるPhotoshop用の無料素材のまとめ
Webデザインのセンスをアップさせるには、一つひとつのUIを観察し、考えてからPhotoshopを起動し、作業をすること。最近のトレンドをうまく取り入れたレイアウトや配色・タイポグラフィの参考になるPSDがダウンロードできるUI素材を紹介します。 縦長ページ用のさまざまなコンポーネント、斜めやサークルや幾何学を使ったもの、Material Design、ミニマルなど、参考になるものばかりです。 EventRay UI Kit (PSD) イベントやアクティビティの情報を管理するさまざまなGUIエレメントが揃ったUIキット。情報の取得や通知をはじめ、コメントやフィードバックやシェア、管理や販売などユーザーのインタラクションを容易にするようデザインされています。 Awesome UI Kit for Free (PSD, Sketch, Axure, Omnigraffle) ヘッダ、フッタ、
Webページで使用されている63種類のUIデザインの特徴と実装の注意点がまとめられた無料のeBook -UXPin
Webページで実際に使用されている63種類のさまざまなUIデザインのパターン、エレメントの使い方、コンテンツの見せ方・そしてそれらの実装の際の注意点などを一冊のPDFにまとめた無料のeBookを紹介します。 Web UI Design Patterns 2014 本書は以前、紹介したUXPinのシリーズで、ウェブ制作の参考になるPDFが他にも無料でダウンロードできます。 ワイヤーフレームや最近のUIを解説したワイヤフレームガイド 2014年、進化しているWebデザインのトレンドをチェックできる無料のE-Book スマホページ・アプリのさまざまなUIの特徴と実装の注意点がまとめられた無料のeBook eBookは全編英語ですが、英語が苦手な人でもグラフィックを見るだけで十分にためになると思います。 本書の中身を簡単に紹介します。
「ソリッド」を使った今時のWebデザインの作り方がかっこいいUIキット・ページレイアウトのまとめ
ソリッドなラインを使ったアイコン、テキストを矩形で囲ったゴーストボタン、ラインで描いた幾何学模様など、ソリッドを使ったUIキット、Webページやアプリのレイアウトやテンプレートを紹介します。 いくつかはPSDファイル（無料/有料）もダウンロードできます。 BrandaLoka 斜めのグリッドをはじめ、ダイアモンドやサークル状のエレメントなどにソリッドを取り入れたスタイリッシュな縦長1ページ用のテンプレート。100MB超えのPSDがダウンロードできます。
UIの進化を止めるうんこユーザーに我々はどう立ち向かうべきか
「基本的に運営側がすることが正しいんですよ Webの世界ってそういう論理で動いてるんですよ」理論 実はここで言われている@masarakkiさんの意見はすごくわかる。「最高にクール」なUIがクソユーザー（便宜上、UIの良さがわからないユーザーを本エントリではそう呼ぶ）によって阻止されるのは中の人としては決して喜ばしいことではない。 ユーザーは「最高にクールなUI」がわかるか？まずこの問いから始めたい。一般ユーザーは「最高にクール」なUIがわかるか？ 答えはNOだ。彼らは「使いやすい」UIはわかっても「クール」なUIはわからない。そして「使いやすい」というのは結局各人の主観に依るものなので、この「使いやすい」UIというのは参考にはできても信用はできないものである。 この話を読んで真っ先に思い出した１つの話がある。 フラットデザインや新機種が評判どうか、というのはAppleにとっては意味が無い
簡単に使えて、コンバージョン率が高まるUI Tipsまとめ | Goodpatch Blog
しっかりと考えられたUIのアプリやWebサイトはとても使いやすいく、使っていてとても楽しいですよね。この記事を見ているデザイナーやディレクターの方の中でショッピングサイトや登録型サービスを担当し、UI設計をしている方もいるのではないでしょうか。UI設計をする上で必ず考えるのが「ユーザーが使いやすいUI」だと思います。しかし前述したショッピングサイトや登録型サービスの場合は使いやすさと共に、「ショッピング購入数」や「登録者数」にも気を配る必要があります。そこで今回は「ショッピング購入数」や「登録者数」を示す、”コンバージョン率” を高めるUIとはどんなものか、海外の記事を参考に考えてみたいと思います。 （この記事はGoodUIから翻訳抜粋したものです） GoodUIには簡単に使えて、コンバージョン率を高めるUIのアイデアがいくつかまとめられています。その中から6つ、素晴らしいアイデアをピック
フラットデザインとは？UIの特長と注意点 デザイン会社 ビートラックス: ブログ
最近「フラットデザイン」という言葉をよく耳にする 。 このデザインスタイルは、グラデーションやシャドウなどの立体的要素を極力避けコントラストの強いカラーパネルと文字要素を活用して構成される。このスタイリッシュなフラットデザインの出現により、今までのエフェクトゴテゴテのUIがいきなり古くさく感じる事態が発生している。 ここ最近ではGoogleが提供する種々のアプリやFacebookのUI、Windows 8、そして多くのスタートアップ企業が提供するスマホアプリで、このフラットデザインをUIのテーマとして採用するケースが増えている。 例えその呼び名を知らなくても、サイトやアプリを通して、多くのユーザーがそのデザインスタイルを目にしていると思う。代表的な例としてはClear、Moni、Clear Weatherなどが挙げられる。 フラットデザインの主な特徴特にはっきりとした決まりがある訳ではない
ノンデザイナーこそ押さえておきたい! UI/UXが学べる神スライド7選 | Find Job ! Startup
競合に負けないWebサービスをつくるため、UI（User Interface）、UX（UserExperience、ユーザー体験）にこだわるのは、もはや常識。良いUI/UXはチーム全員で考えることが、良いサービスをつくる秘訣です。 エンジニアやWebディレクターも学んで損はしません。もちろん、本職デザイナーの方々にも役立つ7つのスライド厳選まとめです！ 目次 基礎知識 １．UXのためのUIデザイン ２．UX is not UI ３．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：前編 応用編（Webサイト） ４．ククパド美ちゃんと学ぶ！クックパッドのUI改善プロセス：後編 ５．コンテンツで改善する UI デザインの極意 応用編（スマホアプリ） ６．UI＆UX / 重要なのは、毎日さわって嬉しいUI UX! 応用編（タブレットアプリ） ７．ニコニコ超デザイン-
ポートフォリオサービスのJAYPEGで出会える凄い日本人クリエイター 20
公開されてから約半年が経った、自分専用のポートフォリオページを作れるWebサービスのJAYPEG。素晴らしい作品が数多く投稿されており、個人的に大好きなサービスです。そんなJAYPEGで作品を見ることができる凄い日本人クリエイターを20人紹介します。 1. ryo_dg 大阪のWeb制作会社でデザイナーとして活躍しているRyo Nakaeさん。自身のポートフォリオサイトを始め、Gunosyのリデザインコンセプトや架空のアプリUIなど、見ていてワクワクするデザインばかりです。 2. suzuki クリエイターチームのナナメウエで活動しているUIデザイナーのTomohiro Suzukiさん。Illustratorの使い方や、チュートリアルなどを紹介しているブログ、Illustrator Maniaを運営されている方でもあります。質感が素敵な作品をイラレでたくさん作られています。 3. ken
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type
ウェブデザインのセンスを磨こう！ 2014年洗練されたディテールのUIデザインのまとめ
UX侍 × Google マップ UXデザイナー「ユーザーにフォーカスをあてれば結果は後からついてくる」 | UXサムライ
ウェブやモバイルの次のプロジェクトの参考にしたい、わくわくするUI/UXデザインのまとめ | コリス
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
シンプルでミニマルなデザインのUIエレメント素材 -Minimal UI Kit
新着記事
[デザイン]グラデーションを使う理由、不自然なグラデーションについて徹底的に分析した![[デザイン]グラデーションを使う理由、不自然なグラデーションについて徹底的に分析した](https://cdn-ak-scissors.b.st-hatena.com/image/square/232c41c1ad9ba1ab348c9a84db4d1d95780fb78b/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F06%2Fdesign-gradation-color-01-150x150.png)
