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

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

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

商用でも完全に無料！ プレーンな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の基本操作をはじめ、ワイヤーフレームの...記事の続きを読む 続きを読む

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

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

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

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

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

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

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

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

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

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

次世代のワイヤーフレーム「マイクロフレーム」とは | UX MILK

2017/07/31 314 users UXPin プロトタイプ ポーランド UX MILK CEO

Marcin は製品デザインのプラットフォームである、 UXPin の CEO および共同創設者です。 2010 年に UXPin を共同創設して以来、彼はポーランドのシリコンバレーオフィスの製作チームをリードし手助けしてきました。 「ワイヤーフレームの時代は終わりました。インタラクティブなプロトタイプこそがすべてです。」 私たちは少なくとも ７年間 は、この主張を聞き続けてきました。もしこのよう... 続きを読む

数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 - 笑顔を創りたいWeb屋の日常

2016/12/05 1203 users デザイ www.adventar.org ボク 笑顔 日常

2016 - 12 - 05 数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている８つのこと。 【スポンサーリンク】 list Tweet なんかすごい思い付きで www.adventar.org に参加してみたんですけども。 気づいたらいつの間にか自分の日になっていて 面倒くさくなってきて激しく後悔した びっくりしたという。 ぼくはWebディレクターでありデザイ... 続きを読む

7つの実例で学ぶ「ワイヤーフレーム通り」のデザインから脱却する具体的な方法 | TomoyukiArasuna.com

2016/06/09 474 users ワイヤーフレーム通り 実例 デザイン セリフ 後輩

「ちょっと〇〇君！これワイヤーフレームそのままじゃない！」 Webデザイナーなら、できることなら聞きたくないセリフですよね。私自身ももれなく、こう言われた経験はありますし、逆に後輩に対して同じく「これだとワイヤーフレームのまんますぎるね。。」と伝えたこともあります。 この「ワイヤーフレーム通り問題」は、Webデザイナーなら誰しも一度は経験するあるあるの一つと言えますが、なぜ「ワイヤーフレーム通り」... 続きを読む

ワイヤーフレーム、モックアップ、プロトタイプの違いとは？ | デザイン | POSTD

2016/05/26 291 users POSTD モックアップ プロトタイプ スケッチ 用語

開発者と仕事をしていると、スケッチ、ワイヤーフレーム、モックアップ、プロトタイプといった用語をよく聞くかと思います。しかし、あなたはこうした用語の意味を本当に理解しているでしょうか？　ワイヤーフレームやプロトタイプは、それぞれどんなときに利用するのか、知っていますか？開発者と仕事をしていると、スケッチ、ワイヤーフレーム、モックアップ、プロトタイプといった用語をよく聞くかと思います。しかし、あなたは... 続きを読む

ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | sogilog

2016/04/13 737 users sogilog 結果

枌谷 力（そぎたに　つとむ） 1972年11月7日生まれ。NTTデータでコンサル営業後、Webデザイナー/ディレクターに転身。2007年に独立し、2010年、下北沢に株式会社ベイジ設立。主にWebサイトのプロデュースとアートディレクション、デザインをやってます。Web制作のご相談は絶賛受け付けています。ご連絡は 東京のWeb制作会社ベイジ まで。 Facebookはこちら @sogitani_ba... 続きを読む

最近のWeb制作の勉強になる！Webサイトのワイヤーフレーム・ユーザーフローのまとめ | コリス

2016/04/08 420 users コリス Dribbble ユーザーフロー Web制作 勉強

プロジェクトの関係者でないとなかなか目にすることができないワイヤーフレームやユーザーフローもdribbbleだと、たくさんアップロードされています。 最近のWeb制作の参考になりそうなワイヤーフレーム・ユーザーフローを紹 ...記事の続きを読む 続きを読む

HTML/CSSでワイヤーフレームもUIデザインも作成する人がけっこう多い -最近のWeb制作で使われているツールのまとめ | コリス

2015/09/14 182 users コリス ブレーンストーミング CSS HTML プロトタイプ

Web制作の実際の現場で、ブレーンストーミング、ワイヤーフレーム、UIデザイン、プロトタイプ、プロジェクト管理、ファイル管理・バージョン管理に使われている人気のツールを紹介します。 Design Tools Survey 「Design Tools Survey」は、世界各国の制作会社・フリーランス・スタートアップ企業など、さまざまな形態でWeb制作を行っている人にアンケートをとり、それぞれ使用し... 続きを読む

便利すぎるPhotoshopのプラグイン30選｜ferret [フェレット]

2015/05/19 579 users Ferret フェレット extensions ヘッダ

便利すぎるPhotoshopのプラグイン30選 1.Velositey http://dandkagency.com/extensions/velositey わずか数回のクリックであっという間にホームページのレイアウトを作るプラグインです。 ヘッダからコンテンツ、フッターなどがそれぞれ10種類以上収録されており、Photoshopを起動後4回選択すればレイアウトが完成します。 ワイヤーフレームを... 続きを読む

Web制作に超便利な無料ワイヤーフレームツール4選 | 株式会社LIG

