Cntlog > 開発

HTMLからPUGに変換するWebサービス(Html2Jadeの代わり)

普段私はコーディングをpugで行っています。
ですが、新規の案件などでHTMLを渡されるときはHTMLからpugに変換する必要がありそういったときはWebサービスのhttp://html2jade.org/を使っていたのですが、2018年07月02日時点でアクセスできなくなってしまったので、急遽別のサービスを探しました。

“HTMLからPUGに変換するWebサービス(Html2Jadeの代わり)” の続きを読む

Cntlog > 開発

Web制作の現場におけるsketch立ち位置

sketchが開発の現場に気づいてきてもう数年経ってきています。
特に去年あたりからsketchを扱う現場が増えています。

元々Adobeが独占していたWeb制作のワークフローをこの短期間で奪ったのはsketchにそれだけ魅力があるということです。

もちろんsketchがこれまでやってきたワークフローを全て網羅しているわけではありません。
ですが時代のニーズに合った内容があるからsketchは開発の現場に根付いてきています。

本記事ではWeb制作の現場でsketchがどういった風に使われているかを紹介します。

sketchの良いところ

まずsketchの良いところをいくつか紹介します。

動作が軽い

まずsketchの一番の魅力はその軽さです。
画面が100、200あったとしても軽快に動いてくれます。
これはPhotoshopやIllustratorではできなかった体験です。

軽いということはそれだけ素早く修正ができる、ストレスがかからないということに繋がります。

コンポーネントが管理簡単

sketchはシンボルがとても使いやすいです。
オーバーライドと言ってシンボルでも指定した一部の部分だけ変更することができたりするので使い回しのしやすいUIを作ることが可能です。
※シンボル内にあるシンボルを差し替えるとかもできます。

また最近ではsketchCloudを使って複数人での編集もしやすくなっており、リモートワークの現場でも一つのsketchが扱いやすくなっています。

学習コストが低い

sketchはUIが英語ですが元々Photoshopなどに慣れている人であれば2,3時間あればだいたいのことはわかります。

確かにsketchでできることは限られていますが、その分必要な機能だけを覚えればいいだけなので吸収率が早いです。

また書籍も2018年3月現在、ひとつしか出ていないので、どの本を買っていいのかわからないといった悩みもありません。

UIデザイナーのための Sketch入門&実践ガイド

本で学ぶのが苦手な人はUdemyでもスケッチの使い方を紹介しているのでそちらをご覧になってもいいかもしれません

Webやアプリの最新デザインツール Sketch3

UIのサンプルが多い

最近ではappleやFacebookでもUIの管理をsketchで行っています。

その流れからか海外で配布されているUIのファイルはどんどんsketchが増えてきています

UIの配布サイト大手のサイトだとsketch app sourcesがあります。

こちらを見ると有料で配布されているようなハイクオリティなUIやデザインテンプレートがかなりの量であります。

アプリの書き出しが得意

sketchはウェブサイトのツールというよりもどちらかと言えばアプリに強いツールです。

アプリの場合iOSとAndroidそれぞれのサイズごとに書き出す必要がありますがこの辺りの設定も簡単に行えるのも魅力です。
もちろんWebでも有用でretinaの対応で倍のサイズで書き出せます。

もっとsketchの良いところ知りたい方へ

もっと詳しく知りたいという方は過去にブログを書いているのでこちらをご覧ください。

現役WebデザイナーがデザインツールをSketch一択にした理由

今デザインの現場で求められている事

昔はデザインと言えばかっこいいものを求められることが多かったのですが最近はどちらかといえばUXを意識したり、マーケティングを意識してデザインをする現場が増えてきています。

そして様々な専門職種がひとつの案件に関わるようになりコミュニケーションのコストも増えています。

そういった背景からデザインは完成形を求めるというよりも今どうなっているか、これからどうしたいかといった部分をチーム全体に共有するという側面が求められてします。
そこがうまくいくと最終的な完成形のクオリティが上がるので、素早くデザインをして共有できるすると人が求められています。

そういった現場にsketchはすごく強いです。

どんな人が使うと良いか

sketchが万人向けかと言われるとそうではないです。

まず前提としてsketchはMac専用なのでWindowsを使っている方には使うことができません。
私はsketchをお勧めしていますが、さすがにOSを変えるほどのメリットはないと思っています。

sketchは気軽に画面を作ることができますので、提案のできるデザイナーであれば非常に使いやすいと思います。

