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のマッチフォントが素敵。

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

  2. Photoshop

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

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

  3. Illustrator

    メリハリがつく!Illustratorでドロップキャップを作る方法

    みなさんこんにちは、mayukouです。先日、雑誌広告のデザインを担…

  4. Illustrator

    画像のベクター化が簡単に!Adobe Capture CCがおすすめ♩その使い方をご紹介。ダウンロー…

    みなさんこんにちは、mayukouです。画像をベクター化してイラスト…

  5. Illustrator

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

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

メルマガを購読する

[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. Sass

    使わない方が良い?WordPress 案件をsassでカスタマイズして思う3つの…
  2. デザイン

    お店の顔!仕事の幅も広がる私流ロゴデザインマニュアル
  3. 写真

    食べ物やブツ撮りにおすすめ♩PENTAXの単焦点レンズ買いました。撮ったものなど…
  4. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpres…
  5. デザイン

    デザインの引き出しを増やすために!スクラップがオススメ♪
PAGE TOP