グラフィックアプリは必要無し！ワイヤーフレームをHTMLベースで簡単に作成できる -Shireframe
Post on:2015年4月14日
sponsorsr
IllustratorやSketchなどのグラフィックアプリ無しで、ワイヤーフレームをHTMLベースで作成できるスクリプト「Shireframe」を紹介します。
HTMLは通常通りでOK！ブラウザ枠や落書き風のスタイルは用意されており、簡単に作成できます。ブラウザで表示した時にはインタラクションも再現でき、画像化することもできます。
Shireframeのデモ
オンラインではデモは公開されていませんが、ダウンロードファイルにいくつかのデモが含まれています。
デモファイル：doodle.html
doodle.htmlはGoogleのUIのようなワイヤーフレームで、ボタンなどの操作も可能です。
スタイルをはずすとこんな感じに。
デモファイル：doodle.html
HTMLはこんな感じです。
[html]
[/html]
ブラウザの枠は用意されており、その中に自由にコンテンツを作成できます。Bootstrapのレイアウトやユーティリティのclassもサポートされています。
デモファイル：kitter.html
Shireframeの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
[html]
...
[/html]
Step 2: HTML
ブラウザの枠は用意されているので、その中に通常のコンテンツを配置します。
[html]
コンテンツ
[/html]
オリジナルのコンポーネントもいくつか用意されています。
画像化するには、OS X上でPhantomJS 2.0とImageMagickが必要です。
sponsors
