「脳がバグる」 まるでCGみたいに見える“ワイヤーフレームの車”が話題 制作した理由を聞いた（ねとらぼ） - Yahoo!ニュース
CGにしか見えないワイヤーフレームカーがTwitterで話題です。なぜ作ったのか、制作を行った山口製作所に話を聞きました。 【画像】ワイヤーフレームカーをもっと見る この脳がバグるオブジェを発見したのはおすぎさん。「CGとかじゃなくてマジ」と投稿された写真には、3DCAD（3次元データを使った製図用ソフト）で描かれた車のワイヤーフレーム画像に見える物体が写っています。 拡大してみると、描かれたものではなく実在していることがよくわかります。建物のガラスに映り込んでいたり、ワイヤーに水滴がついていたりしていて、見れば見るほど不思議です。 このワイヤーフレームカーを制作したのは、店舗ディスプレイを手がける山口製作所。曲げたワイヤーをひとつひとつ職人が溶接し作ったそうです。なぜ制作したのか経緯について話を聞きました。 ―― どういう経緯で制作したのでしょうか 山口製作所：2007年夏にワイヤーフレ
ワイヤーフレーム（wireframe）とは、Webページのレイアウトやコンテンツの配置を定めた設計図のことです。英語のワイヤー（wire）には「針金」「ケーブル」、フレーム（frame）には「枠」「骨組み」という意味があり、ワイヤーフレームは文字通りシンプルな線や図で構成されています。 例えば引っ越しの際に、次に住む部屋の間取り図を見て「ベッドはここに配置しよう」「この隙間にぴったり合う戸棚を買おう」などと家具の配置を考えます。ワイヤーフレームはWebページのデザインの前段階で「最新情報をここに配置しよう」「問い合わせへの導線はここに配置しよう」といったコンテンツの配置を決定するために作成します。 ワイヤーフレームをしっかり決めておくことで、デザインやコーディングの段階に入ってからの後出し追加や遡っての修正を防ぐことができ、効率的な制作進行管理を行えます。 ワイヤーフレームは誰が作成すべき
WEBサイトやアプリを開発する上で必要なワイヤーフレーム。開発途中で必要なものなので、普段目にすることはあまりなく、その役割をしっかりと理解している人は少ないのではないでしょうか？今回は、ワイヤーフレームとは何か、作成手順から気をつけるポイントまでを解説していきます。 ワイヤーフレームとは？ ワイヤーフレームとは、Webサイトやサービスなどを制作する上で、ページの構成を示す基本的なレイアウト図のことです。基本はグレースケールで作られ、細かなデザイン作業に入る前の設計図としての役割を持ちます。 例えば、このSEVENDEX POSTのワイヤーフレームを作ると、上記の画像のようになります。実際にデザインを進める前に、完成イメージを「見える化」することで、情報の抜け漏れがないか、機能の整合性がとれているかを確認します。 混同しやすいキーワードの違いを知ろう ワイヤーフレーム 何に似てる？：建築で
【現役デザイナーが解説】Figmaの使い方！デザインからワイヤーフレームまで幅広く使えるデザインツール｜Blog｜株式会社デパート
SketchやAdobeXDと並ぶメジャーなデザインツールである「Figma」。簡単な操作でデザインを作成することが可能で、他のメンバーやクライアントとの共有が容易にできる点が大きな特徴のデザインツールです。 SketchやAdobeXDは長い間、デザインツールとして長い人気を誇っていました。しかしFigmaも負けてはおらず、リリース開始からユーザーがより使いやすいようアップデートを繰り返し、大きな話題を呼びながら利用者も増加しています。 このページでは、Figmaのできることやメリット・デメリット、他のデザインツールとの違い、Figmaの使い方までご紹介します。 Figmaとは、インストールが不要な、ブラウザ上ですぐに使えるデザインツールです。ソフトを起動させる手間もなく、初心者でも使いやすい手軽さで人気を集めています。 ワイヤーフレームの共同編集や、複数人で画面を見て議論することも可能
こんにちは、Webデザイナーの団子の人です。 現在モンゴロイドではUI/UXについて書籍を読み、理解を深めたうえで記事を書くということを行っています。 そこで今回は、UI/UXの基礎知識と、UI/UX設計におけるワイヤーフレームの役割や注意点についてご紹介します。 UI/UXとは UI/UXとは？と聞かれると、意外と明確に答えられない方が多いのではないでしょうか。 UIとは「User Interface（ユーザーインターフェース）」の略で、ユーザーの目に触れる、ユーザーが直接触れる部分のことを指します。 一方、UXとは「User Experience（ユーザーエクスペリエンス）」の略で、ユーザーが製品・サービスを通して得られる体験を指します。 UIとUXの違い UIはユーザーが目に触れ、接触する部分であり、Webサイトであれば何らかの端末画面に表示される情報全てがUIです。 そのUIを包括
インタラクティブに動く！スマートなワイヤーフレーム作成サービス「Claritee」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、誰でも素早く高度なワイヤーフレームを作成できるWebサービスをご紹介します。 ドラッグ＆ドロップでテンポよくコンポーネントを組み立てることが可能で、実際に動作するボタンやメニューなどを搭載したワイヤーフレームをプレビュー＆シェアできるのが特徴です。 Webデザインやモックアップ構築などに興味ある方も含めて、ぜひ参考にしてみてください！ 【 Claritee 】 ■「Claritee」の使い方 それでは、「Claritee」をどのように使えばいいのか詳しく見ていきましょう。 まずはサイトのトップページから【START FREE NOW】ボタンをクリックして無料のユーザー登録を済ませておきます。 FacebookやGoogleアカウントから登録可能ですが、メールアドレスとパスワードを設定しての登録もできます。 最終的に以下のようなダッシュボ
バンダイは、「S.H.Figuarts」より、「ボディくん -ワイヤーフレーム- （Gray Color Ver.）」「ボディちゃん -ワイヤーフレーム- （Gray Color Ver.）」を発表。2021年4月に発売する。 モデル用フィギュア「ボディちゃん」「ボディくん」に、 ワイヤーフレーム入りバージョンが登場。ボディの表面にワイヤーフレームを印刷したことで、絵を描く際に、体の丸みや立体感がよりわかりやすくなるという。 また、全身30か所以上が可動。可動域を制限することで、不自然なポーズは取れない構造になっているとのこと。 全高は「ボディくん」が約150mm、「ボディちゃん」が約135mm。交換用手首左右各4種、ミニブックがそれぞれ付属する。 価格は各4,950円。 （C）BANDAI SPIRITS
「愛される。をもっと。」をモットーに、デザインでビジネスを加速させる ”株式会社caroa”の広報担当者です！ 「誰もが主役になれて、誰かを主役にもできる」をビジョンとして、デザインパートナー事業をやっています！ 企業サイトはこちら→https://caroa.jp/
本記事では、Web制作では欠かせないワイヤーフレームの作り方を解説します。 初心者の方でも分かりやすいように具体例を交えながら、またこの記事を見ながらすぐに作れるようにガイドしていくので、「ワイヤーフレームの作り方を勉強したい」「ワイヤーフレームを初めて作る」そんな方はぜひ参考にしてみてください！ ワイヤーフレームとは？ ワイヤーフレームとは、一言で説明するとWebページ制作をする上での設計図です。 雑誌のページを作るとき、まずは写真やコラム、テキストの配置を考えてラフを作成します。 みなさんが今読んでいるこの記事も、いきなり書き始めるのではなく、どんな情報をどの順番で書くかをまとめた構成案を元に書いています。 Webページでも同じように、どの情報を/ページ内のどこに/どのように配置するといった情報設計が必要です。 ■参考記事：ワイヤーフレームについて基本をさらに詳しく知りたい方は以下の記
Figmaでワイヤーフレームを書く様々なメリット - Xtone Design & Tech Talk
エクストーンの松本です。 ワイヤーフレームをどのツールを使って作るかについては、多様な意見があるところかと思います。昔はオフィス系ツール以外の選択肢があまりなかったように思いますが、最近ではデザイン系ツールやオンラインのコラボレーションツールなどが続々と登場し、かなり選択肢が増えてきました。 エクストーンでは以前はパワーポイントを主に使用していましたが、最近はFigmaを使うケースが増えてきました。今回はワイヤーフレームを作成する上で抑えるべきポイントと合わせて、Figmaを利用するメリットについて書いてみたいと思います。 ワイヤーフレームに求められること まず大前提として、ワイヤーフレームは、ディレクター、デザイナー、エンジニア、QA担当者、クライアント、パートナー企業など、プロジェクトに関わるほぼ全員が目にする資料です。この資料を起点として、ビジュアルデザインやプログラム開発、テスト仕
ワイヤーフレームとは サイトの情報を整理し、設計書として視覚化したものです。 家を建てるとき、いきなり木を切ったり釘を打ったりしないのと同じように、webサイトも一度、設計書にまとめてから制作を行います。 web制作の現場ではディレクター（もしくはデザイナー）がワイヤーフレームの制作を行い、それをもとにデザインをします。 ワイヤーフレームがあることで、情報を俯瞰的に見ることができますし、サイト制作に関わるメンバー全員の意識を統一することができます。 架空サイトのワイヤーフレームを2種類用意しました。お好みの方をどうぞ。 サイトの目的など、要件はリンク内にまとめてあります。 作ったデザインはポートフォリオへの掲載OKです！ ※ポートフォリオに掲載し、もし何かしら不都合が生じた場合でも責任は負いかねますのであしからず。 ※ワイヤーフレーム自体を載せるときは出典を明記してください。 水族館のトッ
サイト訪問者が最初にアクセスするページをランディングページ（LP：エルピー）と呼びます。広告のリンク先として作成されることが多く、BtoB商材においても多くの企業が作成しています。 本記事では、ランディングページの企画やラフ案制作を担当される方向けに、構成・デザインの指針となる標準ワイヤーフレームのテンプレートを公開します。 LPワイヤーフレーム（PowerPoint形式）のダウンロードはこちら LPワイヤーフレーム（XD形式）のダウンロードはこちら ※個人情報の入力なし。無料でダウンロードできます ランディングページから訪問者にコンバージョンしてもらうために、成功ポイントが詰まったワイヤーフレームになっています。ぜひご活用ください。 なお、本記事と標準ワイヤーフレームは、株式会社WACUL 取締役CIO 垣内 勇威様（@yuikakiuchi）に監修をいただきました。 才流では「ランディ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ワイヤーフレームとは？作り方、おすすめツールも紹介 | QUERYY(クエリー)
ワイヤーフレームとは？作り方やテンプレートが使えるおすすめツールもご紹介｜セブンデックス
UI/UXで考えるワイヤーフレーム | 大阪のWebマーケティング会社｜株式会社モンゴロイド
価格.com - モデル用フィギュア「ボディくん/ボディちゃん」に、 ワイヤーフレームVer.が登場
BtoBサイトの標準ワイヤーフレームのFigma版を配布します｜caroa.inc
【初心者向け】ワイヤーフレームの作り方を丁寧にガイド！おすすめツールもご紹介 | 株式会社ニジボックス
【ポートフォリオ掲載OK】デザイン練習に使えるワイヤーフレーム配布します
BtoB商材のLP（ランディングページ）の標準ワイヤーフレーム | メソッド | 才流