ワイヤーフレーム
Wireframe
Webサイトやアプリを作るときに作成する、画面のレイアウトを定めた設計図のこと
名前のヒミツ
英語の「Wire（針金）」と「Frame（枠組み）」が組み合わさった言葉だよ。 針金で作った骨組みのように、デザインの基本的な構造だけを線と枠で表していることから名付けられたんだ。
簡単に説明すると
Webサイトやアプリを作るときに、画面のどこに何を配置するかを決めた設計図のことだよ。 色や写真などのデザインを作る前に、まずは線と枠組みだけでシンプルな画面構成を作るんだ。 これがあることで、開発に関わる人みんなで「どんな画面にするか」を事前に確認できるんだよ。
くわしく見てみよう！
ワイヤーフレームとは、Webサイトやアプリの画面レイアウトを定めた設計図のことだよ。
本格的なデザイン作業に入る前に、どこにボタンや画像を置くか、どんな文章を入れるかなどの基本構成を決めるために作られるんだ。
いきなり色を塗ったりきれいな写真を入れたりしてデザインを作ると、後から「やっぱりここの配置を変えたい」となったときに修正がとても大変になってしまうよね。
だから、最初はあえて白黒の線やシンプルな枠線だけでワイヤーフレームを作るんだ。
そうすることで、見た目の美しさに気を取られず、使いやすさや情報の配置といった機能の骨組みの部分に集中して話し合うことができるんだよ。
また、ワイヤーフレームを作ることで、デザイナーやプログラマー、そしてサービスを企画する人の間で完成イメージを共有しやすくなるんだ。
みんなで同じ設計図を見ながら「このボタンはここにあったほうが使いやすいね」とか「この情報はもっと上に出そう」と意見を出し合うことができるんだよ。
手書きでサッと書くこともあれば、専用のツールを使ってきれいに作ることもあって、目的に合わせて様々な方法で作成されているんだ。