[B! UI] akio624のブックマーク

akio624 id:akio624

UIに関するakio624のブックマーク (29)

よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ
Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴レイアウトやUIコンポーネントだけを実装するコード CSS Layoutの特徴 CSS Layoutは、よく使用されるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。MITライセンスで、商用プロジェクトでも無料で利用できます。 CSS Layout 依存関係は一切無しフレームワークは必要無しピュアCSSで実装、CSS
akio624 2021/02/19
あとで読む

HTML

UI

css

コード

シンプル
リンク
React でデザインシステムを正しく実装する - コンポーネントカタログを超えて | Wantedly Engineer Blog
Wantedly でバックエンドのテックリード的なやつをやってる @izumin5210 です。半年くらい前から取り組んでいた、UI デザインシステムの React 実装について紹介します。ソフトウェアの設計としても非常にエキサイティングだったので、ライブラリ作ったりするのが好きな人なども楽しんでもらえると思います。 TL;DRWantedly の UI デザインシステムは「WantedlyのUIをデザインする上での共通の考え方とツール＆アセット」でありエンジニアとデザイナが効率よくコミュニケーションするための共通言語となるデザインシステムを (Web) Frontend に持ち込む際は、単なるコンポーネントカタログではなく、システムが定義するものと同じレベルの抽象を持つライブラリ・フレームワークとして実装することで、より有効性を発揮するこの話が気になった（Web・モバイル問わず）フロント
akio624 2021/01/21
design

UI

blog

開発

あとで読む
リンク
これぞプロの実装テクニック！フロントエンドのデベロッパーはCSSで実装する時に何を考えるか
ページのレイアウトやUIコンポーネントを実装する時に、フロントエンドのデベロッパーはいろいろなことを考えます。スクリーンのサイズが小さい時はどうなるのか、デザインでは中央配置に見えるけど実装はどうすべきか、要素が少ない場合や多い場合があるのか、max-やmin-を定義した方がよいのか、、、フロントエンドのデベロッパーはCSSでレイアウトを実装する時に何を考えるか、その思考プロセスを言語化した解説記事を紹介します。下記は、頭の中のメガネで見える実装のイメージです。 Thinking Like a Front-end Developer by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにデザインのディテールは脇に置いておく配下ページのレイアウトを実装する時に考えることディテールを掘り
akio624 2020/12/08
こういう情報って、なかなか無いよね

あとで読む

css

テクニック

デザイン

UI
リンク
Bad な UI を改善する「UI Stack」って知ってます？｜nr
突然ですが、﹁UI Stack﹂ってご存知ですか？アメリカのプロダクトデザイナー Scott Hurff さんが3年ほど前に世に出した考え方で、考慮すべき UI の5つの側面を示したものです。当時﹁これは使える！﹂と思って社内向けに作った勉強会資料を見つけて、今でもやっぱりすごく大事だと思ったので、備忘録的に書いておきます。ちなみに元記事はこちら。︵英語です︶ UIStack とは？Stackとは、1つの画面が持つ︵複数の︶側面、状態、ステータスのようなもの。その側面ごとに最適化されたUIを設計しようするのが UIStack の考えです。 Scottさんが紹介しているUI Stackは5つ。 ※図はScottさんのページから引用・Blank State︵空っぽの状態︶・Loading State︵ローディング状態︶・Partial State︵部分達成状態︶・Error
akio624 2020/02/17
なんとなく分かっていても、言語化されると分かりやすい。

UI

あとで読む

UX

デザイン
リンク
UIテストの所要時間を10分の1にする試み、Raspberry Piのクラスタで並列実行。ソフトウェア品質シンポジウム2018
UIテストの所要時間を10分の1にする試み、Raspberry Piのクラスタで並列実行。ソフトウェア品質シンポジウム2018 開発現場の多くでテストの自動化が進む中で、テスト時間を短縮することはビルドとテストの待ち時間を減らし、開発効率を高める上で重要なポイントになってきています。そうしたなかで時間がかかっていたUIテストの所要時間を短縮する手段としてRaspberry Piをクラスタ化する手法を紹介するのが、レバテック株式会社折田武己氏です。本記事では、9月12日から14日のあいだ東洋大学で開催された「ソフトウェア品質シンポジウム」（日本科学技術連盟主催）での折田氏のセッション「UIテストの所要時間を10分の1に短縮する取り組み～ラズベリーパイのクラスターで並列実行～」の内容をダイジェストで紹介します。単体テストはさくさく終わるのにUIテストは時間がかかるレバテック株式会社
akio624 2018/10/02
あとで読む

UI

テスト

RaspberryPi

