【イカしたUIを見る】Vol.2 これは発明だ！と思ったUIパーツ10選｜Goodpatch Blog グッドパッチブログ
知れば知るほど面白くなるUIの世界を皆さんにもチラ見せしたい……ということで、連載の第2弾となる今回は「これは発明だ！」と私たちが感動したUIパーツについてご紹介します。 ミクロな視点でアプリを観察し、UIパーツ一つひとつに注目してみると、普段は気付けない面白い発見がたくさんありますよ。 ※各UIパーツの名称は、公式で発表されているものではなく、私たちが便宜的につけた呼称になります。 関連記事：UIデザインとは？ 大切な5つのポイントや取り組み事例を紹介 Apple Booksのセミモーダル Appleが提供する電子書籍アプリ「Apple Books」では、カルーセル状に並んだ本を押すと、そのままセミモーダルが立ち上がります。前の画面の一覧性を保ちながら、それぞれの本の詳細を見ることができるのが特徴的ですね。さらに下スクロールすることで、全モーダルへと滑らかに変化します。 このUIのポイン
モダンな要件定義手法「RDRA」をRPGゲーム風にカスタマイズして説明してみた - Goodpatch Tech Blog
この記事はGoodpatch Advent Calendar 2022 18日目の記事です。 ソフトウェアエンジニアの 池澤です。 ここ最近はテクニカルディレクションとして仕事に関わることが増えました。その中で要件定義を作ったりデザイナーとエンジニアの橋渡しをする機会が多く、メンバーみんなが同じゴールを認識して制作できるようなより良い要件定義方法はないものかと探していました。 今回はそんな中で見つけたモダンな要件定義手法の一つ、RDRA（ラドラ）について、理解しやすくなるコツやカスタマイズしている内容についてお話しします。 なお、RDRAの詳細解説をするととても書ききれませんので、RDRA本体の詳細については公式サイト等をご参照ください。 RDRA（ラドラ）とは？ 概要 RDRAのバージョン これまでの要件定義でよくある問題 期待される要件定義の姿 公式サイト おすすめの学び方 実際のRD
【ツイッターで毎週トレンド入りするサービス開発者が教える】再現性を持って「バズ」るサービスを作る方法 - AppBrew Tech Blog
こんにちは。れとるときゃりー(@retoruto_carry)と申します。 AppbrewではPdM・デザイナー・フロントエンドエンジニアをやっています。 プライベートでは、個人開発でみんなのボタンメーカーというサービスを運営したりしています。 ほぼ毎週ツイッターのトレンドに乗るような、所謂「バズ系」のWebサービスで、月に50万人くらいに利用してもらっています。 ツイッターをやっている方は、なんとなく見たことある気がする人も多いのではないでしょうか？ みんなのボタンメーカー 今回は、その知見を活用し、お仕事で「LIPSショッピング」というコスメの買い物ができるサービスのバズキャンペーンの企画・デザイン・実装を行いました。 コスメクーポンガチャ ちょうどいいので、それを題材にして、再現性をもって「バズ」るサービスを作る方法について話していこうと思います。 キャンペーンはかなり好評で、ツイッ
求人メディアGreen の Flutterの構成について - Atrae Tech Blog
こんにちは、エンジニアの @muttsu_623 です。 最近、開発を頑張っている自分へのご褒美として念願だった『左右分離型キーボード』のMISTEL『Barocco MD770 静音赤軸』を購入しました。 Mistel BAROCCO MD770 RGB メカニカルキーボード 英語配列 85キー 左右分離型 CHERRY MX RGB 静音赤軸 ブラック MD770-PUSPDBBT1 発売日: 2020/01/30メディア: Personal Computers 購入してからまだ2週間くらいなのでまだ効果を実感できているわけではありませんが、肩が開かれた状態で姿勢良く開発を行うことができるため、長期的にみればいいお買い物になったかなと思います。 さて本題ですが、先日弊社の「求人サイト Green」のAndroidアプリをFlutterで作成しリリースしました。 Flutterでアプリを
Flutterで高速開発したAnewsモバイルアプリ
はじめに2020年11月にリリースされた、ストックマークのAnewsのモバイルアプリケーションにはFlutterが利用されています。本記事では、Flutterをなぜ採用したのか、どのような点に課題があり、どのように工夫していったのか、という開発現場の知見について紹介いたします。(本記事は、実際に開発を行った祖父江 聡士さん・海老原 隆太さんへの社内インタビューを元に執筆されています） Flutterで開発されたAnewsの画面イメージ FlutterとはGoogle社によって開発されているオープンソースのフレームワークです。クロスプラットフォーム向けの開発が可能であり、iOSやAndroidといったモバイルアプリケーションに多く利用されますが、Windows/Mac/Linuxといったプラットフォームのアプリケーションも開発可能です。 StockmarkにおけるFlutterの適用領域An
PJでUIデザインにAtomic Designを導入したらどうだったのか | フューチャー技術ブログ
今回はUIと少しUXのお話ですこんにちは。フューチャーでUXの専門家をさせていただいている平川といいます。 フューチャー技術ブログでは、【Figma】を使ってチームでUI/UX設計するといいこと の記事を書いた久保さんと同じチームに所属しています。 PJでは最高の顧客業務を目標に、業務、UX、UIの設計と、アプリ開発をさせていただいています。 今回はPJの現場でUXとUIのデザインを通して、Atomic Designの導入はどのような結果を生んだのか、Atomic Design導入に際しての課題や取り組み方のコツなんかをお伝えできればと思います。 Atomic DesignAtomic Designは、Webページやアプリケーションを作成する際に、UIの最小要素（原子）からの組み合わせで構築していく考え方です。Atomic Designの提唱者はHTMLタグを元素周期表に見立ててそれを原子
デザインをするときに使える7つの裏ワザ
この記事は、「7 Practical Tips for Cheating at Design」 をざっくりと要約したものです。意訳多く含まれています。きちんとしたもの読みたい場合は、原文を読んでください。 1. フォントサイズの代わりに文字の色や太さで階層分ける テキストのUIを設計するときに過ちがちなミスは、フォントサイズに頼りすぎて、階層のコントロールできていないことです。 「このテキストは重要だから、文字を大きくしよう！」 「このテキストは重要ではないから、文字を小さくしよう！」 このように、普段設計していないですか？ すべてのテキストに、これを当てはめてはいけません。 文字の色や太さを、同じような役割として使用しましょう。 「このテキストは重要。だったら、文字を太くしよう！」 「このテキストは重要ではない。だったら、文字の色を明るくしよう！」 2,3色使用するのがおすすめです。 例
Vue.js + Elelment UI + Lottieでお手軽にいい感じなUI/UXを作ってみる - SMARTCAMP Engineer Blog
デザイナー兼エンジニアの葉栗です！ スマートキャンプでは以前からWebフロントエンド開発にVue.jsを取り入れています。 Vue.jsなどコンポーネント指向のフレームワークは、UIフレームワークも豊富で、お手軽にリッチなUIが構築できるのでいいですよね。 今回は私のお気に入りの、Vue.js + Elelment UI + Lottie というライブラリを使って、数十分でできる簡易的なログインページを作ってみようと思います。 0から構築をはじめて、レイアウト設計、ElementUIで実装、Lottie組み込み、完成といった感じで詳しく説明していきます！ 完成画面 😊 使用技術 Vue.js Element UI Lottie（ロッティー） 実装します！ 事前準備 Vue CLIをインストール プロジェクトを作成 ElementUIをインストール ログイン画面を作成 不要コードの削除 コ
Vueでもっと幸せになりたいあなたへ。VueのUIコンポーネントライブラリVuetifyのススメ - KAYAC engineers' blog
どうもみなさまおはようございます。あるいはこんにちは。あるいはこんばんは。 KAYAC Advent Calendar 2018の12日目の記事を担当します、今年1月に中途入社しましたエンジニアのたがみです。 前職ではサーバーサイドのSEとして業務系のwebアプリを開発したり運用したりしていましたが、今はクライアントワークのフロントのエンジニアとしてwebサイトを作ったり動かしたりぶっ飛んだものにしたりしなかったりしています。 今回は、そんな私がフロントエンドになったばかりの頃に仲良くなった思い入れのある言語、Google App Scriptの話を！・・・・・・と、つい二日前までは、思っていたのですが。 Google先生を訪ねて色々と検索していたところ「あれ・・・なんか・・・Vuetifyについての日本語記事、実は少ないのでは・・・？」と気づいてしまったのです。 （もしかしたら気のせいか
Atomic Designを分かったつもりになる
「Atomic Design」（アトミック・デザイン）という言葉がしばしば聞かれるようになってきました。実際にちょっとしたトライアルをしつつ、Atomic Design について考えてみました。
UI Challenge - Flight Search | Szałko-Blog
In this post, I will go through another UI Challenge. I have picked Johny Vino‘s Flight Search design from 100 Mobile App Interactions which is mostly about animations and I will try to implement it as close as I can. Let’s get to it! First, we need to decompose this view into a few smaller parts: AppBar and top buttons Initial input Airplane resize and travel Dots travel Flight stop card view Fli
透過がサポートされたnode-webkit（NW.js）でガジェットを作ろう
こんにちは、古見澤（コミザワ）です。 今回は、前回記事にした node-webkit が透過をサポートし始めたので、HTML5やJavascript、CSSなどのWeb系の言語でガジェットのようなモノを作ってみようという内容となります。 ↓ツイッターから情報を取得して表示するだけの単純なものですが、こんな感じのものを作れます。 動画 node-webkitって何？という方は、前回の記事も合わせてお読みください。 HTML5＋CSS3＋JSでネイティブGUIアプリが作れる、node-webkitを触ってみる ※本エントリーはWindows環境（Win7 Professional x64）での話になります。 （透過機能はMacやLinuxでも使えます、後述するマニュアルを参照ください。） また、Windows環境では、デスクトップウィンドウマネージャーが有効である必要があるため、 Aero機能
AndroidのUIをデザインするとき参考にしている資料まとめ | VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
メインのお仕事がAndroid UI担当になって早1年。 今年は絶対に月に1回はブログを更新すると決めました。 こんにちは。YUKIです。 AndroidのUIデザイン関連でこまめにチェックしている資料をまとめてみました。 これからAndroidのUI関係の情報を集める方、Material Designのガイドラインが発表されてからどう変わったのか収集中の方の参考になれば幸いです！ (2015/1/10 現在) ドキュメント関係 公式資料関係 Material Design ガイドライン http://www.google.com/design/spec/material-design/introduction.html まずは読み込んでMaterial Designの思想を理解 Google Developers Blog http://googledevelopers.blogspot
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog