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ディレクターがUI設計時に気を付けている８つのこと。 - 笑顔を創りたいWeb屋の日常

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

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

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

2016/04/13 737 users sogilog 結果

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

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

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

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

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

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

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

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

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

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

最近の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デザインを「職種別」に基礎から勉強出来る総まとめ | コムテブログ

2014/01/06 1072 users コムテブログ 職種別 基礎 webデザイン フォント

Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。 もくじ アートディレクター １．アクセシビリティ ２．ユーザビリティ ３．UX（ユーザーエクスペリエンス） ４．IA（情報アーキテクチャ） ５．画面設計（ワイヤーフレーム） ６．進行管理 Webデザイナー ７．レイアウト・フォントの知識 ８．配... 続きを読む

楽しく作れる！スマホアプリ/サイトのワイヤーフレーム・モックアップ作成支援ツール7選 ｜ クラスメソッド開発ブログ

2012/11/05 528 users クラスメソッド開発ブログ スマホアプリ 観点 ツール ユーザー

ワイヤーフレームを楽しく作ろう！ 魅力的なユーザーエクスペリエンスをユーザーに届けるために、ワイヤーフレームはとても重要です。 何より自分自身が楽しんで作らないと、良いアイデアは生まれないものですよね。 ということで「楽しく作れる！」という観点から、おすすめのスマホアプリ/サイトのワイヤーフレームの作成を支援するツールをまとめてみました！もちろんすべて無料で始められます！ では早速どうぞ〜！ Fl... 続きを読む

Webサイト設計図 – ワイヤーフレームの作り方 | Webクリエイターボックス

2012/10/03 963 users Webクリエイターボックス Webサ 連載 応用技術 実践

WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基本の流れはちゃんと説明していないな…ということで、「連載！実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。これも過去に「Webサ... 続きを読む

これが無料とは！ スマートフォン向けサイトやアプリのワイヤーフレームを作成するソフトウェア -Prototyper | コリス

2012/03/07 868 users iPhone コリス ソフトウェア 両OS Android

Windows XP/7、Mac OSX 10.5+の両OSに対応、iPhone, Android, iPad向け（デスクトップも）のサイトやアプリのワイヤーフレームを作成するソフトウェアを紹介します。 Prototyp [...] 続きを読む

Web制作を始める人の為のスキル・ワイヤーフレーム・SEO・マーケティング・Webサービスの基礎情報*ホームページを作る人のネタ帳

2011/04/15 1540 users SEO マーケティング ネタ帳 Web制作 初動

まとめの目次 ワイヤーフレームを学ぼうワイヤーフレーム＆モックアップ作成ツールSEOに対する基礎ところでどうしてキーワードが重要なのかマーケティングとSEOツール知っておきたいWebサービス ワイヤーフレームを学ぼう ワイヤーフレームとは、クライアントに初動で見てもらうためのサイトUI案です。 この段階である程度のコンテンツも視覚化できる為、最初にワイヤーフレームを作成する人も多いのでは無いでしょ... 続きを読む

WEBディレクタなら参考にしたい手書きの画面設計書｜designaholic -Creative Column-

2011/02/18 1060 users designaholic WEBディレクタ 実物 手書き 参考

様々なアプリケーションを試し、試行錯誤しながらWEBサイトの画面設計を行ってますが、ぜひとも参考にしたい手書きのワイヤーフレームを紹介します。 まずはPCサイトですが、実物とあわせてどうぞ。   Five Years of Firefox     Five Years of Firefox 続きを読む

ウェブ制作に役立つ、便利な最近のオンラインサービスのまとめ -2011年1月 | コリス

2011/01/16 732 users コリス ウェブアプリケーション ウェブ制作 データベース 中心

最近リリースされたものを中心に、デザイン、スタイルシート、ワイヤーフレーム、データベースなどに役立つオンラインサービス・ウェブアプリケーションを紹介します。 続きを読む

ワイヤーフレームに使える素材いろいろ | DesignWalker

2010/05/05 644 users DesignWalker ウェブサイト 各要素 素材 ページ

以前、このブログでご紹介した「ウェブサイトの設計図 ワイヤーフレームを活用しよう」 ウェブサイトをデザインする前に、用意すると、とっても便利なワイヤーフレーム。 ページの各要素をレイアウトして、デザイン制作をスムーズに行うことが出来ます。 今回は、そんなワイヤーフレームに使える素材をいろいろとまとめてみました。 Design Stencils – Design Pattern Library – ... 続きを読む

ウェブサイトの設計図 ワイヤーフレームを活用しよう | DesignWalker

2009/04/22 1469 users 骨組み DesignWalker プレゼンテーション 矛盾

ウェブサイトを構築する際にワイヤーフレーム（骨組み）からしっかり作り込んでおくとデザインの作業もスムーズに進めることができます。 また、クライアントに提示するプレゼンテーションとしても利用できるので、ワイヤーフレームを作って、要素の抜けや動作の矛盾などをなるべく最小限にすることができるのではないでしょうか。 今回は、ウェブサイトの設計図とも言える、ワイヤーフレームについていろいろとまとめてみました... 続きを読む