タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム
本当に実践的なデザインドキュメントの書き方 第1回：なぜ渡されたワイヤーフレームは分かりにくいのか？ | アドビUX道場 #UXDojo
本当に実践的なデザインドキュメントの書き方 第1回：なぜ渡されたワイヤーフレームは分かりにくいのか？ | アドビUX道場 #UXDojo 連載 本当に実践的なデザインドキュメントの書き方 いきなり渡されたワイヤーフレームをデザインするよう言われて戸惑った経験は、デザイナーなら誰でもあるのではないでしょうか？これはディレクターとデザイナーの分業という状況に起因する問題ですが、分業が一般的なのにはもちろん理由があります。そこで、この連載では、現在の分業体制を前提に、情報設計に関わる『デザインドキュメント』をきちんと制作することで、この問題を解決する手段を探ります。 第1回は、受託のWeb制作における一般的な分業体制を詳細に分析し、よりデザイナーが貢献できる役割分担について考えていきます。 なかなかはじめられないUXデザイン これはGoogleトレンドで、「Webディレクター」「Webデザイナー
先日ローンチされたAdobe XD Trailから、Adobe XDの使い方がよく分かるワイヤーフレーム・プロトタイプを制作するチュートリアルファイルを紹介します。 Adobe XDの基本操作をはじめ、ワイヤーフレームの作成、スタイルの適用、プロトタイプの作成、コラボレーションなど、実践的な使い方がこれでよく分かります。
プラモデルのランナーだけを材料に作り上げた、初代ガンダムが秀逸です。中身はスカスカだけど、外枠は完全にガンダム……！ スケールは48分の1。144分の1スケールのガンプラと比べると、その巨大さが分かる 製作したのは、このためにTwitterアカウントを立ち上げたStick Man（@StickGundam／YouTube）さん。ガンプラ4個分ほどのランナーを地道に棒状へ整え、接着して48分の1スケールの巨大なガンダムに組み上げました。 塗装はせず、各部の配色はランナーの色で表現。顔やビームサーベル、手指など細かい部分も、全てランナーの束で再現しています。 途中で飼い猫に粉砕される悲劇を乗り越えて完成した力作は、「ワイヤーフレーム風でかっこいい」「見事なジャングルジム、もといジャングルガンダム」「エコだよそれは」と話題に。フレームが目立つビジュアルと、主演が古谷徹さんという共通点から、「ビデ
全部無料！ワイヤーフレームからプロトタイプ作成まで完結できる「Evrybo」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、ゼロからワイヤーフレームを作って、インタラクティブに動作可能なプロトタイプ開発まで完結できる無料のWebサービスをご紹介します。 作成できるプロジェクト数やユーザー数に制限がなく、自分好みのプロトタイプを作成してそのまま公開・シェアが可能。さらに簡単なテストもできる機能が搭載されています。 ワイヤーフレームの作成やプロトタイプ開発に興味ある人はぜひ参考にしてみてください！ 【 Evrybo 】 ■「Evrybo」の使い方 それでは、最初に「Evrybo」をどのように使い始めたらよいのか実際に触りながら見ていきましょう！ まずはサイトにアクセスしてトップページにあるボタンをクリックします。 ユーザー登録の画面が表示されるので、メールアドレス・パスワードを入力しましょう。 登録が完了すると最初のプロジェクトを作成できる画面になります。 プロ
12/3にパシフィコ横浜で開催された「AdobeMAXJapan」に合わせて、Adobe XD用の便利なプラグインが登場しました！ プラグインは通常、英語圏内に特化されたものが多いですが、「Quick Mockup」はなんと日本のデザイン現場向けに特化されたもので、簡単にワイヤーフレームやモックアップが作成できます。 日本のUXデザイン用に開発されたAdobe XD用プラグイン「Quick Mockup」 Quick Mockupの特徴 Quick Mockupのインストール Quick Mockupの使い方・動画 Quick Mockupの特徴 Quick Mocukupは、日本のデザイン現場で使用頻度の高いUI要素のサンプルから簡単にワイヤーフレームやモックアップを作成、さらにスタイル、ステート、コンテンツのカスタマイズで簡易プロトタイプをすばやく簡単に作成できます。 Quick Mo
Figmaのワイヤーフレーム・フローチャート・プロトタイプ用の素材を紹介します。 Webサイトやスマホアプリで使用されるさまざまなコンポーネントやUI要素、基本的なスタイルが用意されており、短時間で作成できます。 UI Template 日本人クリエイターが制作した、Figmaのワイヤーフレーム用テンプレート。基本的なスタイル、コンポーネント、ワイヤーフレーム用のアセットが用意されており、デザイナー以外のエンジニアやディレクターでも使いやすい素材です。
この記事ではワイヤーフレームを作成するとき、FigmaやXDを開いて手を動かす前に、情報設計をどのように整理し、考えていくかについてまとめています。記事内でWebサイトでワイヤーフレームを作成するときに注意したい点として、下記のように書きました。 ツールを立ち上げてアレコレと考えながら手を動かすとフォントやレイアウトにこだわりだしたりしてしまい、あっという間に時間がなくなってしまいます。考えてから形に落とすことを徹底するためにIA（情報設計）を考え抜くことが大切です。 0. 情報設計とトンマナ設計を分けて考える情報の優先度、情報の量、情報の回遊性といったIA（情報設計）を考え抜くことはワイヤーフレーム作成において最も重要です。IAを考え抜いたその後に、FigmaやXDを使ってワイヤーフレームを形にしていきます。では実際にワイヤーフレームを形にしていくとき、どのような工程で進めていくと良いか
先日1500ページくらいのやや大きめなコーポレートサイトのワイヤーフレームをディレクター、デザイナー、テクニカル担当、アシスタントという職能や経験もバラバラのチームで共同作成しました。みなが足並みを揃えて進めていけるようにワイヤーフレームの作り方を要素分解して、共通理解を持って作業をできるようにしました。どのような手順や考え方で進めていったのかをnoteにも記しておきます。 0. 情報設計とトンマナ設計を分けて考える Webサイト制作ではデザイン着手前の工程でワイヤーフレームと呼ばれるWebサイトの設計図のようなものを多くの場合で作ります。デザインとの違いは何かというと、上図のようにワイヤーフレームでは「情報設計」を主として扱います。そのためトンマナ（トーン&マナー）と呼ばれるWebサイトの印象や雰囲気を形作る要素については考えず、Webサイトに掲載する情報について決定することが目的となり
150種類以上のコンポーネントと50種類以上のすぐに使えるスマホスクリーンが含まれたワイヤーレフーム素材を紹介します。 アイデアを素早くプロトタイプ化するためのスターターキットで、スタイルガイドを利用して新しいコンポーネントやスクリーンを簡単に作成することもできます。 かわいいデザインで、見るだけでも楽しめます！
CGにしか見えないワイヤーフレームカーがTwitterで話題です。なぜ作ったのか、制作を行った山口製作所に話を聞きました。 CGじゃないだとっ……!?（画像提供：おすぎさん） この脳がバグるオブジェを発見したのはおすぎさん（@yg_ic23）。「CGとかじゃなくてマジ」と投稿された写真には、3DCAD（3次元データを使った製図用ソフト）で描かれた車のワイヤーフレーム画像に見える物体が写っています。 拡大してみると、描かれたものではなく実在していることがよくわかります。建物のガラスに映り込んでいたり、ワイヤーに水滴がついていたりしていて、見れば見るほど不思議です。 本当に存在しています（画像提供：山口製作所） このワイヤーフレームカーを制作したのは、店舗ディスプレイを手がける山口製作所。曲げたワイヤーをひとつひとつ職人が溶接し作ったそうです。なぜ制作したのか経緯について話を聞きました。 ――
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、先輩に教えてもらった「ワイヤーフレームの作り方」を紹介します。わたしはこの方法で作るようになってから、ワイヤーフレーム作りが楽しくて、Webデザインの大好きな工程のひとつになりました。 このワクワク感を、ぜひたくさんの新人デザイナーとシェアできればと思います！どうぞ最後までお楽しみください✍ はじめに：ワイヤーフレーム（WF）とは？ワイヤーフレーム（「WF」と省略することも）は、Webサービスの制作過程で必要になる設計図のこと。例を挙げると、以前に私が個人的に制作した音楽教室のLPでは、以下のようなワイヤーフレームを作りました。 ワイヤーフレームは、Webサイトやアプリの中で「どんな情報を、どんな順番で見せるのか？」を決める骨組みです。ここで決めた内容が、後工程のデザインに大きく影響します。 ちなみに、ワイヤーフレ
なぜデザインツール「Whimsical」はワイヤーフレームの迅速な作成に適しているのか ｜ブログ｜root｜芯を問い、成長に貢献する
Webサイトやアプリを作る際に設計図として欠かせないワイヤーフレーム。各画面で何を伝えたいかを一緒に開発するエンジニアやディレクターに伝えるコミュニケーションツールとして大事な役割を持っています。 一方で、ワイヤーフレーム作成の段階でグラフィック要素を多くしてしまったり、色やロゴ、複雑なフォントを多用するなど、ついデザインを作り込んでしまったことはないでしょうか。こうした問題は、特に初心者のデザイナーの方に陥りがちかと思います。 しかし、作り込んだからといって良いワイヤーフレームと言えるとは限りません。むしろWebサイトやアプリの方向性の合意を関係者内で早めにとり、そのあとで細かく作り込む方が、効率よくデザインを進めることが出来ます。 この記事では、素早くワイヤーフレームを作るためにrootでも使っているデザインツール「Whimsical」をご紹介します。 直感的な操作が可能なデザインコラ
Adobe XDでWebサイトを制作したい、ワイヤーフレームの作り方を具体的に知りたい、コミュニケーションやプレゼンテーションツールとして活用したい、基本操作から実務レベルの使い方まで詳しくていねいに解説した一冊を紹介します。 Adobe XDは、Webサイトやアプリの制作で欠かせないツールの1つとして多くのユーザーに支持されています。Adobeユーザー（登録無料）なら無料で利用でき、Webサイトやアプリの制作だけでなく、コラボレーションツールやコミュニケーションツールとしても活躍します。 本書は現役のデザイナー・ディレクター陣が執筆した、Adobe XDの解説書です。基本的な操作から、WebサイトやスマホアプリのさまざまなUIデザインやワイヤーフレームの作成方法、オンラインディスカッションやプレゼンテーションなどの活用方法まで、実務で役立つテクニックが詳しく解説されています。 学べるだけ
こんにちは、もしくはこんばんは。 今回はアル社での、Figmaを使ったワークフローの話です。 アルでは2022年1月にハロマスというサービスをリリースしました。 ハロマスは、クリエイターが作ったオリジナルのギフトを買えるサービスで、デザインはFigmaで制作されています。 UIデザインはFigmaで作り、エンジニアが参照しながら開発を進める、それだけならば至って普通なのですが、ハロマスの場合、ディレクターもFigmaを利用しています。 要はワイヤーフレーム(画面の設計図)を作るのに、一般的なWhimsicalやGoogle Slides やPowerPointではなく、Figmaで作るということです。 開発中のハロマスFigmaなぜやったのかこれはサービス開発を爆速(※)でやるために、必要に迫られてやったということもあるのですが、ワイヤーフレームとUIデザインを作るツールが一緒である方が、
サイト訪問者が最初にアクセスするページをランディングページ（LP：エルピー）と呼びます。広告のリンク先として作成されることが多く、BtoB商材においても多くの企業が作成しています。 本記事では、ランディングページの企画やラフ案制作を担当される方向けに、構成・デザインの指針となる標準ワイヤーフレームのテンプレートを公開します。 LPワイヤーフレーム（PowerPoint形式）のダウンロードはこちら LPワイヤーフレーム（XD形式）のダウンロードはこちら ※個人情報の入力なし。無料でダウンロードできます ランディングページから訪問者にコンバージョンしてもらうために、成功ポイントが詰まったワイヤーフレームになっています。ぜひご活用ください。 なお、本記事と標準ワイヤーフレームは、株式会社WACUL 取締役CIO 垣内 勇威様（@yuikakiuchi）に監修をいただきました。 才流では「ランディ
Shopifyサイトのデザイン作業を大幅に効率化！Adobe XDワイヤーフレームキットを無償配布します | non-standard world株式会社
こんにちは、アートディレクターの佐藤です。 このたび、Shopifyサイトのテーマ開発・デザインをする際に役立つ、Adobe XDワイヤーフレームキットを作成しましたので、無償配布します。 Shopify未経験の方がオリジナルテーマをデザインする際に、テーマ構造を把握する意味でも役立つかと思います。
AlexはStockholmに住むUXデザイナーです。アクセシビリティやフロントエンドの開発において長年の経験があります。物事をシンプルで楽しく、効率良くするために日々奮闘し、その経験をデザインコミュニティでシェアするのが大好きです。 近年ではワイヤーフレームを描画するためのツールが多く存在しますが、私はあえて紙のワイヤーフレームキットを利用しています。この記事ではその理由と、紙のワイヤーフレームを使用してより優れたデザイナーになるための方法をご紹介します。 2012年に、私は自分のワイヤーフレームスキルを次のレベルへと引き上げるべく、 新しいiPad用に「Paper by Fiftythree」という素晴らしいアプリをインストールし、そしてアメリカ国内の口コミで好評だった２つのタブレットスケッチペンを取り寄せました。 同じ頃、私はスウェーデンのデザイナー、MårtenAngnerによる紙
高坂 on Twitter: "スケッチからイラストと3Dモデルをリアルタイムで自動生成する実験です。 右上がワイヤフレーム、左下が法線、右下がテスクチャを貼り付けた3Dモデルになります（イラストと区別が付きにくいため軽く回転させています）。 パラメータスライダ… https://t.co/eaq6lqzK6H"
スケッチからイラストと3Dモデルをリアルタイムで自動生成する実験です。 右上がワイヤフレーム、左下が法線、右下がテスクチャを貼り付けた3Dモデルになります（イラストと区別が付きにくいため軽く回転させています）。 パラメータスライダ… https://t.co/eaq6lqzK6H
キャンパ こんにちは！キャンパ(@soloxcamp)です。 今回はKOBAYANさんのユーチューブ動画をご紹介したいと思います。 焚き火台でマカロニグラタンが作れてしまうんです(^^)♪ 焚き火台を使ったでマカロニグラタン レシピ マカロニ アスパラガス 鶏もも 玉ねぎ マッシュルーム 薄力粉 調味料（コンソメ、塩、ホワイトペッパー） 調理手順 マカロニとアスパラを茹でます。 具材（鶏もも、玉ねぎ、マッシュルーム）を炒めます。 3.ホワイトソースを作ります。 3.1火にかけた鍋にバターを適量入れ溶かします。 3.2薄力粉を入れ素早くしっかり混ぜます。ダマにならないよう 数回に分けて入れます。 3.3コンソメ、塩、ホワイトペッパーで味を整えます。 3.4とろみが出てきたら完成です。 4.炒めておいた具材をホワイトソースの入った鍋に入れます。 5.茹でておいたマカロニ、アスパラを入れます
Webサイトのワイヤーフレームやモックアップに使用するSVGで制作されたUI要素のスケルトン素材 -UI Skeleton Gallery
Webサイトやスマホアプリで使用される、カード、セクション、ボタン、フォーム、見出し、テキスト、リスト、画像、動画など、UI要素のスケルトン素材を紹介します。 商用利用も無料で、ダークモード・ライトモードに対応しており、素材はSVGのファイルとコードでダウンロードできます。もちろん、Figmaでも利用できます。 UI Skeleton Gallery UI Skeleton Galleryは、デザインのワイヤーフレームやモックアップに使用するSVGで制作されたUI要素のスケルトン素材です。スケルトン素材とは実際のコンテンツは一切含まず、コンテンツが完全に読み込まれる前にページのワイヤーフレームを提供するUI要素です。 素材の利用にあたっては商用プロジェクトでも無料で、クレジットなども必要ありません。詳しくはTerms of useをご覧ください。
ただのワイヤーフレームと一歩差をつける！作成するときの10のコツ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、Webディレクターのなべちゃんです！ 今回はWebサイト制作では欠かせない、サイトの骨格である「ワイヤーフレーム」の作り方について、紹介していきたいと思います。 LIGではデザイナーがワイヤーフレームを作成することが多いのですが、今回は先輩ディレクターでありデザイナーでもあるほそさんにフィードバックをいただきながら作成していきました。 お客様にとって内容がわかりやすいのはもちろん、デザイナーにとってもデザインしやすいという観点でのフィードバックが、目から鱗の内容だったので、今回学びのアウトプットとしてまとめていきたいと思います！ そもそもワイヤーフレームとは 冒頭でチラッと書きましたが、サイトの骨格・情報の設計図のようなものです。 Webサイトを作成するときに、いざデザインをするとなると、この情報は必要なかった、この情報は入れてほしい、表示順を変えてほしいと出戻りが起こってしま
この度、株式会社ベイジ、株式会社WACULと三社共同でBtoBサイトの成果創出パターンをまとめた180個のチェックリストと、それを反映したワイヤーフレームを公開することになりました。 スライド（チェックリスト） PPT（ワイヤーフレーム） XD（ワイヤーフレーム） 本プロジェクトのきっかけや詳細解説はベイジ社の記事にまとまっていますので、本稿では、『正しい型』があることによるメリットや、マーケティング活動の中でどのように活用いただきたいかをお伝えします。 『正しい型』が普及することの効用 当社では、今回のワイヤーフレームに限らず、BtoBマーケティングにおける様々な型を体系化・言語化して発信しています。 もちろん、自社のマーケティングや採用活動に役立てる目的もありますが、『正しい型』を開発・普及させることは、社会の役に立ち、自分たちの時間を投下する価値のある活動だと考えています。 『正しい
ホームページ制作の際に、重要な資料の1つ「ワイヤーフレーム」。 ホームページの「設計図」のような役割を果たします。 しかし、ワイヤーフレームのフォーマットはバラバラ。 ワイヤーフレームってどうやって作るの？そもそも必要なの？ 簡単にワイヤーフレームを作る方法ないの？ エクセルやパワポなど専用のツールを使わず作りたい とお悩みの担当者の方も多いかと思います。 本記事では、そもそもワイヤーフレームとは？メリットは？というところから パワーポイントを使った「ワイヤーフレームの作り方」をご紹介していきます。 「初めてホームページをリニューアルする」「コンテンツの量が多いのでサイトマップを作って整理をしたい」という方は是非実践してみてください。 記事の最後では、パワーポイント形式のワイヤーフレームのサンプルをプレゼントしております。お気軽にダウンロードしてください。 ワイヤーフレームとは？ ワイヤー
【ディレクター向け】ワイヤーフレーム作成に役立つ4つのプラグイン【adobe XD】 公開日 : 2021.12.08 最終更新日 : 2022.10.06 ディレクション ディレクターやデザイナーがWeb制作時によく使用するアプリ「adobe XD」はプラグインが豊富で、「これできればいいのに〜」ということや手の届かないかゆい所に丁度いいプラグインが沢山あります。 今回はそんなXDのプラグインを4つご紹介します！ Split Rowsまずは何を差し置いてもこれかなと！ このプラグインは改行で区切られているテキストを一行ずつにバラす(分解してくれる)アプリケーションで、私自身ディレクション業務の中でワイヤーフレームを作成する際に、クライアントからテキストなどの素材をいただくのですが、例えば沿革などの多数の行になってしまう素材などに非常に役立ちます！ unDrawこちらのプラグインは、手軽に
【Adobe XD】神速ワイヤーフレームの作り方完全ガイド - Adobe XD - ウェブマーケティング・ホームページ制作会社｜remacre（リマケ）
デザイナーじゃないし、WEB経験も浅いけど 「XDでワイヤーフレームを作らなきゃいけなくなった！」 「調べても便利機能とかありすぎてよくわからん！」 「とりあえずワイヤーフレームを作りたいだけだから必要情報教えて」 とお悩みの方のために今回はワイヤーフレームの作り方とこれさえ知ってれば 神速でワイヤーフレームができる便利機能を紹介します。 できるだけ簡潔に、この記事さえ見れば
The Hero's Journey (For movie fans, Lego fans, and presenters!)
ワイヤーフレームとは何なのか問題についてについて
昨日、ワイヤーフレームとは何なのか問題についてのスライドを公開した。非常にあっさりしたスライドなのでひとまず見てみてほしい。 前々から、ワイヤーフレームはスペック検討が主旨であり、デザインやレイアウトといった見てくれの検討をするものではないというのを必要に応じて述べているんだけども、その言説がパーマリンクを持ってないのが不便だなと改めて思ったからでもある。 ワイヤーフレームとは何なのか問題そのものだけでなく、関連して思っていることはいろいろあり、そうした背景のようなものの一部を以下に述べておきたい。 つい今週開催されてたMAX Japanで、Adobeが日本特有のデザインプロセスに対するソリューションとしてXD用にQuick Mockupなるものを発表したようだが、これも結局、ワイヤーフレームなのか、デザインの中間成果物なのかがはっきりしない印象がある。日本特有のデザインプロセスっていうの
才流（サイル）では、2019年よりWeb制作会社の株式会社ベイジ、企業のデジタルマーケティングを支援する株式会社WACULと3社共同でBtoBサイトの成果創出パターンをまとめたチェックリストと、それを反映したワイヤーフレームを公開しています。 一口にBtoBサイトといっても、形は企業や商品・サービスによって異なるものです。自社のビジネスモデル、顧客の属性、組織の特性、その時々の業界事情などにより、100％同じにはならないこともあるでしょう。しかし、そうした個別事象があったとしても、BtoBサイトとしてかならず押さえておくべき型は明確に存在します。 本チェックリストとワイヤーフレームはその型を網羅しています。ぜひ自社のBtoBサイトとチェックリストを照らし合わせて、課題発見・改善に役立ててください。 BtoBサイトのワイヤーフレーム（PowerPoint形式） BtoBサイトのワイヤーフレー
[BEM設計]うわああああ三(卍^o^)卍ってならないBEMの書き方をワイヤーフレーム使って整理するぞ（その1） - Qiita
この記事について BEMを使ってコーディングしていくとき、 コンテンツ量の多いサイトになると毎回のように混乱してうわあああああああああ三(卍^o^)卍ﾄﾞｩﾙﾙﾙﾙ ってなるので 自分の頭の中をまとめる意味で簡単なワイヤーフレームを使って解説するぞ〜〜〜！！！！！！ BEMって何？って人は先にこっちを読んでな↓ [HTML/SCSS]BEM設計を図を使って解説してみる さて、今回は下のワイヤーフレームを見ながらBEMるぞ。 なんか全部について解説してたらはちゃめちゃな長さになってしまったので、2回にわけてお送りします。 今回はheaderとfooterをいざBEMる。 かかってこ〜〜〜〜い 想定としてはコーポレイトサイトっぽい感じ。 いくつかページが存在してて、ヘッダーとフッターは共通化してなって言われてるていでやってみるぞい。 headerってBlockつくるぞい ヘッダーに関してはhe
![[BEM設計]うわああああ三(卍^o^)卍ってならないBEMの書き方をワイヤーフレーム使って整理するぞ（その1） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/4d64fb55ab46239d3403d2de4f506d67d5035380/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JTVCQkVNJUU4JUE4JUFEJUU4JUE4JTg4JTVEJUUzJTgxJTg2JUUzJTgyJThGJUUzJTgxJTgyJUUzJTgxJTgyJUUzJTgxJTgyJUUzJTgxJTgyJUU0JUI4JTg5JTI4JUU1JThEJThEJTVFbyU1RSUyOSVFNSU4RCU4RCVFMyU4MSVBMyVFMyU4MSVBNiVFMyU4MSVBQSVFMyU4MiU4OSVFMyU4MSVBQSVFMyU4MSU4NEJFTSVFMyU4MSVBRSVFNiU5QiVCOCVFMyU4MSU4RCVFNiU5NiVCOSVFMyU4MiU5MiVFMyU4MyVBRiVFMyU4MiVBNCVFMyU4MyVBNCVFMyU4MyVCQyVFMyU4MyU5NSVFMyU4MyVBQyVFMyU4MyVCQyVFMyU4MyVBMCVFNCVCRCVCRiVFMyU4MSVBMyVFMyU4MSVBNiVFNiU5NSVCNCVFNyU5MCU4NiVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MSU5RSVFRiVCQyU4OCVFMyU4MSU5RCVFMyU4MSVBRTElRUYlQkMlODkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTE0NjVkODNlMTQ0NzJlMjc5OTU5Yzg4NzRkN2E2N2Nm%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbWFtZV9oYXNoYmlsbCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NDliN2YwMGYxY2U3YjJkMjQ3MWU2MWFhNzAyMDRiNzQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Da7c56850d18e0cf9241cd408d1f64f39)
Web制作に必要不可欠なワイヤーフレーム（ワイヤー）ですが、あなたはどこまで作り込めていますか？ 新人ディレクターだけではなく、数年実務経験を積んだディレクターでも精度の低いワイヤーが見受けられます。 精度の高いワイヤーを作らないのと作れないのでは全く意味が異なります。 工数やスケジュールの問題で簡素化しないといけない場合もあるでしょう。 総じて言えることは高収入を得ている優秀なディレクターは精度の高いワイヤーフレームを作ることができます。 精度の低いワイヤーをどのように高い精度にするためのポイントをまとめました。 基本的なワイヤーを作れる前提でのお話ですので読んでいて内容や単語がわからない人はググってください。たくさん記事があります。 1.事前準備実践形式なので勉強中の方は難しいかもしれません。 いきなり何もない状態でブラッシュアップするのは難しいと思います。 材料となる下記ドキュメント
脳をバグらせる「ワイヤーフレーム車」 製作した金属加工会社に聞く
作った会社は 手がけたのは、埼玉県吉川市にある山口製作所。 金属加工や店舗ディスプレイ用の什器などの企画・設計から製作まで手がけている会社です。 話題になっているのは、埼玉県新座市で目撃された白いワイヤーフレームカー。 現実の中にデジタル情報を映し出す拡張現実（AR）のように見えますが、実在する本物です。 作り方は、3次元CAD（コンピューター支援設計）ソフトで設計し、レーザーで鉄板を切って原型となる「治具」を製作。 その治具に沿ってワイヤーを手作業ではわせて溶接し、最後に治具を外して完成させたものです。 ツイッターで紹介されると、「作った人すごい」「脳がバグる」と話題になっています。
才流（サイル）では、BtoBサイト向けに成果につながりやすいフォームページの作成・改善のポイントをまとめました。さらに、無料で使えるフォームページのワイヤーフレーム（XD版・figma版）も作成したので、自社のフォームページを作成・改善される際に活用してください。 本記事は、フォーム通過率の改善にインパクトが大きい改善案のみを紹介しています。フォームページの改善に関して、より詳しくポイントを知りたい方は、以下の記事をご覧ください。 ※関連記事：入力フォーム最適化（EFO）改善のチェックリスト～営業も安心の「全体最適」のポイント BtoBサイトのフォームページのワイヤーフレームをダウンロードする（XD） BtoBサイトのフォームページのワイヤーフレームをダウンロードする（figma）※個人情報の入力は必要ありません。 クリックするとzipファイルがダウンロードされますので、解凍してご利用くだ
Adobe XDでモバイルファーストのWebデザイン入門 第2回: ワイヤーフレームをサクサクつくろう！ | Adobe Blog
本連載の第1回では、Adobe XDを使い始める前に知っておきたい基礎知識をご説明しました。第2回からは、実際にWebサイトのデザインに取り掛かります。制作するのは【架空のミュージシャンのWebサイト】です。 この記事では、デザインの最初のステップとして、XDの［長方形ツール］と［テキストツール］を使い、ワイヤーフレームを作成する手順を解説します。XDを使うと、ワイヤーフレームを直感的にサクサクつくることができます。特に［リピートグリッド］は、コンテンツをいくつも並べては直すことの多いワイヤーフレーム作成の本当に強力な味方です。 なお今回は、ワイヤーフレームのラフスケッチが存在する状態からの作業を想定しています。このように、アイデアレベルのデザインを、実際にデバイスの画面で確認しながら形にするにはXDは最適のツールです。もちろん、ゼロからXDを使ってワイヤーフレームを試行錯誤するのもオスス
サイトURLだけでワイヤーフレームに変換される！ – HTML to Figma を使ってみた。｜ProgLearn｜エンジニアのためのプログラミング情報メディア
ワイヤーを作らなくて済む！ みなさん、こんにちは。どんぶラッコです。 先日こんなツイートを発見しました。 【Web制作者のためのTips】 昨年の夏に追加されたFigmaのプラグイン機能がすごい‼️ 動画は「HTML to Figma」というプラグインで、既存サイトのURLを入力するとそれを自動でワイヤーフレームにしてくれます。これ使えばもうワイヤーをゼロから作る必要ない😇神 Figmaのプラグインは要チェックです👍 pic.twitter.com/BwReAlbNZK — ショーヘー@デイトラ運営 (@showheyohtaki) January 15, 2020 ということで、筆者も実際に使ってみました！ Figma に会員登録する まずは登録から始めます。 https://www.figma.com/ 3プロジェクトまでだったら無料で使えるようですね。ということで Starter
本記事を書いている株式会社caroa、では「caroa design」というSTUDIOを使用したビジネス向けのデザイン制作サービスを提供しており、多くのBtoBサイトを制作しております。 上記のブログ内では、XDとPNGが配布されていますが、Figmaでデザインをされている方も多くいます。 世の中にもっと効果的で、魅力的なサイトを増やすためにも、Figma版のワイヤーフレームを作成できないかと考えました。そこで、ベイジの枌谷さん（@sogitani_baigie）に許可をいただき、caroaにてFigma版を作成することにしました。
こんにちは。マニュアル作成・ナレッジ共有ツール「NotePM」ブログ編集局です。 ワイヤーフレームは、webページの作成や更新に重要で、webページのクオリティに大きな影響を与えます。ワイヤーフレームを作成するツールは、サービスによって機能が異なるので自社のニーズに沿ったツールを選ぶことがポイントです。この記事では、ワイヤーフレーム作成ツールの機能や導入メリット、おすすめのサービスを紹介するので、自社の目的を達成できるツールを導入しましょう。 ワイヤーフレームとは ワイヤーフレームとはwebページの設計図のことで、ページ内のどこに、何の項目を、どのように配置するかをまとめたレイアウトのパターンのことです。たとえば「TOPページの上部にメインビジュアルとなる画像を配置する」「新着記事をページの中心に5記事配置する」「広告バナーはメインビジュアルの下に配置する」のような内容が図で表されているの
Web広告と密接な繋がりのあるランディングページ。広告運用に携わる中で「広告に合わせて新しくページを作りたい」「既存のページの構成やテキストを修正したい」と思ったことはないでしょうか？中には改善の余地がありそうでも提案のハードルが高いと感じている方もいるかもしれません。 ランディングページを新規で提案する場合、デザイン担当者が参照する資料としてワイヤーフレーム（ページの構成案）を用意する必要があります。なんだか難しそうに聞こえるかもしれませんが、デジタルの描画ソフトを使うことでデザインの知識がない方でも簡単に作成することができます。 本記事のゴールは広告運用者がランディングページを新たに提案したいときに、ワイヤーフレームの作成からデザイナーへの依頼まで迷いなく対応できるようになることです。デザイナー側の立場である筆者の視点から、描画ソフトの紹介も含めて詳しく解説していきます。 ワイヤーフレ
【Whimsical】シンプルで高速すぎるデザインツール（マインドマップ/ 付箋/ フローチャート/ ワイヤーフレーム） | MAPLOG
ビジネス系マインドマッパーの川添（@kawazoezoe）です。 Twitterなんかでちらほら見かけるデザインツール「Whimsical（ウィムジカル）」。日本語訳すると、「気まぐれな」という意味で、いわゆるビジュアルコラボレーションに分類されるツールです。 まだ日本では十分に認知されていないようなので、その概要や最近人気の「miro」との違いについて紹介します。 なぜ「Whimsical」ができたのか？ Whimsicalのリリースは2017年。miroやCacooなど視覚的にコラボレーションできるツールと同じジャンル。 開発者によると、ビジュアルコラボレーションは全く新しいアイデアではなく、既存のツールはどれもUIや機能などが複雑でいま一つで気に入っていなかったと。「だったら自社でつくろう！」というところが開発の起点になっています。 目指したのは、ずばり高速でシンプル、かつデザイン性
約1年前、BtoB企業における顧客獲得型サイトの勝ちパターンをまとめた『BtoBサイト・チェックリスト』を、ベイジ、才流さん、WACULさんの3社連名で発表し、大きな反響をいただきました。 このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレーム
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します | knowledge / baigie
Adobe XDの使い方がこれでよく分かる！Adobe公式、ワイヤーフレーム・プロトタイプのチュートリアルファイル
ガンプラのランナーだけで作った「棒ガンダム」が話題 「ワイヤーフレーム風でかっこいい」「エコだよそれは」
Adobe XDで簡単にワイヤーフレームやモックアップを作成できる無料素材 -Quick Mockup
Figmaで簡単に作成できる！ワイヤーフレーム・フローチャート・プロトタイプ素材のまとめ
＜続編＞Webサイトのワイヤーフレームの作り方 ― FigmaやXDを開いた後の工程｜重松佑 / Shhh inc.
Webサイトのワイヤーフレームの作り方 ― FigmaやXDを開く前の３ステップ｜重松佑 / Shhh inc.
CC0の太っ腹ライセンス！スタイルガイドと150種類以上のコンポーネントが揃ったワイヤーフレーム素材 -Contra
「脳がバグる」 まるでCGみたいに見える“ワイヤーフレームの車”が話題 制作した理由を聞いた
ワイヤーフレームは“しゃべりながら”つくる｜akane
Adobe XDによるUIデザイン・ワイヤーフレームの制作方法を豊富な実例から学べる、UIデザイナーにお勧めの良書
Figmaでワイヤーフレームを作り効率化をした話｜ottiee / Alu CCO
BtoB商材のLP（ランディングページ）の標準ワイヤーフレーム | メソッド | 才流
私があえて紙でワイヤーフレームを描く理由
【焚き火台】モノラルワイヤーフレームライトでマカロニグラタン | ソロキャンプ初心者完全ガイド
BtoBサイト制作の『型』となるワイヤーフレームと180項目のチェックリスト
ワイヤーフレームの作り方完全ガイド【サンプル付き】 | Web幹事
【ディレクター向け】ワイヤーフレーム作成に役立つ4つのプラグイン【adobe XD】
ワイヤーフレームとは何なのか問題について
BtoBサイト制作の『型』となるワイヤーフレームと163項目のチェックリスト｜テンプレート集｜BtoBサイト改善ガイド
ワイヤーフレームブラッシュアップ法｜いのうえ かつき
BtoBサイトのフォームページ改善のポイント【すぐに使えるワイヤーフレーム付き】 | メソッド | 才流
BtoBサイトの標準ワイヤーフレームのFigma版を配布します ｜caroa times
【2024年版】ワイヤーフレームツールおすすめ11選を徹底比較！（無料あり）
【ノンデザイナー向け】ランディングページを提案したいときに読みたい、ワイヤーフレーム作成の３STEP｜アナグラム株式会社
成功法則が詰まったBtoBサイトの標準ワイヤーフレームを無料配布します | knowledge / baigie
masaru-arameya.hatenablog.com
togetter.com
news.yahoo.co.jp
ese.hatenablog.com
tamakai.xyz
news.yahoo.co.jp