Webサイトの企画を行う際にワイヤフレームを作成することが多いです。そこで部品を配置したり、移動したりしながら色々と考察します。そのために使うワイヤフレーム作成ツールも多数あります。個人的によく使っているのはBalsamiq Mockupsです。手書き風でラフな感じは細かい所にこだわらず、どんどん創作意欲をかき立ててくれます。
Balsamiq Mockupsの欠点として、最近よくあるようなSPAの縦長なページが作りづらいというのがありました。そこで使ってみたいのがShireframeです。

Shireframeの使い方

ShireframeはHTMLベースでワイヤフレームを作成するソフトウェアです。使い方は簡単で、

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

を読み込みつつ、後はHTMLを記述していくだけです。グリッドなどはBootstrapに近いです。例えばこんな感じに記述します。

  
<script src="http://rawgit.com/tsx/shireframe/master/shireframe-r.js"></script>  
<title>Doodle</title>
  
  
  
<browser><br><div class="container-fluid">
<br><div class="text-right vertical-margin">
<br><a>~Me</a><br><a>Mail</a><br><a>Pictures</a><br><glyphicon th></glyphicon><br><glyphicon user></glyphicon><br>
</div>
<br><div class="vertical-margin">
<br><row><br><col col-offset-3>
<br><h1 class="text-title text-center"></h1>
<br><box class="width-100 vertical-margin">|</box><br><br></row><br><row><br><col col-offset-3>
<br><button class="btn btn-default width-100">Doodle search</button><br><br><col>
<br><button class="btn btn-default width-100">I'm feeling doodley</button><br><br></row><br>
</div>
<br><footer class="vertical-margin"><br> © <text></text> 2015<br></footer><br>
</div>
<br></browser>  
  
  

そうするとできあがったページは次のようになります。Balsamiq Mockupっぽい感じです。

さらにこんな複雑な画面も作れます。

アイコンはFont Awesomeを使っているので自由に選べます。フォントはGoogleのKalamで、ちょっと崩した感じなのが特徴です。対応ブラウザは今のところIEは含まれていないようです。

Shireframeを使うと基本的なHTML構造は維持できるので、そのまま実際のWebサイト開発に利用することもできそうです。さらにブラウザっぽい枠は自動で拡張されるので、縦長のページ構成も簡単に実現できるのが良い感じです。何よりビジュアル的なツールではなく、手書きのコードでどんどんHTMLを作っていく人にとってはShireframeの方がさくさくと制作が進むのではないでしょうか。

ShireframeはHTML5/JavaScript製、GPL v2のオープンソース・ソフトウェアです。

tsx/shireframe