WEBデザイン

WEBディレクター、WEBデザイナーがWF(ワイヤーフレーム)作成で確認すべきポイント

最近はミニマニストが流行ってまよね。最低限なものしか家に置かない。
真似したいのですが、私の家は物があふれかえってるんです。捨てるのもったいないけど、いつ使うんだ?これみたいな。
3000円で勝ったアコースティックギターとか。しかも弾けないという。。。。
年末も近いので大掃除の際に不必要なものは処分しようかと思います!(謎の決心

さて、今日はワイヤーフレーム作成時に気を付けたいポイントと便利なツールをあわせてご紹介します。

ワイヤーフレーム作成の注意ポイント

目指しているホームページデザイン、UIデザインを参考にする

ワイヤーフレーム作成で大事なのは何となく作らないことです。
いつも作成してるのでいつものパターンで作成しようってなりがちなのですが
それだとデザインにも大きく影響してきます。
優れたWEBサイトを参考にレイアウトを考えることが大事になってきます。
そして、同じ業種だけを参考にしないことも大事です。様々な業種を参考に「ここのサイトはこんなとこにこんな要素がある」真似しよう。
こんな感じで真似から入ることです。

https://muuuuu.orgさんのサイトは非常にかっこいい優れたサイトを紹介してますので、ワイヤーフレームを作る際には参考にしましょう。

 

ワイヤーフレームの時点で上手くビジュアル化までもっていく

●これはダメなワイヤーフレームの例
まず、キャッチコピーもWFの時点で落とし込みましょう。細かなとこまでキャッチ、テキストは作り込みます。

●デザイナーも制作のしやすいワイヤーフレームの例
キャッチコピーも明確で、細かなとこまでキャッチ、テキストは作り込まれてます。イメージ写真なども添えてあげましょう。

社内にいるスタッフorチームに各自に意見を出してもらう

先ほどの作り込んだWFからディスカッションをしながら意見を聞きましょう。
その際に、コメントを書いてもらい、ホワイトボードに貼付けてもらうと、その後の議論が進めやすくなります。

コーディング担当もブレストに参加するとスムーズに進む

ワイヤーフレーム作成時点ではコーディングは関係ないと思いがちですが、
コーディングへとスムーズに移行するためにもコーディング担当もブレストに参加してみてください。

便利なワイヤーフレームツール4選

Wireframe Showcase

人が作ったWFを見たい場合におすすめです。現在20余りのワイヤーフレームがあり参考にできます。

UXPINU(有料)


オンライン上でワイヤーフレームを作成できるサービスです。
ボタンやページネーション、表やタブ、チェックボックスやラジオボタンなどよく利用するパーツがあらかじめ揃っています。

Prott

直感的に使える操作性が特徴のツールです。
画像を用意しアニメーションを設定するだけで、動くプロトタイプが作れます。

Justinmind Prototyper

インストール型ワイヤーフレーム作成ツール
ネット環境に左右されないのでどこでもWFが簡単に作成できます。

 

まとめ

高品質なホームページを作成するには、ワイヤーフレームの段階でしっかり検討を重ねることが大切です。「なんとなく」のままサイト作成を進めては、ありきたりなサイトになりがちです。今回ご紹介したポイントをおさえて、ワイヤーフレームを上手に活用していきたいですね。

ホームページ制作・LPデザイン制作会社へ無料お問い合わせ
お電話(06-4977-9974)でも承っております。

※現在、デザイナー、コーダーの募集はしておりません。

()に該当するひらがなを1文字入力ください(迷惑メール防止のため)

ピックアップ記事

  1. 売れるランディングページの作り方(ターゲットリサーチ編)

関連記事

  1. WEBデザイン

    高級感のあるホームページ制作は余白デザインで決まる

    高級感のあるホームページを作る上で、バランスはとても重要です。お手…

  2. WEBデザイン

    デザインをする際に参考になる本

    いくらデザイナー歴が長くてもデザインの流行などは押さえておかないと…

  3. WEBデザイン

    ランディングページ(LP)をフリーランスに外注を出したい制作会社が気をつけるべきポイント

    社内のデザイナーが手一杯で制作できない、外注をお願いしたいと思ったこと…

  4. WEBデザイン

    手書き風な可愛いホームページまとめ5選

    最近ですね、ツイッターで料理研究家のリュウジさんのレシプを見て実際に作…

  5. WEBデザイン

    はじめてWebデザインをするときにしておいた方がよいPhotoshopプラグイン5選

    もうすぐクリスマスシーズンですね。いやー時がすぎるのは早いです。歳…

  6. WEBデザイン

    WEBデザイナー必見!アイデアのストックに便利!pinterest(ピンタレスト)の使い方

    Pinterest(ピンタレスト)とは?ピンタレストを知ってますか…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

グローバーデザインのHPはこちら>>>

お仕事のご依頼はこちら>>>

最近の記事

  1. WEBデザイン

    「トラック買取」ランディングページ制作
  2. フリーランス

    デザイン実績の増やし方
  3. WEBデザイン

    ランディングページ(LP)をフリーランスに外注を出したい制作会社が気をつけるべき…
  4. WEBデザイン

    WEBサイトにおけるカラーについて
  5. WEBデザイン

    高級感のあるホームページ制作は余白デザインで決まる
PAGE TOP