ネット広告のユナイテッドが開発したスマートフォン（スマホ）の無料アプリ「CocoPPa（ココッパ）」が世界中で人気を集めている。米アップルの「iPhone（アイフォーン）」対応で、画面のアイコンや壁紙を自由自在に変更できるのが特徴だ。膨大な素材を用いて自分仕様に画面をデザイン可能なことに加え、アイコン作者と利用者が気軽にふれあえる独自のSNS（交流サイト）機能が斬新だとして支持を集める。提供か

SlickMap CSSは、サイトマップを作る為のCSSです（sitemap.xmlではなく、人用のサイトマップ）。上図のように、階層を分かりやすく可視化し、ユーザーに取って分かりやすいナビゲーションを作成する事を目的としています。カスタマイズもしやすそう。 SlickMap CSS

こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。 OpenAIのアップデータが発表され、Function callingなるものが利用できるようになりました。 Function callingでは、プロンプトに応じて、必要とあれば関数を呼び出し、パラメータを生成してくれます。概要について、こちらのエントリで解説されています。 また、OpenAIのアップデート全体については、以下のエントリで解説されています。 今回は、Function callingをNode.jsで利用していきたいと思います。 試してみた ますば、任意のフォルダでプロジェクトを作成しします。 $ npm init -y $ npm install --save-dev typescript @types/node ts-node Function Calling OpenAIを利用できるようイ

Flat UI Colorsはフラットなデザインで良く用いられている色をまとめたWebサイトです。確かに見かける色合いはこんな感じですね。コンテンツに合うようなら導入も考えたいですけどその機会は今の所無さそうです・・ Flat UI Colors

ウェブやアプリのデザイナーであれば、ここ1〜2年のUIトレンドであるフラットデザインについてご存じだと思います。すでにこのトレンドを意識して実践しているかもしれません。今回はフラットデザインの特徴とそのポテンシャルについて考えてみます。 フラットデザインとは、画面に表示するボタンやメニューなどのUI要素を非常に平坦な見た目にするという表現手法です。ウェブでもアプリでも今やこのフラットデザインを取り入れているものが沢山ありますが、中でも代表的なのは、Windows 8 の Modern UI と Google の一連のサービスでしょう。 フラットデザインと言っても、もちろん明確な定義があるわけではなく、フラット度合いは様々に試されていますが、一般的な特徴をあげてみます。 UI要素の「塗り」に、グラデーションやテクスチャを使わず、単色にする ドロップシャドウやベベルといった立体感を出す表現を用

iPadとは違うもうひとつのタブレットの可能性。紙を再発明した｢enchantMOON｣発表会レポート（動画・ギャラリー・追記あり）2013.04.23 21:00 日本の知を結集した独自OSタブレット｢enchantMOON｣。 今日、五反田にあるゲンロンカフェでメディア向け説明会が行われたのでその様子をレポートします。まずUEI（Ubiquitous Entertainment Inc.）の清水社長が登壇。コンピュータによるメモの表現力の乏しさから紙と鉛筆に注目、紙と同じレベルの表現力を保ったままでコンピュータとしての情報の共有と検索を実現しようとしたのこと。 ｢UEI re-innovated a paper｣ つまり、紙を再発明したと語る清水社長。これは｢iPhoneで電話を再発明｣したと基調講演で語ったジョブズへのオマージュ。 enchantMOONプロトタイプの初起動時の動画で

1年くらい前に 「CSS で作るスマートフォン向け片手操作メニュー」 って記事書いたんですが、同じようなのをまたやってみたので紹介。 Tumbler の Android アプリ （Tumblr for Android） の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript （jQuery 使用） で再現してみました。実際のサンプルは下記に。 CSS で作る Tumblr モバイルアプリ風メニュー サンプル 現在最新版の Firefox、Safari、Chrome では動くと思います。あと手持ちの iOS 6 Safari では動作確認しました。他のスマートフォンとか知らない。IE？ 一応、IE10 は問題なく動作します。IE9 だと動作はするけどアニメーションとかしないです。 元ネタを下記に貼っておきますね （画像は 「Tumblr Staff」 から

Feedly: Your Google Reader, Youtube, Google News, RSS News Reader 14（無料） カテゴリ: ニュース, エンターテインメント 販売元: DevHD – DevHD Inc Website RSSフィードリーダーのFeedly。メインカラーとして鮮やかな黄緑を使っており、カテゴリー部分では色を多用しています。慣れればどのカテゴリーかぱっとわかりそうで良いですね。 Infomatic Website Infomaticは自分のTwitterやFacebookの使用状況を統計で確認できるアプリ。残念ながら日本のアップルストアではダウンロード出来ませんが、青をベースとした配色が綺麗ですね。 Figure

MIND HACKSとインタフェースデザインの心理学を引用しながら、デザインの基本4原則を解説していきます。 ==================== あわせて読みたい ==================== 少ない手間と知識で”それなり”に見せる、ズルいデザインテクニック https://speakerdeck.com/ken_c_lo/zurui-design ノンデザイナーのための配色理論 http://www.slideshare.net/saucerjp/ss-14902681 初めての欧文書体 http://www.slideshare.net/shoheiitoh/ss-17245066 0.1ランク上のアイコンの作り方講座 https://speakerdeck.com/is8r/0-dot-1rankushang-falseaikonfalsezuo-rifang-ji