打ち合わせの中で画面の話がでると口頭で説明しますが、中々伝わらない経験はありませんか?
その時sketchがあればその場で画面を作って見せて合意を得るなんてこともよくやります。

他にもチームの人とチャットでこんなのが欲しいといった要望があった時に、sketchで作って見てキャプチャーを送ってみると、そうそうこんな感じなんてやりとりも結構あります。

sketchはCSSの設計に準じた作り方でデザインができるのでコーディングが苦手なWebデザイナーでも抑えどころを覚えるとコーディングしやすいデザインをすることができます。

そしてスケッチは修正に強いです。
そして長く使い続けることができるデータを作成できますので、長くやる案件、担当がよく変わる案件などでも0から作り直すなんてことはありません。

ワークフローの変化

sketchで作ると案件の初めから最後までスケッチファイルを使い続けることができるので最新のデザインの確認がしやすいです。(個々の職種でデザインデータを保持するなんて事はしません)

最近の開発現場ではプロトタイプと言ってコーディングする前に画面遷移などさせて無理のない情報設計か使いやすいかというのを確認したりします。

最近sketchにもプロトタイプの機能が付きましたが、多くの現場ではinVisionprottを使ってチームでプロトタイプを共有することが多いです。

ディレクターであればsketchでワイヤーを書き、そのままデザイナーが画面を細かく設定していく。時にはディレクターとデザイナー同時期に触るなんてこともありえます。
そしてコーディングをするタイミングになればそのままsketchファイルをコーダーに渡してコーディングしてもらいます。

もちろんこのように一つのファイルを触っているのでコーダーがスライス名を追加した時にもデザイナーがその最新のファイルを編集して作業をしていきます。

何を覚えたら良いか

sketchを使いたいと思っている人の多くはどう始めたらいいのか、何から覚えたらいいのかと不安になることが多いです。

ですが実際に作ってしまえばそんな不安はすぐに消しとびます。

過去に私が最初にスケッチを使った時はsketchでデザインデータをもらったのでこれをスライスしないといけないといった状態でスライスの仕方だけ覚えました。

実際にその時にスケッチがすごく使いやすいツールだと直感的に理解したので触りながら覚えていきました。

特に有効だったのが動画での学習です。
私はudemyの動画を見てsketchを覚えました
sketchと検索すればいろんな説明の動画が上がってきます。

書籍を買うよりも安かったりしますので悩むくらいだったら手を出してみてください。

sketchの講座一覧

プラグイン使い方

スケッチにはプラグインがあり公式以外でもgithubとかで結構上がったりしています。

インストールも簡単でSketchpacksというアプリを使えばすぐにインストールやアップデートができます。

プラグインを探す時は私はsketch app sourcesで検索することが多いです。
sketchも開発されてから結構時間が経っているので欲しいと思った機能はプラグインでだいたい作られてたりします。

情報共有の仕方

先ほどもちらっと書いたのですがsketchを使うならプロトタイプの作り方を覚えると良いです。
プロトタイプでデザイナーが一番のメリットとしてはフィードバックがもらいやすいというところです。

普段デザイナーだと中途半端なものを見せたくないという気持ちが多いかもしれませんが、私はsketchを使い始めて逆に中途半端な状態でこそ出さないといけないという考えに変わってきています。

デザインは一人で完成させるものではなくチームで完成させるものであると私は思っているので自分自身フィードバックをもらいやすい状態でデザインを育てるように心がけています。

最後に

sketchは使ってみると本当に使いやすいデザインツールです。
最近はレスポンシブであったりアプリであったりと開発の仕方はどんどん変わってきています。

これまでやってきたことが必ず正しいというわけではありません。
ツールも人も時代のニーズに合わせて変化する必要があると思います。もう無理はしなくて良いんです。

私はsketchを使い始めて開発がすごく楽になりましたので、もし使ってみたいなと思っている人は悩む時間がもったいないです。
是非触ってみてください(ゝω・)

私がsketchを使って幸せになっています。
どんな感じで良いのかは下記記事でまとめていますので、よかったらご覧ください。

現役WebデザイナーがデザインツールをSketch一択にした理由

わからない事があれば質問箱(peing)から質問してください。

Cntlog > 開発

音声入力の認識率が高く、MacでもWindowsでも使えるWebアプリ

最近ブログを書くときは音声入力で記事を書くようにしています。

初めはMAcのデフォルトの音声入力を使っていたのですが少し精度が悪く思っていたので別のアプリを探していました。

