さよならSketch、こんにちはFramer X｜KANTA YAMAGATA｜note
Jorn van Dijk（@jornvandijk）のリツイートから2ヶ月近く経った先日、ようやくFramer X βの招待が届きました。Trailerが格好良すぎてReactとシームレスになるのかという期待で一杯だったので嬉しかったです。実際、AirbnbやFacebookのデザイナーもこんな感じでした。とりあえず動画を観ていただけたら。 タイトルはUSノリですが、正直Sketchはある1プロジェクトで使ったことがあるだけです。Figmaなどの他のデザインツールは使ったことがないです。なのでここでは比較を行いません。以前からあるFramerとの差分の紹介を中心にしていきます。Framerはなぜか日本では使われていない印象がありますが、これがデザイン環境の向上に少しでも参考になれば幸いです。 Linking複数画面の遷移をつくるには、FramerではFlowComponentを利用したコ
約4万RTされたグルメアプリ「Dish」を2ヶ月でリリースするまで｜ren@Anyflow Inc.
こんにちは、株式会社ピケの ren です。 本日リリースした Dish (ディッシュ) という、現在地からサクッとランチが決まるグルメアプリについての note です。 5月12日に仮説検証のために行ったツイートが約4万RTされ、その後の約二ヶ月の間にチームでどうような動きがあり、本日 iOS版がリリースされたのか、というのをストーリーベースで書いていきます💪 目次 ・ Dish って？ ・作り始めた理由 ・バズってからの一週間 ・体験設計の見直しと迷走 ・約20人に行ったユーザーインタビューとβテスト ・バズからくる安堵感 ・ 手触り感の無さ ・ ユーザーインサイトの発見 ・そしてリリース ・2ヶ月間で学んだこと ・ まとめDishって？Dish は、現在地からサクッとランチが決まるアプリです。 せっかく渋谷に来たから、美味しいランチが食べたいけど、わざわざ調べるのは面倒…といったシチ
UI Crunch #13 娯楽のUI - by Nintendo - - YouTube
2018/4/27（金）に渋谷・DeNAオフィスで開催した『UI Crunch #13 娯楽のUI - by Nintendo -』。"もっと楽しく"を追求する、任天堂のUIデザイナー3名をお迎えし、「Splatoon」 や「Nintendo みまもり Switch」 などの事例を交えながらお話いただきました。 https://ui-crunch.connpass.com/event/82969/ ■■■■コンテンツ■■■■ 00:00:00～ 自己紹介・もくじ 00:03:57～ ①あそび心とUI 00:23:02～ ②SplatoonUIの狙い 00:42:22～ 任天堂の紹介 00:46:14～ ③NintendoみまもりSwitch は 誰のもの？ 01:07:07～ さいごに 01:10:51～ Q&A 【UI Crunchとは】 UI Crunchは、DeN
「AndroidはiOSと同じデザインで！」と言われたときの対応案 - Qiita
はじめに 「AndroidはiOSと同じデザインで！」と言われてどう実装しようか悩んでる方向けの記事です。 Androidアプリを作るなら当然マテリアルデザインガイドラインに合わせて1から画面設計するのが最高なんですが、そうはいかないことが経験上多いので対応案をざっくりまとめました。 諸注意 これは「iOSとAndroidのUI対応一覧」ではありません。 iOSとAndroidで同じような見た目のUI部品でも作られた経緯や目的は違うので、比較して置き換えるようなことは基本的にできないと思います。 とはいえなんの指標もないと辛いので、ここでは「iOSのこのUIをAndroidで代用できるのはこれかもね」くらいのニュアンスで列挙しています。 必ずしもどのアプリにも言えるようなことではないので、あくまでたたき台と思ってください。 「なぜAndroidらしくする必要があるのか」についてはこ
2018年のアプリデザインを予測！知っておきたいトレンド7選｜はんざわさき
2016年からアプリやwebデザインは完全なフラットデザインではなく、やや立体感のあるデザインが主流になりました。 引き続き2017年もその傾向はありましたが、徐々に進化を遂げています。 今回は、去年の傾向から「2018年のアプリデザイントレンド」を予測してみました。 ディフューズシャドウ2016年から根強い人気のディフューズシャドウ（Diffuse Shadow）は、2018年も多くのアプリで見かけそうです。 ディフューズシャドウは目立って欲しい重要なボタンや、入力フォームに良く使用されています。 Apple Musicのように「再生中」と「停止中」などの状態を表す場合に使われるパターンもありました。 また、背景とカードを白色にし、ディフューズシャドウのみで境界線を表現しているデザインをDribbbleで良く見かけます。 カードを囲う線や色数が少ないため、すっきりとしたデザインになってい
UIデザインの引き出しを増やしたいときや悩んだときに参考になるデザインギャラリー 20 - NxWorld
webサイトやアプリなどのUIデザインに悩んだときに参考になるデザインギャラリーを全20サイト紹介します。 よくあるコンポーネントのデザインや配置の仕方、カラーの組み合わせ方を眺めるだけでなく、ギャラリーによってはクールなものからユニークなものまである様々なアニメーションをまとめているところもあるので、デザイン以外の部分でも参考になるギャラリーもいくつかあります。 また、悩んだ・困ったときに見るだけでなく、お気に入りのギャラリーがあればブックマークやフィード登録などして普段から空いた時間に目を通すことでデザインの引き出しも増やせますね。 Calltoidea 細かいコンポーネントからページ全体のレベルまで様々なデザインがまとめられています。 カテゴリーを表すアイコンもわかりやすく参考デザインのキャプチャも大きくて見やすいので、個人的によく見るギャラリーサイトのひとつです。 Collect
プロ御用達！WEBデザインに役立つデザインツール13選
更新日: 2017年9月26日公開日: 2015年6月10日プロ御用達！WEBデザインに役立つデザインツール13選 忙しい web デザイナーの方、web デザイン勉強中の方、CSS やプログラミングからチョット目を離してデザインツールを見直してみませんか？ 今までやっていた作業、可視化に時間のかかっていた作業を劇的に変えてくれるツールがたくさん存在します。チョット作業の手を止めて、以下のツールを覗いてみてください。きっとこれからのあなたの web デザインを快適にしてくれますよ！ WEBデザインに役立つデザインツール 13選プロ顔負けのデザインツール「webflow」 webflow 対応 / Mac、Windows 価格 / 無料 ～ $84 /月 表示言語 / English Free トライアル / 有 デザインには自信があるけれど、実はプログラミングはチョット苦手、という方にお勧
Drag and Drop Interaction Ideas | Codrops
Some ideas for drag and drop interactions in a UI. The idea is to show a droppable area that stands for certain actions after an element is being dragged. Sometimes we wonder how to pack all those possible actions into a UI. From buttons to drop-downs to menus—there are certainly many possibilities. Another idea is to employ some kind of drag and drop interaction. Today we want to share some explo
どんな動きにするか悩んだときに！UIアニメーションのインスピレーションを得られるサイトまとめ | Goodpatch Blog
皆さんは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デザインにおいて、細
色々なWebサービスの会員登録画面まとめ - no web service no life
多様化する会員登録画面 色々なWebサービスの会員登録画面を、導線やSNS連携ボタンの配置を主軸に分類してみました。 各サービス、会員登録CVRを上げるために、導線や提示方法を工夫しています。また、SNS連携が必須になってきたことによって、画面に占める要素が増えてきており、その配置方法にも工夫がみられ面白いです。 ※キャプチャ取得タイミングの関係で、古いデザインもあるかもしれませんがご了承下さい。 ポップアップ提示パターン Sumallyやpixivは、Cookie制御がされており、初回訪問時にアグレッシブにポップアップを提示してきます。 Sumally pixiv Blabo!やAirbnbは、会員登録リンクを押すとポップアップで提示されます。 Blabo! Airbnb SNS連携ボタンが上に配置されているパターン 通常の会員登録への導線やフォームの上に、各種SNSのボタンが配置されて
日本のスマホサイトは2年間でこんなに変わった (1/4)
スマートフォンやタブレット端末といった、いわゆる「スマートデバイス」を意識したWebサイト制作はもはや常識となっている。各企業のWebサイトは、次のような方法でスマートデバイスに対応していることがほとんどだろう。 スマートフォン向け専用サイトを構築する レスポンシブWebデザインで Webサイトを構築する viewportを調整する Web Professionalでは、2011年2月、有名企業のWebサイトがスマートフォンにどのように対応しているかを紹介した。 これらのサイトは、2年経ってどのような変化を遂げたのか。本記事では、取り上げたサイトに再び訪れ、サイトデザインのトレンドがどう移り変わったのかを観察。日本のスマホサイトの「BEFORE & AFTER」を紹介しよう。 半数以上のサイトがリニューアル まず、調査したサイト数に対してリニューアルしたサイトと、大きくは変化していないサイ
思わず触りたくなるiOSのUIデザイン - RyoAnna
ユーザーインターフェイスが洗練されているアプリは、使っていて気持ちいい。ボタンの形、配置、配色、画面の遷移、アニメーション。これらのデザインと機能がマッチすると、多くの人に受け入れられるアプリになる。 今回はiOS、特にiPhoneのUIデザインを紹介したい。どれも触りたくなるものばかりだ。 Qiwy iOS/iPhone app curl test by Mikael Eidenberg UX/iOS/UI iPhone idea with video process by Cuberto Qiwy iOS/iPhone app switch and slider by Mikael Eidenberg Untitled iOS/iPhone synth app navigation by Mikael Eidenberg Iphone UI by Matthias Mayr Busin
美しいWebデザインをタイプ別に！見ないと損するパーツ別ギャラリーサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
中型ライダー（二輪）免許を持っているライターの内藤です。 本日は、ライダーキック並みの強烈さで役に立つ見本サイトをまとめてみたいと思います。 Web屋さんはご存じの方も多いかもしれませんが、ブログをしている一般の方、Webデザイン・DTPに興味のある方、お店を持っている方なども必見です！ 部品に特化した見本 部品に特化した見本サイトをご紹介します。 見出しデザイン（h1,h2,h3……その他DTPでも） はじめは見出しデザインに特化した見本サイトまとめ。 見出しデザイン.com http://midashi-design.com/ 見出しタグ（h1,h2,h3……）のデザインの見本ですが、DTPなどでもヒントになるものがたくさんあります。 カテゴライズは、グラデーション・テキストのみ・テキスト非画像・上線・下線・丸・四角・囲み線・斜線・点線・角丸。 ヘッダー部分に凝っても見出しが適当だと全
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Element
Home | OnsenUI
これからのUIデザインのヒントになるDribbbleのアートワークのまとめ
UIデザインについて改めてしっかりと学ぶために参考になるスライドまとめ
Axure RP - UX Prototypes, Specifications, and Diagrams in One Tool
Flat UI - Free Bootstrap Framework and Theme
2013年のウェブデザインのトレンドを探るかっこいいUIデザインのまとめ