Tutorial

ワイヤーフレームがプロ仕様に!素敵なグラフィックスタイル「WireMagic」


[vc_row][vc_column width=”1/1″][vc_column_text]みなさんこんにちは、mayukou です!

目薬が欠かせない今日この頃です。
デザインをする方は、パソコン業務が多いので目・肩には気を付けてくださいね。

さて、先日知り合いに頼まれて、ホームページのワイヤーフレームを
作ったのですが、素敵な素材をゲットしたので、ご紹介します(有料です)。
ワイヤーフレームって、自分でIllustratorで描けば良いと思ってましたが、
デザイン要素がないのでなかなかプロっぽく見えないのが悩みでした。
でもこの素材を使うと本格的なワイヤーフレームが描けて、
クライアントさんの反応も好感度大でした!
自分で言うのもなんですが、ホームページレイアウトの説得力が増します。
ゼッタイおすすめのグラフィックスタイルをご紹介します。

スポンサードリンク

素材を購入

素材は、creative marketから購入します。
※Creative Marketは、Facebookアカウントがあれば登録でき始められます。
アメリカを中心とした世界の素材がゲットできます。

素材はこちら>>WireMagic – CreativeMarket

ワイヤーフレームを作ってみよう。WireMagicの使い方

ワイヤーフレームには、画像や文字、などをレイアウトを確認するために
簡潔に表現しますよね。
そんな表現がクリック一つで実現します。

グラフィックスタイルに、wireMagicを読み込みます。
図のようにパレットが表示されます。

171-wire

四角ツールで四角を描こう

任意の場所に四角ツールで四角を書きます。

例えば、ここに写真のアテ(ダミー)を入れたいなと思ったら…

四角を描いて…

172-square
バツ印の四角をクリック!

174-batsu

すると、写真のアテのような画像が出来ます。

173-square2

人の写真のアテを入れたいなと思ったら…

これまた四角を描いて、
人のアイコンをクリック

175-hito

こんな感じで、

176-hito

人のダミーが作れます。

 

吹き出しや、文章、プログレスバーみたいなもの、
矢印、TwitterやFacebookのソーシャルマーク、
Youtubeの動画などいろんなものが、1クリックで表現できますよ。

しかも、大きさや幅は自在です!

177-wire

 

ちなみに、実際に作ってみたワイヤーフレームです。

178-wdc-wireframe

どうでしょうか??ゼロから作るよりも、簡単でいいですよね?!!

最後に

いかがでしたか?ホームページ作成に便利なワイヤーフレームツールをご紹介しました。
ぜひご活用ください。

素材はこちら>>Creative Market WireMagic

 [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/1″][/vc_column][/vc_row]

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. jQuery

    簡単設置で見やすい!レスポンシブ対応メニューslicknavの使用方法

    みなさんこんにちは、mayukouです。さて、4月21日から、goo…

  2. Photoshop

    いい味が出る!リアルな水彩画風タッチに最適なPhotoshopのブラシ

    こんにちは、mayukouです!今日は水彩画に最適なPhotosho…

  3. Photoshop

    Photoshopのウィンドウを見やすく!ワークスペースを工夫してみよう

    こんにちは、mayukouです。なんだかすっきりしない天気です。九…

  4. Photoshop

    表現の幅が広がる!photoshopのパスでラインを引く方法

    味のあるイラストを描きたい時に。Illustratorでラインを描…

  5. Photoshop

    5ステップ!photoshopで水彩画をスキャンして切り抜く方法

    みなさんこんにちは、mayukouです。先日、仕事で水彩画イラストを…

  6. Photoshop

    画像からフォントを探してくれる!Photoshopのマッチフォントが素敵。

    みなさんこんにちは、mayukouです。「このフォント何を使っている…

メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. Web Design

    自分の頭をデザイン脳に!CSS nite fukuoka vol.8に参加しまし…
  2. 書評

    売り上げ不振の悩みを解決!「どうすれば売れるのか」を読んで
  3. Web Design

    モバイルフレンドリーなwebデザインするときにおすすめなツールまとめ
  4. クリスマス

    メリークリスマス☆ハイアットのケーキや、ケンタッキーのチキンなど家で過ごしたクリ…
  5. Photoshop

    5ステップ!photoshopで水彩画をスキャンして切り抜く方法
PAGE TOP