今私が使っているアプリを紹介したいと思います。

MacでもWindowsでも使える音声入力アプリ

私は今Googleドライブで使われているGoogleドキュメントの音声入力を使って記事を書いています。

Googleドキュメントを使えばブラウザでアクセスするだけなのでMacでもWindowsでもどちらでも使えます。

何より声の認識の精度が非常に高いので気に入っています。(この辺はさすがGoogleさんですね)

不満に思っているところ

音声入力をする際に皆さん、音声だけで改行や句読点を入れようと結構意識していると思うのですが、それに対応しているアプリは非常に少ないです。

Googleドキュメントもこれに対応してくれたら本当に最高なのですが対応はしていません。

ただどちらにしても実際に入力された内容を確認しないといけないので改行や句読点に関しては手入力でもいいかなと最近思うようになっています。

Googleドキュメントを使うメリット

Googleドキュメントでは非常に高精度に音声入力を認識してくれます
そしてこの音声入力の機能は無料で使うことができます

Googleドキュメントで音声入力されたものは自動変換された単語を長文で入力していると前後の流れを見て自動的に変換を押し直してくれたりするします。
ですので漢字変換も他のアプリよりも得意なんじゃないかなと思っています。

他にもデバイス間の同期ができるのもメリットかなと思っています。

GoogleドライブはAndroidやiPhoneのでもアクセスはできますので,外に出ているときに生地を確認したり追記することも簡単にできます。

もちろんMacやWindowsの同期も可能です。

どんな風に使うのか

私は記事を基本的にマークダウン表記で書くようにしています。

ですのでタイトルh2の部分などはマークダウン表記を手入力で入れるようにしています。
他の部分に関しては音声入力で記事を入れています。

Googleドキュメントはブラウザからアクセスするので,いちいちファイルを作ったりすると面倒ですので私は音声入力用のGoogleドキュメントを用意してそこにブラウザでショートカット(お気に入り)を作っています。

一通り音声入力で記事を入れ直したら普段使っているエディターの方にコピーをしてそこできちんとマークアップをするようにしています。

ただ音声入力をしていると途中で空白が入ったりするので、こちらのWebアプリで空白を削除するようにしています。
改行・空白・タブ削除ツール

Googleドキュメントでの音声入力の切り替えはショートカットキーでできます
ショートカットキーは下記になります。

【ショートカットキー】
Macの場合 → Command+Shift+S
Windowsの場合 → Ctrl+Shift+S

ショートカットキーを入力すると音声入力をしている状態のアイコンが出るのでその状態になっていれば音声入力を受け付けている状態になります

最後に

音声入力は初めてみると結構恥ずかしいのですが、慣れてくるとすごくやりやすいなと思っています。

音声入力は割りと気軽に記事をかけるのは良いことだと思っていたのですが、Macのデフォルトの音声入力ですと認識率が思ったよりも良くなかったのでGoogleドキュメントに変えることでその点の不満が一気に解消されてすごく満足しています.

もし音声入力のアプリでどれがいいかと迷っている方がいらっしゃいましたらGoogleドキュメントは無料で使えますので一度お試しください

Cntlog > 開発

無料で使えて確認環境に使いやすいサーバー netlify

最近アプリを公開したのですが、そのページをnetlifyで構築しました。
以前友人に進められて、便利やんって思ったので紹介します。

netlify

netlifyとは?

netlifyとは静的コンテンツをベースにしたWebサイトのホスティングに特化したサービスです。
「Hexo」や「Hugo」などの静的サイトジェネレータで作るWebサイトを公開できますし、単純なHTMLも公開ができます。

netlifyの良いところ

無料プランでは下記の事ができます。

  • 独自ドメイン設定
  • 無料SSL証明書
  • 「Github」「GitLab」「Bitbucket」と連携
    • 特定のブランチの特定のディレクトリを公開ディレクトリに設定できます。

静的サイトという点でみれば必要な機能はほぼ備わっています。

使いどころ

個人的に使いやすそうなのは、ポートフォリオや簡易的なWebサイトをさくっと公開するのには重宝すると考えています。

他にも、先方に現状のサイトの状態を共有するための確認サイトとしても使いやすいです。
zipにまとめたものを公開用のディレクトリにも設定できるので難しい事を考えずに確認環境を作ることができます。

