初心者必見！8割成功するワイヤーフレームの作り方3つのステップ

これからワイヤーフレームを作っていこうとしている人や、Webディレクターとして、成功するサイトの制作に関わっている人は、どうすれば良いワイヤーフレームが作れるかって日々悩んでいるかもしれないですね。

この記事では、特に初心者〜中級者向けの内容ですが、8割は成果が出せるワイヤーフレームの作り方についてご紹介してまいります。

この記事を読むことで身につく知識としては以下ですね。

ま、8割っていうのはおおよその肌感覚ですけどね。

今回は、『初心者必見！8割成功するワイヤーフレームの作り方3つのステップ』と題してご紹介してまいります。

それでは、早速みていきましょう！

ワイヤーフレームの作り方3つのステップ

ここでは、ワイヤーフレームの作り方の3つのステップを早速ご紹介していきますね。

全体像としては、以下ですね。

はい、非常にシンプルなステップですけどね。

でも、経験者や多少キャリアのある人、そして、なんちゃってクリエイターの人っていきなりステップ３の設計から急に始めちゃうんですけど。

やっちゃいけませんね。

根拠や課題発見、ユーザーに対するゴールが見えていない状態で手を動かしちゃいけないです。

もうこれは、１つのルールとして覚えておきましょう。

じゃ、以下では、それぞれのステップでどんなことをしていくかをご紹介していきますね。

ワイヤーフレームの作り方ステップ1：分析

まずは落ち着いて分析しましょうって話ですね。

特に、すでにサイトがあるような場合で、それを改修したりリニューアルしたりする時は分析は必須ですよ。

例えば、分析で行うこととしては以下のようなことをします。

だいたい、この辺りのことは、以下の記事で紹介している書籍も参考になると思います。

分析が課題かな〜と思っている人は、ちょっとチェックしてみてください。

Webディレクターが読んでおくべき書籍【厳選したおすすめ5冊】Webディレクターがいつも見返している書籍って本当に限られてますよね。ここではWebディレクターがよく仕事で活用している書籍を厳選してご紹介しています。ソリューションを考えたり、基本に立ち返ったりする時の参考になる良書を選んでいます。...

ワイヤーフレームの作り方ステップ２：企画

次に、企画ですね。

この辺りから少しアイディアや競合サイトをチェックしたりしないといけませんけど。

例えばどんなことをするかというと、以下ですね。

この辺りは、割と普段からいろんなサイトを見たり使ってみるという経験値が大事になってきますね。

参考書籍に関しては、以下の記事でも紹介しています。

UIとUXのおすすめ本10選【基礎からしっかり自分で学べます】この記事では、UIやUXをこれから学びたい人向けに、基礎から学べるおすすめ本をご紹介しています。UIデザインやUXデザインについての理解は、特定の職種の人だけでなく、チームに関わる人全員が理解しておくべきですので、ぜひ参考にしてみて下さい。...

分析も企画もそれぞれ学べる書籍でおすすめ本ですので、きになるものから参考にしてもらえたらいいんじゃないでしょうか。

ワイヤーフレームの作り方ステップ３：設計

ステップ３でいよいよ設計。

ワイヤーフレームを作り始める段階ですね。

ここについては、あまり解説はしませんが、詳しい方法は『UXデザインが出来るようになる簡単なトレーニング方法【参考あり】』という記事でも紹介していますので、よければご覧ください。

UXデザインが出来るようになる簡単なトレーニング方法【参考あり】UXデザインができるようになりたいと考えている方向けの記事です。こちらでは、UXデザインを日頃からトレーニングする簡単な方法や、学ぶためのおすすめなコンテンツをご紹介しています。トレーニング方法はササっとできてしまうものですので、ぜひ参考にしてみてください。...

一点だけ、大事なポイントとしては、

サイトマップを先に作っておく

というのがありますね。

ステップ1で現状のサイトマップを作って流のですが、それを見つつ、必要なページとそうでないページ、統廃合するページなどを整理してから、ワイヤーフレームに取りかかるとベストですね。

この点も、注意してみてくださいね。

スポンサーリンク

ワイヤーフレームの良し悪しは、ワイヤーフレームを作る前で8割決まる

いかがですか？

ここまで見てきたように、実際の作業工程としては、ワイヤーフレームを作るステップ3に時間を取られると思います。

ですが、その前のステップ1の「分析」、そして、ステップ2の「企画」、ここで8割くらいは決まりますね。

つまり、

しっかりねらいや根拠を持って設計しよう

というのが結論ですね。

初心者ほど、経験と知識のストックを貪欲におこなおう

あまり経験のないひとほど、迷ったりいいアイディアが思いつかなかったりします。

でも、これは仕方ない話ですね。

受け入れた上で、日頃から情報設計の本でインプットしたり、いろんなサイトを分析したりしてみると良いですね。

参考になるやり方に関しては、『Webディレクターの勉強法を公開します【やりこむことが大事です】』でも紹介していますので、参考にしてもらえたらと思います。

Webディレクターの勉強法を公開します【やりこむことが大事です】Webディレクターの勉強法について知りたいですか？この記事では、Webディレクターとして日々どのような勉強を継続すれば良いかについて解説をしています。メインは設計でのトレーニング方法で、かなり実践力が身につきますので、本質的ですよ。...

この勉強法とかは、誰も教えてくれないですけどね。

でも、できるUIデザイナーさんは結構みなさん地道にしてたりもしてるので、取り入れてもらえたらと思います。

スポンサーリンク

まとめ

いかがでしたでしょうか？

今回は、今回は、『初心者必見！8割成功するワイヤーフレームの作り方3つのステップ』と題してご紹介してまいりました。

改めてポイントとしては、以下ですね。

くれぐれも、このステップを外さないように注意してくださいね。

それでは、今回はこの辺で！