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. Photoshop

    Photoshopでスタンプ表現が簡単に!PSD素材で一発表現!

    こんにちは、mayukouです。最近ランニングウェアを新調して、ち…

  2. Illustrator

    簡単!Illustratorで写真の淵をぼかす方法

    みなさんこんにちは、mayukouです。まだまだ梅雨の時期ですが、…

  3. Illustrator

    空を可愛く!Illustratorで虹を簡単に描ける方法&ダウンロードできる素材を作りました

    みなさん、こんにちはmayukouです。台風も過ぎ去り、梅雨ももう…

  4. Photoshop

    あっという間に!Photoshopのブラシで写真を手描き風にする方法

    みなさんこんにちは、mayukouです。今回は、Photoshop…

  5. Photoshop

    Photoshopでかすれたスタンプ風表現をする方法 その2

    みなさんこんにちは、mayukouです。今回は、うちのブログでも人気の…

  6. Tutorial

    簡単!photoshopでスタンプ風のかすれた表現をする方法

    今回は、スタンプ風のかすれた表現をご紹介します。私は、仕事で使うこと…

メルマガを購読する

[mc4wp_form id=”2540″]

最近の記事

instagramもやっています

This error message is only visible to WordPress admins

Error: No connected account.

Please go to the Instagram Feed settings page to connect an account.

facebook更新中!

スポンサー

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

  1. jetpack

    wordpress

    多機能プラグイン!Jetpack for wordpressのインストール方法
  2. Photoshop

    ついつい押したくなる!立体的なボタンのデザインをPhotoshopで作る方法
  3. ブログ

    webデザイナー4年目!その間に身につけたスキル
  4. iPad Pro

    iPad Proを液タブに♫Astropad Studioはイラストレーターには…
  5. Photoshop

    ちょっと洒落てる!Photoshopで作る、白いシャドーが入った押したくなるボタ…
PAGE TOP