UIデザインツール「InVision Studio」の使い方【初心者向け】
2018年、ついに待望のデザインツール「InVision Studio」がリリースされました。InVision StudioはWebサイトやスマホアプリなどの画面デザインを作る専用のツールで、ベクタードローイング・レスポンシブ対応・プロトタイピング作成機能・アニメーション編集・チーム間での共有・座標、サイズ、カラーなどのエンジニア向け確認画面などが備わっています。UIデザインツールとしては、他にもSketch・Adobe XD・Figmaなどが類似のものとして挙げられます。 この「InVision Studio」の使い方では、初心者の方向けに主な機能についてお伝えします。 目次 InVision Studioを手に入れるには 起動・ログイン デバイスの選択とアートボード作成 オブジェクトの作成と編集パネル レイアウトについて アニメーションの作り方 スクロールの設定について コンポーネント
2017年10月版Google Homeに対応しているサービス・アプリ12選
Google Homeが我が家に届いたので、色々使い方を試したり、何か自分で作れないか試行錯誤しています。 音楽の再生をしてみたり、Chromecastと連携してNetflixをテレビで再生してみたり。「Siriって知ってる？」って聞いてみたり。 で、大体基本の機能は色々試してみたので、そろそろ他に連携しているサービスで遊んでみたいなと思ったんですけど、それがまとまってる情報がなかなか見つからなくて困ったので、自分でまとめることにしました。 ※音楽・動画サービスは除きました ※ニュース系も一旦除きました、これは別の記事で書きたいと思います 全て試してみたんですが、Actions on Googleで提供されているサービスはまだ使えませんでした。今後、数週間かけて順次使えるようになるみたいです。ザッパラス占いだけは試すことができました。 10月24日にアシスタント対応アプリの日本語版が正式リ
MERY社がライターの求人を開始。いよいよ復活か
いつの間にかDeNAと小学館の共同出資会社「株式会社MERY」のコーポレートサイトが公開されていました。
アプリデザインに入る前の準備が大切～『UIデザイナーのためのSketch入門＆実践ガイド』著者・吉竹遼氏の仕事術とは
iOS・Androidアプリが一般的になるにつれて、デザインツールにも新しいヒーローが登場した。オランダのデン・ハーグで2008年に創業したBogemian Coding社の『Sketch』だ。2013年にAdobe社の『Fireworks』が開発中止となったタイミングから風向きが変わり、現在では豊富なプラグインと直感的な操作性で注目を集めている。 『Sketch』でのUIデザインが日本でも普及していく中、『UIデザイナーのための Sketch入門&実践ガイド』がビー・エヌ・エヌ新社から2017年5月23日に発売された。 ※UIデザインのおすすめ本として、テクニカルクリエイターズ.comでも以前から宣伝してきた書籍である。 著者は吉竹遼氏（以下、よしたけさん）。学生時代からデザインを専攻し、社会に出た時からアプリ開発の現場で知見を深めてきた人物だ。 今回、同書籍の著者として、よしたけさんに
Auto Layout for Sketchで複数の画面サイズのデザインを効率化しよう
Sketchで作ったデザインをObjective-CやSwiftで書き出すツール「Sketch to Code」を開発中のAnimaから、Sketch用プラグインの「Auto Layout for Sketch」がリリースされました。 Auto Layout for Sketch Animaって何？という方はこちら！ これまで書いたAnima関連の記事 使い方 インストール まずはこちらのページからプラグインをダウンロードします。 ダウンロードしたSketchプラグインのファイルを開くと自動的にインストールされます。 ※Sketch to Codeのβ版をインストールしている場合、Sketch to CodeにAuto Layoutが上書きされてしまいます。Sketch to Code β版にはAuto Layout機能が含まれているのでインストールの必要はありません。 デザインを作成する
InVisionが新境地へ…？Craftに新機能「FREEHAND」が追加。共有・コメントが自由自在に！
InVisionが新境地へ…？Craftに新機能「FREEHAND」が追加。共有・コメントが自由自在に！ InVisionからCraftに新しい機能として「FREEHAND」が追加されたと発表されました。 CRAFT FREEHAND—A FAST, FLEXIBLE NEW WAY TO COLLABORATE IN REAL TIME Watch “Craft Freehand” on #Vimeo https://t.co/MSRPxTBkbA — テクニカルクリエイター.com (@tech_creator) 2017年2月15日 Craftの最新版をインストールした状態でSketchを立ち上げてみたのですが、なぜかFreehandのボタンが表示されません。バグ…？ 追記：原因が判明しました！FREEHAND続報：Craftのバージョンを1.7.0にすると使えるようになります 動画
Sketchがレスポンシブデザインに対応した神アップデート！Smart Symbol Resizingをリリース
Sketchがレスポンシブデザインに対応した神アップデート！Smart Symbol Resizingをリリース 昨日アップデートされたSketchのバージョン39からSmart Symbol Resizingという機能が追加されました。 これがとんでもなく便利な機能だったので紹介します。 Smart Symbol Resizingとは？ 今までシンボルをリサイズしようとするとこんな感じでシンボルの中身まで変形してしまうので、デバイスのサイズが複数になったときにシンボルの再利用ができないという問題がありました。 それを解決してくれるのがこの「Smart Symbol Resizing」です。 ・Stretch ・Pin to corner ・Resize ・Float in place と４つの設定があり、可変してもいい部分と可変にともなって相対的に位置を移動する部分とを分けてシンボルを作
Sketch + CraftにiOS10のGUIを突っ込んで爆速でデザイン作る方法
Facebookがデザイナー向けに無料で公開しているデザインリソースにiOS10のGUIパーツがあるのですが、SketchやPSDのファイル形式以外にCraftのLibraryに対応したものがリリースされたので試してみました。 iOS 10 GUIのファイルをダウンロード iOS 10 GUI (iPhone)のDownloadボタンからCraftを選択してファイルをダウンロードします。 ダウンロードしたファイルをLibraryに追加する SketchとCraftを起動し、Craftのタブの中からLibraryをクリック。 Import Libraryをクリックして、先程ダウンロードしたファイルの中から「Facebook iOS 10 iPhone.library」というフォルダを選択します。 Libraryから追加したいパーツを追加する Importが成功すると、GUIパーツの一覧が表示
InVisionがJIRAと提携。InVision for JIRAがリリース！
またInVisionさんがやってくれたようです。 プロジェクト管理ツールのJIRAとパートナーシップを組んで、JIRA上でInVisionのレビューができるアドオンがリリースされました。 INVISION FOR JIRA—TACKLE ISSUES TOGETHER InVision for JIRA JIRAって何？？ JIRAはアジャイル開発のプロジェクトを管理するためのツールです。プロジェクトの計画を立てたりタスクやバグの管理ができるソフトウェアで、世界中でたくさんの開発者に使われているサービスです。開発はアトラシアン社によるもの。アトラシアン社は他にもGitリポジトリ管理ツールのBitBucketや、ドキュメント管理ツールのConfluence、チャットツールのHipChatなどコラボレーションのためのツールを多数提供していて、それらがアプリ間で連携することによってよりスムーズな
プロトタイピングツールAtomicがSketch Pluginをリリース。
UIデザイン＆プロトタイピングツールのAtomicがSketch Pluginをリリースしました。 Complete your workflow with the Atomic Sketch Plugin Our Sketch Plugin for exporting to Atomic is here Atomicって？ Atomicはブラウザ上でUIデザインを作ったり、ホットスポットという機能でアニメーション付きのプロトタイピングができるツールです。タイムライン上でアニメーションを編集できるので、ちょっとFlashぽい操作性です。 Sketch Pluginで出来ること 今回出たSketch PluginではSketch上で作ったデザインをAtomicの中のプロジェクトにエクスポートしてアップロードが出来ます。 しかもAtomic上に書き出されたデザインはちゃんとパーツ・レイヤーごとに
Backlogのデザインが大幅リニューアル！画面遷移の少ない、より快適なインターフェースへ
昨日飛び込んできたニュースです。 〜より楽しく仕事に集中できるように〜Backlogのデザインを大幅にアップデートします！ Web制作に関わる方なら誰もが一度は触れたことがあるんではないでしょうか？プロジェクト管理ツールのBacklogのデザインが大幅リニューアルするようです。 コレが今のデザイン それが、こうなる！ うおーまるでもうBacklogではありません！印象がぜんぜん違います。 そして変わるのは雰囲気だけではありません。 最近のWebアプリケーションは画面の移動が少なく、より効率的に作業できるものが増えています。そのような新しいユーザーインターフェイスに対応し、継続的に改善するための下地を作ります。 SPAっぽい作りになってるんでしょうか。画面遷移を減らして快適に操作ができるように変更されていくようです。 なおリニューアルのスケジュールも発表されており ・9月ベータリリース（以前
Apple Design Awards 2016が発表。選ばれた12アプリを紹介【前編】
昨日、Apple Design Awards 2016が発表されました。選出されたのは全部で12アプリ。どれも美しいUIと新しいアイデアに満ちたアプリばかりです！今回はそのうち6つのアプリを紹介します。 3D4Medicalの解剖アプリ「Complete Anatomy」 iPad Proの発表時にAdobeやMicrosoftと合わせて発表された「Complete Anatomy」 Apple Pencilの特性を最大限生かしたデザインになっています。 習慣づけを手助けするToDoアプリ「Streaks」 習慣化したいけどなかなかできない…そんなときはこの「Streaks」を使ってみてはどうでしょう？自分が毎日やりたいことを登録して記録していくと、記録された内容が美しく視覚化されます。通知によるやり忘れ防止機能や、AppleWatchにも対応しています。 tvOSにも対応したフィットネス
UI・UXデザイナー募集中！と書いてある求人案内の罠。
たまたま転職サイトをチラ見していたら、ちょっとあれれ？となる内容が書かれていました。社名を出さずにぼんやり紹介すると… 「UI/UXデザイナー募集」 ・Webメディア運営をしています ・Photoshop、IllustratorでのWebデザイン業務 ・HTML、CSS、JavaScriptを使ったコーディング業務 あれ？これって業務内容を見ると全然UIデザイナーでもないしUXデザイナーでもない気が…。僕は思わずサッと「×」でブラウザを閉じました。 UI/UXデザイナーって書けば応募がたくさん来るの？ 何年かバズワードだったUI/UXという言葉ですが、昔よりは良くなったとはいえ、まだまだ正しく意味が伝わっているのは一部だけなんだなと感じます。きちんとわかっている会社はUIデザイナーとUXデザイナーの業務領域を理解して正しい求人案内を出していますが、いまだに「それって何をさせたいの？」という
デザインがめちゃくちゃ良いビデオメッセージングアプリtribeをはじめてみたけど友だちがいない…
デザインが良いと評判のサンフランシスコ発のtribeというアプリを入れてみました。 tribe Experiential ‘EM’ Messaging 使い方はシンプルで、メッセージを送りたい友達やグループをリストからタップ＆ホールドすると、自撮りムービーの撮影が開始されます。指を離すとムービーが指定した送信先に送られます。 送れるのはムービーだけではなくテキストチャットの形式が用意されていたり、位置情報などを送ることもできます。 各所にこだわりのUIが実装されていて、これはぜひインストールして試していただきたいんですが、サインアップ時に電話番号を入力するときに文字が跳びはねるような振る舞いがあったり、自撮りカメラのビューが自由に動かせたりします。またカスタマーサポートも同じようなビデオメッセージングで受け付けていて「Any questions? Chat with CEO」というのがリス
InVisionにSilver Flowsがジョイン。彼らが描く未来とは？
Sketchのプラグインとして提供されていたSilver Flowsが、プロトタイピングツールのInVisionに買収されたことが発表されました。 INVISION WELCOMES SILVER FLOWS TO BRING PROTOTYPING INTO SKETCH Silver Flows joins InVision Sketchのプラグインとは アプリのUIを作るためのグラフィックツール、Sketchにはサードパーティによる追加機能の実装が可能になっています。これが所謂プラグインというものです。 Sketchを更に便利にパワーアップするプラグインのまとめ InVisionとは Webサイトやアプリ制作のためのデザインプロトタイピングツール「InVision」。主にTwitterやUBERなど500社が利用しています。昨年は4,500万ドルを調達したニューヨークのスタートアップ
BASEのUXを実現するクリエイティブ職の役割とは？
こんにちはBASE株式会社CTOの藤川（えふしん）と申します。当社は、無料でどなたでも簡単にお店を作ることができ、商品を売ることができるネットショップの構築サービスを提供しております。 藤川 真一（えふしん） BASE,Inc. CTO 株式会社想創社 代表取締役 初代モバツイ開発者 インターネットと日常の生活が融合された「何か楽しいもの」／「便利なもの」を作ることを目標に活動中。 Twitter：@fshin2000 先日、当メディアにおいてもご紹介いただきましたが、現在、Wantedlyの方でWebテクニカルクリエイターというタイトルで人材募集を出しています。 デザインを通じて優れたユーザ体験を実現するWebテクニカルクリエイター募集 この肩書は、まだ定着していないですし、もっと良い言葉があるような気がしていて、今後、定着するかはわからないですが、しかしながら、この名前の定着の有無に限
iOSガイドラインが示す、コンセプトを製品に落としこむ方法
Appleが開発者向けに公開している「iOS Human Interface Guidelines」には「From Concept to Product」という章があり、アプリを企画して実装していく手順を簡単に説明しています。今回はその内容と各項目ごとに参考になりそうな書籍やサービスを紹介します。 「From Concept to Product」は以下の様な内容が書かれています。 Define Your App List All the Features You Think Users Might Like Determine Who Your Users Are Filter the Feature List Through the Audience Definition Don’t Stop There Tailor Customization to the Task Prototy
UIデザインについて考えるオススメの書籍8選
20年以上前に出版された本で、著者のドナルド・Ａ・ノーマンはデザイナーではなく認知心理学者でヒューマンインターフェース研究の草分け的存在。まだスマートフォンが生まれるずっと前に、生活の中で触れるツールと人間の関係性を考察している。ユーザーを中心とした「良いデザイン」とは何か？またなぜデザイナーは良いデザインが作れないのか問いかけている。 インターフェースデザインの心理学 この本の著者も心理学者で、心理学の研究をデザインに応用するということを長年続けている。科学的な研究にもとづいて、いかにデザインをウェブサイトやアプリケーションに落とし込んでいくかを解説している。 UI GRAPHICS UIデザインの有識者のインタビューと、実際のアプリケーションの実例をまとめた本。有識者には研究者や実務に関わるデザイナーなどが多数参加。また実例は様々なジャンルから実際のモバイルアプリの画面が多数掲載されて
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
