シェフ最近、ある企業のWEBサイトを制作した時、初めて「ワイヤーフレーム」を作成しました。名前は当然知ってましたし、「WEBサイト制作にワイヤーフレームは必須」と認識はしていたんですが、正直、あまり必要性を感じなかったので、今までスルーしてきました。すると、僕のように、ワイヤーフレームって何?絶対作成しなきゃダメなの?なんて方もいるかと思いますが、最終的に「必ずしも作成する必要はない」という考えに至ったので、今回は、そこら辺についてご紹介します。目次1ワイヤーフレームとは?2作成する意味・メリットは?3ワイヤーフレームの作り方4専用の作成ツールもある5ワイヤーフレームが必要ないと思った理由6まとめワイヤーフレームとは?そもそも、ワイヤーフレームとは何か?という話ですが、シンプルに言えば、ワイヤーフレームはWEBサイト制作における「設計図」です。一覧記事は、左に画像・右にタイトルのデザインにするPC・タブレット表示時はメニューを横並びにして、スマホ表示時はハンバーガーメニューにするなど。どこまで細かく設計するかはケースバイケースだと思いますが、それを見て迷わずに作業を進めることができるレベルであれば問題ないでしょう。作成する意味・メリットは?このワイヤーフレームを作成する最大のメリットは、先ほどのように円滑に作業を進めることができることですが、他にもこのような意味・メリットがあります。完成図をお客さんに提案(共有)できるゴールを共有して、複数人で作業できる作業開始時と終了時のズレがなくなる(ブレずに作業できる)僕自身、覚えがあるんですが、ゴールを決めずにWEBサイトを制作すると、「やっぱり、こっちのデザインにしよう」みたいにブレちゃうんですよね。それがカラーだったり、フォントサイズの大きさのようなレベルであれば、さほど問題ありませんが、全体のデザインがコロコロ変わるのはナンセンスです。ワイヤーフレームの作り方ワイヤーフレームの作り方と難しく考える必要はなく、要は、見てわかればいいんです。「手書き」で作成する方もいるくらいですから。こちらは、僕が2〜3分で作成した手書きのワイヤーフレーム。いかがですか?きっと、「なんだこれ?笑」と思ったことでしょう。ゴールは伝わったはずです。▲これ以外のものを制作しませんよね?つまり、このような手書きのメモでも、ワイヤーフレームとして十分に機能していることになります。専用の作成ツールもあるまた、当然ながら、専用の作成ツールもあります。手書きのワイヤーフレームを撮影してリンクさせるHTML・CSSコードとして出力などの便利な機能があり、手書きと違って、実際のWEBサイトをイメージしやすくなります。僕も「Justinmind」というツールで下記のワイヤーフレームを作成してみましたが、なかなか使い勝手は良かったです。ワイヤーフレームが必要ないと思った理由さて、こんなに便利...というか、必須とも呼べるワイヤーフレームをなぜ「必要ない」と思ったのか、その主な理由がこちら。ワイヤーフレームを見せる相手がいないすべての作業を1人でやるどんなWEBサイトを制作すればいいのか感覚的にわかるようになったコードを書いた方が早い結局のところ、取引先も含め、ワイヤーフレームを共有して「ここをこうして、ああして...」みたいな話をする人がいないのが1番の理由ですね。「よくわかんないけど、WEBサイト制作頼むよ!」みたいに依頼された方が僕も楽なので、嬉しかったりするんですが...笑まとめ今まで、「ワイヤーフレームって絶対必要なはずのに、作成しなくても良いのかな...」と若干心配だったので、今のところ必要ないと判断できたのは良かったです。必要かどうかわからないけど、なんとなく作成しているいつも同じようなデザインになっているワイヤーフレームを提案した時に、建設的な話ができていないというフリーランスの方がいれば、一度ワイヤーフレームなしでWEBサイトを制作してみるのも良いかもしれませんね。́)ゞカテゴリー:ホームページ制作シェフこのサイト「Fantastech」を運営している人。WordPressテーマ「4536」の開発中にインプットした情報などを発信中。上に表示された文字を入力してください。「ページを開けません。サーバが見つかりません」の原因は?PHPのstr_replaceとpreg_replace(正規表現)の使い方WordPressで会話風の画像とテキストをコピペで簡単表示!WordPressのユーザー名・パスワードを確認・変更する方法は?Facebookページのユーザーネームが登録・変更できない原因は?ローカル環境のWordPressサイトを本番環境へ移行する方法WordPressオリジナルテーマを管理画面で更新可能にする方法。Jobsの導入方法や注意点などカスタムデータ属性でCSSフレームワークを作ろうきたぞ、国内初の流体シェイプ国内初となる流体シェイプをデザインに取り入れたWordPressテーマ「4536」を公開しました。