はてなブックマーク

ついにSketch上でPrototypeの作成が可能に…！待ってました、Craftバージョンアップ... 今日は最新のSketch44のことを書こうと思ったんですがね…出てしまいましたね…CraftのPrototype機能が！！！昨年の3月にInVisionに買収されたSilver Flows。今は「Craft」という名前でアップデートを続けています。最初のコンセプトムービーではプロトタイプを作成する様子が流れていたため、いつ出るかいつ出るか…と、首を長くして待っていたわけですが…ついに今日のアップデートで、Prototype機能が正式リリースされました！！！参考記事「InVisionにSilver Flowsがジョイン。彼らが描く未来とは？」早速使ってみたインストールしたら...

デザインが重要！デザインとイノベーション！AppleやGoogleはデザインがすごい！みたいな話はだんだん当たり前になりつつあって、デザイナーのニーズが高まって求人サイトにたくさんの会社が広告を出していたり、日本では電通・博報堂とうビッグプレイヤーがデザイン会社を買収したり、ここ数年「デザイン良くしよう」みたいな方向へと急速に傾いています。 で、起業家や経営とかやってる人に「良いデザイナーいない？」って相談をされる。で、よくよく話を聞いてみると、それ自分でやれよ案件だったり、UIデザイナーって言ってるけどイラストレーターの仕事だったり、クオリティ求めてるのに給料別に高くなかったり、そもそも何をやらせたいのか考えられてないことが多い。デザイナーいれば何か良くなるみたいな幻想、あとはUIがキレイになればすべてがよくなるみたいな妄想も多い。 それらの原因として、発信力の強いデザイナーや経営者の言

GUIで画面の繋ぎ合わせをしたり、コンポーネントをドラッグ＆ドロップで作成できるみたいです。 React Studioの特徴 ドラッグ＆ドロップでWebアプリを作成 Sketchデータのインポート モバイルプレビュー Webへの公開 プラグインのストア なんと無料、そしてプラグインのストアが面白い このツール、無料なんですよね。すごい。どこでマネタイズするんだろうと思ったら、プラグインのストアがあるらしく、そこで販売や購入ができるようになっているんです。その手数料でマネタイズしてるってことなんですね。 PackageCoinっていう新しい仮想通貨みたいです。こっちのほうが本業なのかな？ 続々とコード出力が簡単にできそうなツールが登場してきていますね。InVision以外のツールからも目が離せません！

https://blogs.adobe.com/creativestation/web-november-update-of-adobe-xd ユーザーのみなさんが自分のアイデアをさまざまなデバイスやプラットフォームでのユーザーエクスペリエンスとして具現化するために、XDにもっと多くの機能を求めていることは、UserVoiceなどでのコミュニケーションを通じて常に把握しています。今回のアップデートでは、こうした声にお応えし、最もリクエストの多かったいくつかの機能を追加しました。いずれも、デザインの手間を省き、アイデアを人々にスピーディに伝えるための機能です。これらのアップデートが動作するところをご覧になりたい方は、11月14～16日のAdobeLiveで、UX... 今回のアップデートの目玉機能は「デザインスペック」 こちらの記事には英語版でしか使えないと書いてあったんですが、さっきアップ

Sketch上でProcessing風にビジュアルプログラミングできるSketchプラグインが出ていたので紹介します。 P5.sketchplugin

孫泰蔵氏「社会のあり方の根本を変える可能性がある」福岡発スタートアップ『tsumug』が次世代型Connected Lock『TiNK』を発表 更新日：2017年11月9日 #IoT#TiNK#tsumug スマートロック元年と呼ばれる2015年から約3年が過ぎた――。 当時からBtoCモデルとしては成立しにくい、BtoBでも導入前の段階から障壁があるなど、課題のみが先行し、一般的な普及に向けては二の足を踏んでいるような状況が続いていた。事実、筆者も2017年11月現在、スマートロックに関しては導入していない。 錠前と鍵の歴史を遡ると、約6,000年前のメソポタミアにまでたどり着く。そんな太古の時代から、鍵前と鍵は財産を守る最前線のアイテムとして存在し、人々の安心を守り続けてきた。そんな鍵前と鍵が今、新しい一歩を踏み出そうとしている。 2017年11月9日（木）に東京都千代田区のDMM.m

先日、ベルリンでSketchプラグインを作るハッカソンが行われたんですが、そのときに作られたプロジェクトが続々と公開されています。 Gif.me Plugin 動くGifアニメがSketch上に貼り付けられるプラグイン The Sketch Team loved being part of #SketchHackBLN this past weekend. Some fun and great plugins were developed like https://t.co/fkjADbW2kx https://t.co/I8FxYQm0mB — Sketch (@sketchapp) October 31, 2017 コレ面白そうだったんで試したんですけどうまく動かないんですよね。動いた人いたら教えてほしいです。

