マーカーネット株式会社

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

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

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

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

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

wireframe-online

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

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

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

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

RWDWireframes

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

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

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

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

執筆者:


comment

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

関連記事

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-2-

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-2-

【グラフィック V.S. Webデザイン】グラフィック制作とWeb制作の違い-2- どうも、デザイナーのOです。 前回に続けて、Webとグラフィック制作との違いについて紹介していきたいと思います。 画 …

サイトリニューアル!する?しない?

こんにちは。web制作初心者のKです! さてさて、今日は初心者の私がサイトを制作するうえで、 「サイトリニューアルの判断材料のひとつ」をお話したいと思います! これは、「BtoC(消費者向け)サイトの …

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

「SVG」というイメージフォーマットをご存知でしょうか? SVG(Scalable Vector Graphics)とはIllustratorで制作されるような、ベクターデータをWEB上で表示すること …

要素がガクガクブルブル震える変わった動き!

要素がガクガクブルブル震える変わった動き! http://www.markernet.co.jp/blog/2015/09/04/post-6077/ Facebook

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

画像のロールオーバーって面倒ですよね。 2枚の画像を用意してJavascriptで制御して、、や背景画像していしてh overで、、 というのが一般的ですが、 今回は画像1枚だけ。CSSに4行記載する …