Webデザイナーにプロトタイピングツールはもう不要…？
こんなプラグインが出ていました。
Click-Thru Prototype
「Sketch plugin that creates a HTML click-through prototype of a website design」とのこと。
これがすごい便利！
・Sketchで作成したスクリーンの特定の箇所にリンクが貼れる
・もちろんリンク先のアートボードを指定可能
・クリックしたときにJavaScriptで表示するアラートも再現可能
・スマホのメニューみたいなのも再現可能
・PC・タブレット・スマホのレスポンシブWebデザインも再現できる
なんじゃこりゃ！！

Click-Thru Prototypeの使い方

まずはプラグインをインストール。githubから落としてもいいですが、今回はSketch Toolboxを使用します。コレ、便利ですよー！

「click」と入力したらすぐに該当のプラグインが出てきました。インストールします。

インストールが完了したら、Sketchを立ち上げて適当に画像を作成します。

index内のnextボタンを押したらnext pageにリンクするようにしたいと思います。
まずはnextボタンのレイヤーを選択して、Pluginsからclick thru prototypeを選び、Link to Artboardを選択。

次にリンク先のアートボード「next page」を選択。

そしてExport to HTML。sampleというフォルダを作ってその中に出力しました。

出来上がったフォルダ内のファイル。CSSとかJSも生成されてる。

index.htmlを開いてみます。

nextボタンをクリック。画面が遷移します。

応用編

リンク先の共通化

シンボル化したレイヤーにリンクを貼り付けると、他のアートボード上でも同じリンクが有効になります。

レスポンシブWebデザイン

アートボード名のあとにスペースを空けて「tablet」「mobile」とつけると、それぞれのサイズごとに画面が切り替わります。
レスポンシブWebデザインのデモ

さらに、chiramiでシェア！

先日紹介した作りかけのWebサービスをアップして他人にシェアできるサービス
作りかけのWebサイトをチラ見できるようにするサービス「chirami」がβリリース
ここに先程作ったsampleフォルダを放り込むと…
簡単にSketchで作ったプロトタイプがシェアできて、他人に見せることができます。
試しにやったのはコレ。公開に24時間の制限あり

Sketch・Click-Thru Prototype・chiramiを組み合わせれば、作業がスムーズになること間違いなし？！Webデザイナーの皆様、必見のプラグイン紹介でした！