今回はfigmaにあるプロトタイプ機能について書いてみようと思います! 業務では専らfigmaを使用しているのですが、figmaのプロトタイプ意外と優秀…!と最近になって思ったので、以下のスクロールの挙動3点を中心にまとめてみます。 縦方向のスクロール横方向のスクロール縦と横方向のスクロールfigmaの公式でも説明されているので、もっと詳しく知りたい!となったらそちらをご参照ください。
こんにちは。Financial Design 2チームのイ ハンソルです。 わずか数年前までは、開発が完了するまで、自分のデザインが実際にユーザーたちにどのように受け止められているか分かりづらかったと思います。 また、デザインのモーションを関係部署に説明するには口頭で「スルスルっとした感じ」とか「シュンッと出るように」などの表現を使いながらコミュニケーションをとったため時間もかかりました。 しかし、この頃はデザイン業務をより効率的に進めるための多彩なプロセスが開発されていますが、その中の一つがプロトタイピングです。 プロトタイピング(protoyping)とは?プロトタイプ(prototype)は辞書によると「本格的な商品化に先立ち、性能を検証·改善するために簡単にコア機能のみを組み込んで製作した基本モデルや 試製品」を指し、既に機械、自動車、建築、医療など様々な分野で使い勝手を検証する方
1-1. Figmaの概要UIデザインUXデザインプロトタイピングデザインの共同制作から共有まで、チーム作業に強いUIデザインツール『Figma』について紹介します。実際にどんなシーンで活用されているのか、Figmaを利用するメリットとデメリットについても解説します。 公開日:2019/04/19最終更新日:2021/01/28 1.Figmaって何?Figmaは2016年9月に正式リリースされたUIデザインツールです。 リリースの時点でデスクトップアプリケーションだけではなく、ブラウザでもデザインの作成が可能な点で革新的でした。Windows, Mac, Linux やChromebookといろいろなOSに対応したアプリケーションが提供されています。 また、リアルタイムにコラボレーションできるデザインツールとして徐々に人気が出てきています。 インターフェースは全て英語ですが、徐々に日本で
はじめまして! 今年からクラウドワークスにジョインしました、デザイナーのターナーです。 初投稿となる今回は、インタラクションデザインのためのプロトタイピングツール「Origami Studio」の表現力に心惹かれ 試しに使用してみたので、その所感をレポート致します。 (この記事はOrigami Studioの使い方ではなく、ツールの考察に関する内容です。 ) What is Origami Studio?「Origami Studio」はMacOS上で作動し、実機で画面を確認しながら、アプリのインタラクション、画面遷移を自由度高く表現することができるプロトタイプツールです。 FacebookがAppleのモーショングラフィック作成ツールQuartz Composerをベースに開発し、2016年4月にFacebookの開発者向けイベント『f8』で発表、2017年はじめにスタンドアローンアプリ
こんにちはこんばんは。ハタケです。 タイトル通りこの記事ではフレンドリーにOrigamiStudioの解説をしていくよ OrigamiStudioとはFacebook社が開発したインタラクション型のモックアップ作成アプリケーションだよ。 ProtやFlintoのようなトランジション型プロトタイピングツールと、アニメーションを自由に制御できるAfterEffectのちょうど間にいるようなアプリケーションって覚えてもらえればいいかな? 僕が働いている会社では、自分の作ったデザインをエンジニアさんに引き継ぐ前のアニメーション確認ツールとして使用しているんだ。 ただ、すべて英語だしクセのあるツールだからちょっと学習コストが高めなんだけど、UIをアニメーションまでこだわってデザインするなら覚えておいて損はないぞー! ちなみにこれはMac専用アプリケーションだからWindowsの人はまずMacを買って
ども、UI Designerの清田です。 Origami Studioにて、プロトタイピングする機会があったのですが、あつかいやすさにココロをうたれたのでその魅力をご紹介します。 Origami Studio とは? Facebook社が開発した、Mac上で動作するプロトタイピングデザインツールです。 Made in Origami We created Origami to help us design and build many of our products like Facebook, Messenger and Instagram. We're excited to see what you make in Origami. Facebook社が開発・提供している、Facebookアプリ、MessengerアプリはOrigami Studioを用いて デザイン・プロトタイピング
AndroidのImageViewで画像を画面の横いっぱいに合わせて等倍して配置するのに少し苦労したのでメモ。 普通にScaleTypeでやると思ったように上手くいかない。 FIT_CENTERとかCENTER_CROPとかにしてもViewのサイズに合わせて等倍されるが、画面のサイズに合わせて等倍はされない。 画面横に合わせて等倍するようにするため、Javaのコードで以下の手順で実装した。 ディスプレイの横幅を取得 画像の横幅を取得 ディスプレイの横幅÷画像の横幅で拡大倍率を計算 その拡大倍率をImageViewに適用 ImageViewのidをimg_view, 使う画像のリソースを@mipmap/imageとした時のコードを以下に示した。 [XMLファイル] <ImageView android:src="@mipmap/image" android:id="@+id/img_view
公開日:2020/02/24 更新日:2020/08/03 【Kotlin基礎】ProgressBarでローディング画面を実装する方法を解説 Kotlin View ProgressBar Kotlinでローディング画面を実装する方法が知りたい。 ProgressBarをコードで動的に実装したい。 ProgressBarの表示・非表示を切り替えたい。 Kotlinでローディング画面を実装するにはどうすればいいの?と悩んでいる方、いらっしゃいませんか。Kotlinには、ProgressBarというお手軽にローディング画面を実装することができるViewが存在します。 本記事では、ProgressBarの基本的な実装方法を、サンプルコードを交え、わかりやすく解説しております。 目次
はじめに iOSやAndroidアプリの利用状況把握のツールとして、Firebase Analyticsがあります。導入方法は、以前の記事で書きましたが、この方法のような通常の利用だと、Firebaseの公式ページによるとアプリによってロギングされるイベントは、約1時間の周期でバッチ処理され、まとめてアップロードされます。 通常は、これで十分です。しかし、デバッグ時には、1時間待たないと結果が出ないのは、効率的ではありません。この記事では、デバッグ時に有効なログの出し方を書いていきます。 アプリコンソールにログを出す方法 Xcodeのコンソールに、Firebase Analyticsのログをリアルタイムに出力する方法です。-FIRAnalyticsDebugEnabledを追加してアプリを起動すると、Firebase Analyticsのログがリアルタイムで出力されます。 具体的には、以下
この記事はとある勉強会で身内のために作成したもので、Fragmentをまだあまり使ったことの無い方が、どうしてFragmentを使うのかと、どこから始めればいいのかをまとめたものになります。 Fragment(フラグメント)とは? Fragmentとは、簡単にいうと、コンテンツとライフサイクルを持ったビューです。 プログラミングでいうライフサイクルとは、インスタンスが作成されてから、それが捨てられるまでの一連の流れのことをいいます。 Androidでは、例としてActivity(アクティビティ)だとインスタンスが作成される際にonCreateメソッドが呼ばれ、破棄される際にonDestroyメソッドが呼ばれ、他にも画面の状態によって、onResume・onStart・onPause・onStopなどのメソッドが呼ばれます。 このように、ライフサイクルに応じて呼び出されるメソッドを持っている
はじめに AndroidManifest.xml は、アプリ作成において必須のファイルです。 AndroidManifest.xml には、ファイルにはアプリケーションに関する情報が記載されています。 マニフェストに記載された情報は、Androidシステムに提供されます。 ここには初歩的な内容を自分用の備忘録として残します。 AndroidManifest.xmlの要素 マニフェストで使用している要素の一例です。1 軽く眺める程度で覚えなくていいです。 <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="string"> <permission /> <permission-tree /> <permissio
本稿の対象者 本稿は Gradle の入門記事です。 そもそも Gradle って? apply や compile って実はメソッドなんです。 {} は単なるスコープではなくクロージャなんです。 x = '10' は書けないけど、def y = '10' は書ける。 でも version = '1.0' などは書ける。 これらは Groovy 言語の構文が基本となっている。 そもそも Groovy って? 自身でタスクやプラグインを作ることもできる。 apply plugin: 'java' apply plugin: 'application' repositories { jcenter() } dependencies { compile 'com.google.guava:guava:22.0' testCompile 'junit:junit:4.12' } mainClass
はじめに こちらはAndroid その2 Advent Calendar 2017の16日目の記事です。 アプリ初回起動時に表示されるチュートリアル画面、自前で実装しようとすると 「ViewPagerを使って実装する」「下部にIndicatorも表示するには…」などなど何かと手間がかかりますよね。 「チュートリアルは作りたいけどあまり時間と労力を割きたくない」という方のために、簡単にそれっぽいものが実装出来るwelcome-androidというライブラリをご紹介します。 概要 本家GitHub: https://github.com/stephentuso/welcome-android GithubのREADMEはJavaで書かれていますが、今回は勉強も兼ねてKotlinで書いてみます。 5分程度でこういったカッコイイ感じのチュートリアルが実装出来ます(画像は本家のサンプルアニメーション
大規模なソフトウェア開発は多くの人が関わり、多額の資金が費やされますが、時として社内外の要因によって開発現場が地獄と化す場合もあります。近年ではみずほ銀行の基幹システム開発が書籍化されるほど苦難の道を歩んだことはIT業界で知られていますが、そんな「地獄の開発現場」がかつてUberにも存在したと、元UberのエンジニアであるMcLaren Stanley氏が当時の状況を振り返っています。 Alright folks, gather round and let me tell you the story of (almost) the biggest engineering disaster I’ve ever had the misfortune of being involved in. It’s a tale of politics, architecture and the sunk
はじめに 脱サラして、個人開発アプリだけで生活している、あたか絵師です。 Crieitアドベントカレンダー10日目として、売れるアプリにするためのコツを100個吐き出します。 僕は、個人開発アプリで月6桁の売上を出す感じですが 「売れてるな〜!!」 って感じるのは、1万円/月を超えるぐらいのアプリなので 「売れるアプリ」=「コンスタントに1万円/月ぐらい売り上げるアプリ」 と考えて下さい。 何となく書いていたら ・ASO ・CS ・UX ・企画 ・マーケティング ・運用 に分かれる気がしたので、その分類でいきますよ! 普段もたまに役立つことをつぶやいている可能性があるので、twitterフォローもどうぞ🐔 👉👉 https://twitter.com/atagon 👈👈 noteとzennの記事も気になったらどうぞ 📱 食えるアプリにするための細かい工夫 (Zenn) 📱 売
本記事はAndroid Advent Calendar 2020の2020/12/01分です。 初っ端ということなので、2020年末と2021年頭でのAndroidエンジニアとして初めて業務でやる場合に抑えておいたほうが良い最低限の部分を書いていこうと思います。(ツッコミ待ちです) 対象 2021年3月ぐらいまでに !!業務!! でAndroidアプリを作らされる事になった可愛そうな人が居たとします この人は手続き型言語でオブジェクト指向プログラミングができる知識があり、Androidアプリもなんとなく趣味で作ったこともあるぐらいのレベル感です(なので上長からいきなりお前Android担当なと言われた) 最低限のAndroidアプリの作成の知識はあるものとします(画面の表示にはActivityがいるよとかは書かない) ゲームは対象外です 業務でAndroidアプリを作ることを想定しています
はじめに iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴からデザインの原則、それぞれの部品が何のためにデザインされたのか、どう利用するのか、iOS を構成する UI の基本指針がまとまっています。 よく、『磨りガラス効果がかっこいい』『アニメーションしておくとイケてる』『ボタンは右配置の方が右手で押しやすい』『流行っているから』……などの観点によって UI の設計が決められることがありますが、そういうことではないのです。いや実際かっこいいかわいいだとかの感覚は重要なのですが、見た目が何となくそれっぽいだけでは優れた UI とは言えません。磨りガラスでも何でも必ずそこには意味があります。だからこそ HIG に書かれた思想
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く