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

    スキャンした画像をIllustratorでベクターにする方法2 (追記)

    みなさんこんにちは、mayukouです。今日は福岡ではめずらしく雨…

  2. Tutorial

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

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

  3. Photoshop

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

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

  4. Illustrator

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

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

  5. Photoshop

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

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

メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. デザイン

    スターバックスに学ぶブランディング:デザインコンセプトとは
  2. Tutorial

    自分らしさがアップ!WordPressのサイドバーにInstagramウィジェッ…
  3. Illustrator

    画像のベクター化が簡単に!Adobe Capture CCがおすすめ♩その使い方…
  4. ブログ

    [書評]サラリーマンだけが知らない好きなことだけ食っていくための29の方法
  5. jQuery

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