私はこれまでherokuを使っていました。
herokuはPHPやnode.jsなどが入れれてWebサービス的なものを作るのには便利なのですが、静的サイトを作るという点でいれば、netlifyのほうが使いやすいです。
※構築の準備もnetlifyのほうが簡単です。

Cntlog > 開発

2017年のSketchの進化を振り返る

本記事はSketch Advent Calendar 2017の11日目の記事です。

去年からSketchに恋をしてデザインツールはSketch一択でずっと使っています。
一部の人には親をadobeに殺されたんじゃないかとか言われていますが、そんなことはなくただただSketchが好きなだけです。

Sketchが好きな理由は以前記事にまとめていますので、Sketchって何が良いの?って知りたい方はこちらをご覧ください。

現役WebデザイナーがデザインツールをSketch一択にした理由

今年もSketchは色々と僕らが望むUpdateをしてくれました。
それはSketch本体だけではなく、別のサービス・プラグインが公開されて機能実装されたものあります。

Sketchの魅力がプラグインが誰でも作れる(販売できる)点と、外部サービスの連携にあります。

本記事では、2017年のSketchの魅力的な更新やお気に入りのプラグインを紹介したいと思います。

“2017年のSketchの進化を振り返る” の続きを読む

Cntlog > 開発

サービス連携に強くて無料で使えるタイムトラッキングツール「tmetric」

みなさんタイムトラッキングツールって使ってますか?
私はpaymoというサービスを使って計測しています。

ただ最近はいつになにをやっていたかというばっくりとした管理しかできていなくて、ちょっと不満が溜まっていました。

今日はタスク管理ツールと簡単に連携できて、無料で始められるタイムトラッキングツール「tmetric」を紹介します。

“サービス連携に強くて無料で使えるタイムトラッキングツール「tmetric」” の続きを読む

Cntlog > 開発

日本語でわかるSketchの使い方と機能

実際私も英語は苦手ですが、Sketchは全然使えています。
ただ初めての方だとSketchの機能が全然わからないと思いますので、メニューを日本語でわかるようにしてみました。

メニュー

メニュー項目の紹介です。

ショートカットキーメモ
⌘…Command(コマンド)キー
⌥…Option(オプション)キー or Alt(オルト)キー
⇧…Shift(シフト)キー
^…Control(コントロール)キー

File(ファイル)

  • New(新規)
    • ⌘N
  • New From Template(テンプレートから新規)
  • Open(開く)
    • ⌘O
  • Open Recent(最近使用したファイルを開く)
  • Close(閉じる)
  • ⌘W
  • Save(保存)
    • ⌘S
  • Duplicate(複製)
    • ⇧⌘S
  • Rename(カレントファイルの名前変更)
  • Move To(カレントファイルを移動)
  • Revert To(復帰)
  • Export(書き出し)
    • ⇧⌘E
  • Export Artboards to PDF(PDFとして保存)
  • Reduce File Size(ファイルの容量を圧縮)
  • Save as Template(テンプレートとして保存)
  • Page Setup(印刷時のページ設定)
  • Print(プリント)

