STUDIO | The next generation design tool for digital products
Build your idea.The next generation design tool for digital products. Sign up for free Designing intuitivelyBuild your idea into a product. Design and programming skills are no longer necessary to create a product. With this one tool kit STUDIO, you can make your idea into a real product regardless of your skill knowledge. Complete a layout with simple drags and drops by adding the elements you wa
日本製UIデザインツール「STUDIO」は従来のツールと何が違うのか - 酔いどれデザイン日誌 - Drunken Design Diary -
先日、私の古巣である株式会社オハコからスピンオフしたオハコプロダクツ社から、UIデザインツール「 STUDIO」のクローズドβ版がリリースされました。 国産のUIデザインツールといえばグッドパッチ社が提供するProttなどが有名ですが、β版を触ってみた感想と合わせて STUDIOの何がすごいのか？従来のUIデザインツールとは何が違うのか？ということを紹介してみたいと思います。 目次 これはプロトタイピングツールではない 特筆すべきはシームレスな操作感 全員がMVPまで作れる時代 まとめ これはプロトタイピングツールではない まず、最初にSTUDIOを「UIプロトタイピングツール」ではなく「UIデザインツール」と記載したのには訳があります。近年はプロトタイピングの重要性が多方面で説かれているのに呼応するように、冒頭で紹介したProttをはじめ国内外からたくさんのプロトタイピングツールが登場し
CSSだけで横メニューをつくる。但し、ボックスからはみ出たリストはボタンにして、そのボタンを押すと縦のリストメニューが出る - Qiita
/* ========================================================== */ /* ここから下がメニューの設定 */ /* ========================================================== */ /* メニューのON/OFFを保存する為のチェックボックス 非表示 */ #menuOn{ display : none } /* 隠しメニューを表示したとき用のスペーサー */ /* なのでデフォルトでは非表示 */ #menuOn + menu + div.spacer{ display : none; } /* 隠しメニューを表示時のメニューの設定 */ /* absolute指定を行い、高さも与える */ #menuOn:checked + menu{ height : calc(100
説明なしでもわかるUIを実現するために！マイクロインタラクションの基本を理解しよう
こんにちは。TechAcademyの小嶋です。 皆様は「マイクロインタラクション」という言葉をご存知でしょうか。 誰にでもわかりやすいUI/UXを目指したもので、Webサービスやアプリなど様々な場面で使われています。 朝起きてアラームを解除するところから夜スマホの充電を開始してから寝るまで、数多くのマイクロインタラクションに触れています。 今回は、マイクロインタラクションの基本概念と利用するメリットを解説します。 あらゆるサービスに応用できる概念なので、ぜひこの機会に覚えておきましょう。 マイクロインタラクションとは:誰でも直感的に何をすればいいかがわかるデザイン マイクロインタラクションとは、「ヒューマンセンタードデザイン(人間中心のデザイン)」と呼ばれるデザイン手法の1つで、「今どのような状況で、次にどう行動すれば良いのかを直感的なUIで伝える」ことを目的としています。 説明書を読まず
UXデザイナーが備えておきたいツール・サービス厳選20個まとめ
UXデザインとはユーザーエクスペリエンス(UX)、Webサイトやアプリの使い勝手やユーザーが体験する満足度を重視したデザインのことで、あなたが満足するデザインをつくってもユーザーが使いやすいと感じなければUXが良いとは言えません。 ユーザーのリサーチやテストやフィードバック、プロトタイプやワイヤーフレームの作成、クライアントやチームメンバーとのコラボレーションなどに役立つツール・サービスを紹介します。 20 Valuable Tools For UX Designers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ユーザーのリサーチ・テスト・フィードバック プロトタイプ・ワイヤーフレームの作成ツール コラボレーションのツール ユーザーのリサーチ・テスト・フィードバック ユーザーのリサーチは、プロトタイプを制作する前におこなう
JavaScriptのUIライブラリはどうあるべきかという話とOnsen UIのアーキテクチャ - id:anatooのブログ
Onsen UI Advent Calendar の12/9の記事です。 Onsen UIは、モバイルアプリのネイティブライクなUIをHTML + CSS + JavaScriptで簡単に構築することを目的としたUIライブラリです(UIフレームワークともたまに呼ばれます)。 ↓みたいなネイティブなモバイルアプリっぽい画面をサクッと作ることができます。 私は数年前から開発メンバーとしてOnsen UIの設計開発を行っています。この記事では、Onsen UIに求められるUIライブラリとしての要件とそれを解決するためにどのようなアーキテクチャを取っているのかについて解説します。 特定のフレームワークに依存しない jQuery UIやReactの上に乗っかっているUIライブラリなどのように特定のフレームワークの仕組みを使って実装されたUIライブラリというのはたくさんありますが、ある特定のフレームワ
デザイナーだけでなくエンジニアもブックマークしておくべきUI/UXの情報を発信するメディア・ブログ6選｜TechClips[テッククリップス]
デザイナーにとっては、聞かない日がないほどトレンドとなっている「UI/UX」という言葉。もはやデザイナーに限らずエンジニアにとっても、UI/UXの概念を理解していることが基本のスキルセットとして必要とされる傾向もあり、これまでのような“モノ”から“コト”を重視する考えが強まっているように思います。 さて、本記事ではそうしたUI/UXの情報を余すことなく発信する国内メディアやブログを紹介。デザイナーはもちろん、エンジニアの方もUI/UXの理解を深める情報源として活用してみてはいかがでしょうか。 UI/UXとは 改めてUI/UXについて簡単にご紹介すると、それぞれの「UI」と「UX」では考え方が違うことに注意しましょう。はじめにUXとは、「ユーザーエクスペリエンス」の略で、いわゆる“体験”を指します。 例えば、「ECサイトで思いがけない好みの商品を見つけ、購入できたときの喜び。」つまり、利用者
![デザイナーだけでなくエンジニアもブックマークしておくべきUI/UXの情報を発信するメディア・ブログ6選｜TechClips[テッククリップス]](https://cdn-ak-scissors.b.st-hatena.com/image/square/442521c6f78a52c5edefd0d08aa7ebf16b21c1ca/height=288;version=1;width=512/https%3A%2F%2Fobject-storage.tyo1.conoha.io%2Fv1%2Fnc_261159609ad84809af5afcb9e5f56abb%2Ftechclips%2Fimages%2F122%2Fimage.png)
超クールなイマドキのダッシュボードのUIデザインまとめ | SHINGO IRIE
プログラマといえど、管理者が使うものといえど、美しい機能美でまとめられたダッシュボードをつくりたいものです。今回は、参考になりそうな美しいダッシュボードを集めてみました。 クールなダッシュボードデザイン集このくらいシンプルなのが好みです。 Gear Admin UI v2 Analytics系。数字の比較や計算が多いものに向いてそう。 Some Analytics 比較的オーソドックスに使えそう。最近、わりとこういうダッシュボードデザインが多いですね。 Dashboard Web App Product UI Design: Job Summary グラフの見せ方が個性的。 To-Do Dashboard サーバーのダッシュボード。 Server Dashboard カラーを統一するのも綺麗にみえます。 Dashboard Overview Screen トップメニューにすることで、画面を
スマホサイトのナビメニューを見直そう！基本3パターンの長所と短所、改善ポイント
ウェブやモバイルアプリのナビゲーションは、直感的で予測できるべきです。新しいユーザーとリピーターの両方が、どのようにアプリが操作するのか理解できるべきなのです。 しかしモバイルの小さな画面上では、分かりやすくアクセスしやすいナビゲーションメニューを作成するのは大変な作業で、コンテンツの優先順位に応じてUI要素が必要になります。異なるナビゲーションメニュー・パターンを利用し、他の解決方法を試みても、他のさまざまなユーザビリティーの問題点が出てきてしまいます。 この記事では、ハンバーガーメニューとタブメニュー、ジェスチャー型ナビゲーションといった、モバイルアプリの基本的な3つのナビゲーションパターンのメリットやデメリット、デザインの解決方法について詳しく見ていきましょう。 コンテンツ目次 1. ハンバーガーメニュー 概要 メリット デメリット デザインの解決方法 2. タブメニュー 概要 メリ
ユニバーサルアプリの理想と現実: Yahoo! JAPAN MeetUp #2
Yahoo! JAPAN MeetUp #2 (iOS) の時の発表資料です。 http://yj-meetup.connpass.com/event/38348/
React/Angular2時代のUIフレームワーク考──Ionic2、Onsen UI2を語る
React/Angular2時代のUIフレームワーク考──Ionic2、Onsen UI2を語る 白石 俊平（HTML5 Experts.jp編集長） 読者の皆様こんにちは、編集長の白石です。 先日ふとしたきっかけで、本サイトの認定エキスパートでありアシアル株式会社の社長でもある田中 正裕さんと、Web技術について語り合う機会がありました。 ReactやAngular2といった次世代のアプリケーションフレームワークが存在感を増す中で、UIを構築するためのフレームワークはどう進化するのか？ これらのアプリケーションフレームワークをベースとしたIonic2やOnsen UI2と言ったUIフレームワークについて、それぞれの立場から語り合ってみました。 （田中さんはOnsen UI2の開発者、白石はIonic2をかなりヘビーに使い倒しています） Progressive Web Apps (PWAp
2016年、ReactがAngularを抜いて1番人気に！ JSライブラリの利用意向はますます高まっている
← 前回 連載 INDEX 次回 → 依然としてJavaScriptライブラリの栄枯盛衰は、すさまじいスピードで進んでいる。2016年、本当に利用意向の高いJavaScriptライブラリはどれなのか。これを調査するため、Build Insiderではアンケート調査を実施した（※ちなみに、本稿とほぼ同じ質問内容のアンケート調査を毎年5月に実施している。この定点観測により、技術トレンドの推移を浮き彫りにしたいと考えている。その去年の結果はこちら）。 さっそくランキングをジャンル別に紹介していこう JavaScript関連全体の動向： 人気ジャンル フレームワーク関連： MV*などのJavaScriptフレームワーク／SPA（Single Page Application）開発の採用動向 各種アプリを支える技術＆ツール： altJS（JavaScript代替）／CSSプリプロセッサー（CSSメタ
Zebra - リッチなUIが作れるWebアプリケーションフレームワーク MOONGIFT
HTML5によってUI周りは大きく改善されましたが、それでもまだまだ物足りないと感じることは多いです。その結果、外部ライブラリを導入せざるを得ず、互換性や組み合わせによる不具合が発生することもあります。 今回は多くのリッチなUIライブラリを提供するZebraを紹介します。Zebraを使えば他のライブラリを使わずともリッチなWebアプリケーションが開発できそうです。 Zebraの使い方 サンプルです。斜めになっている部分もコンポーネントです。 なのでタブをクリックして表示の切り替えができます。 曲線グラフ。 キーボードショートカットで有効、無効が切り替えられるコンポーネント。 コンポーネントの選択を切り替えるデモ。 ドラッグ&ドロップできるグラフ。 細かい表示場所の制御。 マウストラッキング。 複雑な形の中にテキストボックス。 こちらもWebアプリケーションで使えそうな複雑なUIコンポーネン
なぜデザインはシンプルな方が良いのか – 5つの理由と6つの鉄則 デザイン会社 ビートラックス: ブログ
デザインはシンプルであるべき、5つの理由とは？一方で、シンプルにすることは難しい。その理由は？シンプルにデザインするために覚えておいていただきたい6つの鉄則“Less-is-More (少ない方がより多くを得られる)”。 デザイン業界では遠い昔から使い古されているこの表現、極めて簡単に言い換えると、デザインはシンプルな方が良い、という意味になる。 確かに研ぎすまされたデザインはシンプルであるし、優れたデザイナーになればなるほど、シンプルなデザインをつくり出している気がする。 レオナルド・ダ・ヴィンチはその昔、”シンプルである事は究極の洗練だ” と語った。 近年ではWebデザインやUI、プロダクトデザイン、利用体験、インテリア、そしてライフスタイルにいたるまでミニマリズムに代表されるシンプルなものが良いとされる。 もの作りのプロセスにおいては足し算よりも引き算の方が重要で、どれだけ削れるかが
最先端ウェブデザインを体感する！アニメーションが美しいUIデザインまとめ
ブラウザやウェブサイト体験が進化したことで、さまざまなアニメーションを実装したウェブサイトや、モバイルアプリへの注目が集まっています。今回は「気持ちの良い動き」がポイントとなった、最新UIデザインをまとめてご紹介します。 余白スペースをたっぷり利用したミニマルなレイアウトから、アニメーションを加えることでよりユーザーの注目を集めるナビメニューや、ユーザーインターフェースを中心に揃えています。なかなか言葉で説明しにくい遷移フローが分かりやすく説明できるので、うまくクライアントの要望に応えることができるかもしれません。 詳細は以下から。 最先端ウェブデザインを体感する！アニメーションが美しいUIデザインまとめ Cima is Live 筆ブラシでペイントしたようなエフェクトを、各ページやコンテンツに活かした、さわやかな配色も素敵なウェブサイト用UIデザイン。 Birds of Paradise
UIデザイナーに必要なのは、決定力のあるデザインを作る能力 | tsublog
最近、デザイナーに求められるスキルが多くて何を学べば良いかわからなくなってきた。と言う声を聞くようになってきた。 流行りの記事にいくつか目を通すと、デザイナーは「 経営者と対等に話せるコミュニケーション能力、ビジネスセンスを保有していて、イケてるグラフィックを作り、コードまでかけないといけない 」らしい。 スキルを多く保有している方が望ましいのは間違いない。 ただ、 現場デザイナー に最も大事なのは実装面での考慮事項が網羅されて考え込まれた「 決定力のあるデザイン 」を作る力だと思う。 サッカーで言うと、決定力は「 得点を決める能力 」として使われているけど、UIデザインにおいては「 実装面まで考慮された実装可能なデザインであるか 」という言葉として使っている。 魅せるデザインとフィージビリティが考慮されているデザインでは、かなり内容が異なってくるので、現場デザイナーとしては特にこのあたり
ウェブサイトでシステムフォント
GoogleのRobotoや、AppleのSan Franciscoなど、OSベンダーが独自のフォントを開発し、自社製品のUIにシステムフォントとして採用する、という事例が相次いでいます。これらのフォントは、プラットフォームの特性を考慮して最適化されたもの（あるいは最適なものとして選ばれたもの）と言え、かつ今後のOSのアップデートにともなってさらに改善されることも期待できます。また、ユーザーがそのシステムを操作するときにもっとも頻繁に触れる、つまりもっとも見慣れているフォントでもあります。というわけで、これらシステムフォントをウェブサイトのUIに採用するというのはかなり良いアイデアに思えます。 一方で、システムフォントはあくまでUIのためのもので、長い文章などには向かない場合もあるので、コンテンツ部分は別のフォントを指定すると良いかもしれません。たとえばMediumなどではそのようなアプロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.ogura.blog/entry/2017/02/28/190245
よくわかるダメUI/UX画像コレクション - DOCUMENTS.TIPS
ページネーションのベストプラクティス | POSTD