ワイヤーフレームは“しゃべりながら”つくる｜akane

2024/04/22 23 users Akane シェ 工程 株式会社Rabee 新人デザイナー

こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、先輩に教えてもらった「ワイヤーフレームの作り方」を紹介します。わたしはこの方法で作るようになってから、ワイヤーフレーム作りが楽しくて、Webデザインの大好きな工程のひとつになりました。 このワクワク感を、ぜひたくさんの新人デザイナーとシェ... 続きを読む

Webサイトのワイヤーフレームやモックアップに使用するSVGで制作されたUI要素のスケルトン素材 -UI Skeleton Gallery

2023/06/21 8 users モックアップ SVG figma セクション UI要素

Webサイトやスマホアプリで使用される、カード、セクション、ボタン、フォーム、見出し、テキスト、リスト、画像、動画など、UI要素のスケルトン素材を紹介します。 商用利用も無料で、ダークモード・ライトモードに対応しており、素材はSVGのファイルとコードでダウンロードできます。もちろん、Figmaでも利用できます... 続きを読む

＜続編＞Webサイトのワイヤーフレームの作り方 ― FigmaやXDを開いた後の工程｜重松佑 / Shhh inc.

2023/06/01 5 users figma あれこれ 重松佑 フォント 続編

この記事ではワイヤーフレームを作成するとき、FigmaやXDを開いて手を動かす前に、情報設計をどのように整理し、考えていくかについてまとめています。記事内で、Webサイトでワイヤーフレームを作成するときに注意したい点として、下記のように書きました。 ツールを立ち上げてアレコレと考えながら手を動かすとフォント... 続きを読む

本当に実践的なデザインドキュメントの書き方 第1回：なぜ渡されたワイヤーフレームは分かりにくいのか？ | アドビUX道場 #UXDojo

2022/05/12 264 users UXDojo アドビUX道場 連載 デザインドキュメント 経験

本当に実践的なデザインドキュメントの書き方 第1回：なぜ渡されたワイヤーフレームは分かりにくいのか？ | アドビUX道場 #UXDojo 連載 本当に実践的なデザインドキュメントの書き方いきなり渡されたワイヤーフレームをデザインするよう言われて戸惑った経験は、デザイナーなら誰でもあるのではないでしょうか？これはデ... 続きを読む

Figmaでワイヤーフレームを作り効率化をした話｜ottiee / Alu CXO｜note

2022/04/04 10 users figma ワークフロー Note アル クリエイター

こんにちは、もしくはこんばんは。 今回はアル社での、Figmaを使ったワークフローの話です。 アルでは2022年1月にハロマスというサービスをリリースしました。 ハロマスは、クリエイターが作ったオリジナルのギフトを買えるサービスで、デザインはFigmaで制作されています。 UIデザインはFigmaで作り、エンジニアが参照... 続きを読む

商用でも完全に無料！ プレーンなHTMLとCSSで実装された、ランディングページ用のテンプレート -Uisual

2022/02/02 215 users CSS 白黒 商用 テンプレート レスポンシブ対応

JavaScriptはなし、プレーンなHTMLとCSSで実装されたランディングページ用のテンプレートを紹介します。 テンプレートはスマホ・タブレット・デスクトップのレスポンシブ対応。ワイヤーフレームのような白黒のシンプルなデザインなので、カスタマイズも簡単です。 Uisual -Free Landing Page Templates Uisual -GitHub U... 続きを読む

Adobe XDの使い方がこれでよく分かる！Adobe公式、ワイヤーフレーム・プロトタイプのチュートリアルファイル | コリス

2020/06/22 200 users チュートリアルファイル コリス Adobe XD 基本操作

先日ローンチされたAdobe XD Trailから、Adobe XDの使い方がよく分かるワイヤーフレーム・プロトタイプを制作するチュートリアルファイルを紹介します。 Adobe XDの基本操作をはじめ、ワイヤーフレームの...記事の続きを読む 続きを読む

全部無料！ワイヤーフレームからプロトタイプ作成まで完結できる「Evrybo」を使ってみた！ - paiza開発日誌

2020/02/05 5 users デス インタラクティブ プロトタイプ 0310lan 動作

どうも、まさとらん（@0310lan）です！ 今回は、ゼロからワイヤーフレームを作って、インタラクティブに動作可能なプロトタイプ開発まで完結できる無料のWebサービスをご紹介します。 作成できるプロジェクト数やユーザー数に制限がなく、自分好みのプロトタイプを作成してそのまま公開・シェアが可能。さらに簡単なテス... 続きを読む

Adobe XDに便利なプラグインが登場！簡単にワイヤーフレームやモックアップを作成できる -Quick Mockup | コリス

2019/12/04 10 users コリス モックアップ パシフィコ横浜 Adobe XD 登場