Edit(編集)

  • Undo(取り消し)
    • ⌘Z
  • Redo(やり直し)
    • ⇧⌘Z
  • Cut(カット)
    • ⌘X
  • Copy(コピー)
    • ⌘C
  • Paste(同じ位置にペースト)
    • ⌘V
  • Paste Over Selection(選択されたオブジェクトの左上に合わせてペースト)
    • ⇧⌘V
  • Paste with Style(内容不明)
    • ⌥⇧⌘V
  • Duplicate(複製)
    • ⌘D
  • Delete(削除)
    • delete
  • Select All(すべてを選択)
    • ⌘A
  • Scale(拡大・縮小)
    • ⌘K
  • Copy Style(属性をコピー)
    • ⌥⌘C
  • Paste Style(属性をペースト)
    • ⌥⌘V
  • Set Style as Default(選択されたスタイルをデフォルトのスタイルにする)
  • Pick Color(スポイト)
    • C
  • Copy CSS Attributes(CSSプロパティ)
  • _Spelling(つづり)_
    • Show Spelling and Grammar(スペルと文法を表示)
      • ⌘:
    • Check Spelling(書類を今すぐチェック)
      • ⌘;
    • Check Spelling as You Type(入力中にスペルチェック)
  • Start Dictation(音声入力を開始)
    • fnfn
  • Emoji & Symbols(絵文字と記号)
    • ⌘Space
      ### Insert(挿入)
  • Vector(ペンツール)
    • V
  • Pencil(鉛筆ツール)
    • P
  • Line(直線ツール)
    • L
  • Arrow(矢印)
  • Rectangle(長方形ツール)
    • R
  • Oval(楕円形ツール)
    • O
  • Rounded(角丸長方形ツール)
    • U
  • Star(スターツール)
  • Polygon(多角形ツール)
  • Triangle(三角形)
  • Text(文字ツール)
    • T
  • Image(画像の挿入)
  • Artboard(アートボード)
    • A
  • Slice(スライス)
    • S
  • Symbols(シンボル)
  • Styled Text(テキストスタイル)
    ### Layer(レイヤー)
  • Create Symbol(シンボルを作成)
  • Create Shared Style(テキストスタイルを作成)
  • Round to Pixel(ピクセルにスナップ)
  • _Style(スタイル)_
    • Add Fill(新規塗りを追加)
    • Add Border(新規線を追加)
    • Add Shadow(ドロップシャドウを追加)
    • Add Inner Shadow(内側シャドウを追加)
    • Fill Options(塗りのオプション)
    • Border Options(線のオプション)
    • Remove Unused Styles(現在適用していない(チェックしていない)効果(線やドロップシャドウなど)を削除)
  • _Combine_
    • Union(複合シェイプの合体)
    • Subtract(複合シェイプの前面オブジェクトで型抜き)
      • ⌥⌘S
    • Intersect(複合シェイプの交差)
      • ⌥⌘I
    • Difference(複合シェイプの中マド)
      • ⌥⌘X
    • Reset(上書きで設定したシェイプをリセット)
  • _Transform_
    • Transform Layer(自由変形ツール)
      • ⇧⌘T
    • Rotate Layer(回転)
      • ⇧⌘R
    • Flip Horizontal(水平に反転)
    • Flip Vertical(垂直に反転)
  • _Paths_
    • Join(2つ以上のオープンパスを選択してパスの連結)
    • Split(複合シェイプの解除)
    • Flatten(複合シェイプの拡張)
    • Close Path(オープンパスをクローズパスに変更)
    • Reverse Order(オープンパスのアンカーの順番を逆にする)
    • scissors(はさみ。パスの一部切り取り)
    • Rotate Copies(回転して複製)
  • _Image_
    • Replace(画像の差し替え)
    • Set to Original Size(オリジナルサイズへ戻す)
    • Reduce Image Size(画像の圧縮)
    • Convert to 9-Slice Image(画像を9スライスに変換)
  • Flatten Selection to Bitmap(ラスタライズ)
  • Convert to outline(フォントのアウトライン化)
  • _Risize_
    • Stretch(比率を無視して伸縮)
    • Pin to corner(座標を固定して伸縮しない)
    • Resize(比率を維持して伸縮)
    • Float in place(座標位置のみ伸縮)
  • Use as Mask(選択したオブジェクトをマスクとして使用)
    • ⌘M
  • Mask Mode
    • Outline Mask(選択したマスクをクリッピングマスクに)
    • Alpha Mask(選択したマスクを不透明マスクに)
    • Ignore Underlying Maskマスクを解除
    • Mask with Selected Shape(選択したシェイプでマスク)
      ### Type(書式)
  • Bold(太字)
    • ⌘B
  • Italic(斜体)
    • ⌘I
  • Underline(下線)
    • ⌘U
  • Bigger(フォントサイズを大きく)
    • ⌥⌘=
  • Smaller(フォントサイズを小さく)
    • ⌥⌘-
  • Uppercase(すべて大文字)
  • Lowercase(すべて小文字)
  • Change Font(フォント変更)
    • ⌘T
  • Select Similar(文字編集状態のとき、選択された文字と同じ属性の文字を全て選択する)
  • Text on Path(パス上文字)
  • _Kern(カーニング)_
    • Use Default(デフォルトの設定を使用)
    • Use None(カーニング設定をクリア)
    • Tighten(文字間を詰める)
      • ⌥T
    • Loosen(文字間を広げる)
      • ⌥L
  • _Ligature_
    • Use Default(用途不明)
    • Use None(用途不明)
    • Use All(用途不明)
  • _Baseline_
    • Use Default(デフォルトの設定を使用)
    • Superscript(上付き文字)
    • Subscript(下付き文字)
    • Raise(ベースラインを上げる)
    • Lower(ベースラインを下げる)
  • Align Left(左揃え)
    • ⌘{
  • Center(中央揃え)
    • ⇧⌘¥
  • Justify(両端揃え)
  • Align Right(右揃え)
    • ⌘}

