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

デザイン制作時短術！デザインを制作する際に有用なツール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サイトも例外ではなく、ミニマルなデザインが今求められています。 そこで本日は... 続きを読む

ランディングページのデザインに必要な7つの心がけ | ベイジの日報

2018/04/10 85 users 原稿 ペイジ 発想 求ポイント 表現

これまで何度もランディングページ制作に携わる機会があったが、特に入社して1年ほどはうまくデザインをまとめることができず、苦しい思いをすることが多かった。 躓いたことを思い返すと数えきれない。訴求ポイントをしっかり把握しないまま手を動かしていたこと、提供された原稿やワイヤーフレームをそのまま反映して発想に自由さがなかったこと、表現の引出しが少なく全体的にワンパターンになることなどは、特に記憶している... 続きを読む

Webサイト・スマホアプリ制作に使用する、2017年に人気が高かったデザインツールの調査結果 | コリス

2018/01/31 53 users コリス インターフェイスデザイン プロトタイピング 調査結果

2017年、デザイナーに人気だったデザインツール、プレインストーミング・アイデアのツール、ワイヤーフレームやインターフェイスデザインのツール、プロトタイピングのツール、ファイル管理とバージョン管理ツール、そして2018年に注目しておきたいデザインツールを紹介します。 Design Tools Survey by Taylor Uxtools.co の 元記事 は英語で読むことができます。 下記は各... 続きを読む

ワイヤーフレームの作り方のコツ｜制作時や評価時に意識すべきこと | Pinto!

2018/01/16 79 users Pinto クリエイティブユニット コツ 制作時 認識

2018年新卒内定。京都大学経済部に在学中。Juicer事業部にて機械学習チームを経験した後、クリエイティブユニットにてアシスタントディレクターを経験。現在は人事部にてインターン中。 サイト制作をする前に必ず作らないといけないワイヤーフレーム。 「ワイヤーフレームってデザインの下書きでしょ？」 というような認識の方もいらっしゃるのではないかと思いますが、それは間違いということをこの記事を読んで知っ... 続きを読む

次世代のワイヤーフレーム「マイクロフレーム」とは | 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制作の参考になりそうなワイヤーフレーム・ユーザーフローを紹 ...記事の続きを読む 続きを読む

デザイナーがワイヤーフレーム作成時に気をつけるべき6つのポイント | BLOG | FICC

2016/01/15 84 users FICC トンマナ ディレクター ラフ案 立場

Webサイト制作時に作成する「ワイヤーフレーム」。デザイナーの方は、ディレクターからワイヤーフレームを受け取り、それを元にデザインに着手することが多いと思います。 では、デザイナーの方がディレクターにステップアップし、実際にワイヤーフレームを作成する側の立場になった際、どのような点を押さえておくべきでしょうか。“デザインのラフ案”のように作成してしまうと、トンマナを確認するものなのか、構成を確認す... 続きを読む

ASCII.jp：UIってPhotoshopでどう作るの？チュートリアルで解説｜Photoshopで実践！UIデザイン

2015/10/08 84 users Photoshop チュートリアル 空模様 UIデザイン 実践

Photoshopを使ってアプリのUIをデザインするコツを学ぶ本連載。第2回以降は架空のiPhoneアプリを例に、実際にUIをデザインしていきます。 作成するのは、現在の空模様の写真を撮影し、位置情報とコメントとともにシェアする「お天気投稿アプリ」です。 お天気投稿アプリは、以下のワイヤーフレームのような画面で構成されています。 このうち、今回は3つめの「投稿画面」について、ディレクターが用意した... 続きを読む

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 スマートフォンから手書きのワイヤーフレームを撮影して、ページとページを紐付けることができるアプリです。... 続きを読む