最近のUIは、気持ちいいアニメーションが多く取り入れられています。アニメーションはある程度予測できながらも、いい意味で少し期待を裏切るくらいがちょうどいいなと思います。 アニメーションを使ったインタラクションやデザインが素晴らしいナビゲーションの実装例をまとめました。各デモは全て、HTML, CSS, JavaScriptなどをオンラインで編集することができます。
皆さんはUIの動きを考えるときに、どんなものを参考にしていますか?いつも簡単にぴったりの動きが思い浮かぶわけではないし、悩んだときに何か参考になるギャラリーサイトなどがあったら便利だと思います。今回フランス人WebデザイナーのWalter Stéphanieさんが“Interface Animations and Transitions: where to get inspiration”というタイトルでUIのアニメーションやトランジションのインスピレーションを得られるサイトを紹介していたので、本人の許可を得て翻訳しました! (以下”Interface Animations and Transitions: where to get inspiration”の翻訳。) photo credit: Jorge Quinteros via photopin cc UI/UXデザインにおいて、細
近年、UIにおけるアニメーションやインタラクションの重要度が増していますが、それらをデザインしたり実装する際、様々なものを参考にすると思います。 実在するアプリもさることながら、DribbbleやBehanceなどのポートフォリオサイトではデザインコンセプトとしてアップロードされているものも多く、参考になるものはたくさんあります。 中には独創的なものもあって、実用性に欠けると感じるようなものもあるかもしれませんが、それでも固定概念を覆す機会になったり、断片的にインスピレーションを得たりもできますし、何よりも、見ていて楽しいものです。 今回は海外のUIコンセプトをたくさんストックしているMaterialUpからいくつかの作品をピックアップしてご紹介していきます。MaterialUpはその名のとおりマテリアルデザインの文脈を組んだ作品を多くそろえているサイトです。 そして多くのGIFだけのサイ
徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。 マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方 この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト5選 1. ミュージックプレイヤー 楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア
MatthieuはUpLabsの創設者で、MaterialPaletteとWOW.js.のクリエイター。 良いユーザー体験のためには格好良いデザインだけではなく、仕組みや構造、使いやすさにも気を配る必要があります。近年ではUXデザインの重要性が叫ばれ、こういった考え方も徐々に浸透してきてはいますが、だからといってビジュアルやインタラクションのデザインを軽視してもいいと言うわけでもありません。 この記事では過去にも何度か取り上げている、UIコンセプトギャラリーサイトのUpLabsからまたいくつかのUIコンセプトを実装コード付きでご紹介します。ユーザーがサイトを使うときの心地よさを演出するためのヒントがたくさん詰まっていますので、是非参考にして下さい。 ※各項目ごとにCodePenを埋め込んでいるため、読み込みに少し時間がかかる場合があります UpLabsのオススメUIコンセプト5選 1. カ
従来の「ブランド」の概念を覆す、パラダイムシフトが起こっています。 インターネットビジネスが急速に拡大し、安価でクオリティの高いものを好きな時に手に入れられるようになりました。 お店に行かなくとも、Amazonで日用品を買ったりAirclosetで好みの洋服をレンタルしたりできるのです。 今や、同レベルのクオリティのものがより安く手に入るので、ビールはバドワイザーでなくても、シャンプーはビダルサスーンでなくても構わない、という人が増えています。 「名前」よりも、「質」で選ぶ時代がやってきたのです。 Webデザインの世界でも、そうした「ブランドレス」なデザインが増えています。 今回は、「ブランドレス」なデザインがもたらす新しいWebデザインの形を解説していきます。 「ブランドレス」なデザインとは? ブランドを感じさせない無印良品のタオル / スクリーンショット:2017年9月 派手にパッケー
ロゴ、ナビゲーション、ヘッダ、見出し、画像など、Webページやスマホアプリには、さまざまなデザイン要素が必要です。もちろん、これらを忘れることはないでしょう。 思わず、デザインするのを忘れがちなデザイン要素を紹介します。 もちろん、ここで紹介する50個すべてが必要ではありませんが、プロジェクトごとに合わせてご利用ください。 そういえば、フォームのサンキューページをいつも忘れるデザイナーさんが昔いました。 50 Things You (Probably) Forgot To Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ログイン・サインアップ関連のデザイン要素 ファースト エクスペリエンスのデザイン要素 小さいけれど大切なデザイン要素 割と目立つデザイン要素 プロフィールスタッフのデザイン要素 ユーザーのさまざまな
作成:2015/12/7 更新:2016/06/29 Webデザイン > スマートフォンはOSの進化によって、次々と新しいUIがうまれています。提案の仕事が入ったときに焦らないように、普段から新しいデザインや動きをチェック。そして「自分には何ができて、何ができないか」把握しておきたいところ。今回は「スマホのUIをチェックするならこれ」と思うギャラリーをまとめておきます。 エンジニア速報は Twitter の@commteで配信しています。 CAPPTIVATE.co 静止画像のギャラリーが多い中、こちらのサイトはインタラクション・アニメーションを動画で見ることができます。比較的新しく美しいUIが多いので、要ブクマですね。 CAPPTIVATE.co | iOS UI Animations Mobile Patterns iPhoneアプリのUIデザイン集。左側のカテゴリにはカメラコントロー
With a few simple regular expressions, you can easily verify whether your customer entered a valid credit card number on your order form. You can even determine the type of credit card being used. Each card issuer has its own range of card numbers, identified by the first 4 digits. You can use a slightly different regular expression to find credit card numbers, or number sequences that might be cr
ECサイトの購入フォームでは、多くの場合クレジットカードによる決済方法を用意していることがほどんどです。 銀行振込みや代引き、コンビニ支払いなどほかの決済方法に比べ、その場で情報を入力するだけで手続きが済み、手数料もかからないことの多いクレジットカードは、オンラインショッピングを楽しむユーザーにとってもなくてはならないものです。 とはいえ、カード番号や有効期限、セキュリティコードなどと入力量が比較定期多いというのもクレジットカードの特徴。 今回はそんなクレジットカード情報の入力フォームの最適化についてポイントをお伝えしていきます。 余計な入力欄はなるべく減らす クレジットカード情報のフォーム入力でよくあるのが、カード会社を選択させる入力欄です。 しかし結論から言うと、このカードブランドの入力欄は用意する必要がありません。 カード番号とブランドは対応している なぜならば、実はカード番号の冒頭
まさに、Web制作者のためのアプリです。 納品ファイルをまとめる際に、更新した差分のファイルだけをディレクトリ構造を保持したまま抽出し、ファイルリストと共に納品ファイルセットを作成できるWin, Mac対応のアプリを紹介します。 ディレクトリの枝葉に点在する更新ファイルでも、1クリックでまとめることができます。 バージョン管理のないプロジェクトでは、特に重宝すると思います。 Scone Diff Scone Diffの特徴 Scone Diffのダウンロード・インストール Scone Diffの使い方 Scone Diffの高度な使い方 Scone Diffの特徴 Scone DiffはWindows、macOS対応の国産アプリで、無料版と有料版がリリースされています。無料版でも十分な機能が備わっています。 Web制作のファイル納品時、必要なファイルだけをまとめて納品できます。 必要なファ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く