作業ペースが上がる！ブックマークしておきたい無料UIデザイン素材40個まとめ
ウェブサイトやアプリのデザイン制作は、時間のかかる作業のひとつです。今回は、作業ペースを格段にアップする、ブックマークしておきたいUIデザイン素材をまとめてご紹介します。 素材はどれも無料ダウンロード可能となっており、文字テキストや配色、サイズの変更、カスタマイズも自由に行うことができ、あらゆるUIコンポーネント素材が揃っています。また、Retinaディスプレイ対応やミニマルスタイルなど、人気のデザイントレンドをうまく取り込んでいます。PhotoshopやIllustrator、Sketchなど幅広いデザインアプリに利用できる点もポイントです。 、 完全無料で美しい！参考にしたいUIキット50個まとめ 2017年保存版 ウェブサイト作成に困ったら使いたい！Photoshop無料テンプレート素材まとめ 2017年版 作業ペースを格段にアップする、ブックマークしておきたいUIデザイン素材まとめ
UIを模写してみてわかること - Kamihira_log at 10636
先日のこと，カードソーティングゲームを元にUIをつくる演習の回で，「模写」を取り入れてみた．経緯として，昨年度の同じ課題の際に，ペーパープロトのスケッチを描くあたりで手が止まってしまう学生が多くて，毎日いろんなアプリを使っているのにUIは本当に見えないものなのだなぁ，という気付きがあった．でも，考えてみればUIはよく出来ていればいるほど，透明化して意識から消えてしまうものだ．デザインする以前にそもそも意識化する必要があるんじゃないか・・・と思って試しにやってみた次第である．軽くググってみたけど，UIの模写を教育の場で取り入れている例はほとんど無いようだ． ここで模写するアプリとして，料理レシピサービスのクックバッドを選択した．理由として，まず，学生達でも一度は使ったことがあるサービスであること（クックパッドはなんと月間6000万以上のユーザ数らしい．凄い数字だ）．そして今回のカードソーティ
ネタ探しも仕事の内！フロントエンドのネタさらし！2017春の陣！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
春ですね、いや、夏の匂いを感じる人もいることでしょう。 フロントエンド担当、ザワです。 今回は、フロントエンドエンジニアの私が日常的にチェックして情報を得たり、困ったちゃんの時にお世話になっている主なサイトをご紹介します。 フロントエンド系記事 CSS-TRICKS https://css-tricks.com/ CSS関連といえばこのサイトではないでしょうか。サイト名もカッコイイですし。CSSでお困りの際に検索すると、大体ヒットしてきます。CSSのTips系の記事や、最新のプロパティに関する記事などが掲載されるので、フロントエンドならマストでチェックしておきたいサイトです。 HTML5Experts.jp https://html5experts.jp/ Web技術に関する最新動向、エキスパートによる見解などが見所のメディアサイトです。最新の技術に関してプロ中のプロ、いわゆるロープーの人
フロントエンドのテストに真面目に向き合う - Qiita
最新版=>フロントエンドのテストについて考える 背景 フロントエンドのテストは、テストランナー、フレームワーク、Node.js、ブラウザ、Selenium、WebDriverなど、登場人物が多い。また、UIと密接に絡むのも特徴である。 これまで社内では、テスト種別によって、それぞれ解決したい事柄が明示的に示されていなかった。それぞれのテスト種別にどんな意味があり、何を目的とするかを明確にすることで、機能に対して、どのようなテストを実装すればよいのか共通認識を持っておくために、この記事を作成した。 フロントエンドのテスト4象限 今回この記事で紹介するテストは、Unit Testing、UI Testing、E2E Testing、Integration Testingの4つがあるが、それぞれ、上のグラフのような関係になっている。これらを考えることで、バランスの取れたテスト環境を確立したい。ポ
サイト構造や画面遷移を分かりやすく見せる、サイトマップ・フローチャートを作成する要素がすべて揃った無料素材 -UX Flow
Webサイトやスマホアプリのサイトマップ・フローチャートを簡単に作成できるSketch用の無料素材を紹介します。 ラインやアローをはじめ、アイコン、ラベル、パネルなど、サイトマップ・フローチャートを作成するための要素がすべて揃っています。
UIデザインにユーザーストーリーが必要な理由
Tom Brinton氏はBYUを2012年に卒業した後、CitrusBits、Wallaroo Media、CustodyXChangeでUI/UX設計者として働いてきました。彼は優雅なインターフェースをデザインすることが好きです。 あるデザインチームが、クライアントの新しいアプリのモックアップについて話し合っているとします。すると、アプリがどのようにあるべきかついて、チームメンバーはそれぞれ 違う考えを持っているということが明らかになります。こうなると、ミーティングはすぐに、「何が正しいか」というよりも、「誰が正しいか」という議論になってしまいます。 誰もが自分のデザインを守ろうとしますが、誰もユーザーを守ろうとはしません。ひょっとしてあなたにも思い当たる節がありませんか？ このようなときにこそ、ユーザーストーリーを導入する必要があります。 最近では、UI/UXのプロがアジャイル開発で
ひどいユーザインターフェースを一目で見極める | POSTD
前のブログ記事 を書いた時、「訓練された目ならば、不親切なソフトウェアを結構な頻度で簡単に見抜けるようになる」ということに気づきました。 それは初対面の人に第一印象を抱くのに似ています。私たちは初めて会った人の印象を判断するのに コンマ1秒もかからないそうです 。 人を判断するのとは違い、ユーザインターフェースの良しあしを判断することは、私たちが（今はまだ）本能的に行っていることではありません。しかし、たった数分で、もしくはもっと早く、ユーザインターフェースがじっくり考えられて作られたものか、ちょっとした思い付きで作られたものかどうかを判断することは可能です。 どうして判断がついたのかや、どんな警告サインが出ていたのかについては確証がなかったため、私は注意を払い、メモを取ることにしました。 以下は私が気付いたことです。 用語/ラベルの使い方があまりに総称的/一貫性していない これはユーザの
illustratorでUIデザイン：設定編 - Two hats
Fireworksのヘビーユーザーだったので、ディスコンになってからUI作成のツールをどれにしたらいいかが悩みでした。 Fireworksの前はPhotoshopでデザインを行っていたのですが、Fireworksの効率良さに慣れてしまうとPhotoshopには戻りたくなくなりました。他に良いツールがないものか・・・と思いつつ、とりあえずまだ使えるのでFireworksを使っていました。 ですが、ディスコンになる以上別のツールを探さないといけないので、改めてPhotoshopとillustratorについて調べてみたところ、illustratorの設定を適切に行えばFireworksチックに操作できることがわかりました。 今回はillustratorでUIデザインカンプを作る際の設定について書こうと思います。Webデザインでもほぼ同じ設定で大丈夫ではないかと思っています。ちなみに自分のill
モバイルナビゲーションを考察する – ハンバーガーメニューに代わるもの | POSTD
「Webサイトやアプリのナビゲーションに ハンバーガーメニュー を使うべきかどうか」というテーマに関して、UI/UXデザイナーの間で交わされる、すばらしい議論や記事を目にする機会があります。 もし、ハンバーガーメニューの始まりや歴史が気になる場合は こちらの記事 をご覧いただくといいでしょう。 しかし、今回はハンバーガーメニューについて語る気はありません。この記事ではハンバーガーメニューの代わりとなり得る他のナビゲーションを模索し、その説明をしたいと考えています。 なぜこの記事でハンバーガーメニューを扱わないのでしょうか？ それは、ハンバーガーメニューは簡単で便利なソリューションであると同時に、以下に列記するような数多くの欠点を併せ持っていると、私が個人的に確信しているからです。 * 効率性の低下（インタラクションが遅くなる） * 視認性の低下（メニューが隠れる） * 不要アイテムの増加
fladdict » スマホのUI考 〜 ボタンについて
SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ
Prototyperを使ったモックアップ主導のUI設計プロセス
ユーザーインターフェイスを設計するためのワイヤーフレームとモックアップの取捨選択とプロトタイピングに適したモックアップツールを記載しています。 UI設計はUXデザインプロセスの4段階目 アプリやWebサービス、サイトなどを作っていく全体の流れは以下のプロセスを行っています。基本的なUXデザインのプロセス通りですが、コンセプトやアイディアの前に調査（理解）を重視している点と、ワイヤフレームではなくインタラクティブなモックアップを作成している点が多少異なるかもしれません。その他のプロセスにご興味がありましたら詳細は問題解決型UXデザインアプローチを御覧ください。 理解 アイディア ストーリー UI ビジュアルデザイン 開発 フィードバック 今回は上記の中で画面の要素やレイアウトを検討する「UI」フェイズの「モックアップ」に関してを、整理していきながら記載していきたいと思います。このUIフェイズ
モバイルUIのデザインに役に立つUIパターンギャラリー集17選 - showrtpath - iOSブラウザ開発日記
2013-12-23 モバイルUIのデザインに役に立つUIパターンギャラリー集17選 アプリの開発の時にUIのデザインに悩みますよね。 そんな時、モバイルUIのパターンギャラリー集が役に立ちます。 そのギャラリーサイトのサイトを集めてみました。 スクリーンショットを集めたものと、デザイナーの作品のものがあります。 Showrtpathブラウザを開発していた時はdribbbleをよく見ていました。 Pttrns - Mobile User Interface Patterns 優れたiPhoneサイトデザイン集 - iPhoneデザインボックス Mobile Patterns lovely ui Inspired UI - Mobile Apps Design Patterns [iPhone] Mobile Awesomeness Meerli · Featured Android Nic
Pttrns — Mobile User Interface Patterns
Stay ahead of the curve and become a better interface designer. With a Pttrns membership, gain access to thousands of curated mobile design patterns, get online advice, and connect with other designers from all over the world. What you get UX and UI Patterns Learn and follow industry best practices that can be applied to your app to help ensure the best user experience possible. App database Save
優れたUIデザインを作るために知るべき12のTips | Goodpatch Blog
こんにちは、だいきです。 海外のUIデザインに関する記事「14 Golden Eggs of Good UI Design（直訳: 優れたUIデザインの14の金の卵）」で書かれていたUIデザインに関するTipsがとても勉強になったので、その中からいくつか抜粋したものを翻訳しました！ （この記事はJohannes Thönesというブログの14 Golden Eggs of Good UI Designという記事の抜粋翻訳ブログです。） 1, 先進的な技術を使う理由 photo credit: Carlos Varela via photopin cc HTML5が新しい技術だからといって、それを使う必要性はありません。 新しい技術を使うことが目的になってはいけません。 ユーザーとユーザーが期待している事を考えてください。 どんなUX（ユーザーエクスペリエンス）をユーザーに与えたいですか？
こんなUI/UXはイヤだ
業務中にメモっていた、イヤなUI/UXのメモを公開。（スマホ中心） こう見てみると、多少はチェックリスト的に使えるかも知れないです。各事例の画像が貼られていないのはご勘弁を。 思ってたのと違う。。△ 入力フォームなのにその場で入力できない 見た目は入力フォームなのに、タップするとモーダルで入力画面が立ち上がってしまうと違和感がある。そのままその画面で入力できるようにするか、どうしても別画面を立ち上げる必要があれば、入力フォームをボタンに変えた方が自然なUIになる。 △ 押せそうなのに押せない 立体感があったり囲まれていたりしてボタンのように見えるUIなのに、実際には押すことができないとストレス。遷移先の画面が存在しないのであれば、ボタンに見えるような紛らわしいデザインにしない。 △戻るボタンなのに1つ前に戻らない アプリ内ブラウザで外部サイトを立ち上げる際、画面の上部（ナビゲーションバー）
Themes - iOS - Human Interface Guidelines - Apple Developer
iOS Design Themes As an app designer, you have the opportunity to deliver an extraordinary product that rises to the top of the App Store charts. To do so, you'll need to meet high expectations for quality and functionality. Three primary themes differentiate iOS from other platforms: Clarity. Throughout the system, text is legible at every size, icons are precise and lucid, adornments are subtle
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Create atomic design systems with Pattern Lab - Pattern Lab
今、我々は、 GUI の設計について 何を考えるべきか - mizchi's blog
チームでつくるUIデザイン
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