12/3にパシフィコ横浜で開催された「AdobeMAXJapan」に合わせて、Adobe XD用の便利なプラグインが登場しました！ プラグインは通常、英語圏内に特化されたものが多いですが、「Quick Mockup」はなんと日本のデザイン現場向けに特化されたもので、簡単にワイヤーフレームやモックアップが作成できます。 日本のUXデザイン... 続きを読む

「車輪の再発明はもう止めよう」BtoBマーケの才流、ベイジ、WACULが自社ノウハウをシェアする理由 (1/3)：MarkeZine（マーケジン）

2019/10/22 30 users ペイジ MarkeZine WACUL BtoBマーケ 車輪

BtoBマーケティングには、形式知化できる領域が存在する――。その考えに基づき、BtoBマーケティング支援の才流、Web制作会社のベイジ、Webサイト分析・改善提案ツール「AIアナリスト」を提供するWACULの3社は、BtoBサイト改善の勝ちパターンをまとめた「チェックリスト／ワイヤーフレーム」を公開した。本記事では、3社が... 続きを読む

エンジニアでも知っておきたいデザインの基礎知識 - Qiita

2019/10/05 405 users コーダー Qiita コーディング English エンジニア

→ English 対象読者 ワイヤーフレームだけが渡されてコーディングしなければいいけないようなケースで役立つ知識を紹介します。 以下のような環境にいるエンジニアは読む必要はないと思います。 毎回デザイナーからデザインデータが用意されて、それを忠実に再現すればよい そもそもコーディングはコーダーがやってくれ... 続きを読む

なぜデザインツール「Whimsical」はワイヤーフレームの迅速な作成に適しているのか | root inc. WebサイトやアプリのUI/UXデザイン会社

2019/08/02 37 users フォント ディレクター ワイヤーフレーム作成 エンジニア 一方

Webサイトやアプリを作る際に設計図として欠かせないワイヤーフレーム。各画面で何を伝えたいかを一緒に開発するエンジニアやディレクターに伝えるコミュニケーションツールとして大事な役割を持っています。 一方で、ワイヤーフレーム作成の段階でグラフィック要素を多くしてしまったり、色やロゴ、複雑なフォントを多... 続きを読む

UMLの爆速プレビュー環境をVisual Studio Code + PlantUML Server on Dockerで簡単に構築する ｜ DevelopersIO

2019/06/19 271 users UML plantUML DevelopersIO 記述言語

PlantUMLとは PlantUMLはシンプルな記法でUMLダイアグラムが作成できる、超便利なツールです。UMLをはじめ、以下のような図の作成もサポートしています。 ワイヤーフレーム アーキテクチャ図 仕様及び記述言語 […] 続きを読む

私があえて紙でワイヤーフレームを描く理由 | UX MILK

2019/06/04 25 users Stockholm ALEX UX MILK UXデザイナー

AlexはStockholmに住むUXデザイナーです。アクセシビリティやフロントエンドの開発において長年の経験があります。物事をシンプルで楽しく、効率良くするために日々奮闘し、その経験をデザインコミュニティでシェアするのが大好きです。 近年ではワイヤーフレームを描画するためのツールが多く存在しますが、私はあえて... 続きを読む

実物のワイヤーフレーム公開！プロダクトマネージャーが大事にする3つの視点｜takahiron｜note

2019/04/23 41 users パルミー ワイヤー 僕ら Note ノート

こんにちは。パルミーという会社で代表兼プロダクトマネージャーをやっているTakahironです。 このノートでは、僕らの会社で新しい機能を開発する際に作っているワイヤーフレームを実際に公開しつつ、作成時に気をつけている点を紹介します。 普段、他社のプロダクトマネージャーが作ったワイヤーを見る機会も少ないと思... 続きを読む

UXデザインに欠かせないオンサイトリサーチの活用方法 | UX MILK

2018/11/07 17 users UX MILK UXデザイン 活用方法 Sean IoT

SeanはCodalの技術ライターおよびリサーチャーです。UXデザインからIoTまで、様々な話題のブログを投稿しています。 「UXデザイナー」の画像を検索すると、同じような結果ばかりが表示されます。恐らく、机に向かって背中を丸め、グリッドの入ったメモ帳にワイヤーフレームを描いている眼鏡の男性の画像が見つかるでしょ... 続きを読む

Microsoftが「Sketch 2 Code」を公開！AIが、手書きのワイヤーフレームをHTMLに自動変換してくれる新時代に。これはすごい！！｜榊原昌彦｜note

2018/09/01 635 users 榊原昌彦 LAB Note 手書き Microsoft

Microsoftが「Sketch 2 Code」を公開！AIが、手書きのワイヤーフレームをHTMLに自動変換してくれる新時代に。これはすごい！！ 流れてきたツイートをみて「なんだこのデモは」といろいろ見てみたところ、Microsoft AI labがすごい技術を公開していたので簡単にまとめます。どういう技術かというと「手書きのワイヤーフレ... 続きを読む

Adobe XDでワイヤーフレーム制作するなら知っておくべき機能｜ferret [フェレット]

2018/08/02 25 users PowerPoint 比重 Ferret フェレット ツール

