綺麗なReactコンポーネント設計でモノリシックなコンポーネントを爆殺する - Qiita

2020/09/23 25 users モノリシック Qiita React コンポーネント View

まずはじめに Reactはユーザインターフェース構築のためのJavaScriptライブラリです。 React は、インタラクティブなユーザインターフェイスの作成にともなう苦痛を取り除きます。アプリケーションの各状態に対応するシンプルな View を設計するだけで、React はデータの変更を検知し、関連するコンポーネントだけを効率... 続きを読む

UIの使いづらさにイラッとする！これがフォームで使いにくい最悪なユーザインターフェイスだ -User Inyerface | コリス

2019/07/11 227 users コリス インタラクション ベルギー デザインパターン フォーム

使いにくいUI、間違いやすいインタラクション、誤解されるデザインパターンを再現したUser Inyerfaceを紹介します。ベルギーの制作会社「Bagaar」による、使いにくい最悪なユーザインターフェイスを楽しむゲームで...記事の続きを読む 続きを読む

ユーザインターフェイスのデザインのヒント - Apple Developer

2016/07/25 483 users インターフェイスデザイン iOS アプリケーション ヒント

iOS ではユーザインターフェイスのデザインがさらに洗練されており、魅力的で独特なユーザ環境を構築できる開発環境が準備されています。コードを記述する前に以下の共通デザインコンセプトを考慮に入れることで、アプリケーションの使いやすさや魅力を高めることができます。 iOSヒューマンインターフェイスガイドライン には、優れたインターフェイスデザインのための提案が詳しく紹介されています。 続きを読む

仕事早すぎ！iOS 9の洗練されたユーザインターフェイスをじっくり勉強できるデザイン素材 -iOS 9 GUI | コリス

2015/09/01 36 users 発表 素材 秋リリース UI素材 開発者向け

今秋リリース（9月9日に発表？）と噂されている「iOS 9」のUI素材が、早くもダウンロードできます。素材は100%ベクターのSketch用素材です。 iOS 9 GUI for Sketch iOS 9は開発者向けには...記事の続きを読む 続きを読む

UIデザインで大切な空白スペースの効果的な使い方 | コリス

2015/07/01 156 users コリス UIデザイン スペース DESIGN 空白スペース

空白スペースは単なる美ではありません、ユーザインターフェイスの成功への鍵です。空白スペースがWebデザインやUXデザインにおいてどのように使うと効果的に機能するかを紹介します。 Why White Space Is Crucial To UX Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 はじめに -UXデザインにおける空白ス... 続きを読む

マトリックス風の画面にタッチするだけでグリッチノイズを作れるアプリ『Hexaglyphics』 | soundrope

2015/05/17 35 users soundrope マトリックス風 サップ スクエア バット

映画マトリックスをイメージさせる独自の16進数アルファベットを使用したユーザインターフェイスにタッチするだけでグリッチノイズを生成してくれる13ビット・ノイズジェネレーター・アプリ「Hexaglyphics Noise Generator」（以下Hexaglyphics）。Hexaglyphicsはパッドのジェスチャー・コントロールで、広範囲のノイズスイープ、ザップ／クリック、スクエア・オシレーシ... 続きを読む

UIに使用しているアニメーションを今よりもっと魅力的に動かせるようになるチュートリアル | コリス

2015/04/07 119 users コリス チュートリアル アニメーション 意訳 レイアウト

ボタンやパネル、レイアウトなど、最近はWebのユーザインターフェイスでさまざまなアニメーションが利用されています。WebページのUIに使用しているアニメーションを今よりもっと魅力的に動かせるようになるチュートリアルを紹介します。 アニメーションを魅力的に動かすテクニックを段階的に解説しているので、それぞれの効果がよく分かります。 Giving Animations Life 下記は各ポイントを意訳... 続きを読む

アニメーションを使ったUIを楽しくデザインできる便利な無料ツール『Origami』の使い方を動画でご紹介 | コリス

2015/03/17 83 users Origami コリス Facebook アニメーション 現場

