マーカーネット株式会社

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

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

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

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

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

wireframe-online

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

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

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

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

RWDWireframes

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

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

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

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

執筆者:


comment

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

関連記事

【photoshop】素材なしで手軽にテキストを水彩風にするテクニック!

暑い日が続いておりますが、デザインする時も季節感を演出できたら、より人の目を引くデザインになるかもしれないですね。 ここで夏にふさわしい、テキストを涼しげな水彩風に加工するPhotoshopテクニック …

【コーダーには常識!?】あなたのコーディングをチェック!

【コーダーには常識!?】あなたのコーディングをチェック!

コーディングをしたけど、エラーや間違いがないか不安に感じたりしませんか? リンク切れやソースの間違いなどを一つ一つ調べていくのは大変です。 そこで、コーディングエラー、リンク切れなどを調べてくれるお勧 …

ごろごろしながらウェブネタ探し

皆さん! こんばんは!! 株式会社マーカーネットでwebデザインを修行をしている新人デザイナーKです。 普段、皆さんはデザインを作るとき、どこからデザインのネタを探しているんですか? 私は場合は、そう …

親要素の大きさに合わせて画像をリサイズできるjQueryプラグイン「imgLiquid」

親要素の大きさに合わせて画像をリサイズできるjQueryプラグイン「imgLiquid」 http://www.markernet.co.jp/blog/2015/07/10/post-5790/ F …

簡単レシピ!アメコミ風デザイン素材と活用法!!

今回はアメコミ風のデザインを作るときに役立つフリー素材と活用法をご紹介いたします。 まずは実際のアメコミを見て、簡単に特徴を分析してみます。 アメコミでgoogle画像検索をかけると、、、 とってもカ …