この記事ではワイヤーフレームを作成するとき、FigmaやXDを開いて手を動かす前に、情報設計をどのように整理し、考えていくかについてまとめています。記事内でWebサイトでワイヤーフレームを作成するときに注意したい点として、下記のように書きました。 ツールを立ち上げてアレコレと考えながら手を動かすとフォントやレイアウトにこだわりだしたりしてしまい、あっという間に時間がなくなってしまいます。考えてから形に落とすことを徹底するためにIA（情報設計）を考え抜くことが大切です。 0. 情報設計とトンマナ設計を分けて考える情報の優先度、情報の量、情報の回遊性といったIA（情報設計）を考え抜くことはワイヤーフレーム作成において最も重要です。IAを考え抜いたその後に、FigmaやXDを使ってワイヤーフレームを形にしていきます。では実際にワイヤーフレームを形にしていくとき、どのような工程で進めていくと良いか
CGにしか見えないワイヤーフレームカーがTwitterで話題です。なぜ作ったのか、制作を行った山口製作所に話を聞きました。 CGじゃないだとっ……!?（画像提供：おすぎさん） この脳がバグるオブジェを発見したのはおすぎさん（@yg_ic23）。「CGとかじゃなくてマジ」と投稿された写真には、3DCAD（3次元データを使った製図用ソフト）で描かれた車のワイヤーフレーム画像に見える物体が写っています。 拡大してみると、描かれたものではなく実在していることがよくわかります。建物のガラスに映り込んでいたり、ワイヤーに水滴がついていたりしていて、見れば見るほど不思議です。 本当に存在しています（画像提供：山口製作所） このワイヤーフレームカーを制作したのは、店舗ディスプレイを手がける山口製作所。曲げたワイヤーをひとつひとつ職人が溶接し作ったそうです。なぜ制作したのか経緯について話を聞きました。 ――
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、先輩に教えてもらった「ワイヤーフレームの作り方」を紹介します。わたしはこの方法で作るようになってから、ワイヤーフレーム作りが楽しくて、Webデザインの大好きな工程のひとつになりました。 このワクワク感を、ぜひたくさんの新人デザイナーとシェアできればと思います！どうぞ最後までお楽しみください✍ はじめに：ワイヤーフレーム（WF）とは？ワイヤーフレーム（「WF」と省略することも）は、Webサービスの制作過程で必要になる設計図のこと。例を挙げると、以前に私が個人的に制作した音楽教室のLPでは、以下のようなワイヤーフレームを作りました。 ワイヤーフレームは、Webサイトやアプリの中で「どんな情報を、どんな順番で見せるのか？」を決める骨組みです。ここで決めた内容が、後工程のデザインに大きく影響します。 ちなみに、ワイヤーフレ
Webサイトのワイヤーフレームやモックアップに使用するSVGで制作されたUI要素のスケルトン素材 -UI Skeleton Gallery
Webサイトやスマホアプリで使用される、カード、セクション、ボタン、フォーム、見出し、テキスト、リスト、画像、動画など、UI要素のスケルトン素材を紹介します。 商用利用も無料で、ダークモード・ライトモードに対応しており、素材はSVGのファイルとコードでダウンロードできます。もちろん、Figmaでも利用できます。 UI Skeleton Gallery UI Skeleton Galleryは、デザインのワイヤーフレームやモックアップに使用するSVGで制作されたUI要素のスケルトン素材です。スケルトン素材とは実際のコンテンツは一切含まず、コンテンツが完全に読み込まれる前にページのワイヤーフレームを提供するUI要素です。 素材の利用にあたっては商用プロジェクトでも無料で、クレジットなども必要ありません。詳しくはTerms of useをご覧ください。
脳をバグらせる「ワイヤーフレーム車」 製作した金属加工会社に聞く
作った会社は 手がけたのは、埼玉県吉川市にある山口製作所。 金属加工や店舗ディスプレイ用の什器などの企画・設計から製作まで手がけている会社です。 話題になっているのは、埼玉県新座市で目撃された白いワイヤーフレームカー。 現実の中にデジタル情報を映し出す拡張現実（AR）のように見えますが、実在する本物です。 作り方は、3次元CAD（コンピューター支援設計）ソフトで設計し、レーザーで鉄板を切って原型となる「治具」を製作。 その治具に沿ってワイヤーを手作業ではわせて溶接し、最後に治具を外して完成させたものです。 ツイッターで紹介されると、「作った人すごい」「脳がバグる」と話題になっています。
本記事を書いている株式会社caroa、では「caroa design」というSTUDIOを使用したビジネス向けのデザイン制作サービスを提供しており、多くのBtoBサイトを制作しております。 上記のブログ内では、XDとPNGが配布されていますが、Figmaでデザインをされている方も多くいます。 世の中にもっと効果的で、魅力的なサイトを増やすためにも、Figma版のワイヤーフレームを作成できないかと考えました。そこで、ベイジの枌谷さん（@sogitani_baigie）に許可をいただき、caroaにてFigma版を作成することにしました。
「脳がバグる」 まるでCGみたいに見える“ワイヤーフレームの車”が話題 制作した理由を聞いた（ねとらぼ） - Yahoo!ニュース
CGにしか見えないワイヤーフレームカーがTwitterで話題です。なぜ作ったのか、制作を行った山口製作所に話を聞きました。 【画像】ワイヤーフレームカーをもっと見る この脳がバグるオブジェを発見したのはおすぎさん。「CGとかじゃなくてマジ」と投稿された写真には、3DCAD（3次元データを使った製図用ソフト）で描かれた車のワイヤーフレーム画像に見える物体が写っています。 拡大してみると、描かれたものではなく実在していることがよくわかります。建物のガラスに映り込んでいたり、ワイヤーに水滴がついていたりしていて、見れば見るほど不思議です。 このワイヤーフレームカーを制作したのは、店舗ディスプレイを手がける山口製作所。曲げたワイヤーをひとつひとつ職人が溶接し作ったそうです。なぜ制作したのか経緯について話を聞きました。 ―― どういう経緯で制作したのでしょうか 山口製作所：2007年夏にワイヤーフレ
Figmaでワイヤーフレームを書く様々なメリット - Xtone Design & Tech Talk
エクストーンの松本です。 ワイヤーフレームをどのツールを使って作るかについては、多様な意見があるところかと思います。昔はオフィス系ツール以外の選択肢があまりなかったように思いますが、最近ではデザイン系ツールやオンラインのコラボレーションツールなどが続々と登場し、かなり選択肢が増えてきました。 エクストーンでは以前はパワーポイントを主に使用していましたが、最近はFigmaを使うケースが増えてきました。今回はワイヤーフレームを作成する上で抑えるべきポイントと合わせて、Figmaを利用するメリットについて書いてみたいと思います。 ワイヤーフレームに求められること まず大前提として、ワイヤーフレームは、ディレクター、デザイナー、エンジニア、QA担当者、クライアント、パートナー企業など、プロジェクトに関わるほぼ全員が目にする資料です。この資料を起点として、ビジュアルデザインやプログラム開発、テスト仕
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
＜続編＞Webサイトのワイヤーフレームの作り方 ― FigmaやXDを開いた後の工程｜重松佑 / Shhh inc.
「脳がバグる」 まるでCGみたいに見える“ワイヤーフレームの車”が話題 制作した理由を聞いた
ワイヤーフレームは“しゃべりながら”つくる｜akane
BtoBサイトの標準ワイヤーフレームのFigma版を配布します ｜caroa times