Microsoft、手書きのUIスケッチをHTMLに変換する「Sketch2Code」を発表
Microsoft、手書きのUIスケッチをHTMLに変換する「Sketch2Code」を発表：AIで手書きの図形と文字を認識 Microsoftは、手書きでスケッチしたUI画面をHTMLコードに自動変換するWebベースソリューション「Sketch2Code」を発表した。 Microsoftは2018年8月30日（米国時間）、ホワイトボードなどに手書きでスケッチしたユーザーインタフェース（UI）画面を、AI（人工知能）を利用して、HTMLコードに変換するWebベースソリューション「Sketch2Code」を発表した。 Microsoftによれば、UIのデザインプロセスには無駄が多いという。通常は、まずアイデアレベルのスケッチをホワイトボードに描き、数人で検討してから写真に撮影し、HTMLコードを書き下す。これでは手間ばかりかかり、すぐにアイデアを形にできない。 画像認識技術とAIを組み合わせ
5分で分かるフラットデザイン
iOS 7やWindows 8も採用した「フラットデザイン」。実際にフラットデザインを実現するにはどうすればいいのだろうか。 1分－フラットデザインとは何なのか アップルの開発者向け年次イベント「Worldwide Developers Conference（WWDC）」が米国時間6月10日に開幕し、基調講演で同社モバイルOSの次期版「iOS 7」が発表された。見た目の印象が従来版からガラリと変わっている。これは「フラットデザイン」という手法を採用したからだ。 フラットデザインとは、簡単にいうと、グラデーションを利用しない非常にのっぺりとしたデザインのことだ。
TechCrunch | Startup and Technology News
Welcome to Startups Weekly — Haje‘s weekly recap of everything you can’t miss from the world of startups. Sign up here to get it in your inbox every Friday. In…
なぜAmazonのメガドロップダウンメニューはスムーズに操作できるのかという秘密
日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な
たった6行でWebサイトのUIをガラッと変える
「こんな長いWebページ、まったく読む気がしない」。Webサイトを閲覧していてこんな経験をしたことは誰しもあるのではないだろうか。一方で、Webサイトを作る側にとっては、どこまでを1ページにまとめるかは常に悩むところだと思う。長いからといってむやみにページが分割されているのも考えもので、今度は「次のページへ」ボタンをクリックするのが面倒になり、ストレスがたまる。 CogniTom Academic Designが作った「bookreader.js」は、そんな悩みを解決してくれるかもしれない。bookreaderは、本や雑誌をめくるような感覚で、Webページの本文を横にスクロールさせるJavaScriptライブラリだ。 「bookreader.js」のWebサイト。サイト自体がbookreader.jsを使ったデモサイトを兼ねている。中央にある [<] [>] をクリックすると1ページずつ、
廃れないテクニック ― ペーパー･プロトタイピング - Radium Software
Paper Prototyping: Getting User Data Before You Code - Jakob Nielsen UI の設計手法に「ペーパー･プロトタイピング」と呼ばれるものがある。その名の通り，紙を使ってユーザビリティのテストを行うというもので，手軽で安価なプロトタイピング手法として知られている。 ペーパー・プロトタイピングの良さは，誰でも今すぐ始められるという手軽さと，もうひとつ，ローテクであるがゆえに廃れることがないというところにある。 ペーパー･プロトタイピングは，君が今やっているデザインプロジェクトに影響を与えるというほかに，もうひとつの利点がある。それは，君のキャリアにとって得になるということだ。君が他に読んだ本のなかで，コンピューターとかウェブデザインとかに関する本のことを思い返してみてほしい。君が学んだことで１０年後も有益であり続けるものは，どれほ
Googleがデザインするときに大切にしている10個の原則 - GIGAZINE
Googleのユーザーエクスペリエンスチームに所属するSue Factor氏が、Googleの公式ブログにて「Googleらしいデザイン原則」について、10個の原則を提示しています。デザインというか、ネットサービスの設計自体に関する原則となっており、さまざまな場面で応用できそうなものとなっています。 詳細は以下から。 Official Google Blog: What makes a design "Googley"? Googleのデザイン原則は以下の通り。 1.人々に焦点を当てろ――彼らの生活、彼らの仕事、彼らの夢に 2.すべてはミリセカンド単位で数えろ 3.シンプルにすると強力になる 4.初心者ユーザーを引き込み、上級者ユーザーを魅了しろ 5.革新に挑め 6.世界に通用するデザインを 7.今日と明日のビジネスのために計画せよ 8.気を散らさず、目を楽しませるようにしなさい 9.人々
Google's Design Guidelines
An unofficial blog that watches Google's attempts to move your operating system online since 2005. Not affiliated with Google. Send your tips to gostips@gmail.com. Jon Wiley, User Experience Designer for Google Apps, outlined some of the most important principles for designing interfaces at Google. In his presentation at the WritersUA conference, Jon listed the following guidelines: 1. Useful: foc
Google の UX プロセス
今では小さなチームによるアジャイルソフトウェア開発はそれほど珍しくはないですが、Google は随分前からそれを実践している企業のひとつです。よりよいものを作ることであれば、時には今まで辿って来た道も変えてしまうこともあるダイナミックな環境でどのようなプロセスが存在するのでしょうか。David Sherwin さんのブログで、Google のユーザーインターフェイスデザイナーである Jake Knapp さんのセッションに関するレポートが掲載されています。 Knapp さんのセッション内で、ダイナミックに変わる環境化の中で、よりよいユーザー体験をもったサイトを構築するための8の対策を紹介したそうです（細かく別けると全部で17）。以下に簡単にですが紹介しておきます。 確固たるプロジェクトの基盤をもつ チームが小さい分、フォーカスしなければならない プロジェクトのもつ影響力は？ 他のプロジェク
ウェブに激しく使えるインタラクティブなインターフェース集『Welie』 - 100SHIKI ～ 世界のアイデアを日替わりで ～
インタラクティブなデザインがどうあるべきか、そのデザインパターンを集めまくっているのがデザイナーのWelieさんだ。 彼のサイトではカテゴリーごとにどういったインターフェースデザインが有効かをまとめてくれている。 検索サイト、ショッピングサイト、サイトナビゲーションなどなど、ウェブを作る仕事をしている人にとっては必見だろう。 またそれぞれのパターンにはスクリーンショットの例や、いつ使うべきか、使うときにはどういった点に気をつければ良いかも教えてくれる。 こうした資料は知っておいて損はないですね。
ウェブ上で組織図をさくさく作成・編集できるForbesの『Org Chart Wiki』 | P O P * P O P
Forbesにて便利そうなツールが公開されていました。いわゆる組織図をウェブ上で作成、編集できるツールです。 しかも著名企業の組織図はすでにいくつかアップされています。これを見ながらつくってもいいですし、そもそも企業の体制を知ることは勉強になりますよね。 詳しい使い方は以下をどうぞ。 ↑ まずは組織図を新規作成。組織名と業界を入力します。 ↑ 初期作成画面はこちら。Google Mapのようなインタフェース上で人を入れ込んでいきます。 ↑ 一応つくってみたのはこちら。基本はドラッグ＆ドロップで自由に作っていくことができます。作った組織図は保存もできますよ。 ↑ 著名企業の組織図も見ることができます。こちらはGoogle。 なお、有名企業の組織図を見られるツールといえば「They Rule」もありますね。こちらのほうがちょっとおしゃれですね。かなり古いサイトなのでデータが古いかもしれませんが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
