サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレームPNG版（8.6MB） Adobe XDでパブリッシュしたプロトタイプ 編集可能なファイルはAdobe XDのみです。それ以外のデザインツールをお使いの方は、PNG版を参考に自作してみてくだ
本当に実践的なデザインドキュメントの書き方 第1回：なぜ渡されたワイヤーフレームは分かりにくいのか？ | アドビUX道場 #UXDojo 連載 本当に実践的なデザインドキュメントの書き方 いきなり渡されたワイヤーフレームをデザインするよう言われて戸惑った経験は、デザイナーなら誰でもあるのではないでしょうか？これはディレクターとデザイナーの分業という状況に起因する問題ですが、分業が一般的なのにはもちろん理由があります。そこで、この連載では、現在の分業体制を前提に、情報設計に関わる『デザインドキュメント』をきちんと制作することで、この問題を解決する手段を探ります。 第1回は、受託のWeb制作における一般的な分業体制を詳細に分析し、よりデザイナーが貢献できる役割分担について考えていきます。 なかなかはじめられないUXデザイン これはGoogleトレンドで、「Webディレクター」「Webデザイナー
このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレームPNG版（8.6MB） Adobe XDでパブリッシュしたプロトタイプ 編集可能なファイルはAdobe XDのみです。それ以外のデザインツールをお使いの方は、PNG版を参考に自作してみてくだ
製作したのは、このためにTwitterアカウントを立ち上げたStick Man（@StickGundam／YouTube）さん。ガンプラ4個分ほどのランナーを地道に棒状へ整え、接着して48分の1スケールの巨大なガンダムに組み上げました。 塗装はせず、各部の配色はランナーの色で表現。顔やビームサーベル、手指など細かい部分も、全てランナーの束で再現しています。 途中で飼い猫に粉砕される悲劇を乗り越えて完成した力作は、「ワイヤーフレーム風でかっこいい」「見事なジャングルジム、もといジャングルガンダム」「エコだよそれは」と話題に。フレームが目立つビジュアルと、主演が古谷徹さんという共通点から、「ビデオ戦士レザリオン」を思い出す人も多いようです。 画像提供：Stick Man（@StickGundam／YouTube）さん
この記事ではワイヤーフレームを作成するとき、FigmaやXDを開いて手を動かす前に、情報設計をどのように整理し、考えていくかについてまとめています。記事内でWebサイトでワイヤーフレームを作成するときに注意したい点として、下記のように書きました。 ツールを立ち上げてアレコレと考えながら手を動かすとフォントやレイアウトにこだわりだしたりしてしまい、あっという間に時間がなくなってしまいます。考えてから形に落とすことを徹底するためにIA（情報設計）を考え抜くことが大切です。 0. 情報設計とトンマナ設計を分けて考える情報の優先度、情報の量、情報の回遊性といったIA（情報設計）を考え抜くことはワイヤーフレーム作成において最も重要です。IAを考え抜いたその後に、FigmaやXDを使ってワイヤーフレームを形にしていきます。では実際にワイヤーフレームを形にしていくとき、どのような工程で進めていくと良いか
CGにしか見えないワイヤーフレームカーがTwitterで話題です。なぜ作ったのか、制作を行った山口製作所に話を聞きました。 この脳がバグるオブジェを発見したのはおすぎさん（@yg_ic23）。「CGとかじゃなくてマジ」と投稿された写真には、3DCAD（3次元データを使った製図用ソフト）で描かれた車のワイヤーフレーム画像に見える物体が写っています。 拡大してみると、描かれたものではなく実在していることがよくわかります。建物のガラスに映り込んでいたり、ワイヤーに水滴がついていたりしていて、見れば見るほど不思議です。 本当に存在しています（画像提供：山口製作所） このワイヤーフレームカーを制作したのは、店舗ディスプレイを手がける山口製作所。曲げたワイヤーをひとつひとつ職人が溶接し作ったそうです。なぜ制作したのか経緯について話を聞きました。 ―― どういう経緯で制作したのでしょうか 山口製作所：2
こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、先輩に教えてもらった「ワイヤーフレームの作り方」を紹介します。わたしはこの方法で作るようになってから、ワイヤーフレーム作りが楽しくて、Webデザインの大好きな工程のひとつになりました。 このワクワク感を、ぜひたくさんの新人デザイナーとシェアできればと思います！どうぞ最後までお楽しみください✍ はじめに：ワイヤーフレーム（WF）とは？ワイヤーフレーム（「WF」と省略することも）は、Webサービスの制作過程で必要になる設計図のこと。例を挙げると、以前に私が個人的に制作した音楽教室のLPでは、以下のようなワイヤーフレームを作りました。 ワイヤーフレームは、Webサイトやアプリの中で「どんな情報を、どんな順番で見せるのか？」を決める骨組みです。ここで決めた内容が、後工程のデザインに大きく影響します。 ちなみに、ワイヤーフレ
Adobe XDでWebサイトを制作したい、ワイヤーフレームの作り方を具体的に知りたい、コミュニケーションやプレゼンテーションツールとして活用したい、基本操作から実務レベルの使い方まで詳しくていねいに解説した一冊を紹介します。 Adobe XDは、Webサイトやアプリの制作で欠かせないツールの1つとして多くのユーザーに支持されています。Adobeユーザー（登録無料）なら無料で利用でき、Webサイトやアプリの制作だけでなく、コラボレーションツールやコミュニケーションツールとしても活躍します。 本書は現役のデザイナー・ディレクター陣が執筆した、Adobe XDの解説書です。基本的な操作から、WebサイトやスマホアプリのさまざまなUIデザインやワイヤーフレームの作成方法、オンラインディスカッションやプレゼンテーションなどの活用方法まで、実務で役立つテクニックが詳しく解説されています。 学べるだけ
こんにちは！ インハウスマーケティング部のりこぴんです。 Webサイトのサイトマップやワイヤーフレームを考えるのって重要でありながら、とても時間がかかりますよね。 今回はプロンプトを入力するだけで一瞬でサイトマップとワイヤーフレームを作成してくれる生成AI「Relume」の使い方をご紹介します。 Webサイトの構成を少しでも効率化したいという方はぜひ試してみてください！ Relumeってなに？ Relumeとは Relumeとは、Webサイトを効率的に作成するために設計された生成AIです。大きな特徴は、Webサイトの概要を簡単に入力するだけで、AIが瞬時にサイトマップやワイヤーフレームを生成してくれること。 さらに、FigmaやWebflowなどのデザインツールと連携して編集することもできます。 サイトマップやワイヤーフレーム作成の効率化のために使用されることが多く、今注目を集めている生成
こんにちは、もしくはこんばんは。 今回はアル社での、Figmaを使ったワークフローの話です。 アルでは2022年1月にハロマスというサービスをリリースしました。 ハロマスは、クリエイターが作ったオリジナルのギフトを買えるサービスで、デザインはFigmaで制作されています。 UIデザインはFigmaで作り、エンジニアが参照しながら開発を進める、それだけならば至って普通なのですが、ハロマスの場合、ディレクターもFigmaを利用しています。 要はワイヤーフレーム(画面の設計図)を作るのに、一般的なWhimsicalやGoogle Slides やPowerPointではなく、Figmaで作るということです。 開発中のハロマスFigmaなぜやったのかこれはサービス開発を爆速(※)でやるために、必要に迫られてやったということもあるのですが、ワイヤーフレームとUIデザインを作るツールが一緒である方が、
ランディングページ設計の考え方ランディングページを設計する際、最初に考えることは来訪ユーザーの「商材への関心度合い」です。これは、ランディングページへの集客手段から予測できます。 例えば、検索して商材の情報を探している人は関心度合いが高いユーザー、SNS広告から流入する人は関心度合いが低いユーザーなどと分けられます。 次に、来訪ユーザーに提示したい「CTA（Call To Actionの略で喚起させたい行動を意味する）」を決めます。関心度の高いユーザーには「問い合わせ」や「資料請求」、関心度の低いユーザーには「お役立ち資料のダウンロード」や「ウェビナー申込」などをCTAとして設置します。 商材への関心度合いにマッチするCTAを設置するのがポイントです。整理すると、下図のように表せます。 つまり、ランディングページは「潜在ユーザー向けランディングページ」と「顕在ユーザー向けランディングページ
※本ページは、アフィリエイト広告を利用しています。 他の人はどういう工程でWebデザインを仕上げているのか、気になりませんか？ 通常は表に出ることのない実在するWebサイトのワイヤーフレームの設計、デザインカンプへの落とし込み、チェックバックを重ねて最終の完成形までブラッシュアップするまでの、デザイナーの意図や考え、デザインのテクニックなどを詳しく解説したデザイン書を紹介します。 掲載されている37のWebサイトはすべて実在するWebサイトです。 表紙に既視感を覚えた人は、大正解！ 去年末に当ブログで紹介した『WebデザインプロセスBook』（紹介記事）の続編というか第2弾で、前書はベストセラー３冠で評判でしたが、本書は前書よりもさらにパワーアップしています。 前書との大きな違いは、前書は1-4年目のデザイナーさんによるダミーサイトでしたが、本書は15-20年目のデザイナーさんによるすべて
Webサイトやスマホアプリで使用される、カード、セクション、ボタン、フォーム、見出し、テキスト、リスト、画像、動画など、UI要素のスケルトン素材を紹介します。 商用利用も無料で、ダークモード・ライトモードに対応しており、素材はSVGのファイルとコードでダウンロードできます。もちろん、Figmaでも利用できます。 UI Skeleton Gallery UI Skeleton Galleryは、デザインのワイヤーフレームやモックアップに使用するSVGで制作されたUI要素のスケルトン素材です。スケルトン素材とは実際のコンテンツは一切含まず、コンテンツが完全に読み込まれる前にページのワイヤーフレームを提供するUI要素です。 素材の利用にあたっては商用プロジェクトでも無料で、クレジットなども必要ありません。詳しくはTerms of useをご覧ください。
こんにちは、Webディレクターのなべちゃんです！ 今回はWebサイト制作では欠かせない、サイトの骨格である「ワイヤーフレーム」の作り方について、紹介していきたいと思います。 LIGではデザイナーがワイヤーフレームを作成することが多いのですが、今回は先輩ディレクターでありデザイナーでもあるほそさんにフィードバックをいただきながら作成していきました。 お客様にとって内容がわかりやすいのはもちろん、デザイナーにとってもデザインしやすいという観点でのフィードバックが、目から鱗の内容だったので、今回学びのアウトプットとしてまとめていきたいと思います！ そもそもワイヤーフレームとは 冒頭でチラッと書きましたが、サイトの骨格・情報の設計図のようなものです。 Webサイトを作成するときに、いざデザインをするとなると、この情報は必要なかった、この情報は入れてほしい、表示順を変えてほしいと出戻りが起こってしま
【ディレクター向け】ワイヤーフレーム作成に役立つ4つのプラグイン【adobe XD】 公開日 : 2021.12.08 最終更新日 : 2022.10.06 ディレクション ディレクターやデザイナーがWeb制作時によく使用するアプリ「adobe XD」はプラグインが豊富で、「これできればいいのに〜」ということや手の届かないかゆい所に丁度いいプラグインが沢山あります。 今回はそんなXDのプラグインを4つご紹介します！ Split Rows まずは何を差し置いてもこれかなと！ このプラグインは改行で区切られているテキストを一行ずつにバラす(分解してくれる)アプリケーションで、私自身ディレクション業務の中でワイヤーフレームを作成する際に、クライアントからテキストなどの素材をいただくのですが、例えば沿革などの多数の行になってしまう素材などに非常に役立ちます！ unDraw こちらのプラグインは、手
【Figma × Claude】MCPでつなぐ、デザインシステムに沿ったワイヤーフレーム自動生成＆編集フロー！ こんにちは！吉川です。 今回は「【Figma × Claude】MCPでつなぐ、自動ワイヤーフレーム生成＆編集フロー！」というタイトルでご紹介していきますが、何をしたかというと 1.FigmaでつくったデザインシステムをClaudeにMCPで読み込む 2.デザインシステムを元にClaudeで実装 3.Claudeで実装したhtmlをMCPでFigmaにデザインファイルとしてインポート の3つです。 なぜこれをやろうと考えたかで言うと、Web制作の現場においてAIで実装まで自動生成するのは、まだハードルが高い。 ただそれを見据えた上で、デザインシステムのルールを読み込んだWFまで編集可能な状態で自動生成すれば、かなり現場でも使えるフローになるのでは？と思ったためです。（そしてこのフ
デザイナーじゃないし、WEB経験も浅いけど 「XDでワイヤーフレームを作らなきゃいけなくなった！」 「調べても便利機能とかありすぎてよくわからん！」 「とりあえずワイヤーフレームを作りたいだけだから必要情報教えて」 とお悩みの方のために今回はワイヤーフレームの作り方とこれさえ知ってれば 神速でワイヤーフレームができる便利機能を紹介します。 できるだけ簡潔に、この記事さえ見れば
才流（サイル）では、2019年よりWeb制作会社の株式会社ベイジ、企業のデジタルマーケティングを支援する株式会社WACULと3社共同でBtoBサイトの成果創出パターンをまとめたチェックリストと、それを反映したワイヤーフレームを公開しています。 一口にBtoBサイトといっても、形は企業や商品・サービスによって異なるものです。自社のビジネスモデル、顧客の属性、組織の特性、その時々の業界事情などにより、100％同じにはならないこともあるでしょう。しかし、そうした個別事象があったとしても、BtoBサイトとしてかならず押さえておくべき型は明確に存在します。 本チェックリストとワイヤーフレームはその型を網羅しています。ぜひ自社のBtoBサイトとチェックリストを照らし合わせて、課題発見・改善に役立ててください。 BtoBサイトのワイヤーフレーム（PowerPoint形式）をダウンロードする BtoBサイ
2024年7月現時点では、無料トライアルを使用することもできます。生成できるデザイン数やエクスポートできる数に限りがありますが、試しに触ってみることができますのでぜひ試してみてください。 Galileo AIの始め方 Galileo AIの使い方は至って簡単。4ステップで登録が完了します。 1. 公式サイトにアクセス Galileo AI 公式サイトにアクセスし、右上のSign upをクリックしてください。 2. アカウントを作成 / Googleアカウントでログイン 次に、アカウント作成をおこないます。Googleアカウントでログインをおこなうことも可能です。画面の指示に従い、必要事項を入力してください。 3. 名前の登録 アカウント作成が完了すると、名前などの情報を登録する画面に遷移しますので、必要事項を入力してください。 必要事項記入の上、Continueをクリックすると料金表の画面
才流（サイル）では、BtoBサイト向けに成果につながりやすいフォームページの作成・改善のポイントをまとめました。さらに、無料で使えるフォームページのワイヤーフレーム（XD版・figma版）も作成したので、自社のフォームページを作成・改善される際に活用してください。 本記事は、フォーム通過率の改善にインパクトが大きい改善案のみを紹介しています。フォームページの改善に関して、より詳しくポイントを知りたい方は、以下の記事をご覧ください。 ※関連記事：入力フォーム最適化（EFO）改善のチェックリスト～営業も安心の「全体最適」のポイント BtoBサイトのフォームページのワイヤーフレームをダウンロードする（XD） BtoBサイトのフォームページのワイヤーフレームをダウンロードする（figma） ※個人情報の入力は必要ありません。 クリックするとzipファイルがダウンロードされますので、解凍してご利用く
作った会社は 手がけたのは、埼玉県吉川市にある山口製作所。 金属加工や店舗ディスプレイ用の什器などの企画・設計から製作まで手がけている会社です。 話題になっているのは、埼玉県新座市で目撃された白いワイヤーフレームカー。 現実の中にデジタル情報を映し出す拡張現実（AR）のように見えますが、実在する本物です。 作り方は、3次元CAD（コンピューター支援設計）ソフトで設計し、レーザーで鉄板を切って原型となる「治具」を製作。 その治具に沿ってワイヤーを手作業ではわせて溶接し、最後に治具を外して完成させたものです。 ツイッターで紹介されると、「作った人すごい」「脳がバグる」と話題になっています。
Web広告と密接な繋がりのあるランディングページ。広告運用に携わる中で「広告に合わせて新しくページを作りたい」「既存のページの構成やテキストを修正したい」と思ったことはないでしょうか？中には改善の余地がありそうでも提案のハードルが高いと感じている方もいるかもしれません。 ランディングページを新規で提案する場合、デザイン担当者が参照する資料としてワイヤーフレーム（ページの構成案）を用意する必要があります。なんだか難しそうに聞こえるかもしれませんが、デジタルの描画ソフトを使うことでデザインの知識がない方でも簡単に作成することができます。 本記事のゴールは広告運用者がランディングページを新たに提案したいときに、ワイヤーフレームの作成からデザイナーへの依頼まで迷いなく対応できるようになることです。デザイナー側の立場である筆者の視点から、描画ソフトの紹介も含めて詳しく解説していきます。 ワイヤーフレ
Figmaとは？ Figmaとは、アプリデザインやWebデザインに多く使用されるデザインツールです。UIUXデザイン、ワイヤーフレーム、プロトタイプ制作など、デジタルデザインのあらゆるタスクを行うことができます。ウェブブラウザから直接アクセスできるため、ソフトのダウンロードが必要なく、どこからでもアクセスしてデザイン作業を行うことが可能です。 Figmaは無料プランから始めることができ、多機能なプロフェッショナルプランまで様々なニーズに合わせて選択できます。バージョン管理やファイルの共有も簡単にできるため、多くのデザイナーや開発者にとって欠かせないツールとなっています。 Figmaについて基礎から知りたい方は以下の記事も併せてお読みください。 ワイヤーフレームとは ワイヤーフレームとは、WEBサイトなどを制作する上で各ページごとに必要な要素を整理したものです。基本はグレースケールで作られ、
ワイヤーフレームは、webページの作成や更新に重要で、webページのクオリティに大きな影響を与えます。ワイヤーフレームを作成するツールは、サービスによって機能が異なるので自社のニーズに沿ったツールを選ぶことがポイントです。この記事では、ワイヤーフレーム作成ツールの機能や導入メリット、おすすめのサービスを紹介するので、自社の目的を達成できるツールを導入しましょう。 ワイヤーフレームとは ワイヤーフレームとはwebページの設計図のことで、ページ内のどこに、何の項目を、どのように配置するかをまとめたレイアウトのパターンのことです。たとえば「TOPページの上部にメインビジュアルとなる画像を配置する」「新着記事をページの中心に5記事配置する」「広告バナーはメインビジュアルの下に配置する」のような内容が図で表されているので、ワイヤーフレームを見るだけでどこに何を配置するのか把握できます。webページの
ビジネス系マインドマッパーの川添（@kawazoezoe）です。 Twitterなんかでちらほら見かけるデザインツール「Whimsical（ウィムジカル）」。日本語訳すると、「気まぐれな」という意味で、いわゆるビジュアルコラボレーションに分類されるツールです。 まだ日本では十分に認知されていないようなので、その概要や最近人気の「miro」との違いについて紹介します。 なぜ「Whimsical」ができたのか？ Whimsicalのリリースは2017年。miroやCacooなど視覚的にコラボレーションできるツールと同じジャンル。 開発者によると、ビジュアルコラボレーションは全く新しいアイデアではなく、既存のツールはどれもUIや機能などが複雑でいま一つで気に入っていなかったと。「だったら自社でつくろう！」というところが開発の起点になっています。 目指したのは、ずばり高速でシンプル、かつデザイン性
このチェックリストはブログで公開しただけではなく、私たちのウェブ制作の現場でもフル活用されています。この1年間に手掛けた多くのBtoBサイトが、このチェックリストを満たすように設計され、多くのBtoBサイトでコンバージョン数/率やフォーム誘導数/率の向上など、ポジティブな変化が生まれました。 このような活動の中から、『BtoBサイト・チェックリスト』の内容を満たした『BtoBサイト・ワイヤーフレーム』なるものが誕生しました。これを今回、皆さんにご提供します。リード情報なども一切取らず、そのまま丸ごとお渡しします。 BtoBサイト標準ワイヤーフレームXD版（770KB） BtoBサイト標準ワイヤーフレームPNG版（8.6MB） Adobe XDでパブリッシュしたプロトタイプ 編集可能なファイルはAdobe XDのみです。それ以外のデザインツールをお使いの方は、PNG版を参考に自作してみてくだ
CGにしか見えないワイヤーフレームカーがTwitterで話題です。なぜ作ったのか、制作を行った山口製作所に話を聞きました。 【画像】ワイヤーフレームカーをもっと見る この脳がバグるオブジェを発見したのはおすぎさん。「CGとかじゃなくてマジ」と投稿された写真には、3DCAD（3次元データを使った製図用ソフト）で描かれた車のワイヤーフレーム画像に見える物体が写っています。 拡大してみると、描かれたものではなく実在していることがよくわかります。建物のガラスに映り込んでいたり、ワイヤーに水滴がついていたりしていて、見れば見るほど不思議です。 このワイヤーフレームカーを制作したのは、店舗ディスプレイを手がける山口製作所。曲げたワイヤーをひとつひとつ職人が溶接し作ったそうです。なぜ制作したのか経緯について話を聞きました。 ―― どういう経緯で制作したのでしょうか 山口製作所：2007年夏にワイヤーフレ
ワイヤーフレーム（wireframe）とは、Webページのレイアウトやコンテンツの配置を定めた設計図のことです。英語のワイヤー（wire）には「針金」「ケーブル」、フレーム（frame）には「枠」「骨組み」という意味があり、ワイヤーフレームは文字通りシンプルな線や図で構成されています。 例えば引っ越しの際に、次に住む部屋の間取り図を見て「ベッドはここに配置しよう」「この隙間にぴったり合う戸棚を買おう」などと家具の配置を考えます。ワイヤーフレームはWebページのデザインの前段階で「最新情報をここに配置しよう」「問い合わせへの導線はここに配置しよう」といったコンテンツの配置を決定するために作成します。 ワイヤーフレームをしっかり決めておくことで、デザインやコーディングの段階に入ってからの後出し追加や遡っての修正を防ぐことができ、効率的な制作進行管理を行えます。 ワイヤーフレームは誰が作成すべき
サイト訪問者が最初にアクセスするページをランディングページ（LP：エルピー）と呼びます。広告のリンク先として作成されることが多く、BtoB商材においても多くの企業が作成しています。 本記事では、ランディングページの企画やラフ案制作を担当される方向けに、構成・デザインの指針となる標準ワイヤーフレームのテンプレートを公開します。 LPワイヤーフレーム（PowerPoint形式）のダウンロードはこちら LPワイヤーフレーム（XD形式）のダウンロードはこちら ※個人情報の入力なし。無料でダウンロードできます ランディングページから訪問者にコンバージョンしてもらうために、成功ポイントが詰まったワイヤーフレームになっています。ぜひご活用ください。 なお、本記事と標準ワイヤーフレームは、株式会社WACUL 取締役CIO 垣内 勇威様（@yuikakiuchi）に監修をいただきました。 BtoBサイト改善
WEBサイトやアプリを開発する上で必要なワイヤーフレーム。開発途中で必要なものなので、普段目にすることはあまりなく、その役割をしっかりと理解している人は少ないのではないでしょうか？今回は、ワイヤーフレームとは何か、作成手順から気をつけるポイントまでを解説していきます。 ワイヤーフレームとは？ ワイヤーフレームとは、Webサイトやサービスなどを制作する上で、ページの構成を示す基本的なレイアウト図のことです。基本はグレースケールで作られ、細かなデザイン作業に入る前の設計図としての役割を持ちます。 例えば、このSEVENDEX POSTのワイヤーフレームを作ると、上記の画像のようになります。実際にデザインを進める前に、完成イメージを「見える化」することで、情報の抜け漏れがないか、機能の整合性がとれているかを確認します。 混同しやすいキーワードの違いを知ろう ワイヤーフレーム 何に似てる？：建築で
S.H.Figuarts ボディくん -ワイヤーフレーム- （Gray Color Ver.）、S.H.Figuarts ボディちゃん -ワイヤーフレーム- （Gray Color Ver.）
どうも、まさとらん（@0310lan）です！ 今回は、誰でも素早く高度なワイヤーフレームを作成できるWebサービスをご紹介します。 ドラッグ＆ドロップでテンポよくコンポーネントを組み立てることが可能で、実際に動作するボタンやメニューなどを搭載したワイヤーフレームをプレビュー＆シェアできるのが特徴です。 Webデザインやモックアップ構築などに興味ある方も含めて、ぜひ参考にしてみてください！ 【 Claritee 】 ■「Claritee」の使い方 それでは、「Claritee」をどのように使えばいいのか詳しく見ていきましょう。 まずはサイトのトップページから【START FREE NOW】ボタンをクリックして無料のユーザー登録を済ませておきます。 FacebookやGoogleアカウントから登録可能ですが、メールアドレスとパスワードを設定しての登録もできます。 最終的に以下のようなダッシュボ
最近はジェネレーティブAIという言葉を耳にする事が多くなってきて、私自身も手探りながら色々と触ってみています。 ただ、巷のAIに関する制作支援記事や、YouTubeでWebサイトを作ってみた系の動画を見てみると、たしかにパッと見だと良い感じにできているのですが、「Midjorneyで生成された1枚絵が良いから良く見えてるだけなんじゃないか？」という疑念をちょっと持ってました。実際のハンバーガーショップではAIで生成された写真とか使えないでしょうよ…みたいな。（将来的に解決される可能性はあるとしても） という事で今回は、自分自身が本気で仕事に取り入れるつもりでAIを使ってWeb制作をしてみたいと思います。使用するサービスはChatGPT、Midjourney、Figma、TeleportHQです。 題材としては、フリーランスである私自身が使用するプロモーション用のLPという体で制作していこう
「愛される。をもっと。」をモットーに、デザインでビジネスを加速させる ”株式会社caroa”の広報担当者です！ 「誰もが主役になれて、誰かを主役にもできる」をビジョンとして、デザインパートナー事業をやっています！ 企業サイトはこちら→https://caroa.jp/
1. 概要 今回はFigmaを用いて既存のWebサイトからワイヤーフレームを作成する方法についてご紹介します。 2. Figmaとは？ Figmaとは無料で使えるデザインツールです。 主にUIデザインやプロトタイピングに利用されますが、様々な拡張機能が用意されており、ロゴデザインやプレゼン資料の作成などにも使用することができます。 各種アプリ版とブラウザ版が用意されており、オンラインであればどこでも作業ができることも魅力です。 また、最近FigmaはAdobeに買収され、その後Adobeの製品一覧からAdobe XDが消えたことから今後のWeb制作ツールはFigmaで一本化しそうです。 是非これを機にFigmaを使ってみましょう！ 3. ワイヤーフレームとは？ Web制作やアプリ開発などのUIデザインにおいて、レイアウトの構成を表現するために使用されるデザインの一種です。 色や画像などのデ
本記事では、Web制作では欠かせないワイヤーフレームの作り方を解説します。 初心者の方でも分かりやすいように具体例を交えながら、またこの記事を見ながらすぐに作れるようにガイドしていくので、「ワイヤーフレームの作り方を勉強したい」「ワイヤーフレームを初めて作る」そんな方はぜひ参考にしてみてください！ ワイヤーフレームとは？ ワイヤーフレームとは、Webページ制作をする上での設計図です。 例えば、雑誌のページを作るとき、いきなり書き出すわけではなく、まずは写真やコラム、テキストの配置を考えてラフを作成します。 みなさんが今読んでいるこの記事も、どんな情報をどの順番で書くかをまとめた構成案を元に書いています。 Webページでも同じように、どの情報を/ページ内のどこに/どのように配置するといった情報設計が必要です。その設計図をワイヤーフレームといいます。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: プロセス・オブ・UI/UX［UIデザイン編］ 実践形式で学ぶワイヤーフレームからビジュアルデザイン・開発連携まで: 桂信, 株式会社エクストーン: 本
amazon-matome-sokuhou.blog.jp