今やUIデザインの定番となったSketchの使い方や便利なプラグインについてhttps://www.sketchapp.com/Facebookグループ「Sketch Japan」もぜひ。https://www.facebook.com/groups/1403075229952941/ Advent Calendarとは？ アドベントカレンダーとは12月1日からクリスマスまでの期間を数えるカレンダーのこと。日本では、IT・Web系の会社がクリスマスまで技術ブログを書くという風習があります。みんなお仕事大好き！ 毎年この時期は素晴らしい技術記事が生まれる 12月はみんな競って技術記事を書くので、毎年秀逸なものが生まれます。みなさん今年の総まとめということで気合をいれて書いているのでしょう。 テーマ「Sketch」で立ててみました UIデザインに関するカレンダーがなかったので、とりあえず「Sk

左側にオブジェクトの作成・操作とレイヤー、中央にスクリーンの表示、右側にオブジェクトのプロパティが表示されています。Adobe製品のUIは基本的に左側にオブジェクトの作成などのパネルが置かれているので、それを踏襲した形となります。ところどころSketchに似ていますが、Adobe製品に慣れた人向けに設計されているように感じました。 コンポーネントの共通化 Sketchは先日のバージョンアップでライブラリという機能を実装しました。これまでもコンポーネントを再利用できる「シンボル」という機能がありましたが、このシンボルを外部ファイルとして読み込んで、ファイルをまたいでコンポーネントの再利用ができるようになりました。 対してAdobe XDにもアセットという機能があります。アセットではカラー・文字スタイル・シンボルが管理できるようになっています。 Sketchはシンボルを入れ子状にすることができ

使い方 使い方は２つ。余白を付け加える方法と、サイズを指定する方法があります。 Slice with Padding（余白を付け加える） 書き出したいレイヤーを選んで、メニューのプラグインからSketch Slicerを選択 Enter Paddingに10と入力してSliceを実行すると 書き出すときはこの点線のレイヤーを選択すると余白付きで書き出せます。 Slice with Frame Frameでスライスすると指定したサイズで書き出せます。 もともと120×120の円を150×150のサイズにしてみます。 余白がつきました。 iOS用とAndroid用のサイズ指定も 「Select an export preset」というところでiOSかAndroidを選択すると、それぞれのOS用のサイズが指定されます。 書き出しやすいようにデザイナーの方がこういった細かいところを設定しておくと、

Adobe XDの正式版、InVision Studioの発表と今月は熱いニュースが続いておりますが…どうやら年末に向けてみなさん一斉にリリースに走っている様子ですね。 レスポンシブデザインのサイトが簡単に構築できるWebflowが大きなバージョンアップ「インタラクション2.0」をリリースしました。 Webflowでもともとできること WebflowはWebサービスで、かっこいいレスポンシブデザインのWebサイト構築が簡単にできちゃうものでした。Wixとかよりデザイン性に優れてたイメージです。 インタラクション2.0で出来るようになったこと 今までもレスポンシブ対応は出来ていたわけですが、今回のバージョンアップでFlashみたいな動きをする近年ではJavaScriptでアニメーションをゴリゴリ書くみたいなことが簡単に出来るようになったみたいです。 パララックスエフェクト 最近はちょっと落ち

Sketch47が正式にリリースされました。まだアップデートしていない人はSketchを再起動、もしくはCheck For Updatesすると最新版がインストールできます。今回は大きく2つの追加機能がありますLibrariesSmooth Cornersそれぞれ解説します。Librariesで変わるチームによる共同作業LibrariesはSymbolを同期する機能です。今までSketchではドキュメント内で利用する共通のパーツをSymbol化することによって使いまわすことができました。このLibrariesは、Symbolが入ったSketchファイルを外部ファイルとして読み込むことによって、ファイル... 今までと制作フローが大きく変わるため、移行作業に手間が掛かっている方も多い様子。標準で用意されている機能だけでは物足りずに、ライブラリー関連のプラグインが続々と登場しています。 今日紹

InVision Studioとは一体…？ TechCrunchの記事によると、現在プロトタイピングツールInVisionは世界中で300万人以上のユーザーを抱えているそうで（すごい） 今まではプロトタイピングとコラボレーションの機能を持ったツールであり、またSketchのプラグインを開発するチームを買収するなどの動きはありましたが、画面をゼロからデザインするツールは持ち合わせていませんでした。 今回発表されたInVision Studioは、明確にデザインツールPhotoshop・Sketchを競合としたデザインツールになるようです。 Windows＆Macアプリケーション InVision Studioはティザーサイトを見る限り、Webアプリではなくデスクトップのネイティブアプリケーションのようです。プラットフォームもMacとWindowsが明記されています。 SketchはMacアプ