Raspberry Pi
リンク
Microsoft Corporation
Microsoft Learn. Spark possibility. Build skills that open doors. See all you can do with documentation, hands-on training, and certifications to help you get the most from Microsoft products. Learn by doing Gain the skills you can apply to everyday situations through hands-on training personalized to your needs, at your own pace or with our global network of learning partners. Take training Find
akio624 2017/04/18
あとで読む

UI

document

programming

Share
リンク
ユーザーのコンピュータスキルの分布：ユーザーのスキルはあなたが思う以上に低い
先進33か国において、コンピュータ関連の高い能力を持つ人は人口の5％にすぎない。また、中程度の複雑度のタスクを完了することができる人は全体の3分の1しかいない。 The Distribution of Users’ Computer Skills: Worse Than You Think by Jakob Nielsen on November 13, 2016 日本語版2017年3月16日公開身につけるのがもっとも困難なユーザビリティの教訓に、︵訳注‥デザインプロジェクトに携わっている︶﹁あなた方はユーザーとは違う﹂というのがある。これこそがユーザーのニーズについての推測が大失敗に終わる理由だ。デザイナーは大半のターゲットオーディンエンスとあまりに異なっているため、いいと思っているものや利用しやすいと思っているものが見当違いになるだけでなく、そうした自分たちの個人的好みによって判断す
akio624 2017/04/11
コンピュータ

UI

スキル

あとで読む

デザイン
リンク
2017年最新版！プロトタイピングツールのまとめ | Supership Tech Blog
Supership デザイナーの若林です。アプリやWebサイトのUI/UXに携わっています︵と言っても3月入社の新人ほやほやです︶。最近プロトタイピングツールが増えていますが、実際どれが一番実務に適しているんだろう？と気になっていたところ、良い機会をいただいたのでデザイナー観点で実際に︵ざっくり︶触った感想と比較をしてみたいと思います。代表的なツールと種類・トランジション型︵遷移︶‥Prott、Adobe XD、inVision、CanvasFlip、Marvel ・インタラクション型︵アニメーション︶‥Origami Studio、Framer ・複合型‥CRAFT + inVision、protopie、Principle、flinto、atomic 大まかにこのような分類で上記のようなツールが代表的かと思います。現在、当チームでは主に﹁Sketch﹂でUI制作、﹁Prott﹂でプ
akio624 2017/03/28
あとで読む

UI

ツール
リンク
日本製UIデザインツール「STUDIO」は従来のツールと何が違うのか - 酔いどれデザイン日誌 - Drunken Design Diary -
先日、私の古巣である株式会社オハコからスピンオフしたオハコプロダクツ社から、UIデザインツール﹁ STUDIO﹂のクローズドβ版がリリースされました。国産のUIデザインツールといえばグッドパッチ社が提供するProttなどが有名ですが、β版を触ってみた感想と合わせて STUDIOの何がすごいのか？従来のUIデザインツールとは何が違うのか？ということを紹介してみたいと思います。目次これはプロトタイピングツールではない特筆すべきはシームレスな操作感全員がMVPまで作れる時代まとめこれはプロトタイピングツールではないまず、最初にSTUDIOを﹁UIプロトタイピングツール﹂ではなく﹁UIデザインツール﹂と記載したのには訳があります。近年はプロトタイピングの重要性が多方面で説かれているのに呼応するように、冒頭で紹介したProttをはじめ国内外からたくさんのプロトタイピングツールが登場し
akio624 2017/03/26
後で試す

あとで読む

ツール

UI

デザイン
リンク
レスポンシブ対応の高品質なHTMLのテンプレートのまとめ、商用利用無料で最近のUIデザインが分かる | コリス
今時のかっこいいデザイン、素敵なエフェクトを備えたレスポンシブ対応の縦長ページ、ランディングページ、プロダクトページ、ポートフォリオ、ブログなど、HTML5+CSS3の無料のテンプレートを紹介します。単に使うだけでなく、レスポンシブ時のレイアウトのバリエーション、使い勝手のよいコンポーネント、気持ちいい繊細なアニメーションなど勉強にもなります。 Editorial デモページ文字を見せることに拘ったシンプルなデザインのテンプレート。読むことが邪魔にならない繊細なアニメーションも素敵です。各UIエレメントのデザインは、ハンバーガーメニューのElementsから。
akio624 2016/11/24
あとで読む

HTML

UI

webデザイン

レスポンシブ

ウェブデザイン

template

お手本

テンプレート