去年あたりから、魅力的なプロトタイプ作成ツールがいろいろリリースされ、制作の現場でもそれらをもう使ってるという人も少なくないと思います。 その中の一つ、Facebookの『Origami』の動画コンテンツが公開されたので紹介します。 Facebook Origami Origamiは簡単に説明すると、スマホやタブレット、そしてデスクトップのWebページ・アプリのユーザインターフェイスをデザインする... 続きを読む

Webページ・スマホアプリのユーザインターフェイスに楽しさを加える効果音や環境音などのサウンド素材のまとめ | コリス

2015/01/09 91 users ユーザ アクション スライド スワイプ タップ

Webページやスマホアプリで、クリックやタップ、スワイプ、スライド、ポップアップなどユーザのアクションにあうさまざまな楽しいサウンドがダウンロードできるサイトを紹介します。 気持ちいい軽快な効果音や環境音がたくさん揃って...記事の続きを読む 続きを読む

ブックマークしておきたい、スマホUIをコレクションしている海外と日本のサイトのまとめ | コリス

2014/10/22 408 users コリス スマホUI フック 海外 楽しいアニメーション

iPhone, Androidなど、スマホのユーザインターフェイスの参考になるギャラリーサイトを海外・国内ともに紹介します。 まずは、スマホでその操作が楽しいアニメーションを伴ったUIギャラリーから。 CAPPTIVAT...記事の続きを読む 続きを読む

Photoshopでの作業がはかどる！ウェブデザイン（特にスマフォ）用の効果的な環境設定のまとめ | コリス

2014/04/22 384 users コリス ウェブデザイン Photoshop スマフォ 作業

Photoshopでウェブページやスマフォページのユーザインターフェイスをデザインする時に、最も良い結果がでる最適な環境設定を紹介します。 最後の「作業のパフォーマンスを向上させる設定」はウェブデザインに限らず、Photoshopの動作がもっさりしている人は見直してみてください。 How To Set Up Photoshop For UI Design 下記は各ポイントを意訳したもので、画像は当... 続きを読む

【保存版】iOS 7のインターフェイスやアイコンを作成するのに役立つデザイン用の素材・チートシートのまとめ | コリス

2013/10/01 143 users コリス インターフェイス 磨りガラス アイコン ソリッド

ホワイトをベースにしたフラットなスタイル、ソリッドなライン、磨りガラスのような半透明なパネル、ブラーエフェクトなど、iOS 7のユーザインターフェイスやアイコンを作成するのに役立つ素材・リソースを紹介します。 本体のモックアップ用の素材は、前回まとめたiPhone 5s/5cをどうぞ。 iPhone 5s/5cのモックアップ用のPSD素材のまとめ Download iOS 7 UI Kit PSD... 続きを読む

これは気になる！最近のウェブデザインで人気のカラーをまとめたスウォッチ素材 | コリス

2013/06/27 156 users コリス ウェブデザイン スウォッチ素材 DOWNLOAD 前回

前回紹介したフラットなユーザインターフェイスを作成する際にぴったりなカラースウォッチの第二弾がリリースされていたので、紹介します。 今回は442種類のカラーがセットになっており、前回のVol.1を含めてダウンロードできます。 Vol.2 of Photoshop Swatches Library for Flat UI Design スウォッチ素材のダウンロードはページ中程の「Download」か... 続きを読む

UIのアニメーションを目的別に分けたまとめ -Meaningful Transitions | コリス

2013/05/29 93 users コリス アニメーション インタラクション フォーカス 目的別

UIのアニメーションを目的別に分けたまとめ -Meaningful Transitions デスクトップやスマフォやタブレット向けのページやアプリのユーザインターフェイスには、多種多様なアニメーションが使用されています。 ユーザーの助けになるよう目的にあった有意義なアニメーションを実装できるよう、ユーザーのインタラクションにフォーカスを合わせカテゴリに分けたMeaningful Transitio... 続きを読む

ウェブデザイナーは要チェック！フラットに効く400種以上のカラーがセットされたスウォッチ素材 | コリス

