ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

Balsamiq Mockupsの欠点として、最近よくあるようなSPAの縦長なページが作りづらいというのがありました。そこで使ってみたいのがShireframeです。

Shireframeの使い方

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

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

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

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

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

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

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

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

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

tsx/shireframe

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2