デザイン
リンク
AndroidのUIをデザインするとき参考にしている資料まとめ | VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
メインのお仕事がAndroid UI担当になって早1年。今年は絶対に月に1回はブログを更新すると決めました。こんにちは。YUKIです。 AndroidのUIデザイン関連でこまめにチェックしている資料をまとめてみました。これからAndroidのUI関係の情報を集める方、Material Designのガイドラインが発表されてからどう変わったのか収集中の方の参考になれば幸いです！ (2015/1/10 現在) ドキュメント関係公式資料関係 Material Design ガイドライン http://www.google.com/design/spec/material-design/introduction.html まずは読み込んでMaterial Designの思想を理解 Google Developers Blog http://googledevelopers.blogspot
akio624 2015/01/12
android

Material

UI

ガイドライン

参考

design

デザイン
リンク
HTML5を使ったハイブリッドアプリ開発に使えるUIライブラリまとめ | BACKEND AS A SERVICE mbaas BLOG
PhoneGapをはじめとするハイブリッドアプリは人気があります。HTML5/JavaScriptでアプリが開発できるのは魅力的ですが、問題はUIではないでしょうか。HTMLのままではUI/UXが優れているとはとても言えません。そこでHTMLをネイティブアプリ並のUIにしてくれるフレームワークを使ってみましょう。これらを使えばまるでネイティブのUIと変わらないかのようなUI/UXが得られるようになるでしょう。PhoneGapをはじめとするハイブリッドアプリは人気があります。HTML5/JavaScriptでアプリが開発できるのは魅力的ですが、問題はUIではないでしょうか。HTMLのままではUI/UXが優れているとはとても言えません。そこでHTMLをネイティブアプリ並のUIにしてくれるフレームワークを使ってみましょう。これらを使えばまるでネイティブのUIと変わらないかのようなUI/UXが得
akio624 2014/08/02
html5

HTML

PhoneGap

JavaScript

mobile

UI
リンク
iOS7スタイルのぼかしエフェクトを使用しているハイクオリティなオープンソースUIライブラリ集 - showrtpath - iOSブラウザ開発日記
2013-12-21 iOS7スタイルのぼかしエフェクトを使用しているハイクオリティなオープンソースUIライブラリ集 iOS7がリリースされてから、iOS7のぼかしエフェクトを使用したオープンソースのUIライブラリが多数リリースされています。今回はその中でもハイクオリティなUIライブラリを紹介します。ちなみにiOS7のAPIでは、ぼかしエフェクトを標準で提供していません。キャプチャしてぼかしエフェクトを実現しているものが多いです。このタイプのものは処理が重いのでiPhone5以前では対策が必要です。 iOS-blur https://github.com/JagCesar/iOS-blur iOS7がリリースした直後ぐらいにでたUIです。これはキャプチャーせずにUIToolbarのレイヤーを利用してネイティブのぼかしエフェクトを実現しています。 FX BlurView https://g
akio624 2013/12/22
iOS

iOS7

オープンソース

iphoneアプリ開発

ライブラリ

*あとで読む

github

