グラフィックアプリは必要無し！ワイヤーフレームをHTMLベースで簡単に作成できる -Shireframe

Post on:2015年4月14日

IllustratorやSketchなどのグラフィックアプリ無しで、ワイヤーフレームをHTMLベースで作成できるスクリプト「Shireframe」を紹介します。

HTMLは通常通りでOK！ブラウザ枠や落書き風のスタイルは用意されており、簡単に作成できます。ブラウザで表示した時にはインタラクションも再現でき、画像化することもできます。

デモのキャプチャ

Shireframe -GitHub

Shireframeのデモ

オンラインではデモは公開されていませんが、ダウンロードファイルにいくつかのデモが含まれています。

デモのキャプチャ

デモファイル：doodle.html

doodle.htmlはGoogleのUIのようなワイヤーフレームで、ボタンなどの操作も可能です。

スタイルをはずすとこんな感じに。

デモのキャプチャ

デモファイル：doodle.html

HTMLはこんな感じです。

<div class="text-right vertical-margin">
  <a>~Me</a>
  <a>Mail</a>
  <a>Pictures</a>
</div>
<div class="vertical-margin">
  <row>
    <col-3 col-offset-3>
      <button class="btn btn-default width-100">Doodle search</button>
    </col-3>
    <col-3>
      <button class="btn btn-default width-100">I'm feeling doodley</button>
    </col-3>
  </row>
</div>
<footer class="vertical-margin">
  &copy; <text-url></text-url> 2015
</footer>

ブラウザの枠は用意されており、その中に自由にコンテンツを作成できます。Bootstrapのレイアウトやユーティリティのclassもサポートされています。

デモのキャプチャ

デモファイル：kitter.html

Shireframeの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<head>
  ...
  <script src="http://rawgit.com/tsx/shireframe/master/shireframe-r.js"></script>
</head>

Step 2: HTML

ブラウザの枠は用意されているので、その中に通常のコンテンツを配置します。

<body>
  <browser-chrome>
    コンテンツ
  </browser-chrome>
</body>

オリジナルのコンポーネントもいくつか用意されています。
画像化するには、OS X上でPhantomJS 2.0とImageMagickが必要です。

sponsors

top of page

©2024 coliss