2013/05/16 262 users コリス ウェブデザイナー スウォッチ素材 要チェック カラー

フラットなユーザインターフェイスを作成する際にぴったりな400種以上のカラーがセットになったPhotoshop用のスウォッチ素材を紹介します。 トレンドカラーとして、フラットに興味がない人でもカラーの引き出しが増えますね。 Photoshop Swatches Library for Flat UI Design スウォッチは上記ページの「Download .aco」から直接acoファイルがダウン... 続きを読む

ユーザインターフェイスのパターン紹介のスライド | Cocoaの日々情報局

2012/02/21 11 users Cocoa iOSアプリ スライド iOSアプリ開発 ベース

ユーザインターフェイスのパターン紹介のスライド Published on 2012年2月21日火曜日 Leave your thoughts » Tweet Android 向けと銘打っているが iOSアプリ開発でも参考になる。むしろ取り上げられている例として iOSアプリがしばしば登場するし、ベースとなる考え方はそれほど違わない。 なおスライド自体はキーワード中心なので物足りない感はある（当たり... 続きを読む

Android 4.0からのActionBar再入門 スマートフォン向けのアクションバーの使い方 | Tech Booster

2012/01/20 38 users Tech Booster アクションバー デフォルトテーマ

Android 3.x(Honeycomb)から追加された新UI、ActionBar(アクションバー)はAndroid 4.0.x(ICS:IceCreamSandwich)でも重要なユーザインターフェイスです。 今回はAndroid 4.0(スマートフォン版)に焦点を当てて、ActionBarの使い方を解説します。Android4.0 SDKからアプリケーションのデフォルトテーマが変わっており、... 続きを読む

ユーザインターフェイスの勉強をするために過去に撮ったスクリーンショットを掘り起こすなどしていました - 準二級.jp

2011/08/12 24 users スクリーンショット 勉強 過去 準二級.jp

Twitter の Direct Message に仕込んだ JavaScript が動作していた頃 Twitter が文字化けしていた日 すべての文字を画像に Twitter の follow 通知メール Tweet のページ Twitter ユーザのタイムライン We’re sorry, but buzztter is over capacity. excite翻訳 Twitter で絵文字が... 続きを読む

Eコマースサイトを成功に導くための18のアドバイス | コリス

2010/12/07 370 users コリス Eコマースサイト Dell ウロコ アドバイス

Amazon, Apple, DellなどのEコマースを参考にした、商業ウェブサイトとして成功に導くための18のアドバイスを紹介します。 下記は各ポイントを意訳したものです。 13番の「Google Sitemapに一工夫」は特に目からウロコでした。 Keep it simple どんな種類の商品を扱うサイトでも、サイトはシンプルで一貫したユーザインターフェイスを備えてください。不必要にユーザーを... 続きを読む

優れたユーザインタフェースを設計する際に考慮する8つのポイント | コリス

2009/04/23 547 users ユーザインタフェース コリス 意訳 ユーザー ポイント

ユーザーにとって有益なユーザインタフェースを設計する際に考慮する8つのポイントをUsability Postから紹介します。 8 Characteristics Of Successful User Interfaces 以下、その意訳です。 ユーザインターフェイスの設計時に、考慮する8つのポイントを紹介します。 Clear Concise Familiar Responsive Consiste... 続きを読む

Alertbox:医療現場のユーザビリティ 悪しきデザインがいかにして患者を死に至らしめるか

2005/05/12 22 users AlertBox 照準 生死 投薬 要約

要約： あるフィールドスタディから、自動化された院内システムは22通りの方法で患者に誤った投薬を強いる結果になり得ることがわかった。多くは、何十年も前から既に知られている古典的なユーザビリティ上の問題である。 ユーザビリティが生死の問題に繋がることは往々にしてある。たとえば、戦闘機のユーザインターフェイスの場合。照準を合わせて攻撃をするためのシステム操作を規定時間よりもほんの1秒早く行うだけで、パ... 続きを読む