Webディレクターの仕事において、非常に大きな比重が置かれるワイヤーフレーム制作。皆さんはどのソフトウェアを使っていますか？ 多くの企業のPCに導入されているPowerPointをワイヤーフレーム制作に利用している方もいるかもしれません。Adobe XDといったワイヤーフレーム作りに特化した ツール を使うとより作業が楽... 続きを読む

無料で簡単にワイヤーフレームやフローチャートを作成できるWebサービス「Whimsical」を使ってみた！ - paiza開発日誌

2018/07/11 109 users paiza開発日誌 0310lan フローチャート 特徴 無料

どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上から誰でも効率よくワイヤーフレームやフローチャートを作成できる無料のWebサービスをご紹介します！ 可能な限り短時間で簡単に作成できるように工夫されているのが大きな特徴で、初めての人でも美しいワイヤーフレームを作って公開することが可能です。 【 Wh... 続きを読む

Adobe XDでシンプルなワイヤーフレームを作ろう！便利なUIキットいろいろ | Webクリエイターボックス

2018/07/02 124 users デザインテンプレート ワイヤーフレーム制作 UIキット 何度

2018年7月2日 Webサイト制作, XD 新たなデザインツールとして浸透してきているAdobe XD。Webクリエイターボックスでも何度か紹介してきました。Adobe XDはデザインを作り込むだけではなく、その前段階であるワイヤーフレーム制作にもおすすめです。様々なUIキットと呼ばれるデザインテンプレートが配布されていますが、... 続きを読む

商用利用無料！Webサイトやスマホアプリの美しいサイトマップやワイヤーフレームを作成できるベクター素材 | コリス

2018/06/06 143 users コリス ベクター素材 スマホアプリ 商用利用無料 Webサイト

300種類以上のコンテンツ、カード・ライン・アローなど、フローチャートで使用する形もベクターで収録された、サイトマップ・ワイヤーフレームを作成できる無料素材を紹介します。 商用レベルの美しいフローチャートを簡単に作成できる素材セットです。 続きを読む

ビジネス用サイト、ポートフォリオ、その他何にでも応用可能なPSDのWEBサイトテンプレート16選【Photoshop】 - Web Design Facts

2018/05/31 13 users psd Photoshop ポートフォリオ 応用 ベース

2018 - 05 - 31 ビジネス用サイト、ポートフォリオ、その他何にでも応用可能なPSDのWEBサイトテンプレート16選【Photoshop】 Photoshop モックアップ ワイヤーフレーム 参考サイト 素材 素材-無料 デザイン PSDのウェブサイトテンプレートを使用すると、サイト制作をする際に参考にもなりますし、そのままベースだけを利用するなどし、大幅に時間短縮が可能です。 そこで本... 続きを読む

デザイン制作時短術！デザインを制作する際に有用なツール14選【UI/ワイヤーフレーム/デザイン/コーディング】 - Web Design Facts

2018/05/24 61 users コーディング 残業 体感 Web Design Facts

2018 - 05 - 24 デザイン制作時短術！デザインを制作する際に有用なツール14選【UI/ワイヤーフレーム/デザイン/コーディング】 デザイン 参考サイト ワイヤーフレーム Sketch 紙媒体でもWEB媒体でも、デザイン制作をするのには時間がそれなりにかかりますよね。 世間的に残業に対する認識が厳しくなってきたおかげで徹夜して働くという企業も減ってきたような体感ですが、まだまだデザイン業... 続きを読む

【WEBデザインの参考に】ミニマリストに大人気！洗練されたシンプルで美しいHTML5ウェブサイトテンプレート10選【フラットデザイン/サンプル】 - Web Design Facts

2018/05/08 52 users ミニマリスト Web Design Facts サンプル

2018 - 05 - 08 【WEBデザインの参考に】ミニマリストに大人気！洗練されたシンプルで美しいHTML5ウェブサイトテンプレート10選【フラットデザイン/サンプル】 デザイン 参考サイト HTML CSS ワイヤーフレーム 昨今、日本だけではなく世界中で要素を最小限に抑えた暮らしをする方が増えてきました。 WEBサイトも例外ではなく、ミニマルなデザインが今求められています。 そこで本日は... 続きを読む

【作り方の参考にも】WEB・アプリ制作に便利なワイヤーフレーム無料ツール11選【サンプル多数/テンプレート】 - Web Design Facts

2018/04/19 25 users テンプレート Web Design Facts 作り方 参考

2018 - 04 - 19 【作り方の参考にも】WEB・アプリ制作に便利なワイヤーフレーム無料ツール11選【サンプル多数/テンプレート】 ワイヤーフレーム Photoshop Illustrator 素材 素材-無料 デザイン サイト制作で非常に重要なのがワイヤーフレーム。 色やデザインももちろん大切ですが、ワイヤーフレームがきちんとしていない場合、いくら他が良くても違和感が出ますよね。 そこで... 続きを読む