JavaScriptだけでiOSのUIを書いてみる - 24/7 twenty-four seven
この投稿は iOS Advent Calendar 2013 - Qiita の22日目の記事です。 iOS 7から新しく追加されたJavaScriptCore.frameworkを使ってJavaScriptだけでUIを書いてみましょう。 JavaScriptCore.frameworkの基本 (Objective-C -> JavaScript) まずJavaScriptCore.frameworkの基本的な使い方は次のようになります。 JSContext *context = [[JSContext alloc] init]; [context evaluateScript:@"a = 10;"]; JSValue *value = context[@"a"]; NSLog(@"%d", value.toInt32); // => 10 ↑ まずJavaScriptの実行環境としてJS
モバイルデザインパターン
TOPICS 発行年月日 2012年09月 PRINT LENGTH 240 ISBN 978-4-87311-568-9 原書 Mobile Design Pattern Gallery FORMAT モバイルアプリのUIパターンを手軽に参照できるリファレンス。主要なプラットフォームで動くモバイルアプリの画面例を400点以上使いながら、ユーザーインタフェースの定番パターンをグラフィカルに解説します。本書で紹介する68個の基本パターンと5個のアンチパターンが、使いやすいモバイルアプリをデザインするうえでクリアしなければならない設計上の課題を解決してくれます。 掲載UIパターン： ナビゲーション、フォーム、テーブルとリスト、検索、並べ替え、フィルター、ツール、グラフ、誘導、フィードバック、アフォーダンス、ヘルプ、アンチパターン サンプルPDF ● 「監訳者まえがき〜1章まで」（15MB） 監
【スマートフォン向け開発】ユーザビリティチェックリストを作ってみた
最近はスマートフォン系の開発から離れてしまっているので、感覚が鈍らないうちに（備忘録も兼ねて）スマートフォン向け開発（主にネイティブアプリ開発）におけるユーザビリティチェックリストを作ってみました。 ちなみに、このチェックリストは以下が前提となっていますのでご了承ください。 ・独自性を生み出すようなものではない ⇒現在のスマートフォンアプリのメインストリームの中で、アプリの印象をより洗練されたものにするためのポイントです。 ・案件の内容に関わらず意識すべきポイント ⇒ある程度汎用性の高いチェックリストになっているとは思います。 それでは、全てベーシックな内容ではありますが、その中でも特に基本的なものから説明していきます。 ※僕がiPhoneユーザーということもありiPhoneの画面イメージばかりが並んでいますが、全てAndroidでも使えるチェック項目です。 小さくし過ぎない、詰め込み過ぎ
Webサイトの制作スピードを、より向上させる目的で作られたスターターキット・99lime - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 結構参考になったので備忘録がてら ご紹介。Webサイトの制作スピードを より向上させるために、汎用的なUI を集めて、マークアップも綺麗な状態 で済むように設計されたスターター キット、というかフレームワークです。 制作スピードを向上させる目的で作られたHTML5フレームワークです。レイアウトだけでなく、汎用的なUIも備わっていて、class名1つ付けるだけでタブやスライドショーを実装出来るようになっています。 そういった仕様にする事で、シンプルで綺麗で可読性の高いソースを保てるように設計されていたりと、結構参考になるスターターキットですよ。フレームワークは自作してるので良い部分を組み込んでみようかなと思いました。 タブやドロップダウン、スライドショーなどを備えてい
「デザイン思考」の核となる「ペルソナ／シナリオ」のつくり方
今回紹介する「デザイン思考」は、消費者を観察することでアイデアを見つけ、それを実行できるコンセプトや具体的な形をつくり、それを消費者に届けるしくみをつくるデザインプロセスを、ひとつの製品の開発だけでなく、経営全体にも取り入れていこうという考え方です。この「デザイン思考」の核となるのが前回紹介した「ペルソナ／シナリオ法」です。今回は、その具体的な作成法を紹介していきます。 コラボレーションの場を共有するチームづくり ビジネスの世界でも注目を集める「デザイン思考」は、消費者の観察からアイデアを発見し、それを具体的なコンセプト、デザインに落とし込む手法です。創造的な組織においては、共同作業の手順を決めるだけでなく、共同で作業をする時間や場をつくりだすことが求められます。 その意味で、前回の「ユーザーを知らずにWebをデザインできますか？ ～ペルソナ／シナリオ法の活用～」 で紹介した、人間中心のデ
ツタグラ [伝わるINFOGRAPHICS] | データとビジョンを持つ専門家と、伝える力を持つデザイナーがコラボレーションをする。
データとビジョンを持つ専門家と、伝える力を持つデザイナーがコラボレーションをする。インフォグラフィックスを使って未来をわかりやすく描き、より多くの人に伝え広めていく。こうして点が線になり、面になり、やがて日本を変える原動力になる。そんな新しいメディアが、「ツタグラ」です。地球環境の保護をただ「叫ぶ」だけで安心してはいないでしょうか？ 「エコジレンマ」という課題を前に、バックキャスト思考で未来を考える 必要が出てきています。
もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ
2013年11月22日 Webサイト制作, ユーザビリティ どのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、本当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ↑私が10年以上利用している会計ソフト！ ナビゲーションメニューの設置ポイント すべてのページに 基本中の基本ですが、メインのナビゲーションメニューはどのページにも同じ場所に設置しましょう。ホームページでしか表示されない…なんてことがないように。というのも、ユーザーが最初にたどり着くのが必ずしもホームページとは限らないからです。検索で特定のコンテン
クロスブラウザはもう古い！ HTML5＋CSS3時代のプログレッシブ・エンハンスメント
IE 9が登場！ ユーザーの閲覧環境がますます多様化！ 4月26日、ついに日本でもInternet Explorer（以下、IE） 9が公開されました。また、マイクロソフトは早くもIE 10のプレビュー版を公開しており、CSS3やJavaScript周りが、さらに強化されるなどリッチなWeb表現が加速してきています。 IEのみならず、Firefox、Safari、Google Chrome（以下、Chrome）など他のWebブラウザもすさまじい勢いで進化してきており、スマートフォンやタブレットPCなどのデバイスも続々と開発され、ユーザーの閲覧環境がますます多様化してきています。 そうした流れの中で、必然的に欠かすことができなくなる知識が、この「プログレッシブ・エンハンスメント」という概念です。 プログレッシブ・エンハンスメントって何？ Webブラウザや端末などの閲覧環境が多様化してきていま
ユーザー中心設計 - Wikipedia
ユーザー中心設計（ユーザーちゅうしんせっけい、（英: user-centered design、UCD）は、デザインの各段階でエンドユーザーのインタフェースや文書に関するニーズ・要求・制限などに多大な注意を払って設計を行うこと、またはそのようなデザイン哲学。ユーザー中心設計は言わば問題解決を繰り返す過程であり、単に設計者がインタフェースがどのようにユーザーに使われるかを解析し予測するだけでなく、前提が正しいかどうかを実際のユーザーによる試用で確認するということも行う。ユーザーが初めてそのデザインに触れたときどう感じるかを、設計者が直観的に理解することは非常に難しいため、そのような試用が必要となる。また、ユーザーの習熟曲線がどのようになるかということが試用によって初めて明らかとなる。 他のデザイン哲学との大きな違いは、ユーザー中心設計ではユーザーがシステムや機能に慣れることを強いるのではなく
デベロッパーでもできる！ UX向上手法 - ＠IT
連載：.NET中心会議議事録 第6回 デベロッパーでもできる！ UX向上手法 デジタルアドバンテージ 一色 政彦 2011/10/17 今回のテーマは「デベロッパーでもできるUX向上手法」。デザイナーにしかできない仕事だと思われがちなUX（ユーザー・エクスペリエンス）の向上について、デベロッパーの視点を中心に講演やQ＆Aが行われた。セミナーの構成は、下記のとおり。 基調講演『社会と繋がるためのUX』： 50分。詳細後述。 UXセッション『XAMLで学ぶレイアウトスキル』： 30分。詳細後述。 Q＆Aセッション『識者・経験者に聞く、デベロッパーでもできるUX向上手法』： 85分。本セミナーに寄せられた質問をモデレータが発表し、パネリストが回答。 懇親会： 45分。来場者と登壇者が軽食＆ドリンクをとりながら、意見を交換。 本稿では、基調講演および各セッションのUstream中継の動画を視聴・閲
@DIME アットダイム
小学館IDにご登録いただくと限定イベントへの参加や読者プレゼントにお申し込み頂くことができます。また、定期にメールマガジンでお気に入りジャンルの最新情報をお届け致します。
iPhoneやAndroidのUIパターンを収集するシンプルで見やすいギャラリーサイト・Patterns of Design - かちびと.net
いくつか同じようなギャラリーサイトは ありますが、こちらもなかなか見やすか ったのでメモ。スマートフォンのUIの パターンギャラリーサイトです。スマー トフォンに限らず、通常のWebサイトの パーツデザインの参考にもなりそうです。 特にスマートフォンのUIは細かい部分のこだわりが見られてとても参考になりますので見ておいて損は無いかと思います。 シンプルな作りです。パーツはカテゴリで分けられていて探しやすいです。ちょっと重いかな・・ 例えばこちらはグリッドのカテゴリ。同じ幅、同じ高さという限られた空間の中で、様々な工夫が見られます。 クリックするとその場でLightbox風にポップアップします。iTuneへのリンクもあるので確認しやすいですね。 同じようなギャラリーサイト 似たようなサイトは沢山あるので合わせてチェックしてみてはいかがでしょう。 Mobile UI Patterns pttr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Site is undergoing maintenance
Web制作者が読んでおきたい、最近公開されたおすすめのスライド
Google Bootstrap has moved!
エンジニアtype 技術者のキャリアを考えるWebマガジン - 転職＠type
layer8.sh
Webデザイナーが読んでおきたい、最近公開されたWeb系のスライド
http://japan.internet.com/webtech/20120215/1.html
【ネタ帳】これは使える！無料でダウンロードできるウェブのUIいろいろ（PSD形式） +25記事*二十歳街道まっしぐら（FC2ブログ時代）