UI
リンク
[iOS 7] 簡単にできる画面遷移のカスタマイズ | Natsu note
iOS 7から、画面遷移のアニメーションをカスタマイズできるようになりました。実装はシンプルで本当に簡単です。しかし、やたらと長い︵しかもイマイチ統一感のない︶プロトコルをたくさん使わなくてはならないため、何となく二の足を踏んでいる方も多いのではないでしょうか。今回は、画面遷移のカスタマイズの基本中の基本を紹介します。関連プロトコル画面遷移の実装には多くのプロトコルを使用します。その中で、最低限必要となるのは以下の3つです。 UIViewControllerAnimatedTransitioning︵アニメーションコントローラ︶ UIViewControllerContextTransitioning︵画面遷移コンテキスト︶ UIViewControllerTransitioningDelegate (画面遷移デリゲート※︶︵※︶モーダルビュー表示の場合。ナビゲーションコントローラ
akio624 2013/12/18
iOS 7

iOS

UI

iPhoneアプリ

development

programming

Objective-C
リンク
iOS開発で使って便利だったオープンソースライブラリ
追記‥ ※この記事は、﹁既にアプリ開発者である人﹂がより生産性を上げれることを願って書いた記事になります。よく理解してない方がこの記事を参考にして﹁これを使ったら簡単になるらしいよ﹂という解釈をするための記事ではありません。利用すれば便利になる﹁かもしれない﹂というものであることを理解しておいてください。アプリの開発は早く、その上クオリティ高く完成させるのが良いと思います。自分で、便利クラスなどを作成している人も多くいるとは思いますが、 iOSはオープンソースなライブラリが充実しているので、できるだけ利用をして早く確実に開発を終わらせちゃいましょう。ライセンスはそれぞれを参照して確認してください。 ARCへの対応有無もよく確認してみましょう。 ※見出しタイトルがリンクになっています。 SDWebImage インターネット経由で画像を取得し、UIImageViewへ表示するとき、
akio624 2013/12/18
iOS

アプリ

開発

UI

便利

iPhoneアプリ開発

Objective-C

library

ライブラリ

スマートフォン
リンク
UI/UXデザインに関わる者なら見ておきたい記事とスライド10選 - Sadakoa.jp-Blog-
2013-11-07 UI/UXデザインに関わる者なら見ておきたい記事とスライド10選今回はUI/UXデザインについて触れてある記事やスライドで自分が実際に読んで参考になったと思ったものを備忘録としてまとめました。実際にUI/UXデザイナーの人や、僕と同じくUI/UXデザイナーを目指している人、また実際に興味がある人のお役に立てたら幸いです。記事1　UI/UXの違いについて5分でわかるUIとUXの違い : Excite Designer'sBlogそもそもUIとUXは何が違うのかという事を知らない人もいると思います。まずはUIとUXの違いについてはっきり知らなければなりません。記事2　なぜUIとUXがよく混同されてしまうようになったのか UXとUIが混同されるワケ : could UIとUXが混同されてしまう理由について触れてある記事です。僕も最初はUIとUXを混同
akio624 2013/11/08
UI

UX

あとで読む

Webデザイン

デザイン

まとめ
リンク
Google、Android用のUIテスト自動化フレームワーク「Espresso」公開
アプリケーションの画面に対してボタンを押したり入力を行い、正しい結果や答えが返ってくるか？ユーザーインターフェイスを含むテストコードの開発は一般に手間がかかり面倒であり、テスト用のライブラリやフレームワークが欠かせません。 Googleは、Android用のUIテスト自動化のためのフレームワーク「Espresso」をテクノロジープレビューとして公開しました。 Espresso - android-test-kit - a fun little Android UI test API - Testing Tools For Android - Google Project Hosting EspressoはこれまでGoogle社内で、Google DriveやGoogle Maps、Google+など30種類のアプリケーションのテスト自動化に使われてきました。特徴は、軽量でシンプルな記述
akio624 2013/10/23
google

android

フレームワーク

テスト

UI

API

Espresso
リンク
ナビゲーション/メニューのiPhoneアプリデザイン集22選
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから約26年間、多くの方々に支えていただき、運営を続けてまいりました。転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、今後も、IT/Web業界やクリエイティブ
akio624 2013/10/20
os

UI

iPhone

デザイン

アプリ

iOS
リンク
母親から学ぶ使いやすいウェブサイトのインターフェース・デザイン
インターネットが苦手な母親に子どもが使い方を教えるのはほほえましい光景ですがなかなか骨が折れるものです。そんな母親が1人でもウェブサイトを使えるようにデザインすることで、誰にでも使いやすいユーザー・インターフェースを作る方法がまとめられています。 Designing User Interfaces for Your Mother — Design/UX — Medium https://medium.com/design-ux/dd45ec50f7b0 ◆母親のためのインターフェース・デザインウェブデザイナーであるトニー・ジャインズさんは、「ちょっとコンピューターのことを見てくれない？いろいろと大丈夫かしら？」とよく母親から不安そうに聞かれるそうです。彼女はインターネットを使いますが、全てを知っている訳ではありません。そこでジャインズさんは世界中に何百万の母親と同じレベルのユーザーがいる
akio624 2013/09/16
webデザイン

UX

UI

デザイン

Usability
リンク
HTML、CSS、JS等のUIコンポーネントライブラリが検索できるUIBox！ | バンクーバーのうぇぶ屋
UI関連のアイデアや表現、もしくはコンポーネントライブラリをとにかく色々見てみたい時ってないですか？ナビゲーションからフォーム、カラーピッカーやプルダウンメニュー等、UIの表現を考える時ちょっと探したいってシチュエーションは結構あると思います！僕であれば、レスポンシブ対応のナビゲーションなんかは結構どういう形が理想か、まだまだ暗中模索状態って感じですので、色んなサイトを参考にしたい所です！そんなこと考えている時に直ぐ検索してみることが出来るサイトが今日ご紹介させて頂くUIBoxです！ UIの参考となるヒントがもしかしたら見つかるかもしれませんので、是非一度除いてみてください〜！ UIBox – Curated HTML, CSS, JS UIComponent Library 検索フォームからのUI検索が可能ですねー。例えばナビゲーションに関するUIのコンポーネントが見たかったら、
akio624 2013/09/12
UI

検索

*Web製作

コンポーネント
リンク
1 2 次のページ