最近のWebサイトで見かける126種類のページレイアウトやUIコンポーネントが収録された無料のベクター素材 -Wyre最近のWebデザインで見かける1カラム、2カラム、3カラム、中央分割、カード型などの基本的なグリッドをはじめ、よく使用されるコンポーネントを備えたさまざまなレイアウトが用意されたフローチャートやサイトマップを作成できる素材を紹介します。 最近のWebサイトで必要とされているページレイアウトやUIがチェックできます。
JavaScriptのアーキテクチャ
JavaScriptのアーキテクチャ 概要 DDD/CQRSベースなレイヤードアーキテクチャ Write(コマンド)/Read(クエリ) イベントソーシングはやってない DTO(データ変換オブジェクト)はまだ入れてない なのでDomainのインスタンスがViewにそのまま渡す(Read Only) テストが可能 実装 azu/presentation-annotator: viewing presentation and annotate. 登場人 View(React Component) Write Stack UseCase Repository Domain Read Stack Store DataBase(Memory) View React Component CSS Architecture(別途) Container + Project Componentベース Writ
reactをプロジェクトで使ってみた感想 - Qiita
書こうと思った気持ち react+reduxを使る機会があったので、その辺で感じた事を書き連ねます。この記事では主にreact使ってみての感想なので、reduxと絡めた話はまた別記事で。 react使おうかなー、どうしよっかなー、という人の参考になれば幸いです。 reactの深い技術についての話は他のみなさんが書いてくれていると思うので、ここが良かったとか、ここではまった、みたいな実体験話がメインです。 ベストプラクティスとは思っていませんが、とりあえずそういうやり方もあるんだなぁ、くらいな気持ちで読んでもらえれば。 使おうと思った理由 BackboneとjQueryでメンテされているUIを変えるチャンスが来たのが発端。現状だとviewにロジック書いてたりmodelにview寄りの処理が書いてあったりとだいぶ宇宙の法則が乱れていて辛かったので、UI変えるなら下回りの技術も変えよう、と思った
Docker の WebUI 作りました - Qiita
Docker、コマンドラインでの操作が一般的ですが どうしてもGUIがほしくてWebUI作りました。 もちろん世の中にはいくつかすでに実装があって とかやればたくさんスターがついたよさげなのはあるものの ほしい機能がなかったので forkせず re:Inventしました。1 やれること 1. ブラウザからDocker操作できます http://localhost:9000/ http://localhost:9000/images 状態、検索文字列でコンテナを検索 コンテナに inspect, top, stats, logs, diff, rename, commitコマンド実行 コンテナの start, stop, restart, rm 新規 Dockerイメージの pull 検索文字列でローカルにあるイメージを検索 イメージに inspect, history, tag, rmiコ
iOS 9から追加されたContacts Frameworkを使って連絡先アプリのデータを取得してみる - Qiita
これは何 iOS 9 で Address Book UI frameworks が deprecated になりました。 参考：iOS 9 / watchOS 2 で deprecated になる or 引退していくAPIたち - Qiita 上記の記事にも書いたように、今後は Contacts frameworks および Contacts UI frameworks を使うことが推奨されます。 この記事では、Contacts frameworks を使って iPhone の連絡先アプリからアドレスデータを取得する方法を簡単に解説します。 ▲連絡先アプリ 準備 まずは必要なフレームワークを追加してimportします。
ローディング時のズルい進捗表示
今開発中のPlayer!のログイン・登録画面で、こんな進捗表示をしていますが、これ実はフェイクだったりします( ´･‿･｀) (Qiitaの画像サイズ制限が厳しくて粗いです。キレイなものは実際にアプリダウンロードしてご覧下さい。) 経緯 元々、この画面はこういう進捗表示では無く、単にインジケーターがクルクルするだけで、進捗状態が分からないものでした。 特にネットワークが悪いところだと、バグって固まってしまったのでは？とユーザーを不安にさせるようで、たまにそういう声を聞くことがありました。 登録フローは大事なところなので、そういうところでこれが原因で離脱してしまうと残念なので、改善が必要でした。 そこで、ネットワーク処理にもたつきつつもちゃんと正常に処理をしているということを示すために、進捗を表示することにしました。 ただ、例えば大きな画像などメディアファイルダウンロードなどならともかく、こ
HTML/CSSでワイヤーフレームもUIデザインも作成する人がけっこう多い -最近のWeb制作で使われているツールのまとめ | コリス
Web制作の実際の現場で、ブレーンストーミング、ワイヤーフレーム、UIデザイン、プロトタイプ、プロジェクト管理、ファイル管理・バージョン管理に使われている人気のツールを紹介します。 Design Tools Survey 「Design Tools Survey」は、世界各国の制作会社・フリーランス・スタートアップ企業など、さまざまな形態でWeb制作を行っている人にアンケートをとり、それぞれ使用しているツールをまとめたものです。 日本人100%とは当然異なると思いますが、興味深いデータとなっています。 ブレーンストーミング ワイヤーフレーム UIデザイン プロトタイプ プロジェクト管理 ファイル管理・バージョン管理 ブレーンストーミング ブレーンストーミング時に使うツール 64%: 鉛筆と紙 10%: Sketch 7%: Illustrator 7%: Photoshop 6%: その他
Gitコミットメッセージの7大原則 - rochefort's blog
タイトルは大げさです。割と当たり前の話です。 ハードディスクの整理中にRailscastsのメモが出てきまして 懐かしいなぁ、 Ryan Bates(@rbates)さん 元気かなぁと Twitterを覗いてみたところ How to write a Git commit message: http://t.co/D31dVh1lks— Ryan Bates (@rbates) 2015, 7月 28 なかなか興味深い記事をtweetされていました。 Git の commit messageに 規律をもたらそうぜ、ってのは どうやら日本人だけじゃないようです。 元記事( How to Write a Git Commit Message ) Introduction 著者の過去と現在のcommit logを対比しています。 一貫して、この緑と赤の対比が見やすいので、記事も読みやすいです。 ま
守ってはいけない、iOSのデザインルール4つ
ページコントロール（ドット）、ページトップの「送信」、プラス（＋）アイコン、並べ替えアイコンの4つは、テストでユーザビリティ上の問題を引き起こすことの多いiOSデザインパターンである。 4 iOS Rules to Break by Aurora Bedford, Raluca Budiu, Kara Pernice, and Amy Schade on July 9, 2015 日本語版2015年8月31日公開 巨大ソフトウェア会社（たとえば、AppleやMicrosoft、Google）はユーザーとデザイナー双方のためにデザインガイドラインを作成している。 おかげで、デザイナーや開発者側は、恵まれた条件のもとで、きちんとしたものになることが期待できるインタフェースの作成を始められるようになり、まったく新しいUI要素を考案する（そしてテストする）必要がない。 一方、ユーザー側も、すべての
Adaptive UI Designについてのまとめ（Unified Storyboards, Size Classes, etc...） - Qiita
Adaptive UI Designについてのまとめ（Unified Storyboards, Size Classes, etc...）XcodeiOS この記事は、WWDC2014で発表されたBuilding Adaptive Apps with UIKitを元に、以下の項目についてまとめています。 Adaptive UIについてのざっくりとしたまとめ Size Class Traits Unified Storyboards Interface Builderを使った簡単なサンプル Size Classごとに画面のレイアウトを変えてみる（Size Classに応じて適用されるConstraintsを変える） 以下の項目については、この記事では触れません。別な記事で説明します。 * Appearance Proxy * Split View Controller 前提知識 解像度や画面
「シンプルなデザイン」の難しさ デザイン会社 ビートラックス: ブログ
日々デザイナーとしての仕事をする上で、クライアントから「シンプルな感じで良いので、とりあえず簡単に作って下さい」と言われることがある。難しい機能はあまり無くても良いから、シンプルなものを “さくっと” 作ってもらいたい、という要望。 このセリフを聞くたびに、実はめまいにも似た感覚を覚える。 恐らくデザインに対するコストを下げたいとの思いから ”シンプルで良いので” と言っているのだと思うが、実はシンプルなものの方が複雑なものよりもデザインするのが数倍も難しい。 それを知らずに、シンプル=楽につくれる=コストが低い、と思っている人々が後を絶たない。大きな間違いである。 シンプルなデザインや、ミニマリズムと呼ばれる極限まで無駄を削ぎ落としたデザイン技法は、最高レベルのデザイン技術を要する。 シンプル = 最高峰の問題解決あっさりして見えるものがあっさりと作られたかというと大間違いであり、最終的
モダンミニマリズムという選択―フラットデザインはデザイナーを堕落させたか？ | POSTD
フラットデザインはWebデザイナーの役割を奪った？私はそうは思いません。 私は最近、 『デザイナーの堕落』 という興味深い記事を読みました。その中には、著者であるEli Schiffの意見が明確に書かれています。もしこちらの記事を読んだことがなく、デジタルデザイン界のこれまでの動向に興味があるという場合は、ぜひ一読することをお勧めします。 しかし私は彼の意見に真っ向から反対です iOS7やマテリアルデザインの登場によって、フラットデザインが増え、“モダンミニマリスト”というデザインムーブメントが生まれました。そのような変化が、デジタル界で働くビジュアルデザイナーの仕事をいかにして味気なく、そして価値の低いものにしたのかという点について、Eliは主に説明しています。 学生時代に建築学を学んだ私は、モダンミニマリスト（フラット）デザインの普及において、同様の例をたくさん見てきました。モダンミニ
Design Support Libraryを使い倒してカジュアルにアプリ実装 - 株式会社エウレカ
皆さん、こんにちは。Androidエンジニアの後藤です。 前回のブログで次回はAndroid MやDeveloperToolについて書きます！！と熱くなっていましたが、Design Support Library ( DSL ) の魅力をどうしてもお伝えしたくなったので、今回はDSLについて書いていきます！ これを機に、ライブラリが提供しているコンポーネントを使ってTODOアプリを作ってみたので、コードを見ながら一緒にDSLをマスターしていきましょう！！ もうコードを見たくて仕方が無い方はどうぞ！ https://github.com/eure/citrus Databaseには話題のRealmを使ってみています。 理由は、実はですね……… ……なんとなくです。 今回はデザインからコードまでを自分でやりました。DSLを使うことが目標なので、マテリアルデザインのルールは厳守していません。 D
[iOS 9] SFSafariViewController の概要 | DevelopersIO
はじめに iOS 9 で追加された SFSafariViewController について調べてみたので紹介します。 特徴 SFSafariViewController はウェブページを表示するための View Controller です。 Safari のような UI を使用できる ツールバー ページロード中のプログレス表示 SSL暗号化通信の時にアドレスバーに鍵アイコンが表示される Safari の機能を使用できる Safari AutoFill (クレジットカード、パスワード、連絡先) Safari Reader Content Blocking クッキーなどのデータを Safari と共有できる 広告トラッキングなどの目的でアプリ初回起動直後にSafariに飛ばす必要がなくなる 提供されるメソッド・プロパティは少ない UIKit の UIImagePickerController
![[iOS 9] SFSafariViewController の概要 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/03e3e1f7bece5c287ef701d12939ee3d5ca2b3d1/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2015%2F06%2Fe9f52821a8f079bdb1ddf4f17fd9632e.png)
Backdrop | UXの語感
UXという言葉は2005年ぐらいにはすでにバズワードだったが、その後もますますバズっぷりを増している。 UXという言葉は人によっていろいろな意味で使われるとよく言われる。実際、私も仕事でいろいろな人がいろいろな意味で（そして真面目に）UXという言葉を使っているのに遭遇する。 デザインコンサルタントとしては、UXを何かひとつ定義づけることよりも、世間でこの言葉がどのような使われ方をしているのかを知ることの方が重要だ。 ちなみに、私の定義はとても簡単だ。誰かが私に「UXとは何ですか？」とたずねれば、私はこう答える。 「利用者体験のことです」 それ以上でも以下でもない。英単語の直訳で十分意味のある言葉だと思う。 例えば「デザインって何ですか」とか「UIって何ですか」といった質問に答えることの方がずっとコンセプチュアルで難しい。UXは簡単だ。 ただ世間でいろいろなニュアンスが盛られて使われているよ
建築史に隠されたウェブデザインの未来
ウェブデザインの進化の過程を考えるとき、西洋建築史はとても参考になります。美術の形として、両者は同じ項目で定義することができます。 人が集まる場所として機能する実用的に作られている技術の進歩に大きく左右される実用的だが、間違いなくアートでもあるこのような制約があるなかで、両者の進化の過程はとても似ています。どちらも同じように過去の作品をもとに、その上に新しいものを築いています。もしウェブデザインの未来が知りたければ、建築家が辿った道を見てみればいいのです。
ユーザ・インターフェースのためのイージングカーブをつくる | POSTD
フラットデザインの導入以来、アニメーションの質が、今までにないほど、優れたインターフェース作成のために必要不可欠なものとなっています。モーションデザインを通して、製品の総体的なブランドエクスペリエンスを左右するようになり、製品を、市場の他のものと差別化する要素となりました。アニメーションは複雑なインタラクションを簡素化し、優れたデザインを記憶に残るユーザエクスペリエンスにしました。では、質の高いアニメーションはどのように作られるのでしょうか？ イージングカーブは多くの要となるコンポーネントの1つで、適切なアニメーションをとり、素晴らしいものに作り上げます。 問題なのは、イージングカーブがどのように機能するかについての理解が、少々難しいということです。 前回の記事 After Effects to CSS で触れたタイミング関数への興味の派生としてこの記事を書きましたが、この記事を読むことで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
UI testing in XCode7
UX侍がアプリ開発のUXをガチでコンサル、7つの提案は必見！ マネックス証券 × UX侍 | UXサムライ