2015/04/26 118 users 株式会社LIG Web制作 手書き ディレクター ツール

こんにちは、ディレクターのはるかです。 Web制作で必ずといってもいいほど行うワイヤーフレーム作成、みなさんはどんなツールを使っていますか？ 今回は無料でワイヤーフレームが作成できるツールをいくつかご紹介します。 使える無料のワイヤーフレームツール4選 POP https://popapp.in スマートフォンから手書きのワイヤーフレームを撮影して、ページとページを紐付けることができるアプリです。... 続きを読む

ワイヤーフレーム（モックアップ）を作るアプリがすごい進化してた |　バニデザノート

2015/04/07 560 users モックアップ プロジェクトフォルダ バニデザノート アプリ

ウェブサイトをデザインをするときに、ワイヤーフレームを作るのって 私にとっては「どこに何を置いて、どういう動きをするのか」というメモのようなもので。 手描きでレポート用紙に描いて、 スキャンしてプロジェクトフォルダへ入れておくことも多いのですが デザインの前に「こういう配置でいいですよね？」って共有したいとき 清書するアプリを時々探してしまうんですよね。まだしっくりくるものがなくて。 最近調べてす... 続きを読む

エウレカ&グッドパッチのデザイナーに聞くワイヤーフレームの作りかた！ | MEMOPATCH

2015/03/17 139 users ナレッジ MEMOPATCH グッドパッチ 個々 案件

先日、エウレカさんとグッドパッチのデザイナーで第一回合同勉強会を開催しました。今回のテーマはワイヤーフレームです。この勉強会は、ワークショップを通してナレッジの共有をし合い、個々のデザイナースキルを上げる目的があります。エウレカさんのレポートはこちらです。合わせてご覧ください！ １.ワイヤーフレームを作る意味とは ワイヤーフレームを作る意味についてお話をしてくれたのは、エウレカ原さんです。案件を進... 続きを読む

無料なのに使いやすい！WEB制作で活躍するワイヤーフレームツール5選 | エンジニア | エンジニア・Webデザイナー向けのウェブマガジン scrmble

2015/03/06 377 users ウェブマガジン scrmble エンジニア Web制作 無料

エンジニア関連の投稿 「WEB制作で使える、無料でワイヤーフレームが作成できる便利なツールを5つご紹介します。いずれも無料で使用可能でありながら操作がしやすく、外出先などでちょっとワイヤーフレームを作成したい時などに使えます。無料なのでとりあえず試してみて欲しいで...」WEB制作で使える、無料でワイヤーフレームが作成できる便利なツールを5つご紹介します。いずれも無料で使用可能でありながら操作がし... 続きを読む

HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ

2015/03/04 1149 users 前置き ひと 時点 HP作成 存在

長くなっちゃったので、前置きは手短に。 今回は、ホームページ作成に慣れた人にとっては、当たり前で欠かせない存在「ワイヤーフレーム」について書きました。 「なぜか、ホームページのデザインがうまくまとまらない」という初心者さんの中には、ワイヤーフレームの時点で失敗してるヒトが多いんじゃないかな、と思いまして。 「ワイヤーフレーム、なにそれ？」と、まるっきりワイヤーフレームを書かずに、初っ端からデザイン... 続きを読む

Web・アプリ開発に使える無料のワイヤーフレームツールまとめ | Designup

2015/01/12 383 users Designup Photoshop Excel たくさん

Web制作やアプリ開発で使える最新ワイヤーフレームツールを集めてみました。Photoshopのような高機能なものから、ラフスケッチをとりこんでペーパープロトタイプに使えるものまで、便利なワイヤーフレームツールがたくさん！Web制作やアプリ開発では、本格的なデザインに入る前にワイヤーフレーム作ることがよくあります。制作会社によってはPower pointやExcelなどが使われることもありますが、そ... 続きを読む

最近のWebデザインで採用されているレイアウト72種類を収録した無料のUI素材（PSD, AI, Sketch） -UI Tiles | コリス

2014/12/09 556 users コリス Sketch psd グリッド ポートフォリオ

最近のWebデザインでよく利用される1カラム、2カラム、3カラム、カード型、ボード型の基本的なグリッドをはじめ、ランディングページ、プロダクトページ、ギャラリー、ポートフォリオ、カート、FAQ、コンタクト、マップなど、さまざまなレイアウトが用意されたワイヤーフレームやフローチャートを作成するための素材を紹介します。 UI Titles ダウンロードできる素材のフォーマットは、4種類。 .psd（7... 続きを読む

便利で簡単！Webサイトのプロトタイプが本当に数クリックで作成できてしまうPhotoshopの無料の機能拡張 -Velositey v2 | コリス

2014/11/06 159 users コリス コンポーネント プロトタイプ Photoshop 勉強

Webサイトのプロトタイプやワイヤーフレームなどに使えるページレイアウトを数クリックで作れてしまうPhotoshop CS6/CC/CC2014対応の機能拡張を紹介します。 今時のコンポーネントが数多く用意されているので、デザインの勉強にもいいですよ。 Velositey v2 Velositey v2とは Velositey v2のインストール Velositey v2の使い方 Velosite... 続きを読む