初めてIllustratorやSketchでベクターツールを使ったとき、なんじゃこりゃ〜！！となりませんでしたか？ 慣れればスイスイ使えるようになるベジェ曲線。最初説明を受けても、なかなか体に馴染むまでには時間がかかります。 筆者はひたすら…なぞりましたね。何をなぞったかは忘れましたが。細かい曲線をなぞってなぞって、体に叩き込みました。 しかし、もうそんな体育会系なことはしなくていいんです。この「なぞるだけチュートリアル」を使えば！ Sketchのベクターツールを練習できるテンプレートが無料で手に入る！

AirbnbのReact Sketch.appじゃないですよ？ なんとSketchのデータをまるまるReact Nativeに使えるように変換してしまうツールが開発されているようです。 Convert Sketch files to React Native components 公開されたのはこちらのGitHubリポジトリ

Google Homeが我が家に届いたので、色々使い方を試したり、何か自分で作れないか試行錯誤しています。 音楽の再生をしてみたり、Chromecastと連携してNetflixをテレビで再生してみたり。「Siriって知ってる？」って聞いてみたり。 で、大体基本の機能は色々試してみたので、そろそろ他に連携しているサービスで遊んでみたいなと思ったんですけど、それがまとまってる情報がなかなか見つからなくて困ったので、自分でまとめることにしました。 ※音楽・動画サービスは除きました ※ニュース系も一旦除きました、これは別の記事で書きたいと思います 全て試してみたんですが、Actions on Googleで提供されているサービスはまだ使えませんでした。今後、数週間かけて順次使えるようになるみたいです。ザッパラス占いだけは試すことができました。 10月24日にアシスタント対応アプリの日本語版が正式リ

そんなわけで我が家にもClova WAVEとGoogle Homeがやってきました。実はClovaはデベロッパー向けの先行版を購入していたのですが、AIスピーカーとしての機能はほとんど使うことなく、ただのワイヤレススピーカーとしての役目しか果たしていません涙。続いてやってきたGoogle Homeはデベロッパー向けに公開されているものがあるので、さっそく色々と試して新しいアプリが作れないか模索しているところです。 現段階ではAIスピーカーで何が出来るのかキャッチアップしているところで何か成果物が出来ているわけではありませんが、AIスピーカーを使ったサービスを作るには何が必要なのか少しずつ見えてきたので書き留めておきたいと思います。 AIスピーカーを使ったサービスを分解してみる AIスピーカーを使ったサービスは4つのレイヤーに分けられます。 音声認識と音声出力 チャットBOT アプリ データ

今年もグッドデザイン賞が発表されました。グッドデザイン賞はプロダクトデザインや建築デザインだけではなく、さまざまなジャンルに渡って社会の課題をデザインの力で解決すること、そしてデザインの重要性をより社会に浸透させるためのものです。

Librariesで変わるチームによる共同作業 LibrariesはSymbolを同期する機能です。今までSketchではドキュメント内で利用する共通のパーツをSymbol化することによって使いまわすことができました。このLibrariesは、Symbolが入ったSketchファイルを外部ファイルとして読み込むことによって、ファイル間でSymbolを同期することができる機能です。 Symbolを作成します。このSketchファイルにはsample_libraryという名前をつけておきました。 新しいSketchファイルを作成し、メニューからPreferencesを選択。Librariesのタブを選択します。 Add Libraryをクリックして、先程作成したsample_libraryを選択すると、Librariesにファイルが追加されます。 メニューからInsert▶sample_lib

まだフォント探しで消耗してるの？足りないフォントの検索ができるSketchプラグイン「FontBuddy」の使い方 Animaさんがまた素敵なプラグインを出してしまったようですね…。 他人からSketchファイルをもらったとき、「Missing Fonts」と警告が出ていたことはありませんか？ そうそう、こういうやつです。 そんなときに、自動的にフォントを探してインストールしてくれるプラグイン「FontBuddy」が公開されました！ FontBuddyの使い方 まずはサイトからダウンロードします。メアドの登録が必要です。 ダウンロードしたらFontBuddy.sketchpluginを開いてプラグインをインストールします。 インストールしていないフォントが使われているSｋetchファイルを開いてみると緑色の表示が出ています クリックすると、該当のフォントが検索されてプレビューが表示されます

なぜHTTPSに対応しなければならないのか？ 今後、HTTPSに対応していないサイトはGoogleの検索順位が下がってしまったり、ブラウザから警告が出てユーザーが閲覧できないことが出てきます。