マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

WEBデザイン WEB制作 タブレット

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

投稿日:2014年6月6日 更新日:

サイトの設計図とも言えるワイヤーフレームを作成することは、ウェブ制作において大事なステップです。

wireframe-online

ワイヤーフレームとはサイトの大まかなレイアウト、必要な要素、コンテンツの優先順位を示したもので、ワイヤーを予め作っておくと、その後の作業の効率が大きく変わってきます。
デザインやコーディング作業に入る前に、まずワイヤーでサイトの構成、仕様を確認共有することによってサイト制作作業の効率UPに繋げますし、クライアントに対してサイトのイメージやページの遷移など詳細な仕様を共有できますので、大幅な修正や機能追加などを防ぐこともできます。

ワイヤーフレームの作り方はいろいろあります。手書きやパワーポイントでワイヤーを作る方法もありますが、ここでワイヤー作成に便利なオンラインツールをご紹介します。

RWD Wireframesはレスポンシブ・ウェブデザイン(RWD)向けのワイヤーツールで、このツールの売りはスマホやタブレット、PCなど各種デバイス用のワイヤーフレームを同時に作成できることです。

上部バーをクリックすると、作成したワイヤーは各デバイスの画面の横幅に応じて適切なレイアウトに変わります。

RWDWireframes

操作が直感的で使いやすい、各エレメントはドラッグ&ドロップで移動やサイズ変更が可能です。さらに、作成したワイヤーを保存・共有することもできます。

step
ほかにもCacooなど、図形を簡単に作成して、複数人で同時に編集可能のドローツールがたくさんあります。

こんな便利なツールを使ったら、初心者でもカンタンにワイヤーフレームを作れます。是非一度試してみてはいかがでしょうか?

-WEBデザイン, WEB制作, タブレット

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【Illustrator】アーガイル模様の作り方

みなさまこんにちは、新人Aです。 今日はまたIllustratorを使って、パターンのお話を。 以前は七宝柄、タータンチェックときて・・・今日はアーガイル柄を作りたいと思います。 アーガイル柄といえば …

ホームページのリニューアルを考えたときに意識すること

早稲田大学のオフィシャルサイトが5日にリニューアルされたのはご存知でしょうか? 見ていただけるとすぐに分かると思うのですが、このリニューアルがスゴイ! 大学のサイトとは思えないですよね。 あまりにもお …

【Illustrator】多角形を使った簡単な花形の作り方

【Illustrator】多角形を使った簡単な花形の作り方

みなさまこんばんは、新人Aです。 今日は、多角形を使って一瞬でお花の形にする方法をお話しようと思います! 数値をずらすだけで形が簡単に変わるので、とってもおすすめです。     【 …

表現の幅を広げる!!AEプラグイン

こんにちは、先日自宅で自分の映像作品を会社に行く前にレンダリングし、仕事が終わって見てみると半分もレンダリングが進んでいなく絶望を味わった新米デザイナー・ムービー担当Iです。 こった映像を作成するには …

面白い動きや便利な機能をJSで実装! その6:クリックで画像を拡大表示させるアニメーション

記事内の画像をクリックしてその場から拡大表示させるアニメーションを実装したいと思います。 今回使用するjavascriptは「zoom.js」になります。 【これまでの関連記事】 面白い動きや便利な機 …