サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
本連載では、SmartBankのデザイナーが「デザイナーの業務効率化」をテーマに、FigmaやNotionを活用した「業務効率改善のTips」を紹介していきます。今回焦点を当てるのは「Figmaを活用し、職種を超えて全員でデザインするための工夫」についてです。 こんにちは！SmartBankでデザイナーをしている福嶋（putchom）です。2022年9月にふたりめのデザイナーとしてSmartBankに入社し、現在はおもにプロダクトのUIをデザインしたり、デザインシステムを設計したりしています。私たちは、「B/43」というVisaプリペイドカードと家計簿アプリがひとつになった新ジャンルのサービス「家計簿プリカ」を運営しているのですが、チームメンバー全員でサービスをデザインできるように、デザインを透明化し目線を揃えた上で有意義な議論ができるようにしています。 第6回ではプロトタイピングや詳細
iPhone, Galaxyをはじめ、Apple Watch, iMac,MacBookなど、人気のあるデバイスやブラウザのモックアップ素材を紹介します。ベクターなので使い勝手もよく、プレゼンにもぴったりです。 ベクター素材は、Figma用とSktch用の2種類が揃っています。 Vector Mockups Library Vector Mockups Libraryはベクターのモックアップ素材、MITライセンスで商用プロジェクトでも無料で利用できます。 デバイス・ブラウザは、下記の通り。iPhone 12iPhone SE 2iPhone SE Samsung Galaxy S20Apple Watch iMacMacBook SafariChrome ダウンロードは、下記ページから。 まずは、「Download」ボタンをクリックします。
何かを作りたいときは、エディターをいきなり起動してはいけません。 エディターを閉じて、まずはイメージをまとめることに集中しましょう。 なぜこの文章が必要か なぜ何かを作る前にイメージをまとめる必要があるのでしょうか？ 頭の中には完璧な作りたいもののイメージがあることでしょう。 であれば今すぐにでもプログラミングを始めるのが賢明なように思えます。 ですがそうしてはいけません。理由は「作りたいもののイメージは単なる幻想だから です」。 頭のなかにあるイメージはとても素晴らしいものですが、多くの場合は曖昧で、触れられない、価値を検証できないものです。 それを一旦書き出して、まとめていく方法を知っておきましょう。 まとめていく中で作るものがより明確になり、自分でも気づかない価値を発見できます。 作るものをまとめて検証することで、作り始めた後の手戻りを防ぎます 作るものをまとめて明確にすることで、作
UXのベンチマークツール、プロトタイピングツール、VRを使ってデザインするツールなど、最新のデザインツールやリソースを紹介します。 最新のデザインツール、リソース、アプリ、参考書、トレンドなどを追いかけるだけでも大変なのに、そこから役に立っておもしろいものを探すのは、さらに大変です。そこで誰が見ても優れているデザインツールとリソースを紹介するProduct Hunt collectionを始めました。SitePointで使っているものもありますよ。 Product Huntのコレクションをフォローすれば、私たち（編集者Alex Walkerと私Daniel Schwarz）がチェックして価値があると判断したものをコレクションに加えたときに通知が届きます。また、もっともすぐれたツールを選んで月ごとに記事にしています。2017年8月の選りすぐりのデザインプロダクトを紹介します。 FullSto
[fancy_box]海外デザインブログDesignModoで公開された「The What, Why, and How of Mockups – Designmodo」より許可をもらい日本語抄訳しています。[/fancy_box] 今回はモックアップの作成方法を見ていく前に、モックアップとは一体何なのか、何ができるのか詳しく見ていきましょう。 TheGuide to Wireframing（詳しい紹介はこちらのエントリーで触れています。）でも取り上げていますが、モックアップとワイヤーフレームフレーム、そしてプロトタイプはしばしば混乱しやすく、それぞれの正確な情報を見つけにくくなります。しかしどれもUXデザインプロセスにおいて必要不可欠で、より最新の注意を払う必要があります。 まずはじめに、モックアップ作業がどのようにデザインプロセスにフィットするのか見ていきましょう。 各用語の意味を知ろ
またフラットデザインネタになってしまいますが、シンプルで使い勝手の良さそうなUIデザインコレクションBlog/Magazine FlatUI Kitが公開されていたので、今回はご紹介します。 Webサイトやブログサイトに必要なデザインアイテムを一式揃えているので、後はパズルの様に組み合わせれば、フラットデザインを採用した、デザインレイアウトが完成です。もちろん無料ダウンロードとなっています。 詳細は以下から。 フラットデザインを再現する、UIデザインキットBlog/Magazine FlatUI Kitは、Photoshopで編集可能なPSDファイルで収録されており、あらかじめウェブデザイン制作に必要なパーツまとめられています。ブログ用レイアウトも揃っているので、すぐにモックアップを作成することも可能です。 以下は収録されているUIデザインサンプルとなります。 ナビゲーションメニュー
苦労して完成させたデザイン、せっかくならより魅力的に演出したいもの。しかし、面倒なデザイン編集作業もしたくない。 そんなときは、作品イメージをはめ込む作業のみで、デザインのクオリティを高めることができる Photoshop 用ファイルを利用してみましょう。今回はクライアント向けプレゼン資料や、ブランディングに欠かせない無料のモックアップ用PSDファイルをまとめてご紹介します。 まるで本当に撮影したような「リアルな仕上がり」を追求したフリー素材が揃います。ここぞというときに使いたいモックアップはいかがでしょう。 詳細は以下から。 モックアップとは？ では、モックアップとは何でしょう。すこし調べてみると以下のように記述されています。 モックアップとは、工業製品の設計・デザイン段階で試作される、外見を実物そっくりに似せて作られた実物大の模型のこと。 ソフトウェアやWebサイト、印刷物などのデザイ
スマホアプリは画面が小さいこともあってデザインをいろいろ試して確認していかなければなりません。そこで使えるのがモックアップ作成ツールなのですが、そのために専用ソフトウェアを購入するのは躊躇してしまう人も多いはずです。そこで今回は使い慣れたPowerPointやKeynoteといったプレゼン作成ソフトウェアを使ってスマホアプリデザインのモックアップが作れるテンプレートやプラグインを提供しているサイトを紹介します。Webサービスとは違って、ダウンロードしてしまえばオフラインでも作成できるのが魅力です。mBaaSお役立ちブログ トップ> ブログ> Tips>PowerPoint/Keynoteでスマホアプリのモックアップを作れるテンプレート/プラグインを一挙紹介！ スマホアプリは画面が小さいこともあってデザインをいろいろ試して確認していかなければなりません。そこで使えるのがモックアップ作成ツー
ブログを制作する時にやったこと、二回目はサイトデザインを行います。 今回作るのはデザインカンプというものです。 デザインカンプとはWebサイト制作の場合、ワイヤーフレームに肉付けをした完成形のイメージのことで、人によってはモックアップと呼ぶかたもおられるようです。 ちなみにモックアップは実物に似せた模型という意味だそうで、主にプロダクトデザインで使われているようです。 僕も次回からはモックアップと呼ぶことにします。なぜならカッコいいから。 制作ツール Illustrator（イラストレーター）やPhotoshop（フォトショップ）など、自身が慣れているツールで制作しましょう。 ここではPhotoshopでやっていきます。いいかしら？ 初めて作る方は環境を整えましょう！Adobe（アドビ）から体験版が提供されてますので、体験版を使用するかGIMP（ギンプ）というフリーソフトがいいとおもいます
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
