http://www.life-is-bitter.com/entry/ui_checklist
アプリのUI設計に便利！無料ツール「Flinto」を使ってプロトタイプをつくってみた
こんにちは。デザイナーのまんです。 Webサイトやモバイルアプリをつくる上でUIに悩むことは多いと思います。 ワイヤーフレームを引いてみても、動かしてみたときを頭の中で想像しながらだとなかなか時間が掛るし思うようにならない…。 そんなとき！作った画面をお手軽にがしがし動かしてくれるプロトタイプツールが便利です。 今回使ってみたのは「Flinto」というWebツール。(1ヶ月体験無料) 実際に使ってみた感想や気づきをご紹介します。 使い方 基本的にはよくあるプロトタイプツールと同じで ①画面イメージ（画像）を登録する ↓↓↓ ②リンク箇所とリンク先を設定する （みょい～～～んとアンカーが伸びるのが気持ちよくてすごく好きです） リンク設定しおわったら「Share & Install」からURLを生成してモバイルのホーム画面に追加すると まるで本物のアプリのような動きをしてくれます！（Web上で
Modern Syntax
エルカム・セカーさんがパンデミックの最中に作ったのは世界のさまざまな都市をバーチャルにドライブできるウェブサイト「ドライブ＆リッスン」です。 世界中の有名な都市を地元のローカルラジオを聴きながらドライブしている気分になれます。あ、自分は運転できず助手席に乗っているイメージです。 エルカム・セカーさんはミュンヘン大学の修士課程に所属しているそうで、久しぶりに「おお！」って感じのウェブサイトに出会った気がします。 以下のURLからアクセスしてください。 https://driveandlisten.herokuapp.com 当Podcastでは毎月「月刊小山(@koyhoge)のこの映画を観た」という回を録音・公開しているのですが、毎年年の頭には小山さんが前年に観た映画の中からよかったものを10本選んで紹介してもらうということをしております。 小山さんが2023年に観た映画の本数は430本だ
)
医療アプリ: Manipal Hospital - Windows app development
Manipal Hospital 医師回診アプリ アイデア ブックは、医療提供者がどのように Windows 8.1 アプリを使って院内回診時の患者巡回を計画できるかを示します。この医師回診アプリでは、病院の患者情報システムを使って巡回のスケジュールを設定します。 このトピックのシナリオを確認し、アプリでの Microsoft デザイン言語の使い方を見ることで、独自の医療アプリのデザインに関するインスピレーションを得ることができます。 利用できるサンプル コード: Manipal Hospital 医師回診アプリ アイデア ブックのコードを確認するには、医師回診アプリのページをご覧ください。 医療アプリ シナリオ このトピックで説明している医師回診アプリでは、Microsoft デザイン機能を使って医師による日々の患者巡回を管理します。院内回診は、患者の状態を評価し、治療を管理する機会とし
UIデザインのアニメーションまで共有できるモック作成ツールまとめ | Goodpatch Blog
先日、Goodpatch代表の土屋がWebSig会議というイベントで講演をしました。講演は「ハートに響くUIを生み出すためのデザインプロセス」というタイトルで行われ、起業までのストーリー、GoodpatchのUI設計プロセスなどについて話しました。講演内容は↓のslideshareを参照してください。 その講演の中でGoodpatchはデザインする際にプロトタイプを作成していると話しました。以前にMEMOPATCHでもインタラクションや導線の動きを伝える上でプロトタイプ作成が重要という趣旨の記事をアップしています。 （参考: これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編）, （後編）） プロトタイプ作成というとHTML, CSS, JavaScriptで実装する方法がメジャーかと思いますが、これだとリソースをかなり割くことになってしまいます。そこで今回は
ソシオメディア | フラットデザインはUIを進化させるか
ウェブやアプリのデザイナーであれば、ここ1〜2年のUIトレンドであるフラットデザインについてご存じだと思います。すでにこのトレンドを意識して実践しているかもしれません。今回はフラットデザインの特徴とそのポテンシャルについて考えてみます。 フラットデザインとは、画面に表示するボタンやメニューなどのUI要素を非常に平坦な見た目にするという表現手法です。ウェブでもアプリでも今やこのフラットデザインを取り入れているものが沢山ありますが、中でも代表的なのは、Windows 8 の Modern UI と Google の一連のサービスでしょう。 フラットデザインと言っても、もちろん明確な定義があるわけではなく、フラット度合いは様々に試されていますが、一般的な特徴をあげてみます。 UI要素の「塗り」に、グラデーションやテクスチャを使わず、単色にする ドロップシャドウやベベルといった立体感を出す表現を用
米Yahoo! 新UIに学ぶアイコン・デザイン | ビジュアルシンキング
yahoo.comのUIに使用されているアイコンのデザイン設計に関して。 Yahoo! 新システムは、Yahoo!のUIデザインチームとiconwerkが協力して作りました。 image by iconwork iconwerkのサイトより、デザインのポイントを。 フラットなデザインの秘密がわかります。 1.パーツの共通化 アイコンに統一感を出すために、共通化したシンプルなブロック・パーツを積み上げてデザインを作り上げています。 image by iconwork 2.いろんなサイズに対応 16ピクセルからプリント用の大きいサイズまで、ひとつのデザインで対応できるように設計されています。 image by iconwork
ソシオメディア | iPhone の当たり判定を検証した
スマートフォンやタブレットなどのモバイルデバイス向けにUIをデザインする際には、タッチ操作に適したコントロール表現を追求しなければいけません。 タッチ操作に適したコントロール表現とは、前回書いたジェスチャもありますが、それ以前に、ボタンやリンクなどのUI要素を指で押しやすい大きさにすることが大切です。 パソコン画面のマウスポインターと違って、タッチスクリーンにおいて指でボタンをタップする場合、指がそのボタンを覆い隠してしまうので、意図した場所に正しく触れているのか分かりにくく、またボタン自体の視覚的なフィードバックも確認しづらいという課題があります。 またマウスポインターではピクセルレベルで画面上の座標を指し示すことができますが、指先ではそのような細かい操作はできません。 ですからタッチデバイスでは、ボタンやリンクが細かく密集しているようなデザインは大きなストレスになります。 最低限の大き
直感的にスマートにモバイルアプリのUIが作れるモックアップサービス「fluid」
WEB以上にUIが重要視される、モバイルアプリ開発。当然情勢も刻一刻と変わっていきスピード感も求められます。今日紹介するのは直感的にスマートにモバイルアプリのUIが作れるモックアップサービス「fluid」。 ブラウザ上で、用意されたパーツを並べていくだけで簡単にUIを設計することができます。非常に直感的に操作できるようになっており、海外のサービスですが、説明やチュートリアル無しで制作していくことができました。 詳しくは以下 予めよく利用するパーツが取り揃えられれていますので、基本設計は用意されているパーツで十分行えると思います。 フリー版では1つのプロジェクトで10スクリーンまで、10MBのアップロード領域まで利用できるそうです。それ以上は、STANDARD、PROFESSIONAL、EXPERTと開発規模に応じて有料プランが用意されています。有料版の利用料金は料金は「Plans & Pr
自分でできるデザイナーズ・サイト、Bootstrapをさらに簡単に最速でUIを構築できる「Jetstrap」は全てのウェブ制作関係者必携サービスとなるか 【増田 @maskin】 | TechWave（テックウェーブ）
「アイディアはあるんだけど、モックすら作れないIT起業家」「“UIだけなら自分で作れる” とやってみたけど、見にくいページにしかならない、どうしよう、、、」。高度なテクニックは不要、でも、やっぱりデザイナーさんに依頼しないといけないシーンが多いこの業界。 しかし、「Twitter Bootstrap」(以下 bootstrap)の登場により、多くの人がデザイン性の高いページデザインを短期間で作れるようになり世界は変わった。bootstrapは、プログラマーやディレクターなどが、最低限のコードの組み合わせでスッキリと解りやすいユーザーインターフェイス(UI)を構築できるライブラリ(支援プログラム群)のこと。 Bootstrapの登場で、スタートアップはスピーディにページを作りあげ、プログラマーは必要なページを “とりあえず” 作っておくくらいのことをするのが手軽になった。ただ、bootstr
ウェブマスター・制作者は必読！ユーザーがサイトから離脱してしまう8つの要因
ナビゲーションが分かりにくい ナビゲートすることが難しいサイトは、ユーザーを失望させます。複雑だったり、一貫してなかったり、そういったナビゲーションはユーザーを困惑させ、苛立ちを感じさせるものです。
クックパッド 片山育美さん／UIデザイナーとしてユーザーが幸せになるものだけを作りたい【連載：ワーキングビューティー・アルバム Vol.11】 - Woman type[ウーマンタイプ] | 女の転職type
クックパッド株式会社 サービスデザイン部 UIデザイナー 片山 育美さん 美大で情報デザインを専攻し卒業。2011年に新卒でエンジニアとしてクックパッドに入社。同年8月よりUIデザイナーとして活躍。 今回紹介するワーキングビューティーは、株式会社クックパッドのUIデザイナー、片山育美さん。入社２年目にして新規事業の『やさい便』をはじめ、数多くのサービス開発に携わっている彼女。あまり聞きなれないUIデザイナーの仕事内容から、揺らがない仕事軸、そして根っからのエンジニア魂を感じられるプライベートに迫る！ 入社当初はまったく知らなかった 「UIデザイナー」の仕事 編集部：いまのお仕事は「UIデザイナー」ということですが、どのようなお仕事なのですか？ UIとは「User Interface（ユーザーインターフェース）」の略で、仕事を簡単に説明すると、ユーザーがインターネットサイトの画面を使いやすく
![クックパッド 片山育美さん／UIデザイナーとしてユーザーが幸せになるものだけを作りたい【連載：ワーキングビューティー・アルバム Vol.11】 - Woman type[ウーマンタイプ] | 女の転職type](https://cdn-ak-scissors.b.st-hatena.com/image/square/b3798275ce15fec93611078875ad1c8415db2c05/height=288;version=1;width=512/https%3A%2F%2Fwoman-type.jp%2Fwt%2Ffeature%2Fwp-content%2Fuploads%2F2016%2F01%2Fog11.gif)
モバイルデザインパターン
モバイルアプリのUIパターンを手軽に参照できるリファレンス。主要なプラットフォームで動くモバイルアプリの画面例を400点以上使いながら、ユーザーインタフェースの定番パターンをグラフィカルに解説します。本書で紹介する68個の基本パターンと5個のアンチパターンが、使いやすいモバイルアプリをデザインするうえでクリアしなければならない設計上の課題を解決してくれます。 掲載UIパターン： ナビゲーション、フォーム、テーブルとリスト、検索、並べ替え、フィルター、ツール、グラフ、誘導、フィードバック、アフォーダンス、ヘルプ、アンチパターン サンプルPDF ● 「監訳者まえがき〜1章まで」（15MB） 監訳者まえがき 賞賛の声 序文 まえがき 1章 ナビゲーション 1.1 主要なナビゲーション 1.1.1 Springboard（スプリングボード） 1.1.2 List Menu（リストメニュー） 1.1
2万以上もの各種ボタン・アイコン・バーなどのユーザーインターフェースパーツのデザインを検索してダウンロードできる「UICloud」
「Download button」「CSS button」「Music Player」など、テキストボックスに欲しいユーザーインターフェースパーツを記入するだけで、総合計2万個以上のパーツの中から欲しいものを検索してきてくれるのが「UICloud」です。 UICloud | User Interface Design Search Engine, UI Elements, GUI Design, Free Downloads http://ui-cloud.com/ トップページのテキストボックスに探したいパーツの名称を記入して「Search」ボタンを押します。今回は「Download button」で探してみました。 すると検索結果一覧が表示されます。色んなダウンロードボタンがずらり。 気になったものをクリックします。 すると、大きめサイズのイメージが表示されます。 画面右端には詳細情報
クックパッド流UIの作り方 - takeshi nagayama's blog
なんか突然東京行きたくなったので、ひょひょいと行ってきた。 たまたま立ち寄ったクックパッドっていう会社でクックパッド流UIの作り方という勉強会してたので、偶然持ち合わせていたはてなステッカー渡したりおいしい料理いただいたりした。 UI/UXのためのSass 池田さん / サービスデザイン部 Sass / Haml (エンジニア・デザイナー問わずに) Github デザイナーもpull req 一つのサービスを複数チームで開発 各デバイスで速いサイクルでの開発 Sassとは → ぐぐれ 全体のデザインを束ねる → デザインガイドライン ガイドライン Sassで統一的なものを提供する 画像を使わずにCSSでデザインするメリット mixinをつかって統一できる 画像編集がいらない プロパティの変更によってデザインに幅をもたせる事ができる mixinの中身は応用がきくような仕組みにしておく 検証を
UIデザイナーが知っておくべきエンドユーザーの10の特徴
ユーザーの視点に立ってデザインされていないインターフェースは、エンドユーザーに受け入れてもらえないはずだ。そこで本記事では、UIデザイナーが念頭に置いておくべきユーザーの習慣や考え方について焦点を当てる。 つい最近、「Ubuntu Unity」はUbuntuに正式搭載されてから1周年を迎えた。また、「Windows 8」はリリースを間近に控えている。こういった状況のなか、すべてのユーザーインターフェース（UI）は同じように作られていないという事実が明らかになってきている。実際のところ、コンピュータの使い方に革命的な変化をもたらすような素晴らしいUIデザインもあり得るだろうが、エンドユーザーを念頭に置いていないものは、その素晴らしさを証明する間もなく失敗作という烙印を押されてしまうはずだ。 筆者は長年に渡るコンピュータ経験のなかで、ほとんどすべてのLinuxデスクトップと、あらゆるバージョン
無料で使えるUIデザインの基本要素が詰まった32の素材集 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
先日、UIデザインが素晴らしい35のウェブスタートアップという記事が人気となりました。今回はあんな今風のウェブUIを気軽に簡単にデザインしてみたい！という方のためにフォトショップ用のUIエレメントのファイル集を32厳選してご紹介。どれもフォトショップ形式、かつベーシックなまさに今風にデザインされた要素ばかりなので、便利に使えそうです。 — SEO Japan Butterscotch UI Kit Lion OSX UI Kit PSD Calendar PSD Search Drop-down PSD Volume Slider Mini Web UI Set Cloudy UI kit Dark UI Kit Modern UI Kit UI Bundle Detailed UI Kit iTunes Inspired UI Kit (PSD) iPad Application Moc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
)
Flat navigation, start to finish (HTML) - Windows app development
Windows ストア アプリの UX ガイドラインの索引 (Windows)
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type