Arrange(整頓)

  • Forward(前面へ)
    • ⌥⌘↑
  • Move to Front(最前面へ)
    • ⌥⌘↑
  • Backward(背面へ)
    • ⌥⌘↓
  • Move to Back(最背面へ)
    • ⌥⌘↓
  • _Align Objects(オブジェクトの整列)_
    • Left(水平方向左に整列)
    • Horizontally(水平方向中央に整列)
    • Right(水平方向右に整列)
    • Top(垂直方向上に整列)
    • Vertically(垂直方向中央に整列)
    • Bottom(垂直方向下に整列)
  • _Distribute Objects(オブジェクトの整列)_
    • Horizontally(水平方向等間隔に分布)
      • ⌘H
    • Vertically(垂直方向等間隔に分布)
      • ⌘V
  • Make Grid(格子状に並べる)
  • Show Layer(レイヤーの表示/非表示)
    • ⇧⌘H
  • Lock Layer(レイヤーのロック/ロック解除)
    • ⇧⌘L
  • Rename Layer(レイヤー名を変更)
    • ⌘R
  • Group Layers(グループ化)
    • ⌘G
  • Ungroup Layers(グループ解除)
    • ⇧⌘G
  • Find Layer(レイヤーを名前で検索。)
    • ⌘F

View(表示)

  • Zoom In(ズームイン)
    • ⌘+
  • Zoom Out(ズームアウト)
    • ⌘-
  • Actual Size(100%表示)
    • ⌘0
  • Center Canvas(すべてのアートボードを全体表示)
    • ⌘1
  • Zoom Selection(選択されたオブジェクトを画面最大になるように表示)
    • ⌘2
  • Center Selection(選択されたオブジェクトを画面の中央に表示)
    • ⌘3
  • Show Layers List(左側のレイヤーリストパネルを表示/非表示)
    • ⌥⌘1
  • Show Inspector(右側のインスペクタを表示/非表示)
    • ⌥⌘2
  • Hide Layers and Inspector(右側のインスペクタを表示/非表示)
    • ⌥⌘3
  • Presentation Mode(フルスクリーン)
    • ⌘.
  • _Layer List_
    • Auto-Expand Groups in Layer List(レイヤーリスト上のグループなどの階層構造を展開)
    • Collapse Artboards and Groups(展開してある階層構造を閉じる)
    • Reveal in Layer List(レイヤーリストで展開してあるものを開く)
      • ⇧⌘J
    • Show Slices(レイヤーリストにスライスを表示)
    • Show Layers(レイヤーリストにレイヤーを表示)
  • _Canvas(キャンバス)_
    • Show Smart Guides(スマートガイドを表示)
    • Show Selection Handles(選択されているオブジェクトにハンドルを表示)
    • Show Layer Highlight(マウスホバーしたとき、オブジェクトにフォーカスを表示)
    • Show Artboard Shadow(アートボードの周りにドロップシャドウを表示)
    • Show Rulers(定規を表示)
      • R
    • Show Pixels(ピクセルプレビュー)
    • Show Pixels Guide(拡大時に1px単位のグリッドを表示)
      • X
    • Show Grid(グリッドを表示)
      • G
    • Show Layout(レイアウトを表示)
      • L
    • Hide All Layout and Guides(グリッドとレイアウトを非表示)
    • Grid Settings(グリッド設定)
    • Layout Settings(レイアウト設定)
  • Show Colors(カラー選択パネルを表示)
  • Show Fonts(フォント一覧パネルを表示)
  • Hide Toolbar(ツールバーを表示/非表示)
    • ⌥⌘T
  • Customize Toolbar(ツールバーをカスタマイズ)
  • Enter Full Screen(フルスクリーン)
    • ⌘F
Cntlog > 開発

プロトタイプ入門!初めてInvisionを使う人向けの機能と使い方の紹介

最近はSketchを使うことが増えて(というか一択)になっており様々なプロトタイプツールに手を出しているのですがその中でも一番汎用性が高く気にいっているのがInVisionです。

Invisionは英語製なので日本人には敬遠されがちで、あまり機能や便利さが広まっていないと思うので、私が使っている部分になりますがInVisionで出来ることをご紹介します。
“プロトタイプ入門!初めてInvisionを使う人向けの機能と使い方の紹介” の続きを読む