UIデザインの参考に！斬新で美しいUIをもったiPhoneアプリまとめ という記事では、紹介しているアプリのことごとくに、「ボタンが無くてシンプル」「直感的で使いやすい」などと書いてあるが、ClearのUIみたいなのを「誰でも直感的に操作できる」などと評価する理由がさっぱり理解できない。 こういうUIは基本的にどれも玄人向けで、操作がジェスチャの塊になってしまっているものは、それが使いこなせる俺カッケー感が高くて自己顕示欲を満たしやすい。"そのように操作できるUIデザイン"が気持ちいいのではなく、"そのように操作している自分"が気持ちいいの間違いなんじゃないだろうか。 ボタンが一切なくてシンプルだと気持ちがいいUIになるだって？　そんなわけがあるはずない。現実世界はボタンが一切なくてシンプルなUIで溢れているし、そのおかげで毎日いろんな場面でいらいらさせられている。たかが1個のレバーを上げ

ユーザーインターフェイスが洗練されているアプリは、使っていて気持ちいい。ボタンの形、配置、配色、画面の遷移、アニメーション。これらのデザインと機能がマッチすると、多くの人に受け入れられるアプリになる。 今回はiOS、特にiPhoneのUIデザインを紹介したい。どれも触りたくなるものばかりだ。 Qiwy iOS/iPhone app curl test by Mikael Eidenberg UX/iOS/UI iPhone idea with video process by Cuberto Qiwy iOS/iPhone app switch and slider by Mikael Eidenberg Untitled iOS/iPhone synth app navigation by Mikael Eidenberg Iphone UI by Matthias Mayr Busin

W3C が勧告しているウェブコンテンツ・アクセシビリティ・ガイドライン (WCAG) 2.0 の中に「アクセシビリティの 4 原則」というのがあります。JIS X 8341–3 をはじめ、国内外で定められている Web アクセシビリティの土台のような存在です。久しぶりに、この 4 原則を振り返ってみて気付いたのが、Web デザインの原則と同じではないかという点です。特にビジュアルデザインで気をつけることと重なるところがあります。 アクセシビリティの 4 原則は以下のとおりです（翻訳サイトより抜粋）。 知覚可能 情報およびユーザーインターフェースの構成要素は、ユーザーが知覚できる方法でユーザーに提示可能でなければならない。 操作可能 ユーザーインターフェースの構成要素およびナビゲーションは操作可能でなければならない。 理解可能 情報およびユーザーインターフェースの操作は理解可能でなければなら

今年リニューアルをしてからというもの、だんだんと利用する機会がへってきたはてなブックマークのWebサイト。 最初はいつかなれるだろうと思ったけども、このなんともいえない見づらさが引っかかってしまう。 最近では、私の知り合いでも最低9人のユーザーが、はてブサイトを見なくなった、もしくはAPIを利用した見やすく加工されたサイトを見るようになったという意見も聞く。 はたしてはてなブックマークの何が自分にとって見難いのかを考えてみたい。 ほとんど個人的な主観です。私はここが嫌！っていう事を訴えたい。 パッとみてささっと見れなくなった この一言に尽きる。とにかく面倒臭いサイトに生まれ変わったといってもいいです。 これははてなブックマークをどのように利用していたかによって受け取る感想は千差万別だと思いますし、「これから新規ユーザーを呼び込みたいので、そういう人は気にならないでしょ、昔をしらないんだから

こんにちは、LIGの副社長、ゴウです。 この度、LIGブログに「ページTOPに戻る」機能が実装されました。 どのサイトにでもある、普通の要素だと思うのですが、今回、我々は“ウザさ”にこだわって作ってみました。 ページ右下にある弊社エンジニアの段田をクリックすると… ゴゴゴゴゴ… ドドドドドドドド… という感じで、段田が天に登るラピュタのように上昇していきます。 俺が知る限り、ここまでうざったい「ページTOPに戻る」は無いと思いますし、今回の開発にはデザインとJSの実装で4日ほどかかっており、「うざい」という以外に感想が無いような機能の実装に大切な会社のリソースを割いてしまった事をこの場を借りてお詫び申し上げます。 とは言え、この機能の一番下に、広告領域も設けてあります。 時間にして2秒ほどしか見えない上に、クリックをするにはそれなりの慣れと反射神経を必要とするのですが、今回特別にこの広告枠

日本のAmazonでも採用されているメガドロップダウンメニューについて、なぜAmazonのメニューはユーザーが使いやすくできているのかという秘密が明らかになりました。ユーザビリティを改善することが至上命題のネットショッピング系サイトにとっては非常に有益な知識となっています。 Breaking down Amazon’s mega dropdown - Ben Kamens http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown まずこれがAmazonの左上にあるカテゴリーを一覧化したメガドロップダウンメニュー。日本のAmazonにも同様のメニューが採用されており、マウスカーソルを上に持っていくと実にスムーズに動きます。 通常のメニューの場合、以下のようにして少し遅れてサブメニューが開くようになっています。 な