タグ

uiに関するsaladdaysのブックマーク (436)

  • コンバージョン率を劇的にアップさせるための30の心理作戦

    By Tim Franklin Photography マーケットリサーチアナリストとして働き、SEOやPPCのスペシャリストであり、かつ心理学をたしなんでいるというニック・コレンダさんが、心理学の視点から導き出した「コンバージョン率を劇的にアップさせるための30の心理作戦」を公開しています。「フムフム、なるほど」というものから、「恐ろしあ……」となる戦略まであり、広告運用やSEOの知識がない人もサービスを使うユーザーとして知っておくべき内容になっています。 Conversion Optimization: An Enormous List of Psychological Tactics http://www.nickkolenda.com/conversion-optimization-psychology/ 30の戦略を見る準備として、運営しているサービスをCTA別に分けてじょうご状

    コンバージョン率を劇的にアップさせるための30の心理作戦
  • 今どきの入力フォームはこう書く! HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA

    みなさん、入力フォームを制作する際、どのような施策をおこなっていますか? 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chromeデスクトッ

    今どきの入力フォームはこう書く! HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
  • Mediumの印刷へのこだわり

    By Marcin Wichary ❦一方で、安くざらざらした紙でも段落が美しく、ページにフィットしているならば玄人をも笑顔に変える(玄人でなくても温かい印象は持つはずだ)。「マシな紙に印刷するお金はないかもしれないが、でもあんた、細やかに気配りしてはいるんだぜ」というのが感じ取れる。気配りするのに元手はかからない。単に注意と謙遜、勤勉さが必要なだけだ。気配りこそが自分の技巧に満足を与える1番の感情だと言える。のデザインに気配りしていると、多くの点でハッキリそれと分かる。そして、それは特に余白に現れる。 — クレイグ・モド 『余白について語ろう』 Mediumの記事を印刷するのはそうそうあることではないかも知れませんが、私たちはその体験を素晴らしいものにしたいと思っています。おそらくは何世紀も続く印刷の歴史を大切にしたいという思いが少しと、あとは僅かなノスタルジアでしょう(Mediumの

    Mediumの印刷へのこだわり
  • You are being redirected...

    Javascript is required. Please enable javascript before you are allowed to see this page.

    saladdays
    saladdays 2016/03/01
    オンボーディング/ウォークスルー/チュートリアル
  • thisalso.com is coming soon

    is a totally awesome idea still being worked on. Check back later.

    thisalso.com is coming soon
  • 効率的なアプリ開発のためにデザインガイドラインを作成した話 - ZOZO TECH BLOG

    こんにちは。デザイナーの権です。 アプリ開発に関わるデザイナーの方々は、仕様とデザインが決まって実装に移る際、どのようにチームでやりとりしていますか? それぞれの開発体制や状況に合わせて進めていくので、会社によって様々だと思います。弊社でも効率的な開発のために、デザインデータや仕様書、指示書、プロトタイプの準備等、日々試行錯誤しながら最適な方法を探しています。 数ある開発手段の中で今回は、弊社が運営するサービス「iQON」の機能改善やデザインリニューアルに効率的に対応できるよう新たに作成した、デザインガイドラインについてご紹介したいと思います。 デザインガイドライン作成の背景 弊社では1年ほど前からデザイナーが5人に増えたことにより、プラットフォームごとに一人づつオーナーシップをとって制作を進める体制に変更されました。 私も以前は、アプリデザインや広告のデザインなどジャンル関係なく携わって

    効率的なアプリ開発のためにデザインガイドラインを作成した話 - ZOZO TECH BLOG
  • 10 Inspiring Examples of UI Style Guide Design – Speckyboy

    UI style guides are an essential part of creating a consistent and effective design for a website or app. They ensure that all aspects of the user interface, from typography to colors and icons, are standardized and follow best practices. But beyond their practical value, UI style guides can also be a source of inspiration for designers. They showcase the thought process behind a design, providing

    10 Inspiring Examples of UI Style Guide Design – Speckyboy
  • The PLAY button is not optical alignment

    Lots of people say that you can not center align the play button,the physics center is not the visual center . Well,actually I think you can,the key is to find the real center of the triangle. When you select a triangle in a design tool,usually it has a rectangle selection area,so the center is the rectangle’s center but not the triangle’s center.

    The PLAY button is not optical alignment
    saladdays
    saladdays 2015/12/16
    アイコンは重心で真ん中に揃えようと言うお話
  • 闇雲にディズニー映画みたいなアニメーションを GUI に実装するのはもうやめよう - Qiita

    はじめに 稿は UI Design Advent Calendar 2015 – 9日目の GUI アニメーションに関する記事です。 アニメーションの12の基原則と GUI ディズニーの アニメーションの12の基原則/12 basic principles of animation というのがありまして、要はこの原則に沿ってアニメーションを制作すればまるでそれが生きているかのような動きをする、平たく言えばディズニーっぽい動きになる、というものです。http://the12principles.tumblr.com がとてもわかりやすいので、うちいくつかを転載しておきます。 SQUASH & STRETCH ANTICIPATION FOLLOW THROUGH & OVERLAPPING ARCS ビデオ解説:The illusion of life これらを見ただけでも、『あー、デ

    闇雲にディズニー映画みたいなアニメーションを GUI に実装するのはもうやめよう - Qiita
    saladdays
    saladdays 2015/12/15
  • ユーザ・インターフェースのためのイージングカーブをつくる | POSTD

    フラットデザインの導入以来、アニメーションの質が、今までにないほど、優れたインターフェース作成のために必要不可欠なものとなっています。モーションデザインを通して、製品の総体的なブランドエクスペリエンスを左右するようになり、製品を、市場の他のものと差別化する要素となりました。アニメーションは複雑なインタラクションを簡素化し、優れたデザインを記憶に残るユーザエクスペリエンスにしました。では、質の高いアニメーションはどのように作られるのでしょうか? イージングカーブは多くの要となるコンポーネントの1つで、適切なアニメーションをとり、素晴らしいものに作り上げます。 問題なのは、イージングカーブがどのように機能するかについての理解が、少々難しいということです。 前回の記事 After Effects to CSS で触れたタイミング関数への興味の派生としてこの記事を書きましたが、この記事を読むことで

    ユーザ・インターフェースのためのイージングカーブをつくる | POSTD
    saladdays
    saladdays 2015/12/15
  • No UIはデザインを進化させる新しい概念

    Next Big ThingsとTech Crunchでも記事が書かれた「No UI」という概念が最近話題になっている気がします。 No UIとは「スクリーン(UI)の情報量や設計に頼らず、目的を達成すること」を軸にしたサービス体験を意味します。 流れの主流としては、テキストメッセージを使ったものが多いです。Operatorというショッピングサービスは、商品の検索機能や、オススメの商品が並ぶトップページ、カテゴリ別のナビゲーションなどは全くありません。 ”オペレーターに”テキストメッセージで自分が求める商品の特徴を送ることで、その要件に合ったものを返信して教えてくれるというものです。 スクリーンで四苦八苦するデザイナーの苦労Operatorのようなサービスの場合、ユーザーの要望を臨機応変に対応できるのでスクリーン上の複雑なケースを意識したデザイン設計が要りません。 が、現在、UIに関わるデ

    No UIはデザインを進化させる新しい概念
  • 浅草九倶楽部/浅草九劇

    お問い合わせ Contact 浅草九劇、御茶ラボのご利用に関するお問い合わせは、以下フォームボタンからご連絡ください。 担当者から追って連絡いたします。内容によっては返信しかねる場合もございますのでご了承ください。 個人情報保護方針をご一読の上、お問い合わせください。 *マークがついている項目は入力必須です 団体名・法人名

    浅草九倶楽部/浅草九劇
    saladdays
    saladdays 2015/11/27
    文字の出方がかわいい
  • Website flowcharts: download free wireframes in PSD, AI, SKETCH

    Meet UI Tiles, 72 Website Flowcharts for any purpose! Professional flowcharts within minutes, it is possible if you have proper assets in your designer toolbox. Build sitemaps, demonstrate interactions and engineer magnificent projects, saving lots of time and energy. Whether you're a developers, designer or any other person involved in Web Design related projects, you can freely use UI Tiles sinc

    Website flowcharts: download free wireframes in PSD, AI, SKETCH
    saladdays
    saladdays 2015/11/16
    いろんなレイアウトパターンのsketchファイル
  • 最近のWebデザインで採用されているレイアウト72種類を収録した無料のUI素材(PSD, AI, Sketch) -UI Tiles

    最近のWebデザインでよく利用される1カラム、2カラム、3カラム、カード型、ボード型の基的なグリッドをはじめ、ランディングページ、プロダクトページ、ギャラリー、ポートフォリオ、カート、FAQ、コンタクト、マップなど、さまざまなレイアウトが用意されたワイヤーフレームやフローチャートを作成するための素材を紹介します。 UI Titles UI TILES: WEBSITE FLOWCHARTS ダウンロードできる素材のフォーマットは、4種類。 .psd(72種類のレイアウトとチャート) .ai(72種類のレイアウトとチャート) .sketch(72種類のレイアウトとチャート) .png(72種類の各レイアウト) 各フォーマットにはそれぞれ72種類のレイアウトとチャートが揃っており、ワイヤフレームやフローチャートやサイトマップとして利用できます。

    最近のWebデザインで採用されているレイアウト72種類を収録した無料のUI素材(PSD, AI, Sketch) -UI Tiles
  • Facebook Design Resources

    A collection of free resources made by designers at Facebook.A collection of free resources made by designers at Facebook. iOS 9 GUI (iPhone) Photoshop and Sketch templates of GUI elements found in the public release of iOS 9. Diverse Device Hands Two different diverse hands holding various modern smartphones (iPhone 4-6+, Nexus, Windows Phone).

    Facebook Design Resources
  • UIデザインのアイデアを探す時にチェックしたいサイトのまとめ

    Webサイトやアプリなど、UIデザインのアイデアを探す時に役立つサイトを紹介します。 さまざまなコンポーネントやレイアウト、インタラクションのヒントとなるアニメーション、動きがとにかく気持ちいいアニメーションなど、見ているだけでワクワクするクリエイティブな刺激をもらえます。

    UIデザインのアイデアを探す時にチェックしたいサイトのまとめ
  • すべてがUIになるVRの世界

    先日、報道を VR で楽しむ NYT VR を試してみました。VRゲームをはじめとしたエンターテイメント性の高い分野で注目されていましたが、 NYT VR はジャーナリズムからのアプローチだったので新鮮でした。これは仮想空間だと分かっていても、次第に世界に没頭してしまい、現実と仮想の境目が曖昧になる感覚は VR 体験ならではです。 スマートウォッチをはじめとしたウェアラブルや IoT の登場によって、従来のような GUI を前提としたインタラクションデザインではなく、No GUI のデザインが注目され始めています。すべてをボタンのような操作 UI で表現するのではなく、音声、触感、行動でインプット・アウトプットすることがありえます。しかし、VR を体験していると、No GUI とは別に、Everything UI という世界もありえると思い始めてきました。Everything UI

    すべてがUIになるVRの世界
  • Photon

    The fastest way to build beautiful Electron apps using simple HTML and CSS Powered by Electron Underneath it all is Electron. Originally built for GitHub's Atom text editor, Electron is the easiest way to build cross-platform desktop applications. If you can write a bit of HTML, CSS, and JS, you can build full featured applications. Companies like Microsoft, Facebook, and Slack are using it – why

  • 【UXの迷信】ユーザビリティさえ良ければ、サイトの見た目は関係ない? | UX MILK

    あなたは「ユーザビリティが担保されていれば、Webサイトのビジュアルは美しくなくてもいい」と思いますか? Craigslistのように、見た目は味気なくても人気があるWebサイトもあるので、サイトのビジュアルデザインを重視せずにユーザビリティだけに重きを置く人がいます。 しかし、「美しさ」も大事な役目を果たしているのです。ビジュアルが魅力的であればあるほど、Webサイトはより効果を発揮します。また、UXはユーザーの感情によって大きく左右されます。ビジュアルに好感を持てた方が、ユーザーはリラックスしてサイトを見ることができるうえに、「このサイトは信用できて使いやすい」と感じることが多くなります。第一印象で大事なのはサイトの仕組みよりもビジュアルであり、ビジュアルによってユーザーから見たサイトの価値が決まってくるのです。 さらに、Webサイトが美しければ、ブランドや製品、サービスの良さなどのア

    【UXの迷信】ユーザビリティさえ良ければ、サイトの見た目は関係ない? | UX MILK
  • Apple WatchのUI/UXデザインでデザイナーが考えるべきことまとめ - HOME'S Designer's Blog | ホームズ デザイナーズ ブログ

    2015-10-05 Apple WatchのUI/UXデザインでデザイナーが考えるべきことまとめ こんにちは、HOME'Sアプリのデザインをしている、こいずみです。 HOME'Sはこの度、watchOS2発表に伴いWatchアプリをリニューアルいたしました! Apple WatchのUI/UXデザインの経験を通して、学んだことや感じたことなどをご紹介しようと思います。 「IOS版 HOME'Sアプリ」DLはこちら Apple Watchだからこその機能 watchOS2対応アプリでできることは主に3つです。 ・新着物件の通知を受け取る ・物件を確認する ・気になる物件をお気に入りに追加する iPhoneで希望の条件を保存しておけば、その条件に合った新着物件通知を受け取ることができ、物件の概要を確認できます。 気になる物件をお気に入りに追加すると、iPhone側にその情報が引き継がれます。

    Apple WatchのUI/UXデザインでデザイナーが考えるべきことまとめ - HOME'S Designer's Blog | ホームズ デザイナーズ ブログ