はじめてのアプリUIデザイン。フローやWebサイトとの違いを解説します！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの花ちゃんです！ 最近Webサイト制作だけではなく、アプリ開発にも携わることが増えてきました。 その中で「Webサイト制作に似ているな〜」と思ったり、「あれ、ここは違う！」といった気づきがたくさんありました。前職ではソーシャルゲームのUIデザインを担当していましたが、Web業界に転職したときも、まったく同じことを思ったのを覚えています。 今回は、Webデザイナーの方がはじめて「アプリのUIデザイン」をするときに必要な知識や考え方、意識したほうがよいことを、フェーズごとにまとめてみました。 アプリにおけるUIデザインとは そもそも「UI」とは、ユーザーインターフェース（User Interface）の略で、日本語では「ユーザーとの接点・接触⾯」という意味になります。 UIはユーザーの目に触れ使用する部分すべてを指し、このUIを通してコンピューターとユーザーは情報のやりと
無料で使える「Ctrl＋C」でコピーしたあらゆる内容を保存して再利用＆複数PCでの共有もできる「Ditto」を使ってみた
「Ditto」は「Ctrl＋C」でクリップボードにコピーした内容の履歴を表示したり、別のPCにクリップボードの内容を送信したりすることができる無料のクリップボードマネージャーです。どのように使えるのか実際に試してみました。 Ditto clipboard manager https://ditto-cp.sourceforge.io/ まずは公式サイトに行き、ツールをダウンロードします。今回は64bitのPCにインストールするので「Download 64bit」をクリック。 インストーラーをダブルクリックして起動します。 「OK」をクリック。 インストール先は特に変更せず「次へ」をクリックします。 「次へ」をクリック。 「完了」をクリックします。 ネットワークへのアクセス許可を求められるので「許可」をクリック。 Dittoが起動しました。タスクトレイのアイコンをクリックするか、「Ctrl＋
App Motion - Mobile motion design gallery
Explore the best, hand-picked mobile app motion design
ノーコード開発ツール「FlutterFlow」とは？機能や特徴を解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Technology部の菊池です。 この記事ではGoogle社が提供するブラウザベースのノーコード開発ツール「FlutterFlow」について解説します。 FlutterFlowの機能を知りたい どういったケースで採用すればいいのか知りたい というみなさんは、ぜひご参考になさってください。 FlutterFlowとは FlutterFlowとは、Google社が提供しているノーコード型モバイルアプリケーション開発サービスです。 特徴はGUI操作で直感的にハイブリッドアプリケーション開発をおこなえること。作成されたアプリはFlutterというプログラミング言語で構築され、コードのエクスポートも可能です。 Flutterについて Flutterとは、Google社が作成したクロスプラットフォーム用のプログラミング言語です。開発者は単一のコードベースでiOS、Android、Web、およびデスク
無料でファイルをスマホ・PC間で送受信できるアプリ「LANDrop」レビュー、iOS・Android・Windows・macOS・Linux対応＆アカウント作成不要＆インターネット接続も不要でLANだけでOK
スマートフォン同士やスマートフォンとPC間のファイル送受信を行うにはAirDropやニアバイシェアなどの無線ファイル送受信機能を使うと便利ですが、「iOSとWindows」「iOSとAndroid」といった組み合わせではOS標準のファイル送受信機能を使えません。オープンソースで開発されている「LANDrop」はWindows、macOS、Linux、iOS、Androidに対応したファイル送受信アプリで、簡単操作でファイルを送受信可能とのこと。スマートフォンで撮影した写真をPCへ送信する際などに便利そうだったので、実際にインストールする手順や使い方を確かめてみました。 LANDrop - Drop any files to any devices on your LAN https://landrop.app/ ・目次 ◆1：iOSとWindowsでファイルを送受信する方法 ◆2：PC起動
ChatGPTの次はこれ！無料で利用できるAI生成ツールまとめリスト
ChatGPTの世界的なブームのおかげで、あらゆるツールがAIを活用するという、新しい時代に突入しました。 しかし、このAIブームは、あっという間に飽和状態となり、似たようなサービスがいくつも乱立する、カオスな状態となっています。 もちろん、さまざまなAIツールを試すのは、長所と短所を理解できる良い方法です。 実際、AIツールの多くは利用の制限がありますが、使うまで気づかないということもよく聞きます。 しかも、「AIツールが多すぎて、どれから使えばいいのか分からない」なんてことも。 ここでは、無料で利用できるAI生成ツールのまとめリストをご紹介します。 クリエイター向けおすすめAIツールと一緒に活用してみましょう。 AIビジュアル編集ツール Adobe : 現場の標準ツールが強力にパワーアップ。背景から人物やものを切り抜いたり、不要なものを削除するなど、時間がかかっていた作業も一瞬で完了。
無料でプロ級品質のフィルム風ムービーを作成できる「Filmbox Lite」レビュー
カメラで撮影したムービーにフィルム風の加工を施すと、いつもと雰囲気の異なるムービーやレトロ感を重視したムービーを作成できます。10万円以上するプロ向けのフィルム風加工プラグイン「Filmbox」の簡易版である「Filmbox Lite」は、無料ながら有料版と同等の品質でフィルム風ムービーを作成できるとのこと。どんなムービーに仕上げられるのか気になったので、実際にインストールして使ってみました。 Filmbox – Motion picture film emulation. For DaVinci Resolve. https://videovillage.co/filmbox/ ・目次 ◆1：DaVinci Resolveのインストール ◆2：DaVinci Resolveの日本語化 ◆3：Filmbox Liteのインストール ◆4：Filmbox Liteでフィルム風ムービーを作成す
無料で二要素認証ができ安全にバックアップ＆デバイス間でエクスポートもできるオープンソースアプリ「Aegis Authenticator」レビュー
ウェブサービス利用時のセキュリティを強固にする手法の1つに「ワンタイムパスワード発行アプリを用いて二要素認証を行う」とうものがあります。しかし、ワンタイムパスワード発行アプリとして広く使われている「Google認証システム(Google Authenticator)」には「アプリ公開から長らくエクスポート機能がサポートされていなかった」「端末を壊すとバックアップコードの再発行が不可能になる」といった問題が存在しています。オープンソースで開発されている「Aegis Authenticator」なら、無料でワンタイムパスワード発行環境を整えつつ「認証情報を自由にエクスポート可能」「ワンタイムパスワードの閲覧にパスコードや指紋認証を要求可能」といった便利機能も使えるとのことなので、実際にインストールする手順や使い方をまとめてみました。 Aegis Authenticator - Secure 2
古くて余っているスマホを防犯カメラやペット監視カメラとして復活できる「Alfred Camera」レビュー
スマートフォンを新機種に買い替えていると、家に使っていないスマートフォンがどんどんたまってしまいます。無料アプリ「Alfred Camera」を使えば、余ったスマートフォンを防犯カメラやペット監視カメラとして活用できるとのこと。手軽に使えて便利そうだったので、実際にAlfred Cameraを使って監視システムを構築する手順を確認してみました。 Alfred Camera | Simple Security at Your Fingertips https://alfred.camera/ Alfred CameraにはiOS版とAndroid版が存在しますが、今回はiOS版を使ってみます。 また、Alfred Cameraを使うには「閲覧用のスマートフォン」と「撮影用のスマートフォン」が必要。今回はiPhone 12(左)を閲覧用、iPhone 5s(右)を撮影用に使います。 まずは、閲
無料で二要素認証のワンタイムパスワードを発行可能＆デバイス間エクスポートもできるオープンソースアプリ「Aegis Authenticator」、特定の企業に依存する危険性がなくなり安全
ウェブサービスを安全に使用する手段の1つとして、「ワンタイムパスワード発行サービスを利用する」という方法があります。ワンタイムパスワードを生成するアプリとしては「Google Authenticator」「Microsoft Authenticator」「Authy」といったアプリが広く利用されていますが、これらのアプリはGoogleやMicrosoftなどの企業によって開発されたものであり、透明性や信頼性に不安を感じる人もいるはず。オープンソースで開発されているAndroid向けのワンタイムパスワード発行アプリ「Aegis Authenticator」を使えば、特定の企業に依存せず二要素認証によるセキュリティ強化を実行できるだけでなく、Google Authenticatorでは不可能な「ワンタイムパスワードの不可視化」なども可能となります。 Aegis Authenticator -
画像の切り抜きや背景の除去、透過できる無料オンラインツール15選
画像の切り抜きや背景の除去、透過できる無料オンラインツール15選 自動で３秒！話題のFigmaプラグインと一緒に 「できるだけラクに、写真の切り抜きや、背景のみを消したい」 そんなわがままも叶えてくれる、魔法のような、無料のオンラインツールを利用してみませんか。 さらに、写真を放り込むだけで、背景の切り抜きをAIが自動で、ほんの数秒で完了というから驚きです。 今回は、実際にすべてのツールを試し、本当に使いたいと思ったツールのみをセレクト。 背景除去ツールを使うことで、被写体のみを切り抜き、透明な背景を作ることができるので、さまざまなデザインに配置できます。 ECサイトやWebサイトの、商品切り抜きにもおすすめです。 すべて無料！画像の切り抜きや背景の除去、透過できるオンラインツールまとめ Adobe Express フォトショップを提供するAdobe（アドビ）による、スキルの有無を問わず、
無料＆面倒な操作なしで写真の切り抜きが簡単にできる「PhotoRoom」を使ってみた
人物写真や商品写真などを加工する際に使うソフトウェアといえば一番にAdobe Photoshopの名前が挙がりますが、加工する内容が写真の切り抜きだけなのであれば、有料ソフトを購入することなくうまく簡単に処理したいものです。そんな時に役立ちそうな無料ツールが「PhotoRoom」で、専用のモバイルアプリだけでなくウェブアプリ版もあり、ユーザー登録なしでも使えるツールとなっています。 PhotoRoom - Remove Background and Create Product Pictures https://www.photoroom.com/ 今回はPhotoRoomのウェブアプリ版を使用します。上記URLにアクセスし、「Try it on the web」をクリック。 使い方は簡単で、画面上に切り抜きしたい写真をドラッグ＆ドロップするだけ。 今回使用したのは以下、第3世代iPhon
YouTubeやニコニコ動画からムービーのダウンロード＆動画編集も簡単にできる超絶多機能な「VideoProc Converter」のお手軽「録画」機能でPC/iPhone/iPadの画面を録画してみた
YouTubeやTikTokの隆盛によって誰でも動画を投稿できる時代が到来したわけですが、PCやスマートフォンの画面を録画するとなると「なんだか難しそう……」と思いがち。DVDのリッピングやYouTube・ニコニコ動画などのダウンロードまでできる多機能ソフトウェア「VideoProc Converter(旧名：VideoProc)」なら、PCやiPhone・iPadの画面をカンタン操作で録画できるとのことなので、実際に使ってみました。 【公式】VideoProc Converter（旧名：VideoProc）- 簡単かつ多機能な動画編集・動画処理ソフトを無料でダウンロード。おすすめ使いやすい無料動画処理ソフトです。 https://jp.videoproc.com/ ・目次 ◆手軽にPCの画面やウェブカメラの映像を録画できる「録画」機能を使ってみた ◆Mac版の「お手軽iPhone/iPa
captureでカメラ起動（知名度が低いウェブ標準ひとりAdvent Calendar 2021 – 17日目） | Ginpen.com
知名度が低いウェブ標準ひとり Advent Calendar 2021 – 17 日目 今日は capture です。カメラを起動します。 HTML attribute: capture – HTML: HyperText Markup Language | MDN デモ：https://codepen.io/ginpei/pen/xxXxvbX HTML Media Capture | Can I use… Support tables for HTML5, CSS3, etc あ、なんか CodePen のランダム URL 部分がちょっと格好良い……。 基本的な使い方 デモはスマホで見てね。 あとは CSS で良い感じにカメラボタンっぽくしてやると良さそう。 PC 用のウェブブラウザーは未対応だけど普通にファイルを開くだけなので大きな問題ではないかと。 値 capture, captu
非エンジニアでも簡単にできる画像圧縮の方法。PNGとJPGの違いも解説します | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
画像最適化に必要なサービスとツール まずは、Webブラウザ上で画像圧縮ができるサイトが色々あるなかで、コレ！ というサービス2つと、Macで使えるフリーソフトを紹介します。 Squoosh（Google） Squoosh JPG, PNG, WebPに変換が可能で、一枚一枚の画質を確認、調整しながら丁寧に変換できます。さらに画質やフィルタを設定する Edit という小窓の右上、[ >_ ] こんな感じのアイコンをクリックすると、設定した内容のCLIコマンドをコピーできます。 そのため、設定が決まったらコードをコピーしてコマンドラインで一気に変換なんてことも可能になります。素晴らしい。 「Commandとかは無理、だけど数十枚〜一括で変換したい」という方にとっては、一枚ずつしか変換できないというのは厳しいですよね。その場合はもう一つのサービスが使えます 以上、コマンドを叩くか、上記2サービス
レスポンシブデザインの確認に便利なツールが登場！複数のデバイスサイズで同時確認できる優れもの -Responsivize
Webページのレスポンシブの確認が簡単にできる、新しい無料アプリがリリースされました！ iPhone, Android, Pixelのスマホをはじめ、タブレット、ラップトップ、ワイドスクリーンなどのサイズでWebページを表示して確認ができます。 Windows, macOS, Linux対応のアプリで、しかもオープンソースです！ Responsivize Responsivize -GitHub Responsivizeの特徴 Responsivizeのダウンロード Responsivizeの使い方 Responsivizeの特徴 Responsivizeは、レスポンシブ対応のWebページをさまざまなデバイスのサイズで確認できる便利ツールです！ 当方の日本語環境（M1 Mac, Windows10）で問題なく動作しました。 Responsivize レスポンシブWebサイトの確認が簡単にで
【最新ブラシ紹介！】Adobe Frescoを使って簡単にいい感じの絵を描く方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
僕は正直手描きの一点モノなところに価値があると感じているようなアナログ画家なので、Frescoがなければ今デジタルで絵を描いてなかったと思います。そのくらいこのアプリを気に入ってます。 2021最新ブラシ紹介 ある日iPadでFrescoを立ち上げると新機能のお知らせがきてました。「2021年夏のブラシ」とのこと。気になるので確認してみましょう。 ブラシの追加方法 ブラシアイコンをタップすると一番下のところに「＋」マークがありますのでこちらをタップして「新しいブラシを見つける」を選択してみましょう。 すると、このように使用可能なブラシセットが表示されますので「フォロー」をタップします。 これだけでライブラリに追加されます。超簡単です。 気に入ったブラシをお気に入りへ 追加したブラシセットを開いてどんなブラシがあるのか試し書きしていきます。 筆圧で大きさが変わる草のブラシがありました! 「B
無料と有料のおすすめ動画編集ソフト・アプリ8選！選び方のポイントも | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、みおです！ 今回の記事では、これから動画編集にチャレンジしたいけれども、たくさんありすぎでどのソフトがいいのか分からない！とお悩みの方に向けて、動画編集ソフトを選ぶポイントやおすすめの編集ソフトを紹介していきます。 初心者〜プロ向けのソフトまで無料と有料に分けて幅広く紹介していきますが、どちらかと言えば動画編集ソフトを触ったことが無い初心者の方向けの記事となっています。ぜひ自分に合うソフトを探してみてください！ 動画編集ソフトを選ぶ前に 動画編集ソフトといっても初心者の方に優しいものからプロ仕様のものまでたくさんあります。まずは、自分に合うソフトを選ぶために選ぶポイントを把握することが大事です。 PCのOS（WindowsかMacか)やスペックは？ 自分のPCがWindowsかMacか、そしてスペックを確認しましょう。 自分のPCのOSやスペックによって使える動画編集ソフトは変
情報満載のカーナビアプリ「ドライブサポーター by NAVITIME」レビュー
地図の表示からルート検索、音声案内まで、ドライブに欠かせない情報を表示してくれる「カーナビ」ですが、車載のものは高額だったり地図の更新手続きが必要だったりという不便な点があります。また、基本的にビルトインなので、いざ使ってみて合わないカーナビだったときにただちに別のものにすることができないのもつらいところ。それならば……ということで、いろいろと出ているスマートフォン向けのカーナビアプリを使ってみることにしました。まずは乗換案内＆地図アプリである「NAVITIME」が提供する「ドライブサポーター by NAVITIME」です。 NAVITIMEドライブサポーター | カーナビアプリの決定版 渋滞/オービス/取締も https://products.navitime.co.jp/service/drive/ 「ドライブサポーター by NAVITIME (カーナビ)」をApp Storeで h
すべてのアプリから色を取得できる！シンプルで使いやすく、高性能なUIデザイン用の無料カラーピッカー -Pika
ブラウザに表示されたWebページはもちろん、Photoshop, Illustratorをはじめとするすべてのアプリからカラーをすくうことができる、シンプルで使いやすい高性能なカラーピッカーを紹介します。 macOS対応のアプリで、オープンソースなので商用でも無料で利用できます。 カラー値は、HEX、RGB、HSB、HSLに対応。 ネイティブで非常に高速 macOS 10.15 Catalina以降対応のアプリです。 アクセシビリティ重視 カラーを比較して、WCAGへの準拠をすばやく確認できます。 コンパクト メニューバーに対応、必要のないときに邪魔になりません。 ログイン時に起動 設定からログイン時に起動を選択、いつでもクリックまたはショートカットでアクセスできます。 アクセスが簡単 設定からグローバルホットキーを設定できます（⇧⌘Dがお勧め）。 カラーのフォーマット HEX、RGB、H
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
