マーカーネット株式会社

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

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

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

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

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

wireframe-online

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

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

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

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

RWDWireframes

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

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

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

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

執筆者:


comment

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

関連記事

Bamboo PadであなたのPCもタッチジェスチャーで意のままに!

Bamboo PadであなたのPCもタッチジェスチャーで意のままに!

PC使用時に画面上の画像などを拡大したい時、 思わず画面に親指と人差し指を添えて必死にズームしようとしたり、 スクロールしたい時に画面に指をスイッと滑らせたりして、 あ、これタッチできないんだ…とザン …

Adobe XDの無料おすすめプラグイン8選 その①

Adobe XDの無料おすすめプラグイン8選 その①

こんにちは、デザイナーのAです。 今回はデザインの作業効率をUPするAdobe XDのおすすめプラグインを紹介します!   Adobe XDプラグインの追加方法 方法は主に2種類あります。 …

失敗しないSEOサイトリニューアル16のポイント!

SEOで失敗しないサイトリニューアル16のポイント! 簡単のようで簡単ではない、いつも心掛けるべきWEBサイトリニューアル時のポイントを記載しました。 WEBサイトのリニューアルは、成功の是非がはっき …

色のイメージとWEBサイト【ピンク・紫編】

こんにちは、新人Aです。 おととい、昨日とWEBサイトの配色についてお話しました! 【黄色・赤編】【青・緑編】の次は・・・ 今日は【ピンク・紫編】でお届けしようかと思います! 【ピンク】 ちふれ ht …

【photoshop】アプリを使わず、簡単に写真を漫画風にアレンジする方法!

【photoshop】アプリを使わず、簡単に写真を漫画風にアレンジする方法!

このお姉さんにあえて漫画調にマーカーネットをアピールしてもらうと… ちょっと面白くて勢いのある効果が生まれますね。 昨今では漫画的な加工を取り入れるWEBデザインも増えてきました。 ですので、今回は写 …